create-react-docs-ui 0.1.0

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

@@ -0,0 +1,139 @@
+# Installation
+
+Get Vue Docs UI up and running in your project with these simple steps.
+
+## Prerequisites
+Before you begin, make sure you have the following installed:
+
+- **Node.js** 14.18+ or 16+
+- **npm** 6+ or **yarn** 1.22+
+
+## Quick Start
+
+The fastest way to get started is using our CLI tool:
+
+```bash
+# Create a new project
+npm create vue-docs-ui@latest my-docs
+
+# Navigate to your project
+cd my-docs
+
+# Install dependencies
+npm install
+
+# Start the development server
+npm run dev
+```
+
+Your documentation website will be running at `http://localhost:5173`!
+
+## Manual Installation
+
+If you prefer to set up Vue Docs UI manually in an existing project:
+
+### 1. Install Vue Docs UI
+
+```bash
+npm install vue-docs-ui
+```
+
+### 2. Create Your App
+
+Create a `main.ts` file:
+
+```typescript
+import { createApp } from 'vue'
+import { createRouter, createWebHistory } from 'vue-router'
+import App from './App.vue'
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes: [
+    { path: '/:pathMatch(.*)*', redirect: '/' }
+  ]
+})
+
+const app = createApp(App)
+app.use(router)
+app.mount('#app')
+```
+
+### 3. Create App Component
+
+Create an `App.vue` file:
+
+```vue
+<template>
+  <DocsLayout />
+</template>
+
+<script setup lang="ts">
+import { DocsLayout } from 'vue-docs-ui'
+import 'vue-docs-ui/style.css'
+</script>
+```
+
+### 4. Configure Your Site
+
+Create a `public/config/site.yaml` file with your site configuration:
+
+```yaml
+site:
+  title: "My Documentation"
+  description: "My awesome documentation website"
+  logo: "📚"
+  author: "Your Name"
+```
+
+### 5. Add Your Content
+
+Create your documentation files in the `public/docs/` directory as Markdown files.
+
+## Project Structure
+
+After installation, your project structure should look like this:
+
+```
+my-docs/
+├── public/
+│   ├── config/
+│   │   └── site.yaml
+│   └── docs/
+│       └── guide/
+│           └── introduction.md
+├── src/
+│   ├── App.vue
+│   └── main.ts
+├── index.html
+├── package.json
+└── vite.config.js
+```
+
+## Development
+
+Start the development server:
+
+```bash
+npm run dev
+```
+
+Your site will be available at `http://localhost:5173` with hot reload enabled.
+
+## Building for Production
+
+Build your documentation for production:
+
+```bash
+npm run build
+```
+
+The built files will be in the `dist/` directory, ready to deploy to any static hosting service.
+
+## Next Steps
+
+- [Quick Start Guide](/guide/quick-start) - Learn the basics
+- [Configuration](/guide/configuration) - Customize your site
+- [Examples](/examples) - See Vue Docs UI in action 
+
+

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

