create-react-docs-ui 0.1.0 → 0.1.2

package/template/public/docs/en/guide/quick-start.md

@@ -1,217 +1,109 @@
-# Quick Start
-
-This guide will help you understand the basics of Vue Docs UI and get your documentation website up and running quickly.
-
-## Project Overview
-
-Vue Docs UI follows a simple file-based routing system. Your documentation is organized as:
-
-- **Configuration**: `public/config/site.yaml` - Site settings and navigation
-- **Content**: `public/docs/` - Markdown files for your documentation pages
-- **Assets**: `public/images/` - Images and other static assets
-
-## Writing Your First Page
-
-Let's create a simple documentation page:
-
-### 1. Create a Markdown File
-
-Create a new file at `public/docs/my-first-page.md`:
-
-```markdown
-# My First Page
-
-Welcome to my documentation! This is written in **Markdown**.
-
-## Features
-
-- Easy to write
-- Supports code syntax highlighting
-- Responsive design
-- Built-in search
-
-## Code Example
-
-## Lists and More
-
-1. Ordered lists work great
-2. With automatic numbering
-3. And proper styling
-
-- Unordered lists too
-- With bullet points
-- And consistent spacing
-```
-
-> **Tip**: Use blockquotes for important notes and tips!
-
-
-### 2. Add to Navigation
-
-Update your `public/config/site.yaml` to include the new page:
-
-```yaml
-sidebar:
-  sections:
-    - title: "Getting Started"
-      path: "/guide"
-      children:
-        - title: "My First Page"
-          path: "/my-first-page"
-```
-
-### 3. View Your Page
-
-Start the development server and navigate to your new page:
-
-```bash
-npm run dev
-```
-
-Visit `http://localhost:5173/my-first-page` to see your page!
-
-## Understanding Configuration
-
-The `site.yaml` file controls your entire site structure:
-
-### Site Settings
-```yaml
-site:
-  title: "Your Site Title"
-  description: "Site description for SEO"
-  logo: "📚"  # Emoji, image URL, or path
-  author: "Your Name"
-```
-
-### Navigation Bar
-```yaml
-navbar:
-  items:
-    - title: "Home"
-      link: "/"
-    - title: "GitHub"
-      link: "https://github.com/username/repo"
-      external: true
-```
-
-### Sidebar Navigation
-```yaml
-sidebar:
-  sections:
-    - title: "Section Name"
-      path: "/section"
-      children:
-        - title: "Page Title"
-          path: "/page-path"
-```
-
-## Markdown Features
-
-Vue Docs UI supports enhanced Markdown with:
-
-### Code Highlighting
-```javascript
-// JavaScript code is highlighted
-function greet(name) {
-  return `Hello, ${name}!`
-}
-```
-
-### Tables
-| Feature | Status | Description |
-|---------|--------|-------------|
-| Responsive | ✅ | Works on all devices |
-| Themes | ✅ | Light and dark mode |
-| Search | ✅ | Built-in search |
-
-### Math (Optional)
-If you need math equations, you can add support for LaTeX:
-
-Inline math: $E = mc^2$
-
-Block math:
-$$
-\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
-$$
-
-## Customizing Appearance
-
-### Theme Colors
-Customize your site's colors in `site.yaml`:
-
-```yaml
-theme:
-  colors:
-    primary: "#3b82f6"    # Main brand color
-    secondary: "#64748b"  # Secondary text
-    accent: "#06b6d4"     # Accent color
-```
-
-### Fonts
-```yaml
-theme:
-  fonts:
-    primary: "Inter, -apple-system, BlinkMacSystemFont, sans-serif"
-    mono: "JetBrains Mono, Consolas, monospace"
-```
-
-## Adding Images
-
-Place images in `public/images/` and reference them in your Markdown:
-
-```markdown
-![Logo](/images/logo.png)
-```
-
-Or with custom sizing:
-```markdown
-<img src="/images/screenshot.png" alt="Screenshot" width="600">
-```
-
-## Best Practices
-
-### 1. Organize Your Content
-```
-public/docs/
-├── guide/
-│   ├── introduction.md
-│   ├── installation.md
-│   └── quick-start.md
-├── api/
-│   ├── components.md
-│   └── utilities.md
-└── examples/
-    ├── basic.md
-    └── advanced.md
-```
-
-### 2. Use Descriptive Titles
-- Good: "Setting up Authentication"
-- Bad: "Auth Setup"
-
-### 3. Add Table of Contents
-Enable TOC in your `site.yaml`:
-
-```yaml
-toc:
-  enabled: true
-  maxLevel: 3
-  title: "On This Page"
-```
-
-### 4. Link Between Pages
-Use relative links to connect your content:
-
-```markdown
-Check out our [Installation Guide](/guide/installation) for setup instructions.
-```
-
-## What's Next?
-
-Now that you understand the basics:
-
-1. **[Configuration](/guide/configuration)** - Learn about all available options
-2. **[Advanced Features](/advanced/customization)** - Customize your site further
-3. **[Deployment](/advanced/deployment)** - Deploy your site to production
-
-Happy documenting! 🚀 
+# Quick Start
+
+This guide will walk you through creating, configuring, and running your own React documentation website from scratch in 5 minutes.
+
+## 1. Create the Project
+
+Using the official scaffolding tool is the most efficient way. Open your terminal and run the following command:
+
+```bash
+# This creates a project named "my-awesome-docs"
+npx create-react-docs-ui@latest my-awesome-docs
+```
+
+Next, enter the project directory and install the dependencies:
+
+```bash
+cd my-awesome-docs
+npm install
+```
+
+## 2. Organize Your Documents
+
+All your documentation content is stored as Markdown files in the `public/docs/` directory.
+
+- Open the `public/docs/en/` directory.
+- You can modify the existing `index.md` and files under the `guide` directory, or create new `.md` files.
+
+For example, let's create a new page. Create a new file named `about.md` in `public/docs/en/`:
+
+```markdown
+---
+title: About Us
+description: This is a page about our team.
+---
+
+# About Us
+
+We love open source and creation!
+```
+
+**Note**: You can use `frontmatter` at the top of your Markdown files to define the page `title` and `description`.
+
+## 3. Configure the Website
+
+Now, let's display the newly created page by modifying the configuration file.
+
+Open the core configuration file `public/config/site.yaml`.
+
+### a. Modify Site Information
+
+Update the `site` section to give your website a new title and logo.
+
+```yaml
+site:
+  title: "My Awesome Docs"
+  description: "A website built with React Docs UI"
+  logo: "🚀" # You can use an emoji or an image path
+```
+
+### b. Add to the Navbar
+
+In the `navbar.items` array, add a link for the "About" page. Remember to update the links for the English version.
+
+```yaml
+navbar:
+  items:
+    - title: "Home"
+      link: "/en/"
+    - title: "Guide"
+      link: "/en/guide/introduction"
+    - title: "About"  # New
+      link: "/en/about" # New
+```
+
+### c. Add to the Sidebar
+
+To make the "About" page visible in the sidebar, we'll add a new entry in `sidebar.collections.guide.sections`. Make sure to use English paths.
+
+```yaml
+sidebar:
+  collections:
+    guide:
+      sections:
+        - title: "Getting Started"
+          path: "/en/guide"
+          children:
+            - title: "Introduction"
+              path: "/en/guide/introduction"
+            - title: "Installation"
+              path: "/en/guide/installation"
+            - title: "Quick Start"
+              path: "/en/guide/quick-start"
+        # You can create a new section for the "About" page
+        - title: "About Us"
+          path: "/en/about"
+          children:
+            - title: "About"
+              path: "/en/about"
+```
+
+## 4. Launch the Website
+
+Save all your changes and run the following command in your terminal:
+
+```bash
+npm run dev
+```
+
+Your website should now be running at `http://localhost:5173`. Visit it, and you will see the updated title, logo, and the new "About" link in the navbar and sidebar. Congratulations, you have successfully mastered the basic workflow of React Docs UI!

