create-react-docs-ui 0.1.0 → 0.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/package.json +14 -2
  2. package/template/package.json +2 -2
  3. package/template/public/docs/en/guide/configuration.md +122 -69
  4. package/template/public/docs/en/guide/installation.md +63 -139
  5. package/template/public/docs/en/guide/introduction.md +28 -50
  6. package/template/public/docs/en/guide/quick-start.md +109 -217
  7. package/template/public/docs/en/guide.md +10 -31
  8. package/template/public/docs/en/index.md +34 -58
  9. package/template/public/docs/zh-cn/guide/configuration.md +14 -61
  10. package/template/public/docs/zh-cn/guide/installation.md +23 -26
  11. package/template/public/docs/zh-cn/guide/introduction.md +11 -12
  12. package/template/public/docs/zh-cn/guide/quick-start.md +30 -21
  13. package/template/public/docs/zh-cn/guide.md +5 -5
  14. package/template/public/docs/zh-cn/index.md +9 -9
  15. package/template/src/main.tsx +2 -2
package/template/public/docs/zh-cn/guide/installation.md CHANGED
@@ -5,15 +5,15 @@
5
5
  在开始之前，请确保你的开发环境满足以下要求：
6
6
 
7
7
  - **Node.js**: 版本 `>= 18.0.0`
8
- - **包管理器**: `npm`、`yarn` 或 `pnpm`
8
+ - **包管理器**: `npm`, `yarn` 或 `pnpm`
9
9
 
10
10
  ## 推荐方式：使用脚手架
11
11
 
12
- 我们强烈推荐使用官方的 `create-vue-docs-ui` 脚手架来创建你的新文档项目。这是最快、最简单的方式，可以确保所有配置都已就绪。
12
+ 我们强烈推荐使用官方的 `create-react-docs-ui` 脚手架来创建你的新文档项目。这是最快、最简单的方式，可以确保所有配置都已就绪。
13
13
 
14
14
  1. **运行创建命令**:
15
15
  ```bash
16
- npm create vue-docs-ui@latest my-docs
16
+ npx create-react-docs-ui@latest my-docs
17
17
  ```
18
18
  这会在当前目录下创建一个名为 `my-docs` 的新文件夹。
19
19
 
@@ -27,40 +27,37 @@
27
27
  ```bash
28
28
  npm run dev
29
29
  ```
30
- 现在，你的文档网站已经运行在 `http://localhost:5173` 上了。
30
+ 现在，你的文档网站已经运行在 `http://localhost:5173` (或另一个可用端口) 上了。
31
31
 
32
32
  ## 手动安装 (适用于现有项目)
33
33
 
34
- 如果你想在已有的 Vite + Vue 3 项目中手动集成 `vue-docs-ui`，可以按照以下步骤操作：
34
+ 如果你想在已有的 Vite + React 项目中手动集成 `react-docs-ui`，可以按照以下步骤操作：
35
35
 
36
36
  1. **安装核心库**:
37
37
  ```bash
38
- npm install vue-docs-ui
38
+ npm install react-docs-ui
39
39
  ```
40
40
 
41
41
  2. **创建配置文件**:
