create-react-docs-ui 0.1.0

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

@@ -0,0 +1,66 @@
+# 安装
+
+## 环境要求
+
+在开始之前，请确保你的开发环境满足以下要求：
+
+- **Node.js**: 版本 `>= 18.0.0`
+- **包管理器**: `npm`、`yarn` 或 `pnpm`
+
+## 推荐方式：使用脚手架
+
+我们强烈推荐使用官方的 `create-vue-docs-ui` 脚手架来创建你的新文档项目。这是最快、最简单的方式，可以确保所有配置都已就绪。
+
+1.  **运行创建命令**:
+    ```bash
+    npm create vue-docs-ui@latest my-docs
+    ```
+    这会在当前目录下创建一个名为 `my-docs` 的新文件夹。
+
+2.  **进入项目并安装依赖**:
+    ```bash
+    cd my-docs
+    npm install
+    ```
+
+3.  **启动开发服务器**:
+    ```bash
+    npm run dev
+    ```
+    现在，你的文档网站已经运行在 `http://localhost:5173` 上了。
+
+## 手动安装 (适用于现有项目)
+
+如果你想在已有的 Vite + Vue 3 项目中手动集成 `vue-docs-ui`，可以按照以下步骤操作：
+
+1.  **安装核心库**:
+    ```bash
+    npm install vue-docs-ui
+    ```
+
+2.  **创建配置文件**:
+    在你的 `public` 目录下创建一个 `config` 文件夹，并在其中新建一个 `site.yaml` 文件。你可以从[这里](https://github.com/shenjianZ/vue-docs-ui/blob/main/vue-docs-ui/public/config/site.yaml)复制一个基础模板。
+
+3.  **创建文档目录**:
+    在 `public` 目录下创建一个 `docs` 文件夹，用于存放你的 Markdown 文件。
+
+4.  **修改应用入口文件**:
+    更新你的 `src/main.ts` (或 `main.js`) 文件，使用 `createDocsApp` 来初始化应用。
+
+    ```typescript
+    // src/main.ts
+    import { createApp } from 'vue'
+    import { createDocsApp } from 'vue-docs-ui'
+    import 'vue-docs-ui/dist/style.css' // 引入核心样式
+
+    // 移除原有的 createApp(App).mount('#app')
+    
+    createDocsApp({
+      // el 是挂载点，必须与 index.html 中的 id 一致
+      el: '#app',
+      // configPath 指向你的主配置文件
+      configPath: '/config/site.yaml',
+      // aiConfigPath 是可选的 AI 助手配置
+      aiConfigPath: '/config/ai.json' 
+    })
+    ```

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

@@ -0,0 +1,29 @@
+# 介绍
+
+Vue Docs UI 是一个专为构建现代化文档网站而设计的 Vue 3 组件库与工具集。它的核心哲学是**配置优于编码**，让你能将精力完全集中在内容创作上。
+
+## 核心优势
+
+- **配置驱动**: 这是 Vue Docs UI 最核心的特性。你不需要编写 Vue 组件或复杂的路由逻辑，只需维护一个清晰的 `site.yaml` 文件，就能定义网站的导航、侧边栏、主题、页脚等所有内容。
+
+- **功能完备**: 开箱即用，提供了现代文档网站所需的一切：
+  - 响应式布局
+  - 明暗主题切换
+  - 基于 Markdown 的内容渲染
+  - 代码语法高亮
+  - 内置全文搜索
+  - PWA (渐进式Web应用) 支持
+  - 可选的 AI 问答助手
+
+- **极简上手**: 通过官方的 `create-vue-docs-ui` 脚手架，你可以在一分钟内启动一个功能齐全的文档网站，无需任何复杂的环境配置。
+
+- **高度可定制**: 虽然开箱即用，但每个部分（如 Logo、配色、导航链接、社交媒体图标等）都可以通过配置文件进行深度定制。
+
+## 适用场景
+
+无论你是个人开发者还是团队，Vue Docs UI 都非常适合以下场景：
+
+- **开源项目文档**: 为你的项目提供一个专业、易于维护的文档网站。
+- **产品手册**: 清晰地展示你的产品功能和使用指南。
+- **团队知识库**: 在团队内部沉淀和分享知识。
+- **个人博客或作品集**: 以优雅的方式组织和展示你的技术文章或项目。

package/template/public/docs/zh-cn/guide/quick-start.md

@@ -0,0 +1,100 @@
+# 快速上手
+
+本指南将引导你在 5 分钟内，从零开始创建、配置并运行一个属于你自己的文档网站。
+
+## 1. 创建项目
+
+使用官方脚手架是最高效的方式。打开你的终端，运行以下命令：
+
+```bash
+# 这会创建一个名为 "my-awesome-docs" 的项目
+npm create vue-docs-ui@latest my-awesome-docs
+```
+
+然后，进入项目目录并安装依赖：
+
+```bash
+cd my-awesome-docs
+npm install
+```
+
+## 2. 组织你的文档
+
+所有的文档内容都以 Markdown 文件的形式存放在 `public/docs/` 目录下。
+
+- 打开 `public/docs/zh-cn/` 目录。
+- 你可以修改现有的 `index.md` 和 `guide` 目录下的文件，或者创建新的 `.md` 文件。
+
+例如，我们来创建一个新页面。在 `public/docs/zh-cn/` 下新建一个 `about.md` 文件：
+
+```markdown
+# 关于我们
+
+这是一个关于我们团队的页面。
+我们热爱开源和创造！
+```
+
+## 3. 配置网站
+
+现在，让我们通过修改配置文件来展示新创建的页面。
+
+打开核心配置文件 `public/config/site.yaml`。
+
+### a. 修改网站信息
+
+更新 `site` 部分，给你的网站一个新标题和 Logo。
+
+```yaml
+site:
+  title: "我的超赞文档"
+  description: "一个使用 Vue Docs UI 构建的网站"
+  logo: "🚀" # 你可以使用 emoji 或图片路径
+```
+
+### b. 添加到导航栏
+
+在 `navbar.items` 数组中，为“关于”页面添加一个链接。
+
+```yaml
+navbar:
+  items:
+    - title: "首页"
+      link: "/zh-cn/"
+    - title: "指南"
+      link: "/zh-cn/guide/introduction"
+    - title: "关于"  # 新增
+      link: "/zh-cn/about" # 新增
+```
+
+### c. 添加到侧边栏
+
+为了让“关于”页面在侧边栏也可见，我们在 `sidebar.sections` 中添加一个新区域。
+
+```yaml
+sidebar:
+  sections:
+    - title: "入门指南"
+      path: "/zh-cn/guide"
+      children:
+        - title: "介绍"
+          path: "/zh-cn/guide/introduction"
+        - title: "安装"
+          path: "/zh-cn/guide/installation"
+        - title: "快速上手"
+          path: "/zh-cn/guide/quick-start"
+    - title: "关于我们" # 新增区域
+      path: "/zh-cn/about" # 新增区域
+      children: # 新增区域
+        - title: "关于" # 新增区域
+          path: "/zh-cn/about" # 新增区域
+```
+
+## 4. 启动网站
+
+保存你的所有修改，然后在终端运行：
+
+```bash
+npm run dev
+```
+
+你的网站现在应该运行在 `http://localhost:5173` 上了。访问它，你会看到更新后的标题、Logo，以及导航栏和侧边栏中新增的“关于”链接。恭喜你，你已经成功掌握了 Vue Docs UI 的基本工作流程！

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

@@ -0,0 +1,10 @@
+# 指南
+
+本指南将帮助你全面了解并掌握 Vue Docs UI 的各项功能。无论你是初学者还是希望进行深度定制，都能在这里找到所需的信息。
+
+## 目录
+
+- **[介绍](/guide/introduction)**: 了解 Vue Docs UI 的核心理念和主要优势。
+- **[安装](/guide/installation)**: 学习如何通过脚手架或手动方式安装。
+- **[快速上手](/guide/quick-start)**: 在 5 分钟内创建并运行你的第一个文档网站。
+- **[配置说明 (`site.yaml`)](/guide/configuration)**: 深入了解每个配置项，完全掌控你的网站。

package/template/public/docs/zh-cn/index.md

@@ -0,0 +1,34 @@
+# Vue Docs UI
+
+一个基于 Vue 3 的、**配置驱动**的现代化文档网站构建工具。
+
+Vue Docs UI 旨在让创建美观、功能强大的文档网站变得前所未有的简单。你只需专注于编写 Markdown 文档，其他的一切——从路由、导航到主题切换和 AI 助手——都通过简单的 YAML 配置来驱动。
+
+## 核心特性
+
+- **配置驱动**: 无需编码，通过 `site.yaml` 定义你的整个网站。
+- **开箱即用**: 极速启动项目，内置所有必需功能。
+- **现代设计**: 优雅的响应式布局，支持明暗主题自动切换。
+- **AI 助手**: 可选集成 AI 问答，为你的文档提供智能支持。
+- **全文搜索**: 快速、准确的客户端内容搜索。
+- **PWA 就绪**: 支持将网站作为桌面或移动应用安装，并可离线访问。
+
+## 快速开始
+
+只需一个命令，即可拥有你的专属文档网站：
+
+```bash
+# 创建项目
+npm create vue-docs-ui@latest my-docs
+
+# 进入项目目录
+cd my-docs
+
+# 安装依赖并启动
+npm install && npm run dev
+```
+
+## 链接
+
+- **[指南](/zh-cn/guide/introduction)**: 开始了解 Vue Docs UI 的所有功能。
+- **[GitHub](https://github.com/shenjianZ/vue-docs-ui)**: 查看源码、提交问题或贡献代码。

package/template/public/images/favicon-dark.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
+  <polyline points="14,2 14,8 20,8"/>
+  <line x1="16" y1="13" x2="8" y2="13"/>
+  <line x1="16" y1="17" x2="8" y2="17"/>
+  <polyline points="10,9 9,9 8,9"/>
+</svg>

package/template/public/images/favicon.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
+  <polyline points="14,2 14,8 20,8"/>
+  <line x1="16" y1="13" x2="8" y2="13"/>
+  <line x1="16" y1="17" x2="8" y2="17"/>
+  <polyline points="10,9 9,9 8,9"/>
+</svg> 

package/template/public/images/placeholder.md

@@ -0,0 +1,25 @@
+# 图片目录
+
+将您的图片文件放在这个目录中。
+
+支持的格式：
+- PNG
+- JPG/JPEG
+- SVG
+- WebP
+- GIF
+
+## 使用方式
+
+在 Markdown 中引用图片：
+
+```markdown
+![图片描述](/images/your-image.png)
+```
+
+在配置文件中使用：
+
+```yaml
+site:
+  logo: "/images/logo.png"
+``` 

package/template/src/main.tsx

@@ -0,0 +1,16 @@
+import React from "react"
+import ReactDOM from "react-dom/client"
+
+import "@react-docs-ui/core/dist/react-docs-ui.css"
+import { DocsApp } from "@react-docs-ui/core"
+// import "../../../react-docs-ui/dist/react-docs-ui.css"
+// @ts-ignore using local built ES module for development
+// import { DocsApp } from "../../../react-docs-ui/dist/react-docs-ui.es.js"
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <DocsApp />
+  </React.StrictMode>
+)
+
+

package/template/src/vite-env.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="vite/client" />
+
+

package/template/tsconfig.app.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"]
+}
+
+

package/template/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" }
+  ]
+}
+
+

package/template/vite.config.ts

@@ -0,0 +1,15 @@
+// @ts-nocheck
+import react from "@vitejs/plugin-react"
+import { defineConfig } from "vite"
+
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      "@": "src",
+      buffer: "buffer/",
+    },
+  },
+})
+
+