@@ -0,0 +1,50 @@
+# Introduction
+
+Welcome to **Vue Docs UI** - the simplest way to create beautiful documentation websites with Vue.js!
+
+## What is Vue Docs UI?
+
+Vue Docs UI is a modern, lightweight, and highly customizable documentation framework built with Vue 3 and TypeScript. It helps you create professional documentation websites with minimal setup and maximum flexibility.
+
+## Key Features
+
+### 🚀 **Quick Setup**
+Get started in minutes with zero configuration required.
+
+### 📱 **Responsive Design**
+Looks great on all devices - from mobile phones to desktop computers.
+
+### 🎨 **Customizable Themes**
+Built-in light and dark themes with full customization support.
+
+### 📝 **Markdown Support**
+Write your documentation in Markdown with enhanced features.
+
+### 🔍 **Built-in Search**
+Powerful search functionality to help users find content quickly.
+
+### ⚡ **Lightning Fast**
+Built with Vite for incredibly fast development and build times.
+
+## Why Vue Docs UI?
+
+- **Developer Friendly**: Simple API and intuitive configuration
+- **Production Ready**: Optimized for performance and SEO
+- **Extensible**: Easy to customize and extend with your own components
+- **Modern**: Built with the latest Vue 3 and TypeScript technologies
+
+## Getting Started
+
+Ready to create your first documentation website? Check out our [Installation Guide](/guide/installation) to get started in just a few minutes!
+
+## Community
+
+Join our growing community:
+
+- 🐛 [Report Issues](https://github.com/shenjianZ/vue-docs-ui/issues)
+- 💡 [Feature Requests](https://github.com/shenjianZ/vue-docs-ui/discussions)
+- 📖 [Documentation](https://github.com/shenjianZ/vue-docs-ui)
+
+---
+
+*Happy documenting! 📚* 

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

@@ -0,0 +1,217 @@
+# 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! 🚀 

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

@@ -0,0 +1,31 @@
+# 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! 

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

@@ -0,0 +1,58 @@
+# 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) 

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

@@ -0,0 +1,169 @@
+# 配置文件 (`site.yaml`) 详解
+
+`vue-docs-ui` 的核心是其**配置驱动**的理念。你几乎可以通过 `public/config/site.yaml` 这一个文件来定义整个网站的外观和行为。本文档将详细解释每个配置项。
+
+## 顶级配置项概览
+
+| 顶级字段 | 说明 |
+| :--- | :--- |
+| `site` | 网站的全局信息，如标题、描述、Logo。 |
+| `navbar` | 配置网站顶部的导航栏。 |
+| `sidebar` | 配置网站侧边栏的导航菜单。 |
+| `theme` | 配置网站的主题，如颜色、浅色/深色模式。 |
+| `footer` | 配置网站底部的页脚信息。 |
+| `toc` | 配置文章页面右侧的目录（Table of Contents）。 |
+| `search` | 配置内置的全文搜索功能。 |
+| `pwa` | 配置渐进式Web应用（PWA）相关设置。 |
+| `ai` | 配置 AI 助手功能。 |
+
+---
+
+## `site`
+
+网站的基础元数据配置。
+
+| 字段 | 说明 | 示例 |
+| :--- | :--- | :--- |
+| `title` | 网站标题，显示在浏览器标签页上。 | `"Vue Docs UI"` |
+| `description` | 网站描述，用于搜索引擎优化 (SEO)。 | `"一个 Vue 3 文档网站构建工具"` |
+| `logo` | 网站 Logo，显示在导航栏左上角。 | `"📚"` 或 `"/images/logo.png"` |
+| `author` | 网站作者。 | `"Vue Docs UI Team"` |
+
+**Logo 格式说明:**
+1.  **Emoji**: 直接使用一个表情符号，如 `"🚀"`。
+2.  **本地图片**: 指向 `public` 目录下的图片路径，如 `"/images/logo.png"`。
+3.  **外部图片 URL**: 一个完整的图片链接。
+
+---
+
+## `navbar`
+
+顶部导航栏配置。
+
+| 字段 | 说明 |
+| :--- | :--- |
+| `items` | 导航项数组，定义了导航栏中显示的所有链接。 |
+
+### `navbar.items`
+
+| 字段 | 说明 | 示例 |
+| :--- | :--- | :--- |
+| `title` | 导航项的显示文本。 | `"指南"` |
+| `link` | 链接地址。内部链接以 `/` 开头。 | `"/guide/introduction"` |
+| `external` | (可选) `true` 表示为外部链接，将在新标签页打开。 | `true` |
+
+---
+
+## `sidebar`
+
+侧边栏导航配置，是文档结构的核心。
+
+| 字段 | 说明 |
+| :--- | :--- |
+| `sections` | 侧边栏区域数组，每个区域代表一个可折叠的菜单组。 |
+
+### `sidebar.sections`
+
+| 字段 | 说明 | 示例 |
+| :--- | :--- | :--- |
+| `title` | 区域的标题。 | `"入门指南"` |
+| `path` | 区域的基础路径。当用户访问的 URL 以此路径开头时，该区域会自动展开并高亮。 | `"/guide"` |
+| `children` | 该区域下的子链接数组。 | |
+
+### `sidebar.sections.children`
+
+| 字段 | 说明 | 示例 |
+| :--- | :--- | :--- |
+| `title` | 子链接的显示文本。 | `"介绍"` |
+| `path` | 子链接的完整路径，指向一个具体的 Markdown 页面。 | `"/guide/introduction"` |
+
+---
+
+## `theme`
+
+主题和外观配置。
+
+| 字段 | 说明 | 可选值 | 默认值 |
+| :--- | :--- | :--- | :--- |
+| `defaultMode` | 网站的默认主题模式。 | `'light'`, `'dark'`, `'auto'` | `'auto'` |
+| `allowToggle` | 是否允许用户切换主题。 | `true`, `false` | `true` |
+| `primaryColor`| 网站的主题色。 | CSS 颜色值 | `"#3b82f6"` |
+
+---
+
+## `footer`
+
+页脚配置。
+
+| 字段 | 说明 | 示例 |
+| :--- | :--- | :--- |
+| `copyright` | 版权信息。`{year}` 会被替换为当前年份。 | `"Copyright © {year} My Company"` |
+| `repository` | (可选) 仓库信息，用于显示“在 GitHub 上编辑此页”等链接。 | |
+| `links` | (可选) 在页脚显示的额外链接列。 | |
+| `social` | (可选) 在页脚显示的社交媒体图标链接。 | |
+
+### `footer.repository`
+
+| 字段 | 说明 | 示例 |
+| :--- | :--- | :--- |
+| `url` | 仓库的 URL。 | `"https://github.com/user/repo"` |
+| `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)
+
+文章页面右侧的目录配置。
+
+| 字段 | 说明 | 示例 |
+| :--- | :--- | :--- |
+| `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` 中单独配置，以避免意外泄露。