Skip to content

Commit 36a0a53

Browse files
e-younane-younan
authored
docs: introduce documentation website (#5)
1 parent 426937b commit 36a0a53

40 files changed

+9153
-97
lines changed

‎.github/workflows/update-docs.yml‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
name: Update documentation website
2+
run-name: ${{ github.actor }} is running CI/CD actions
3+
on:
4+
push:
5+
branches: [main]
6+
paths:
7+
- 'docs/**'
8+
jobs:
9+
deploy-web-gcp:
10+
name: Deploy web app to GCP
11+
runs-on: ubuntu-latest
12+
defaults:
13+
run:
14+
working-directory: docs
15+
permissions:
16+
contents: "read"
17+
id-token: "write"
18+
steps:
19+
- id: Checkout
20+
uses: actions/checkout@v3
21+
- uses: actions/setup-node@v2
22+
with:
23+
node-version: 16.x
24+
cache: yarn
25+
cache-dependency-path: ./docs/yarn.lock
26+
27+
- id: "auth"
28+
uses: "google-github-actions/auth@v0"
29+
with:
30+
credentials_json: "${{ secrets.GCP_SA_KEY }}"
31+
32+
- name: "Install dependencies"
33+
run: yarn install --frozen-lockfile
34+
35+
- name: "Build application"
36+
run: "yarn build"
37+
38+
- name: "Set project ID"
39+
run: "gcloud config set project react-native-header"
40+
41+
- name: "Deploy"
42+
run: "yarn deploy"

‎README.md‎

Lines changed: 2 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -16,103 +16,9 @@ React Native Header is a high-performance, cross-platform animated header compon
1616
- Compatible with [Expo Go](https://docs.expo.dev/) and bare [React Native](https://github.com/react-native-community/cli) projects
1717
- Written in TypeScript
1818

19-
## Supported dependency versions
19+
## Documentation
2020

21-
| This library | react-native | react-native-reanimated | react-native-safe-area-context |
22-
| -- | -- | -- | -- |
23-
| 0.6.x | >= 0.65 | >= 2.11.0 | >= 4.1.0 |
24-
| 0.7.x | >= 0.65 | >= 2.0.0 | >= 4.1.0 |
25-
26-
## Prerequisites
27-
28-
Before you can use `react-native-header`, you need to have the following libraries set up in your React Native project:
29-
30-
- [react-native-reanimated](https://github.com/software-mansion/react-native-reanimated)
31-
- [react-native-safe-area-context](https://github.com/th3rdwave/react-native-safe-area-context)
32-
33-
If you haven't installed these libraries yet, please follow the installation instructions on their respective documentation pages.
34-
35-
## Installation
36-
37-
Once you have [react-native-reanimated](https://github.com/software-mansion/react-native-reanimated) and [react-native-safe-area-context](https://github.com/th3rdwave/react-native-safe-area-context) set up in your project, you can install `react-native-header` using `yarn` or `npm`:
38-
39-
```sh
40-
yarn add @codeherence/react-native-header
41-
```
42-
43-
or:
44-
45-
```sh
46-
npm install @codeherence/react-native-header
47-
```
48-
49-
## Example
50-
51-
Let's implement a regular ScrollView with a large header:
52-
53-
<p align="center">
54-
<img src="https://user-images.githubusercontent.com/128341688/226802772-31c970c9-7093-491f-abbc-db5337b7c904.gif" alt="Example Showcase" width="40%" />
55-
</p>
56-
57-
First, we import the library:
58-
59-
```jsx
60-
import {
61-
Header,
62-
LargeHeader,
63-
ScalingView,
64-
ScrollViewWithHeaders,
65-
} from '@codeherence/react-native-header';
66-
import { useSafeAreaInsets } from 'react-native-safe-area-context';
67-
```
68-
69-
Then we create our header component:
70-
71-
```jsx
72-
const HeaderComponent = ({ showNavBar }) => (
73-
<Header
74-
showNavBar={showNavBar}
75-
headerCenter={<Text style={{ fontSize: 16, fontWeight: 'bold' }}>react-native-header</Text>}
76-
/>
77-
);
78-
```
79-
80-
and our large header component:
81-
82-
```jsx
83-
const LargeHeaderComponent = ({ scrollY }) => (
84-
<LargeHeader>
85-
<ScalingView scrollY={scrollY}>
86-
<Text style={{ fontSize: 14 }}>Welcome!</Text>
87-
<Text style={{ fontSize: 32, fontWeight: 'bold' }}>react-native-header</Text>
88-
<Text style={{ fontSize: 12, fontWeight: 'normal', color: '#8E8E93' }}>
89-
This project displays some header examples using the package.
90-
</Text>
91-
</ScalingView>
92-
</LargeHeader>
93-
);
94-
```
95-
96-
and finally, use them in a `ScrollViewWithHeaders` component like so:
97-
98-
```jsx
99-
const Example = () => {
100-
const { bottom } = useSafeAreaInsets();
101-
102-
return (
103-
<ScrollViewWithHeaders
104-
HeaderComponent={HeaderComponent}
105-
LargeHeaderComponent={LargeHeaderComponent}
106-
contentContainerStyle={{ paddingBottom: bottom }}
107-
>
108-
<View style={{ padding: 16 }}>
109-
<Text>Some body text...</Text>
110-
<Text>Some body text...</Text>
111-
</View>
112-
</ScrollViewWithHeaders>
113-
);
114-
};
115-
```
21+
The documentation for this library can be found at [here](https://react-native-header.codeherence.com).
11622

11723
## Contributing
11824

‎docs/.gcloudignore‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
# ignore everything
2+
/[!.]*
3+
/.?*
4+
5+
# except for the build folder
6+
!/build/**

‎docs/.gitignore‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
# Dependencies
2+
/node_modules
3+
4+
# Production
5+
/build
6+
7+
# Generated files
8+
.docusaurus
9+
.cache-loader
10+
11+
# Misc
12+
.DS_Store
13+
.env.local
14+
.env.development.local
15+
.env.test.local
16+
.env.production.local
17+
18+
npm-debug.log*
19+
yarn-debug.log*
20+
yarn-error.log*

‎docs/README.md‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
# Website
2+
3+
This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator.
4+
5+
### Installation
6+
7+
```
8+
$ yarn
9+
```
10+
11+
### Local Development
12+
13+
```
14+
$ yarn start
15+
```
16+
17+
This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
18+
19+
### Build
20+
21+
```
22+
$ yarn build
23+
```
24+
25+
This command generates static content into the `build` directory and can be served using any static contents hosting service.
26+
27+
### Deployment
28+
29+
Using SSH:
30+
31+
```
32+
$ USE_SSH=true yarn deploy
33+
```
34+
35+
Not using SSH:
36+
37+
```
38+
$ GIT_USER=<Your GitHub username> yarn deploy
39+
```
40+
41+
If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.

‎docs/app.yaml‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
env: standard
2+
runtime: nodejs16
3+
service: default
4+
automatic_scaling:
5+
min_idle_instances: automatic
6+
max_idle_instances: automatic
7+
min_pending_latency: automatic
8+
max_pending_latency: automatic
9+
min_instances: 1
10+
max_instances: 20
11+
inbound_services:
12+
- warmup
13+
14+
handlers:
15+
- url: /(.*\..+)$
16+
static_files: build/\1
17+
upload: build/(.*\..+)$
18+
19+
# index page
20+
- url: /
21+
static_files: build/index.html
22+
upload: build/index.html
23+
24+
# anything that ends with a slash (e.g. /docs/)
25+
- url: /(.*)/$
26+
static_files: build/\1/index.html
27+
upload: build/(.*)
28+
29+
# anything else (e.g. /docs)
30+
- url: /(.*)
31+
static_files: build/\1/index.html
32+
upload: build/(.*)

‎docs/babel.config.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
module.exports = {
2+
presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
3+
};

‎docs/dispatch.yaml‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
dispatch:
2+
- url: "react-native-header.codeherence.com/*"
3+
service: default

‎docs/docs/01-getting-started.mdx‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
---
2+
title: Getting Started
3+
hide_table_of_contents: false
4+
slug: /getting-started
5+
description: Getting started with React Native Header.
6+
---
7+
8+
import Tabs from '@theme/Tabs';
9+
import TabItem from '@theme/TabItem';
10+
11+
What follows within the Fundamentals section of this documentation is a tour of the most important aspects of React Native Header. It should cover enough for you to know how to begin building.
12+
13+
## Compatibility
14+
15+
Before using this package, please make sure that you install the correct version of this library for your project. Here is the dependency matrix:
16+
17+
<br />
18+
19+
| react-native-header | react-native | react-native-reanimated | react-native-safe-area-context |
20+
| ------------------- | ------------ | ----------------------- | ------------------------------ |
21+
| 0.6.x | >= 0.65 | >= 2.11.0 | >= 4.1.0 |
22+
| 0.7.x | >= 0.65 | >= 2.0.0 | >= 4.1.0 |
23+
24+
## Pre-requisites
25+
26+
Before you can use `react-native-header`, you need to have the following libraries set up in your project:
27+
28+
- [react-native-reanimated](https://github.com/software-mansion/react-native-reanimated)
29+
- [react-native-safe-area-context](https://github.com/th3rdwave/react-native-safe-area-context)
30+
31+
If you haven't installed these libraries yet, please follow the installation instructions on their respective documentation pages.
32+
33+
## Installation
34+
35+
Once you have [react-native-reanimated](https://github.com/software-mansion/react-native-reanimated) and [react-native-safe-area-context](https://github.com/th3rdwave/react-native-safe-area-context) set up in your project, you can install `react-native-header`:
36+
37+
<Tabs
38+
groupId="env"
39+
defaultValue="expo"
40+
values={[
41+
{label: 'Expo', value: 'expo'},
42+
{label: 'React Native', value: 'rn'},
43+
]}>
44+
<TabItem value="rn">
45+
46+
```bash
47+
yarn add @codeherence/react-native-header
48+
```
49+
50+
or
51+
52+
```bash
53+
npm install @codeherence/react-native-header
54+
```
55+
56+
</TabItem>
57+
<TabItem value="expo">
58+
59+
```bash
60+
expo install @codeherence/react-native-header
61+
```
62+
</TabItem>
63+
</Tabs>
64+
65+
<br />
66+
67+
and that's it! You are now ready to use `react-native-header` in your project.

0 commit comments

Comments
 (0)