From 28d10df3cfa80097d2f7e7104fbe0dbe2009e9bc Mon Sep 17 00:00:00 2001
From: Adcent <adcentury100@gmail.com>
Date: Thu, 28 Sep 2023 14:42:20 +0800
Subject: [PATCH] add nextra guide

---
 docs/.vitepress/config.ts           |  1 +
 docs/_partials/_connect-backend.md  |  2 +-
 docs/_partials/_initialize-react.md |  2 +-
 docs/getting-started/index.md       | 25 +++++++-
 docs/integration/nextra.md          | 99 +++++++++++++++++++++++++++++
 5 files changed, 126 insertions(+), 3 deletions(-)
 create mode 100644 docs/integration/nextra.md

diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index e685ea1..1a2c341 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -68,6 +68,7 @@ export default defineConfig({
           { text: 'Start with Docusaurus', link: '/integration/docusaurus' },
           { text: 'Start with Docsify', link: '/integration/docsify' },
           { text: 'Start with Rspress', link: '/integration/rspress' },
+          { text: 'Start with Nextra', link: '/integration/nextra' },
           { text: 'General Vue Project', link: '/getting-started/general-vue' },
         ],
       },
diff --git a/docs/_partials/_connect-backend.md b/docs/_partials/_connect-backend.md
index aacad4d..6c7691d 100644
--- a/docs/_partials/_connect-backend.md
+++ b/docs/_partials/_connect-backend.md
@@ -12,7 +12,7 @@ Then add it to the `documate.json` file:
 ```json{4}
 {
   "root": ".",
-  "include": [ "**/*.md" ],
+  "include": [ "**/*.md", "**/*.mdx" ],
   "backend": "https://test123.us.aircode.run/upload"
 }
 ```
diff --git a/docs/_partials/_initialize-react.md b/docs/_partials/_initialize-react.md
index 1ba1bb6..dc70f08 100644
--- a/docs/_partials/_initialize-react.md
+++ b/docs/_partials/_initialize-react.md
@@ -23,7 +23,7 @@ This command does the following:
 ```json
 {
   "root": ".",
-  "include": [ "**/*.md" ],
+  "include": [ "**/*.md", "**/*.mdx" ],
   "backend": ""
 }
 ```
diff --git a/docs/getting-started/index.md b/docs/getting-started/index.md
index 80be010..e111da5 100644
--- a/docs/getting-started/index.md
+++ b/docs/getting-started/index.md
@@ -14,13 +14,13 @@ Please choose a framework below to get started:
 - [Docusaurus](/integration/docusaurus)
 - [Docsify](/integration/docsify)
 - [Rspress](/integration/rspress)
+- [Nextra](/integration/nextra)
 - [General Vue Project](/getting-started/general-vue)
 
 The following frameworks are coming soon:
 
 - Vuepress
 - Docus
-- Nextra
 - General React Project
 
 ## Key Features
@@ -140,3 +140,26 @@ pnpm create documate --template rspress
 ```
 
 :::
+
+- Nextra ([examples/nextra](https://github.com/AirCodeLabs/documate/tree/main/examples/nextra))
+
+::: tabs key:pm
+== npm
+
+```bash
+npm create documate@latest --template nextra
+```
+
+== yarn
+
+```bash
+yarn create documate --template nextra
+```
+
+== pnpm
+
+```bash
+pnpm create documate --template nextra
+```
+
+:::
diff --git a/docs/integration/nextra.md b/docs/integration/nextra.md
new file mode 100644
index 0000000..e5f9484
--- /dev/null
+++ b/docs/integration/nextra.md
@@ -0,0 +1,99 @@
+# Get Started with Nextra
+
+There are two ways you can integrate Documate with Nextra. Both are convinient and can be done in a few minutes.
+
+- [Create a new Nextra site using CLI](#quickstart-for-new-project)
+- [Add to an existing Nextra site](#mannually-add-to-existing-project)
+
+## Quickstart for New Project
+
+To create a new Nextra site with Documate, use the following command:
+
+:::tabs key:pm
+== npm
+```bash
+npm create documate@latest --template nextra
+```
+== yarn
+```bash
+yarn create documate@latest --template nextra
+```
+== pnpm
+```bash
+pnpm create documate@latest --template nextra
+```
+:::
+
+Then follow the prompts.
+
+After the project is created, please follow [the instructions to connect it to a backend](#connect-to-backend).
+
+## Mannually Add to Existing Project
+
+If you already have a Nextra site, you can add Documate to it by following these steps:
+
+### 1. Initialize Documate
+
+<!--@include: ../_partials/_initialize-react.md-->
+
+### 2. Add Documate UI to Your Project
+
+Nextra allows you to customize the theme by editing the `theme.config.tsx` file. Add the following code to the `theme.config.tsx` file:
+
+```tsx{1-2,6-8}
+import { Documate } from '@documate/react'
+import '@documate/react/dist/style.css'
+
+const config: DocsThemeConfig = {
+  ...
+  navbar: {
+    extraContent: <Documate endpoint="" />,
+  },
+  ...
+}
+
+export default config
+```
+
+## Connect to Backend
+
+<!--@include: ../_partials/_connect-backend.md-->
+
+Modify the `theme.config.tsx` file to pass the endpoint to the `Documate` component as props.
+
+```tsx{8}
+import { Documate } from '@documate/react'
+import '@documate/react/dist/style.css'
+
+const config: DocsThemeConfig = {
+  ...
+  navbar: {
+    // Replace the URL with your own one
+    extraContent: <Documate endpoint="https://test123.us.aircode.run/ask" />,
+  },
+  ...
+}
+
+export default config
+```
+
+## Run the Project
+
+<!--@include: ../_partials/_run-project-upload.md-->
+
+After the command finishes, you can start the dev server and find the __Ask AI__ button at the top right corner.
+
+:::tabs key:pm
+== npm
+```bash
+npm run dev
+```
+== yarn
+```bash
+yarn dev
+```
+== pnpm
+```bash
+pnpm dev
+```
+:::