react-docs-ui 0.1.0

package/README.md

@@ -0,0 +1,88 @@
+# React Docs UI (Vite)
+
+This package can be used as a library, similar to `vue-docs-ui`.
+
+## Install
+
+```bash
+npm install @react-docs-ui-vite/core
+```
+
+## Usage
+
+```tsx
+import "@react-docs-ui-vite/core/dist/react-docs-ui.css"
+import { DocsLayout, HeaderNav, SidebarNav, TableOfContents } from "@react-docs-ui-vite/core"
+```
+
+See `public/config/site.yaml` and `public/docs` in this repo for an example content structure.
+
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default tseslint.config([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+
+      // Remove tseslint.configs.recommended and replace with this
+      ...tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      ...tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      ...tseslint.configs.stylisticTypeChecked,
+
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default tseslint.config([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```

package/dist/config/ai.json

@@ -0,0 +1,60 @@
+{
+  "enabled": true,
+  "provider": "openai",
+  "systemPrompt": "你是一个专业的文档助手，请根据用户的问题，提供准确的答案。",
+  "models": {
+    "openai": {
+      "modelId": "gpt-3.5-turbo",
+      "apiKey": "",
+      "baseUrl": "https://api.openai.com/v1",
+      "maxTokens": 4000,
+      "temperature": 0.7
+    },
+    "claude": {
+      "modelId": "claude-3-sonnet-20240229",
+      "apiKey": "",
+      "baseUrl": "https://api.anthropic.com",
+      "maxTokens": 4000,
+      "temperature": 0.7
+    },
+    "gemini": {
+      "modelId": "gemini-pro",
+      "apiKey": "",
+      "baseUrl": "https://generativelanguage.googleapis.com/v1",
+      "maxTokens": 4000,
+      "temperature": 0.7
+    },
+    "deepseek-v3": {
+      "modelId": "deepseek-chat",
+      "apiKey": "",
+      "baseUrl": "https://api.deepseek.com",
+      "maxTokens": 4000,
+      "temperature": 0.7
+    },
+    "deepseek-reasoner": {
+      "modelId": "deepseek-reasoner",
+      "apiKey": "",
+      "baseUrl": "https://api.deepseek.com",
+      "maxTokens": 4000,
+      "temperature": 0.7
+    },
+    "custom": {
+      "modelId": "",
+      "apiKey": "",
+      "baseUrl": "",
+      "maxTokens": 4000,
+      "temperature": 0.7
+    }
+  },
+  "features": {
+    "chatAssistant": true,
+    "documentSummary": true,
+    "codeExplanation": true,
+    "searchEnhancement": false
+  },
+  "ui": {
+    "position": "bottom-right",
+    "theme": "auto",
+    "size": "medium"
+  }
+} 

package/dist/config/site.en.yaml

@@ -0,0 +1,137 @@
+# Website Configuration
+site:
+  title: "Vue Docs UI Example"
+  description: "Example documentation website built with Vue Docs UI"
+  # Logo formats supported:
+  # 1. emoji: "🤖"
+  # 2. image URL: "https://example.com/logo.png"
+  # 3. local image: "/images/logo.png"
+  # 4. relative path: "./assets/logo.svg"
+  logo:
+    light: "/images/favicon.svg"
+    dark: "/images/favicon-dark.svg"
+  author: "Vue Docs UI Team"
+  
+# Navigation Bar Configuration
+navbar:
+  showLogo: true
+  showTitle: true
+  showLanguageSwitcher: true
+  items:
+    - title: "Home"
+      link: "/"
+      active: true
+    - title: "Guide"
+      link: "/guide"
+  actions:
+    - type: "github"
+      link: "https://github.com/shenjianZ/vue-docs-ui"
+      enabled: true
+
+# Sidebar Navigation Configuration
+sidebar:
+  enabled: true
+  collections:
+    guide:
+      sections:
+        - title: "Getting Started"
+          path: "/guide"
+          children:
+            - title: "Introduction"
+              path: "/guide/introduction"
+            - title: "Installation"
+              path: "/guide/installation"
+            - title: "Quick Start"
+              path: "/guide/quick-start"
+            - title: "Configuration"
+              path: "/guide/configuration"
+          
+
+# Theme Configuration
+theme:
+  # Default theme mode: 'light' | 'dark' | 'auto'
+  # light: Force light mode
+  # dark: Force dark mode
+  # auto: Follow system preference (default)
+  defaultMode: "auto"
+  
+  # Allow users to toggle theme (show theme toggle button)
+  allowToggle: true
+  
+
+# Table of Contents Configuration
+toc:
+  # Maximum heading level to display in TOC (1-6)
+  maxLevel: 3
+  
+  # Enable table of contents
+  enabled: true
+  
+  # TOC title
+  title: "On This Page" 
+
+# Footer Configuration
+footer:
+  enabled: true
+  copyright: "© 2024 Vue Docs UI. All rights reserved."
+  repository:
+    url: "https://github.com/your_github_id/your_repo_name"
+    branch: "master"
+  lastUpdated: "2024-12-19"
+  links:
+    - title: "Documentation"
+      link: "/guide/introduction"
+    - title: "GitHub"
+      link: "https://github.com/your_github_id/your_repo_name"
+      external: true
+    - title: "License"
+      link: "/license"
+  social:
+    - name: "email"
+      url: "mailto:contact@example.com"
+      icon: "mail"
+    - name: "github"
+      url: "https://github.com/your_github_id"
+      icon: "github"
+    # - name: "youtube"
+    #   url: "https://youtube.com/@yourhandle"
+    #   icon: "youtube"
+    # - name: "twitter"
+    #   url: "https://twitter.com/yourhandle"
+    #   icon: "twitter"
+    # - name: "discord"
+    #   url: "https://discord.gg/yourinvite"
+    #   icon: "discord"
+    # - name: "telegram"
+    #   url: "https://t.me/yourhandle"
+    #   icon: "telegram"
+    # - name: "tiktok"
+    #   url: "https://tiktok.com/@yourhandle"
+    #   icon: "tiktok"
+    - name: "bilibili"
+      url: "https://space.bilibili.com/your_bilibili_id"
+      icon: "bilibili"
+    - name: "qq"
+      url: "mqqapi://card/show_pslcard?src_type=internal&version=1&uin=your_qq_id&card_type=person&source=qrcode"
+      icon: "qq"
+    - name: "wechat"
+      url: "weixin://dl/add?your_wechat_id"
+      icon: "wechat"
+    # - name: "weibo"
+    #   url: "https://weibo.com/yourhandle"
+    #   icon: "weibo"
+    # - name: "douyin"
+    #   url: "https://www.douyin.com/user/yourhandle"
+    #   icon: "douyin"
+    # - name: "zhihu"
+    #   url: "https://www.zhihu.com/people/yourhandle"
+    #   icon: "zhihu" 
+
+# PWA Configuration
+pwa:
+  enabled: false
+  name: "Vue Docs UI"
+  shortName: "VueDocsUI"
+  description: "Beautiful documentation websites made simple"
+  themeColor: "#ffffff"
+  backgroundColor: "#ffffff" 

package/dist/config/site.yaml

@@ -0,0 +1,137 @@
+# 网站基本配置
+site:
+  title: "Vue Docs UI 示例项目"
+  description: "基于 Vue Docs UI 构建的文档网站示例"
+  # logo支持以下格式：
+  # 1. emoji: "🤖"
+  # 2. 图片URL: "https://example.com/logo.png"
+  # 3. 本地图片: "/images/logo.png"
+  # 4. 相对路径: "./assets/logo.svg"
+  logo:
+    light: "/images/favicon.svg"
+    dark: "/images/favicon-dark.svg"
+  author: "Vue Docs UI Team"
+  
+# 顶部导航配置
+navbar:
+  showLogo: true
+  showTitle: true
+  showLanguageSwitcher: true
+  items:
+    - title: "首页"
+      link: "/"
+      active: true
+    - title: "指南"
+      link: "/guide"
+  actions:
+    - type: "github"
+      link: "https://github.com/shenjianZ/vue-docs-ui"
+      enabled: true
+
+# 侧边栏导航配置
+sidebar:
+  enabled: true
+  collections:
+    guide:
+      sections:
+        - title: "快速开始"
+          path: "/guide"
+          children:
+            - title: "介绍"
+              path: "/guide/introduction"
+            - title: "安装"
+              path: "/guide/installation"
+            - title: "快速上手"
+              path: "/guide/quick-start"
+            - title: "配置说明"
+              path: "/guide/configuration"
+          
+
+# Theme Configuration
+theme:
+  # Default theme mode: 'light' | 'dark' | 'auto'
+  # light: Force light mode
+  # dark: Force dark mode
+  # auto: Follow system preference (default)
+  defaultMode: "auto"
+  
+  # Allow users to toggle theme (show theme toggle button)
+  allowToggle: true
+  
+
+# Table of Contents Configuration
+toc:
+  # Maximum heading level to display in TOC (1-6)
+  maxLevel: 3
+  
+  # Enable table of contents
+  enabled: true
+  
+  # TOC title
+  title: "本页目录"
+
+# Footer Configuration
+footer:
+  enabled: true
+  copyright: "© 2024 Vue Docs UI. All rights reserved."
+  repository:
+    url: "https://github.com/your_github_id/your_repo_name"
+    branch: "master"
+  lastUpdated: "2024-12-19"
+  links:
+    - title: "Documentation"
+      link: "/guide/introduction"
+    - title: "GitHub"
+      link: "https://github.com/your_github_id/your_repo_name"
+      external: true
+    - title: "License"
+      link: "/license"
+  social:
+    - name: "email"
+      url: "mailto:contact@example.com"
+      icon: "mail"
+    - name: "github"
+      url: "https://github.com/your_github_id"
+      icon: "github"
+    # - name: "youtube"
+    #   url: "https://youtube.com/@yourhandle"
+    #   icon: "youtube"
+    # - name: "twitter"
+    #   url: "https://twitter.com/yourhandle"
+    #   icon: "twitter"
+    # - name: "discord"
+    #   url: "https://discord.gg/yourinvite"
+    #   icon: "discord"
+    # - name: "telegram"
+    #   url: "https://t.me/yourhandle"
+    #   icon: "telegram"
+    # - name: "tiktok"
+    #   url: "https://tiktok.com/@yourhandle"
+    #   icon: "tiktok"
+    - name: "bilibili"
+      url: "https://space.bilibili.com/your_bilibili_id"
+      icon: "bilibili"
+    - name: "qq"
+      url: "mqqapi://card/show_pslcard?src_type=internal&version=1&uin=your_qq_id&card_type=person&source=qrcode"
+      icon: "qq"
+    - name: "wechat"
+      url: "weixin://dl/add?your_wechat_id"
+      icon: "wechat"
+    # - name: "weibo"
+    #   url: "https://weibo.com/yourhandle"
+    #   icon: "weibo"
+    # - name: "douyin"
+    #   url: "https://www.douyin.com/user/yourhandle"
+    #   icon: "douyin"
+    # - name: "zhihu"
+    #   url: "https://www.zhihu.com/people/yourhandle"
+    #   icon: "zhihu" 
+
+# PWA Configuration
+pwa:
+  enabled: true
+  name: "Vue Docs UI"
+  shortName: "VueDocsUI"
+  description: "Beautiful documentation websites made simple"
+  themeColor: "#ffffff"
+  backgroundColor: "#ffffff" 

package/dist/docs/en/guide/configuration.md

@@ -0,0 +1,69 @@
+# Configuration
+
+## Configuration Overview
+
+Vue Docs UI provides flexible configuration options that allow you to customize the appearance and behavior of your documentation website.
+
+## Basic Configuration
+
+### site.yaml File
+
+The configuration file is located at `public/config/site.yaml` and contains the following main sections:
+
+```yaml
+# Website Configuration
+site:
+  title: "Vue Docs UI"
+  description: "Beautiful documentation websites made simple"
+  logo: "📚"
+  author: "Vue Docs UI Team"
+```
+
+### Navigation Bar Configuration
+
+```yaml
+navbar:
+  items:
+    - title: "Home"
+      link: "/"
+      active: true
+    - title: "Documentation"
+      link: "/guide"
+```
+
+### Sidebar Configuration
+
+```yaml
+sidebar:
+  sections:
+    - title: "Getting Started"
+      path: "/guide"
+      children:
+        - title: "Introduction"
+          path: "/guide/introduction"
+```
+
+## Theme Configuration
+
+### Color Customization
+
+```yaml
+theme:
+  colors:
+    primary: "#3b82f6"
+    secondary: "#64748b"
+    accent: "#06b6d4"
+```
+
+### Font Configuration
+
+```yaml
+theme:
+  fonts:
+    primary: "Inter, -apple-system, BlinkMacSystemFont, sans-serif"
+    mono: "JetBrains Mono, Consolas, monospace"
+```
+
+## Advanced Configuration
+
+For more advanced configuration options, please refer to the related documentation. 

package/dist/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/dist/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! 📚*