create-react-docs-ui 0.1.0

package/index.js

@@ -0,0 +1,131 @@
+#!/usr/bin/env node
+
+import fs from 'node:fs'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+
+function copy(src, dest) {
+  const stat = fs.statSync(src)
+  if (stat.isDirectory()) {
+    copyDir(src, dest)
+  } else {
+    const destDir = path.dirname(dest)
+    fs.mkdirSync(destDir, { recursive: true })
+    fs.copyFileSync(src, dest)
+  }
+}
+
+function copyDir(srcDir, destDir) {
+  fs.mkdirSync(destDir, { recursive: true })
+  for (const file of fs.readdirSync(srcDir)) {
+    const srcFile = path.resolve(srcDir, file)
+    const destFile = path.resolve(destDir, file)
+    copy(srcFile, destFile)
+  }
+}
+
+function isEmpty(dirPath) {
+  const files = fs.existsSync(dirPath) ? fs.readdirSync(dirPath) : []
+  return files.length === 0 || (files.length === 1 && files[0] === '.git')
+}
+
+function emptyDir(dir) {
+  if (!fs.existsSync(dir)) return
+  for (const file of fs.readdirSync(dir)) {
+    if (file === '.git') continue
+    fs.rmSync(path.resolve(dir, file), { recursive: true, force: true })
+  }
+}
+
+function toValidPackageName(projectName) {
+  return projectName
+    .trim()
+    .toLowerCase()
+    .replace(/\s+/g, '-')
+    .replace(/^[._]/, '')
+    .replace(/[^a-z\d\-~]+/g, '-')
+}
+
+function findLocalReactLib() {
+  // Try to locate the built library in the monorepo for convenience
+  const repoRoot = path.resolve(__dirname, '..')
+  const reactLibDir = path.resolve(repoRoot, 'react-docs-ui')
+  const distEs = path.resolve(reactLibDir, 'dist', 'react-docs-ui.es.js')
+  if (fs.existsSync(distEs)) {
+    return reactLibDir
+  }
+  return null
+}
+
+async function init() {
+  const argTargetDir = process.argv[2]
+  let targetDir = argTargetDir || 'my-react-docs-project'
+
+  const getProjectName = () =>
+    targetDir === '.' ? path.basename(path.resolve()) : targetDir
+
+  const projectName = getProjectName()
+  const packageName = toValidPackageName(projectName)
+
+  console.log(`\n🚀 Creating React Docs UI project in ${targetDir}...`)
+
+  const root = path.join(process.cwd(), targetDir)
+  if (fs.existsSync(root)) {
+    if (!isEmpty(root)) {
+      console.log(`\n❌ Error: Target directory "${targetDir}" is not empty.`)
+      process.exit(1)
+    } else {
+      emptyDir(root)
+    }
+  }
+
+  console.log(`\n📁 Scaffolding project in ${root}...`)
+
+  const templateDir = path.resolve(__dirname, 'template')
+  const write = (file, content) => {
+    const targetPath = path.join(root, file)
+    if (content !== undefined) {
+      fs.mkdirSync(path.dirname(targetPath), { recursive: true })
+      fs.writeFileSync(targetPath, content)
+    } else {
+      copy(path.join(templateDir, file), targetPath)
+    }
+  }
+
+  // Copy static template except package.json for injection
+  const files = fs.readdirSync(templateDir)
+  for (const file of files.filter((f) => f !== 'package.json')) {
+    write(file)
+  }
+
+  // Prepare package.json
+  const pkg = JSON.parse(
+    fs.readFileSync(path.join(templateDir, 'package.json'), 'utf-8')
+  )
+  pkg.name = packageName
+
+  // If local lib exists, link it via file: for quick testing
+  const localLib = findLocalReactLib()
+  if (localLib) {
+    pkg.dependencies['react-docs-ui'] = `file:${path.relative(root, localLib).replace(/\\/g, '/')}`
+    console.log(`\n🔗 Using local react-docs-ui from: ${localLib}`)
+  }
+
+  write('package.json', JSON.stringify(pkg, null, 2) + '\n')
+
+  console.log(`\n✅ Done! Created ${projectName} at ${root}`)
+  console.log('\n📚 Get started with:')
+  console.log(`\n  cd ${targetDir}`)
+  console.log('  npm install')
+  console.log('  npm run dev')
+  console.log('\n🎉 Your React Docs UI project is ready!')
+}
+
+init().catch((e) => {
+  console.error(e)
+  process.exit(1)
+})
+
+

package/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "create-react-docs-ui",
+  "version": "0.1.0",
+  "private": false,
+  "type": "module",
+  "bin": {
+    "create-react-docs-ui": "./index.js"
+  },
+  "description": "Scaffold a React Docs UI project powered by @react-docs-ui/core",
+  "license": "MIT"
+}
+
+

package/template/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>React Docs UI</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+  </html>
+
+

package/template/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "my-react-docs-project",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react-docs-ui": "^0.1.0",
+    "buffer": "^6.0.3",
+    "react": ">=18",
+    "react-dom": ">=18",
+    "react-router-dom": "^7.8.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.9",
+    "@types/react-dom": "^19.1.7",
+    "@vitejs/plugin-react": "^4.7.0",
+    "typescript": "~5.8.3",
+    "vite": "^7.1.0"
+  }
+}

package/template/public/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/template/public/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/template/public/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/template/public/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.