docs: update docs

README.md

@@ -2,6 +2,8 @@
 
 React Native Auto Route is a file-based router for React Native CLI. Built on top of [Expo Router](https://docs.expo.dev/router/introduction/) and [React Navigation](https://reactnavigation.org/)
 
+> Check out our [documentation page](https://howljs.github.io/react-native-auto-route/docs/getting-started) for more information
+
 ## Installation
 
 ```sh
@@ -106,32 +108,63 @@ import RouterRoot from 'react-native-auto-route';
 <RouterRoot />
 ```
 
-## Documentation
+## Basic usage
 
-> In the process of updating, you can refer to the instructions from [Expo Router](https://docs.expo.dev/router/create-pages/)
+### Create screens
 
-### Create pages
+When a file is created in the screens directory (default is: `app`), it will be automatically added to the routes. For example, the following files will create the following routes:
 
-When a file is created in the app directory, it automatically becomes a route in the app. For example, the following files will create the following routes:
+- `app/index.tsx` matches `/`
+- `app/home.tsx` matches `/home`
+- `app/settings/index.tsx` matches `/settings`
+- `app/[user].tsx` matches dynamic paths like `/userId1` or `/userId2`
+- `app/(group)/tab1.tsx` matches `/tab1`
 
-- app/index.tsx matches /
-- app/home.tsx matches /home
-- app/settings/index.tsx matches /settings
-- app/[user].tsx matches dynamic paths like /userId1 or /userId2
+> Supported extensions: `.tsx`, `.ts`, `.jsx`, `.js`
 
-For example, create the app directory in root project and then create a file index.tsx inside it. Then, add the following snippet:
+### Example
 
-```tsx
+```tsx title="app/index.tsx"
 import React from 'react';
-import { Text } from 'react-native';
+import {Text, View} from 'react-native';
+
+export default function Home() {
+  return (
+    <View>
+      <Text>Home</Text>
+    </View>
+  );
+}
+```
 
-const Home = () => {
-  return <Text>Home</Text>;
-};
+### Dynamic routes
 
-export default Home;
-```
+You can create dynamic routes by using square brackets in the file name. For example, the following files will create the following routes:
+
+- `app/[user].tsx` matches dynamic paths like `/userId1`
+- `app/[user]/[post].tsx` matches dynamic paths like `/userId1/postId1`
+- `app/detail/[postId].tsx` matches dynamic paths like `/detail/postId1`
+- `app/detail/[...postId].tsx` matches dynamic paths like `/detail/postId1/edit`
 
+Routes with higher specificity will be matched before a dynamic route. For example, `/detail/post` will match `detail/post.tsx` before `detail/[id].tsx`.
+
+Multiple slugs can be matched in a single route by using the rest syntax (...). For example, `app/detail/[...postId].tsx` matches `/detail/postId1/edit`.
+
+You can get params from the route by using the `useParams` hook.
+
+```tsx title="app/[user]/[post].tsx"
+import React from 'react';
+import {Text, View} from 'react-native';
+
+export default function UserPost() {
+  const params = useParams();
+  return (
+    <View>
+      <Text>Detail: {params.user} - {params.post}</Text>
+    </View>
+  );
+}
+```
 
 ## Contributing
 

docs/.eslintrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+  rules: {
+    'react/react-in-jsx-scope': 'off',
+  },
+};

docs/.gitignore

@@ -0,0 +1,22 @@
+# Dependencies
+/node_modules
+
+# Production
+/build
+
+# Generated files
+.docusaurus
+.cache-loader
+
+# Misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+.yarn

docs/README.md

@@ -0,0 +1,41 @@
+# Website
+
+This website is built using [Docusaurus](https://docusaurus.io/), a modern static website generator.
+
+### Installation
+
+```
+$ yarn
+```
+
+### Local Development
+
+```
+$ yarn start
+```
+
+This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
+
+### Build
+
+```
+$ yarn build
+```
+
+This command generates static content into the `build` directory and can be served using any static contents hosting service.
+
+### Deployment
+
+Using SSH:
+
+```
+$ USE_SSH=true yarn deploy
+```
+
+Not using SSH:
+
+```
+$ GIT_USER=<Your GitHub username> yarn deploy
+```
+
+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/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
+};

docs/docs/create-screens.md

@@ -0,0 +1,59 @@
+---
+sidebar_position: 2
+---
+
+# Create screens
+
+When a file is created in the screens directory (default is: `app`), it will be automatically added to the routes. For example, the following files will create the following routes:
+
+- `app/index.tsx` matches `/`
+- `app/home.tsx` matches `/home`
+- `app/settings/index.tsx` matches `/settings`
+- `app/[user].tsx` matches dynamic paths like `/userId1` or `/userId2`
+- `app/(group)/tab1.tsx` matches `/tab1`
+
+> Supported extensions: `.tsx`, `.ts`, `.jsx`, `.js`
+
+## Example
+
+```tsx title="app/index.tsx"
+import React from 'react';
+import {Text, View} from 'react-native';
+
+export default function Home() {
+  return (
+    <View>
+      <Text>Home</Text>
+    </View>
+  );
+}
+```
+
+## Dynamic routes
+
+You can create dynamic routes by using square brackets in the file name. For example, the following files will create the following routes:
+
+- `app/[user].tsx` matches dynamic paths like `/userId1`
+- `app/[user]/[post].tsx` matches dynamic paths like `/userId1/postId1`
+- `app/detail/[postId].tsx` matches dynamic paths like `/detail/postId1`
+- `app/detail/[...postId].tsx` matches dynamic paths like `/detail/postId1/edit`
+
+Routes with higher specificity will be matched before a dynamic route. For example, `/detail/post` will match `detail/post.tsx` before `detail/[id].tsx`.
+
+Multiple slugs can be matched in a single route by using the rest syntax (...). For example, `app/detail/[...postId].tsx` matches `/detail/postId1/edit`.
+
+You can get params from the route by using the `useParams` hook.
+
+```tsx title="app/[user]/[post].tsx"
+import React from 'react';
+import {Text, View} from 'react-native';
+
+export default function UserPost() {
+  const params = useParams();
+  return (
+    <View>
+      <Text>Detail: {params.user} - {params.post}</Text>
+    </View>
+  );
+}
+```

docs/docs/error-handling.md

@@ -0,0 +1,27 @@
+---
+sidebar_position: 7
+---
+
+# Error handling
+
+When a route is unmatched, the app will display a 404 page. You can customize the 404 page by creating a file named `[...unmatched].tsx` or `[...unmatched].js` in the `app` directory.
+
+``` tsx title="app/[...unmatched].tsx"
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+const Unmatched = () => {
+  return (
+    <View style={styles.container}>
+      <Text>Page Not Found</Text>
+    </View>
+  );
+};
+
+export default Unmatched;
+
+const styles = StyleSheet.create({
+  container: { flex: 1, alignItems: 'center', justifyContent: 'center' },
+});
+
+```