package/template/public/docs/en/guide.md

@@ -1,31 +1,10 @@
-# Getting Started
-
-## Getting Started with Vue Docs UI
-
-Welcome to Vue Docs UI! This is a modern documentation website building tool based on Vue 3.
-
-## Quick Overview
-
-Vue Docs UI enables you to:
-- 🚀 **Quick Start** - Create beautiful documentation websites with just a few lines of code
-- 📱 **Responsive Design** - Perfect adaptation to all devices
-- 🎨 **Highly Customizable** - Flexible theme and style configuration
-- 📝 **Markdown Support** - Use familiar Markdown syntax
-
-## Learning Path
-
-### [📖 Introduction](/guide/introduction)
-Learn about Vue Docs UI's core concepts and features
-
-### [⚡ Installation](/guide/installation)
-Learn how to install and set up Vue Docs UI
-
-### [🏃‍♂️ Quick Start](/guide/quick-start)
-Get hands-on experience through practical examples
-
-### [⚙️ Configuration](/guide/configuration)
-Deep dive into configuration options and customization methods
-
-## Ready to Start?
-
-Choose any of the topics above to begin your learning journey, or jump directly to [Quick Start](/guide/quick-start) to experience it immediately! 
+# Guide
+
+This guide will help you fully understand and master all the features of React Docs UI. Whether you are a beginner or looking for in-depth customization, you will find the information you need here.
+
+## Table of Contents
+
+- **[Introduction](/en/guide/introduction)**: Learn about the core philosophy and main advantages of React Docs UI.
+- **[Installation](/en/guide/installation)**: Learn how to install via the scaffolding tool or manually.
+- **[Quick Start](/en/guide/quick-start)**: Create and run your first documentation website in 5 minutes.
+- **[Configuration (`site.yaml`)](/en/guide/configuration)**: Dive deep into each configuration option to take full control of your site.

