create-react-docs-ui 0.1.4 → 0.1.6

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.
package/README-zh.md ADDED
@@ -0,0 +1,85 @@
1
+ 简体中文 | [English](README.md)
2
+
3
+ ## create-react-docs-ui
4
+
5
+ 秒级搭建 React 文档站,基于 [`react-docs-ui`](https://github.com/shenjianZ/react-docs-ui)。专注写 Markdown,路由、主题、MDX、代码高亮、国际化、侧边栏/目录与命令面板均已预置。
6
+
7
+ ### 特性
8
+ - 以配置为中心:`public/config/site.yaml`
9
+ - 支持 MD/MDX、语法高亮、GFM、简易 Frontmatter 解析
10
+ - 亮/暗主题切换与命令面板(Cmd/Ctrl+K)
11
+ - 预置多语言目录(如 `en`、`zh-cn`)
12
+ - Vite 开箱可用
13
+
14
+ ### 环境要求
15
+ - Node.js >= 18
16
+
17
+ ### 快速开始
18
+ - npm:
19
+ ```bash
20
+ npm create react-docs-ui@latest my-docs
21
+ ```
22
+ - yarn:
23
+ ```bash
24
+ yarn create react-docs-ui my-docs
25
+ ```
26
+ - pnpm:
27
+ ```bash
28
+ pnpm create react-docs-ui my-docs
29
+ ```
30
+ 然后:
31
+ ```bash
32
+ cd my-docs
33
+ npm install
34
+ npm run dev
35
+ ```
36
+ 开发地址:http://localhost:5173
37
+
38
+ ### 生成项目脚本
39
+ - `dev`: 启动 Vite 开发服务器
40
+ - `build`: 类型检查并构建
41
+ - `preview`: 预览产物
42
+
43
+ ### 生成项目结构
44
+ - `public/config/site.yaml`、`public/config/site.en.yaml`:按语言的站点配置
45
+ - `public/docs/<lang>/**/*.md`:文档 Markdown,路径映射路由
46
+ - `src/`:应用入口,一般无需修改
47
+
48
+ ### 配置示例(`public/config/site.yaml`)
49
+ ```yaml
50
+ site:
51
+ logo: /logo.svg
52
+ title: My Docs
53
+ description: Awesome docs
54
+ navbar:
55
+ showTitle: true
56
+ items:
57
+ - title: GitHub
58
+ link: https://github.com/shenjianZ/react-docs-ui
59
+ external: true
60
+ sidebar:
61
+ collections:
62
+ guide:
63
+ sections:
64
+ - title: 入门
65
+ path: guide
66
+ children:
67
+ - { title: 介绍, path: guide/introduction }
68
+ ```
69
+
70
+ ### 文档示例(`public/docs/en/guide/introduction.md`)
71
+ ```markdown
72
+ ---
73
+ title: Introduction
74
+ ---
75
+
76
+ # Introduction
77
+
78
+ Welcome to My Docs!
79
+ ```
80
+
81
+ ### 相关链接
82
+ - 底层 UI 库:`react-docs-ui` — https://github.com/shenjianZ/react-docs-ui
83
+
84
+ ### 许可证
85
+ [MIT](LICENSE)
package/README.md CHANGED
@@ -1,82 +1,85 @@
1
- # create-react-docs-ui
2
-
3
- A simple scaffolding tool to quickly set up a modern documentation website powered by [react-docs-ui](https://github.com/btea/react-docs-ui).
4
-
5
- This tool creates a new project with a pre-configured, feature-rich documentation site, allowing you to focus solely on writing your Markdown content.
6
-
7
- ## About the underlying library: react-docs-ui
8
-
9
- `react-docs-ui` is a React component library and toolset designed specifically for building documentation websites. Its core philosophy is **configuration over code**.
10
-
11
- ### Core Features
12
-
13
- - **Configuration-Driven**: No need to write complex React components or routing logic. Define your entire site—navigation, sidebar, themes, and footer—through a simple `site.yaml` file.
14
- - **Fully-Featured Out-of-the-Box**:
15
- - Responsive, modern design.
16
- - Light/dark theme switching.
17
- - Markdown rendering (GFM and Frontmatter supported).
18
- - Built-in syntax highlighting.
19
- - Quick command menu (`Cmd+K`).
20
- - Internationalization (i18n) support.
21
- - **Extremely Simple to Start**: Launch a complete documentation site in under a minute.
22
- - **Highly Customizable**: Easily customize the logo, color scheme, navigation links, social media icons, and more.
23
-
24
- ## Getting Started
25
-
26
- ### Prerequisites
27
-
28
- - **Node.js**: Version `>= 18.0.0`
29
- - **Package Manager**: `npm`, `yarn`, or `pnpm`
30
-
31
- ### Creating a New Project
32
-
33
- Run one of the following commands to create your new documentation site. Replace `my-docs` with your desired project name.
34
-
35
- #### npm
36
- ```bash
37
- npm create react-docs-ui@latest my-docs
38
- ```
39
-
40
- #### yarn
41
- ```bash
42
- yarn create react-docs-ui my-docs
43
- ```
44
-
45
- #### pnpm
46
- ```bash
47
- pnpm create react-docs-ui my-docs
48
- ```
49
-
50
- ### Running Your Site
51
-
52
- After the project is created, navigate into the new directory, install dependencies, and start the development server.
53
-
54
- ```bash
55
- cd my-docs
56
- npm install
57
- npm run dev
58
- ```
59
-
60
- Your new documentation website will be running at `http://localhost:5173`.
61
-
62
- ## Project Structure
63
-
64
- The generated project has a straightforward structure:
65
-
66
- - **`public/config/site.yaml`**: The central configuration file for your entire site. This is where you'll define navigation, sidebars, and metadata.
67
- - **`public/docs/`**: The directory where all your Markdown documentation files reside. It's pre-configured with `en` and `zh-cn` subdirectories for internationalization.
68
- - **`src/`**: Contains the main application entry point. You typically won't need to modify files here.
69
-
70
- ## Basic Configuration
71
-
72
- To customize your site, you'll primarily edit `public/config/site.yaml`. Here you can:
73
-
74
- - **Change the site title and logo**: Modify the `site` object.
75
- - **Add navigation links**: Add items to the `navbar.items` array.
76
- - **Structure your documentation**: Define the hierarchy of your content in the `sidebar.collections` object.
77
-
78
- For a complete guide on all available options, please refer to the documentation within your newly created project.
79
-
80
- ## License
81
-
82
- This project is licensed under the [MIT License](LICENSE).
1
+ English | [简体中文](README-zh.md)
2
+
3
+ ## create-react-docs-ui
4
+
5
+ Scaffold a React documentation site in seconds, powered by [`react-docs-ui`](https://github.com/shenjianZ/react-docs-ui). Focus on writing Markdown; routing, theming, MDX, syntax highlighting, i18n, sidebar/TOC and a command menu are prewired.
6
+
7
+ ### Features
8
+ - Configuration over code via `public/config/site.yaml`
9
+ - MD/MDX rendering, syntax highlight, GFM, simple frontmatter parsing
10
+ - Light/dark theme and command palette (Cmd/Ctrl+K)
11
+ - Built-in i18n folders (e.g. `en`, `zh-cn`)
12
+ - Ready-to-run Vite setup
13
+
14
+ ### Requirements
15
+ - Node.js >= 18
16
+
17
+ ### Quick start
18
+ - npm:
19
+ ```bash
20
+ npm create react-docs-ui@latest my-docs
21
+ ```
22
+ - yarn:
23
+ ```bash
24
+ yarn create react-docs-ui my-docs
25
+ ```
26
+ - pnpm:
27
+ ```bash
28
+ pnpm create react-docs-ui my-docs
29
+ ```
30
+ Then:
31
+ ```bash
32
+ cd my-docs
33
+ npm install
34
+ npm run dev
35
+ ```
36
+ Dev server runs at http://localhost:5173
37
+
38
+ ### Scripts (generated project)
39
+ - `dev`: start Vite dev server
40
+ - `build`: type-check and build
41
+ - `preview`: preview production build
42
+
43
+ ### Project structure (generated)
44
+ - `public/config/site.yaml` and `public/config/site.en.yaml`: site config per language
45
+ - `public/docs/<lang>/**/*.md`: Markdown docs, matched by route slug
46
+ - `src/`: app entry; usually no changes required
47
+
48
+ ### Config example (`public/config/site.yaml`)
49
+ ```yaml
50
+ site:
51
+ logo: /logo.svg
52
+ title: My Docs
53
+ description: Awesome docs
54
+ navbar:
55
+ showTitle: true
56
+ items:
57
+ - title: GitHub
58
+ link: https://github.com/shenjianZ/react-docs-ui
59
+ external: true
60
+ sidebar:
61
+ collections:
62
+ guide:
63
+ sections:
64
+ - title: Getting Started
65
+ path: guide
66
+ children:
67
+ - { title: Introduction, path: guide/introduction }
68
+ ```
69
+
70
+ ### Docs example (`public/docs/en/guide/introduction.md`)
71
+ ```markdown
72
+ ---
73
+ title: Introduction
74
+ ---
75
+
76
+ # Introduction
77
+
78
+ Welcome to My Docs!
79
+ ```
80
+
81
+ ### Links
82
+ - Underlying UI library: `react-docs-ui` https://github.com/shenjianZ/react-docs-ui
83
+
84
+ ### License
85
+ [MIT](LICENSE)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "create-react-docs-ui",
3
- "version": "0.1.4",
3
+ "version": "0.1.6",
4
4
  "private": false,
5
5
  "type": "module",
6
6
  "bin": {
@@ -17,9 +17,23 @@
17
17
  "template/tsconfig.app.json",
18
18
  "template/tsconfig.json",
19
19
  "template/vite.config.ts",
20
- "README.md"
20
+ "README.md",
21
+ "README-zh.md"
22
+ ],
23
+ "description": "Scaffold a React documentation site with one command — built-in routing, theming, MDX, examples, and production-ready build config, powered by react-docs-ui.",
24
+ "homepage": "https://github.com/shenjianZ/create-react-docs-ui",
25
+ "keywords": [
26
+ "react",
27
+ "cli",
28
+ "scaffolding",
29
+ "starter",
30
+ "template",
31
+ "docs",
32
+ "documentation",
33
+ "mdx",
34
+ "boilerplate",
35
+ "create-tool"
21
36
  ],
22
- "description": "Scaffold a React Docs UI project powered by react-docs-ui",
23
37
  "license": "MIT"
24
38
  }
25
39
 
@@ -2,13 +2,14 @@
2
2
  <html lang="en">
3
3
  <head>
4
4
  <meta charset="UTF-8" />
5
+ <link rel="icon" type="image/svg+xml" href="/images/favicon.svg" />
5
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
- <title>React Docs UI</title>
7
+ <title>Docs</title>
7
8
  </head>
8
9
  <body>
9
10
  <div id="root"></div>
10
11
  <script type="module" src="/src/main.tsx"></script>
11
12
  </body>
12
- </html>
13
+ </html>
13
14
 
14
15
 
@@ -1,7 +1,7 @@
1
1
  # Website Configuration
2
2
  site:
3
- title: "Vue Docs UI Example"
4
- description: "Example documentation website built with Vue Docs UI"
3
+ title: "React Docs UI Example"
4
+ description: "Example documentation website built with React Docs UI"
5
5
  # Logo formats supported:
6
6
  # 1. emoji: "🤖"
7
7
  # 2. image URL: "https://example.com/logo.png"
@@ -10,7 +10,7 @@ site:
10
10
  logo:
11
11
  light: "/images/favicon.svg"
12
12
  dark: "/images/favicon-dark.svg"
13
- author: "Vue Docs UI Team"
13
+ author: "React Docs UI Team"
14
14
 
15
15
  # Navigation Bar Configuration
16
16
  navbar:
@@ -25,7 +25,7 @@ navbar:
25
25
  link: "/guide"
26
26
  actions:
27
27
  - type: "github"
28
- link: "https://github.com/shenjianZ/vue-docs-ui"
28
+ link: "https://github.com/shenjianZ/React-docs-ui"
29
29
  enabled: true
30
30
 
31
31
  # Sidebar Navigation Configuration
@@ -73,7 +73,7 @@ toc:
73
73
  # Footer Configuration
74
74
  footer:
75
75
  enabled: true
76
- copyright: "© 2024 Vue Docs UI. All rights reserved."
76
+ copyright: "© 2024 React Docs UI. All rights reserved."
77
77
  repository:
78
78
  url: "https://github.com/your_github_id/your_repo_name"
79
79
  branch: "master"
@@ -130,8 +130,8 @@ footer:
130
130
  # PWA Configuration
131
131
  pwa:
132
132
  enabled: false
133
- name: "Vue Docs UI"
134
- shortName: "VueDocsUI"
133
+ name: "React Docs UI"
134
+ shortName: "ReactDocsUI"
135
135
  description: "Beautiful documentation websites made simple"
136
136
  themeColor: "#ffffff"
137
137
  backgroundColor: "#ffffff"
@@ -1,7 +1,7 @@
1
1
  # 网站基本配置
2
2
  site:
3
- title: "Vue Docs UI 示例项目"
4
- description: "基于 Vue Docs UI 构建的文档网站示例"
3
+ title: "React Docs UI 示例项目"
4
+ description: "基于 React Docs UI 构建的文档网站示例"
5
5
  # logo支持以下格式:
6
6
  # 1. emoji: "🤖"
7
7
  # 2. 图片URL: "https://example.com/logo.png"
@@ -10,7 +10,7 @@ site:
10
10
  logo:
11
11
  light: "/images/favicon.svg"
12
12
  dark: "/images/favicon-dark.svg"
13
- author: "Vue Docs UI Team"
13
+ author: "React Docs UI Team"
14
14
 
15
15
  # 顶部导航配置
16
16
  navbar:
@@ -25,7 +25,7 @@ navbar:
25
25
  link: "/guide"
26
26
  actions:
27
27
  - type: "github"
28
- link: "https://github.com/shenjianZ/vue-docs-ui"
28
+ link: "https://github.com/shenjianZ/React-docs-ui"
29
29
  enabled: true
30
30
 
31
31
  # 侧边栏导航配置
@@ -73,7 +73,7 @@ toc:
73
73
  # Footer Configuration
74
74
  footer:
75
75
  enabled: true
76
- copyright: "© 2024 Vue Docs UI. All rights reserved."
76
+ copyright: "© 2024 React Docs UI. All rights reserved."
77
77
  repository:
78
78
  url: "https://github.com/your_github_id/your_repo_name"
79
79
  branch: "master"
@@ -130,8 +130,8 @@ footer:
130
130
  # PWA Configuration
131
131
  pwa:
132
132
  enabled: true
133
- name: "Vue Docs UI"
134
- shortName: "VueDocsUI"
133
+ name: "React Docs UI"
134
+ shortName: "ReactDocsUI"
135
135
  description: "Beautiful documentation websites made simple"
136
136
  themeColor: "#ffffff"
137
137
  backgroundColor: "#ffffff"