42
- 在你的 `public` 目录下创建一个 `config` 文件夹，并在其中新建一个 `site.yaml` 文件。你可以从[这里](https://github.com/shenjianZ/vue-docs-ui/blob/main/vue-docs-ui/public/config/site.yaml)复制一个基础模板。
42
+ 在你的 `public` 目录下创建一个 `config` 文件夹，并在其中新建一个 `site.yaml` 文件。你可以从[这里](https://github.com/shenjianZ/react-docs-ui/blob/main/react-docs-ui/public/config/site.yaml)复制一个基础模板。
43
43
 
44
44
  3. **创建文档目录**:
45
- 在 `public` 目录下创建一个 `docs` 文件夹，用于存放你的 Markdown 文件。
45
+ 在 `public` 目录下创建一个 `docs` 文件夹，用于存放你的 Markdown 文件。例如: `public/docs/zh-cn/index.md`。
46
46
 
47
47
  4. **修改应用入口文件**:
48
- 更新你的 `src/main.ts` (或 `main.js`) 文件，使用 `createDocsApp` 来初始化应用。
49
-
50
- ```typescript
51
- // src/main.ts
52
- import { createApp } from 'vue'
53
- import { createDocsApp } from 'vue-docs-ui'
54
- import 'vue-docs-ui/dist/style.css' // 引入核心样式
55
-
56
- // 移除原有的 createApp(App).mount('#app')
57
-
58
- createDocsApp({
59
- // el 是挂载点，必须与 index.html 中的 id 一致
60
- el: '#app',
61
- // configPath 指向你的主配置文件
62
- configPath: '/config/site.yaml',
63
- // aiConfigPath 是可选的 AI 助手配置
64
- aiConfigPath: '/config/ai.json'
65
- })
48
+ 更新你的 `src/main.tsx` (或 `main.jsx`) 文件，渲染 `DocsApp` 组件来初始化应用。
49
+
50
+ ```tsx
51
+ // src/main.tsx
52
+ import React from 'react'
53
+ import ReactDOM from 'react-dom/client'
54
+ import { DocsApp } from 'react-docs-ui'
55
+ import 'react-docs-ui/dist/style.css' // 引入核心样式
56
+
57
+ ReactDOM.createRoot(document.getElementById('root')!).render(
58
+ <React.StrictMode>
59
+ <DocsApp />
60
+ </React.StrictMode>,
61
+ )
66
62
  ```
63
+ 5. **确保 `index.html` 中有 `<div id="root"></div>`**
package/template/public/docs/zh-cn/guide/introduction.md CHANGED
@@ -1,29 +1,28 @@
1
1
  # 介绍
2
2
 
3
- Vue Docs UI 是一个专为构建现代化文档网站而设计的 Vue 3 组件库与工具集。它的核心哲学是**配置优于编码**，让你能将精力完全集中在内容创作上。
3
+ React Docs UI 是一个专为构建现代化文档网站而设计的 React 组件库与工具集。它的核心哲学是**配置优于编码**，让你能将精力完全集中在内容创作上。
4
4
 
5
5
  ## 核心优势
6
6
 
7
- - **配置驱动**: 这是 Vue Docs UI 最核心的特性。你不需要编写 Vue 组件或复杂的路由逻辑，只需维护一个清晰的 `site.yaml` 文件，就能定义网站的导航、侧边栏、主题、页脚等所有内容。
7
+ - **配置驱动**: 这是 React Docs UI 最核心的特性。你不需要编写复杂的 React 组件或路由逻辑，只需维护一个清晰的 `site.yaml` 文件，就能定义网站的导航、侧边栏、主题、页脚等所有内容。
8
8
 
9
9
  - **功能完备**: 开箱即用，提供了现代文档网站所需的一切：
10
10
  - 响应式布局
11
11
  - 明暗主题切换
12
- - 基于 Markdown 的内容渲染
13
- - 代码语法高亮
14
- - 内置全文搜索
15
- - PWA (渐进式Web应用) 支持
16
- - 可选的 AI 问答助手
12
+ - 基于 Markdown 的内容渲染 (支持 GFM 和 Frontmatter)
13
+ - 内置代码语法高亮
14
+ - 快捷命令菜单 (Cmd+K)
15
+ - 国际化支持
17
16
 
18
- - **极简上手**: 通过官方的 `create-vue-docs-ui` 脚手架，你可以在一分钟内启动一个功能齐全的文档网站，无需任何复杂的环境配置。
17
+ - **极简上手**: 通过官方的 `create-react-docs-ui` 脚手架，你可以在一分钟内启动一个功能齐全的文档网站，无需任何复杂的环境配置。
19
18
 
20
19
  - **高度可定制**: 虽然开箱即用，但每个部分（如 Logo、配色、导航链接、社交媒体图标等）都可以通过配置文件进行深度定制。
21
20
 
22
21
  ## 适用场景
23
22
 
24
- 无论你是个人开发者还是团队，Vue Docs UI 都非常适合以下场景：
23
+ 无论你是个人开发者还是团队，React Docs UI 都非常适合以下场景：
25
24
 
26
- - **开源项目文档**: 为你的项目提供一个专业、易于维护的文档网站。
25
+ - **开源项目文档**: 为你的 React 项目提供一个专业、易于维护的文档网站。
27
26
  - **产品手册**: 清晰地展示你的产品功能和使用指南。
28
- - **团队知识库**: 在团队内部沉淀和分享知识。
29
- - **个人博客或作品集**: 以优雅的方式组织和展示你的技术文章或项目。
27
+ - **团队知识库**: 在团队内部沉淀和分享基于 React 技术的知识。
28
+ - **个人博客或作品集**: 以优雅的方式组织和展示你的技术文章或项目。
package/template/public/docs/zh-cn/guide/quick-start.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # 快速上手
2
2
 
3
- 本指南将引导你在 5 分钟内，从零开始创建、配置并运行一个属于你自己的文档网站。
3
+ 本指南将引导你在 5 分钟内，从零开始创建、配置并运行一个属于你自己的 React 文档网站。
4
4
 
5
5
  ## 1. 创建项目
6
6
 
@@ -8,7 +8,7 @@
8
8
 
9
9
  ```bash
10
10
  # 这会创建一个名为 "my-awesome-docs" 的项目
11
- npm create vue-docs-ui@latest my-awesome-docs
11
+ npx create-react-docs-ui@latest my-awesome-docs
12
12
  ```
13
13
 
14
14
  然后，进入项目目录并安装依赖：
@@ -28,12 +28,18 @@ npm install
28
28
  例如，我们来创建一个新页面。在 `public/docs/zh-cn/` 下新建一个 `about.md` 文件：
29
29
 
30
30
  ```markdown
31
+ ---
32
+ title: 关于我们
33
+ description: 这是一个关于我们团队的页面。
34
+ ---
35
+
31
36
  # 关于我们
32
37
 
33
- 这是一个关于我们团队的页面。
34
38
  我们热爱开源和创造！
35
39
  ```
36
40
 
41
+ **注意**: 你可以在 Markdown 文件顶部使用 `frontmatter` 来定义页面标题 (`title`) 和描述 (`description`)。
42
+
37
43
  ## 3. 配置网站
38
44
 
39
45
  现在，让我们通过修改配置文件来展示新创建的页面。
@@ -47,7 +53,7 @@ npm install
47
53
  ```yaml
48
54
  site:
49
55
  title: "我的超赞文档"
50
- description: "一个使用 Vue Docs UI 构建的网站"
56
+ description: "一个使用 React Docs UI 构建的网站"
51
57
  logo: "🚀" # 你可以使用 emoji 或图片路径
52
58
  ```
53
59
 
@@ -68,25 +74,28 @@ navbar:
68
74
 
69
75
  ### c. 添加到侧边栏
70
76
 
71
- 为了让“关于”页面在侧边栏也可见，我们在 `sidebar.sections` 中添加一个新区域。
77
+ 为了让“关于”页面在侧边栏也可见，我们在 `sidebar.collections.guide.sections` 中添加一个新条目。
72
78
 
73
79
  ```yaml
74
80
  sidebar:
75
- sections:
76
- - title: "入门指南"
77
- path: "/zh-cn/guide"
78
- children:
79
- - title: "介绍"
80
- path: "/zh-cn/guide/introduction"
81
- - title: "安装"
82
- path: "/zh-cn/guide/installation"
83
- - title: "快速上手"
84
- path: "/zh-cn/guide/quick-start"
85
- - title: "关于我们" # 新增区域
86
- path: "/zh-cn/about" # 新增区域
87
- children: # 新增区域
88
- - title: "关于" # 新增区域
89
- path: "/zh-cn/about" # 新增区域
81
+ collections:
82
+ guide:
83
+ sections:
84
+ - title: "快速开始"
85
+ path: "/zh-cn/guide"
86
+ children:
87
+ - title: "介绍"
88
+ path: "/zh-cn/guide/introduction"
89
+ - title: "安装"
90
+ path: "/zh-cn/guide/installation"
91
+ - title: "快速上手"
92
+ path: "/zh-cn/guide/quick-start"
93
+ # 你可以为 "关于" 页面创建一个新的 section
94
+ - title: "关于我们"
95
+ path: "/zh-cn/about"
96
+ children:
97
+ - title: "关于"
98
+ path: "/zh-cn/about"
90
99
  ```
91
100
 
92
101
  ## 4. 启动网站
@@ -97,4 +106,4 @@ sidebar:
97
106
  npm run dev
98
107
  ```
99
108
 
100
- 你的网站现在应该运行在 `http://localhost:5173` 上了。访问它，你会看到更新后的标题、Logo，以及导航栏和侧边栏中新增的“关于”链接。恭喜你，你已经成功掌握了 Vue Docs UI 的基本工作流程！
109
+ 你的网站现在应该运行在 `http://localhost:5173` 上了。访问它，你会看到更新后的标题、Logo，以及导航栏和侧边栏中新增的“关于”链接。恭喜你，你已经成功掌握了 React Docs UI 的基本工作流程！
package/template/public/docs/zh-cn/guide.md CHANGED
@@ -1,10 +1,10 @@
1
1
  # 指南
2
2
 
3
- 本指南将帮助你全面了解并掌握 Vue Docs UI 的各项功能。无论你是初学者还是希望进行深度定制，都能在这里找到所需的信息。
3
+ 本指南将帮助你全面了解并掌握 React Docs UI 的各项功能。无论你是初学者还是希望进行深度定制，都能在这里找到所需的信息。
4
4
 
5
5
  ## 目录
6
6
 
7
- - **[介绍](/guide/introduction)**: 了解 Vue Docs UI 的核心理念和主要优势。
8
- - **[安装](/guide/installation)**: 学习如何通过脚手架或手动方式安装。
9
- - **[快速上手](/guide/quick-start)**: 在 5 分钟内创建并运行你的第一个文档网站。
10
- - **[配置说明 (`site.yaml`)](/guide/configuration)**: 深入了解每个配置项，完全掌控你的网站。
7
+ - **[介绍](/zh-cn/guide/introduction)**: 了解 React Docs UI 的核心理念和主要优势。
8
+ - **[安装](/zh-cn/guide/installation)**: 学习如何通过脚手架或手动方式安装。
9
+ - **[快速上手](/zh-cn/guide/quick-start)**: 在 5 分钟内创建并运行你的第一个文档网站。
10
+ - **[配置说明 (`site.yaml`)](/zh-cn/guide/configuration)**: 深入了解每个配置项，完全掌控你的网站。
package/template/public/docs/zh-cn/index.md CHANGED
@@ -1,17 +1,17 @@
1
- # Vue Docs UI
1
+ # React Docs UI
2
2
 
3
- 一个基于 Vue 3 的、**配置驱动**的现代化文档网站构建工具。
3
+ 一个基于 React 的、**配置驱动**的现代化文档网站构建工具。
4
4
 
5
- Vue Docs UI 旨在让创建美观、功能强大的文档网站变得前所未有的简单。你只需专注于编写 Markdown 文档，其他的一切——从路由、导航到主题切换和 AI 助手——都通过简单的 YAML 配置来驱动。
5
+ React Docs UI 旨在让创建美观、功能强大的文档网站变得前所未有的简单。你只需专注于编写 Markdown 文档，其他的一切——从路由、导航到主题切换和命令菜单——都通过简单的 YAML 配置来驱动。
6
6
 
7
7
  ## 核心特性
8
8
 
9
9
  - **配置驱动**: 无需编码，通过 `site.yaml` 定义你的整个网站。
10
10
  - **开箱即用**: 极速启动项目，内置所有必需功能。
11
11
  - **现代设计**: 优雅的响应式布局，支持明暗主题自动切换。
12
- - **AI 助手**: 可选集成 AI 问答，为你的文档提供智能支持。
13
- - **全文搜索**: 快速、准确的客户端内容搜索。
14
- - **PWA 就绪**: 支持将网站作为桌面或移动应用安装，并可离线访问。
12
+ - **命令菜单**: 内置 `Cmd+K` 快捷菜单，快速访问页面。
13
+ - **Markdown 支持**: 全面支持 GFM 和 Frontmatter。
14
+ - **国际化**: 通过配置文件轻松实现多语言支持。
15
15
 
16
16
  ## 快速开始
17
17
 
@@ -19,7 +19,7 @@ Vue Docs UI 旨在让创建美观、功能强大的文档网站变得前所未
19
19
 
20
20
  ```bash
21
21
  # 创建项目
22
- npm create vue-docs-ui@latest my-docs
22
+ npx create-react-docs-ui@latest my-docs
23
23
 
24
24
  # 进入项目目录
25
25
  cd my-docs
@@ -30,5 +30,5 @@ npm install && npm run dev
30
30
 
31
31
  ## 链接
32
32
 
33
- - **[指南](/zh-cn/guide/introduction)**: 开始了解 Vue Docs UI 的所有功能。
34
- - **[GitHub](https://github.com/shenjianZ/vue-docs-ui)**: 查看源码、提交问题或贡献代码。
33
+ - **[指南](/zh-cn/guide/introduction)**: 开始了解 React Docs UI 的所有功能。
34
+ - **[GitHub](https://github.com/shenjianZ/react-docs-ui)**: 查看源码、提交问题或贡献代码。
package/template/src/main.tsx CHANGED
@@ -1,8 +1,8 @@
1
1
  import React from "react"
2
2
  import ReactDOM from "react-dom/client"
3
3
 
4
- import "@react-docs-ui/core/dist/react-docs-ui.css"
5
- import { DocsApp } from "@react-docs-ui/core"
4
+ import "react-docs-ui/dist/react-docs-ui.css"
5
+ import { DocsApp } from "react-docs-ui"
6
6
  // import "../../../react-docs-ui/dist/react-docs-ui.css"
7
7
  // @ts-ignore using local built ES module for development
8
8
  // import { DocsApp } from "../../../react-docs-ui/dist/react-docs-ui.es.js"