package/template/public/docs/en/index.md

@@ -1,58 +1,34 @@
-# Welcome to Vue Docs UI
-
-Vue Docs UI is a modern documentation website builder based on Vue 3, providing an out-of-the-box documentation solution.
-
-## 🌟 Key Features
-
-- **🚀 Ready to Use** - Launch your documentation website with just 3 lines of code
-- **🎨 Modern Design** - Beautiful interface design with light/dark theme support
-- **📱 Mobile Responsive** - Perfect responsive design
-- **🌐 Internationalization** - Built-in multi-language support
-- **🤖 AI Assistant** - Integrated AI chat assistant with multiple model support
-- **⚡ High Performance** - Built with Vite for fast hot reload
-- **🔍 Full-text Search** - Smart search functionality
-- **📝 Enhanced Markdown** - Rich Markdown extensions
-
-## 🏗️ Architecture Features
-
-- **Component-based Design** - Modular components, easy to extend
-- **TypeScript Support** - Complete type support
-- **Customizable Themes** - Flexible theme configuration
-- **Plugin System** - Extensible plugin architecture
-
-## 📦 Quick Start
-
-```bash
-# Create new project
-npm create vue-docs-ui@latest my-docs
-
-# Navigate to project directory
-cd my-docs
-
-# Install dependencies
-npm install
-
-# Start development server
-npm run dev
-```
-
-## 📖 Usage
-
-```javascript
-import { createDocsApp } from 'vue-docs-ui'
-import 'vue-docs-ui/dist/vue-docs-ui.css'
-
-createDocsApp({
-  configPath: '/config/site.yaml',
-  el: '#app'
-})
-```
-
-It's that simple! No complex configuration needed, get a fully functional documentation website immediately.
-
-## 🔗 Related Links
-
-- [GitHub Repository](https://github.com/shenjianZ/vue-docs-ui)
-- [Online Demo](https://vue-docs-ui.example.com)
-- [User Guide](/guide/introduction)
-- [API Documentation](/advanced/api) 
+# React Docs UI
+
+A **configuration-driven** modern documentation website builder based on React.
+
+React Docs UI aims to make creating beautiful, powerful documentation websites simpler than ever. You just need to focus on writing Markdown documents, and everything else—from routing and navigation to theme switching and the command menu—is driven by a simple YAML configuration.
+
+## Core Features
+
+- **Configuration-Driven**: Define your entire website via `site.yaml` without coding.
+- **Out-of-the-Box**: Quickly start your project with all necessary features built-in.
+- **Modern Design**: Elegant responsive layout with automatic light/dark theme switching.
+- **Command Menu**: Built-in `Cmd+K` shortcut menu for quick page access.
+- **Markdown Support**: Full support for GFM and Frontmatter.
+- **Internationalization**: Easily implement multi-language support through configuration files.
+
+## Quick Start
+
+Get your own documentation website with just one command:
+
+```bash
+# Create the project
+npx create-react-docs-ui@latest my-docs
+
+# Enter the project directory
+cd my-docs
+
+# Install dependencies and start
+npm install && npm run dev
+```
+
+## Links
+
+- **[Guide](/en/guide/introduction)**: Start learning about all the features of React Docs UI.
+- **[GitHub](https://github.com/shenjianZ/react-docs-ui)**: View the source code, submit issues, or contribute.

package/template/public/docs/zh-cn/guide/configuration.md

@@ -1,6 +1,6 @@
 # 配置文件 (`site.yaml`) 详解
 
-`vue-docs-ui` 的核心是其**配置驱动**的理念。你几乎可以通过 `public/config/site.yaml` 这一个文件来定义整个网站的外观和行为。本文档将详细解释每个配置项。
+`react-docs-ui` 的核心是其**配置驱动**的理念。你几乎可以通过 `public/config/site.yaml` 这一个文件来定义整个网站的外观和行为。本文档将详细解释每个配置项。
 
 ## 顶级配置项概览
 
@@ -12,9 +12,6 @@
 | `theme` | 配置网站的主题，如颜色、浅色/深色模式。 |
 | `footer` | 配置网站底部的页脚信息。 |
 | `toc` | 配置文章页面右侧的目录（Table of Contents）。 |
-| `search` | 配置内置的全文搜索功能。 |
-| `pwa` | 配置渐进式Web应用（PWA）相关设置。 |
-| `ai` | 配置 AI 助手功能。 |
 
 ---
 
@@ -24,15 +21,15 @@
 
 | 字段 | 说明 | 示例 |
 | :--- | :--- | :--- |
-| `title` | 网站标题，显示在浏览器标签页上。 | `"Vue Docs UI"` |
-| `description` | 网站描述，用于搜索引擎优化 (SEO)。 | `"一个 Vue 3 文档网站构建工具"` |
-| `logo` | 网站 Logo，显示在导航栏左上角。 | `"📚"` 或 `"/images/logo.png"` |
-| `author` | 网站作者。 | `"Vue Docs UI Team"` |
+| `title` | 网站标题，显示在浏览器标签页上。 | `"React Docs UI"` |
+| `description` | 网站描述，用于搜索引擎优化 (SEO)。 | `"一个 React 文档网站构建工具"` |
+| `logo` | 网站 Logo，显示在导航栏左上角。 | `"📚"` 或 `"/images/logo.png"` 或一个包含 `light` 和 `dark` 模式图片路径的对象 |
+| `author` | 网站作者。 | `"React Docs UI Team"` |
 
 **Logo 格式说明:**
 1.  **Emoji**: 直接使用一个表情符号，如 `"🚀"`。
 2.  **本地图片**: 指向 `public` 目录下的图片路径，如 `"/images/logo.png"`。
-3.  **外部图片 URL**: 一个完整的图片链接。
+3.  **亮/暗模式图片**: 一个对象，包含 `light` 和 `dark` 两个键，分别指向不同主题下的图片路径。
 
 ---
 
@@ -43,6 +40,7 @@
 | 字段 | 说明 |
 | :--- | :--- |
 | `items` | 导航项数组，定义了导航栏中显示的所有链接。 |
+| `actions` | (可选) 导航栏右侧的操作按钮，如 GitHub 链接。 |
 
 ### `navbar.items`
 
@@ -56,13 +54,15 @@
 
 ## `sidebar`
 
-侧边栏导航配置，是文档结构的核心。
+侧边栏导航配置，是文档结构的核心。它使用 `collections` 来组织不同部分的内容。
 
 | 字段 | 说明 |
 | :--- | :--- |
-| `sections` | 侧边栏区域数组，每个区域代表一个可折叠的菜单组。 |
+| `collections` | 一个对象，键是集合的名称（通常对应一级路由，如 `guide`），值是该集合的侧边栏配置。 |
 
-### `sidebar.sections`
+### `sidebar.collections.<name>.sections`
+
+每个集合包含一个 `sections` 数组，每个 `section` 代表一个可折叠的菜单组。
 
 | 字段 | 说明 | 示例 |
 | :--- | :--- | :--- |
@@ -70,7 +70,7 @@
 | `path` | 区域的基础路径。当用户访问的 URL 以此路径开头时，该区域会自动展开并高亮。 | `"/guide"` |
 | `children` | 该区域下的子链接数组。 | |
 
-### `sidebar.sections.children`
+### `sidebar.collections.<name>.sections.children`
 
 | 字段 | 说明 | 示例 |
 | :--- | :--- | :--- |
@@ -85,9 +85,8 @@
 
 | 字段 | 说明 | 可选值 | 默认值 |
 | :--- | :--- | :--- | :--- |
-| `defaultMode` | 网站的默认主题模式。 | `'light'`, `'dark'`, `'auto'` | `'auto'` |
+| `defaultMode` | 网站的默认主题模式。 | `'light'`, `'dark'`, `'system'` | `'system'` |
 | `allowToggle` | 是否允许用户切换主题。 | `true`, `false` | `true` |
-| `primaryColor`| 网站的主题色。 | CSS 颜色值 | `"#3b82f6"` |
 
 ---
 
@@ -110,14 +109,6 @@
 | `branch` | 文档所在的 Git 分支。 | `"main"` |
 | `dir` | 文档文件在仓库中的根目录。 | `"docs/src"` |
 
-### `footer.social`
-
-| 字段 | 说明 | 示例 |
-| :--- | :--- | :--- |
-| `name` | 社交媒体名称，用于 `aria-label`。 | `"GitHub"` |
-| `url` | 链接地址。 | `"https://github.com/user"` |
-| `icon` | 图标标识符，支持 `github`, `twitter`, `discord` 等。 | `"github"` |
-
 ---
 
 ## `toc` (Table of Contents)
@@ -129,41 +120,3 @@
 | `enabled` | 是否启用页面目录功能。 | `true` |
 | `maxLevel` | 在目录中显示的最大标题级别（h1-h6）。 | `3` |
 | `title` | 目录组件的标题。 | `"本页内容"` |
-
----
-
-## `search`
-
-内置搜索功能配置。
-
-| 字段 | 说明 | 示例 |
-| :--- | :--- | :--- |
-| `enabled` | 是否启用搜索功能。 | `true` |
-| `placeholder` | 搜索框的占位文本。 | `"搜索文档..."` |
-
----
-
-## `pwa`
-
-渐进式Web应用配置。
-
-| 字段 | 说明 | 示例 |
-| :--- | :--- | :--- |
-| `enabled` | 是否启用 PWA 功能。 | `true` |
-| `name` | PWA 的完整名称。 | `"Vue Docs UI"` |
-| `shortName` | PWA 的短名称。 | `"VueDocs"` |
-
----
-
-## `ai`
-
-AI 助手配置。
-
-| 字段 | 说明 | 示例 |
-| :--- | :--- | :--- |
-| `enabled` | 是否启用 AI 助手功能。 | `true` |
-| `buttonTitle` | 浮动按钮的标题。 | `"AI 助手"` |
-| `modalTitle` | 对话框的标题。 | `"与 AI 对话"` |
-| `placeholder` | 输入框的占位文本。 | `"向我提问..."` |
-
-**注意**: AI 功能的 `provider` 和 `apiKey` 等敏感信息在 `public/config/ai.json` 中单独配置，以避免意外泄露。