react-docs-ui 0.1.5 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-docs-ui",
-  "version": "0.1.5",
+  "version": "0.2.0",
   "type": "module",
   "description": "React documentation site UI components — navigation, sidebar, search, code highlight, MDX rendering and theming to help you build docs fast.",
   "homepage": "https://shenjianZ.github.io/react-docs-ui",
@@ -16,7 +16,6 @@
     "documentation-site",
     "typescript"
   ],
-  "main": "dist/react-docs-ui.umd.js",
   "module": "dist/react-docs-ui.es.js",
   "types": "dist/types/index.d.ts",
   "files": [
@@ -26,8 +25,8 @@
   ],
   "exports": {
     ".": {
-      "import": "./dist/react-docs-ui.es.js",
-      "require": "./dist/react-docs-ui.umd.js"
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/react-docs-ui.es.js"
     },
     "./dist/react-docs-ui.css": "./dist/react-docs-ui.css"
   },
@@ -47,32 +46,29 @@
     "@radix-ui/react-scroll-area": "^1.2.9",
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-tooltip": "^1.2.7",
-    "@tailwindcss/vite": "^4.1.11",
-    "buffer": "^6.0.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
-    "glob": "^11.0.3",
     "gray-matter": "^4.0.3",
     "js-yaml": "^4.1.0",
-    "lowlight": "^3.3.0",
     "lucide-react": "^0.539.0",
     "next-themes": "^0.4.6",
-    "react": ">=18",
-    "react-dom": ">=18",
     "react-markdown": "^10.1.0",
-    "react-router-dom": "^7.8.0",
     "rehype-autolink-headings": "^7.1.0",
     "rehype-highlight": "^7.0.2",
-    "rehype-pretty-code": "^0.14.1",
     "rehype-raw": "^7.0.0",
     "rehype-slug": "^6.0.0",
     "remark-gfm": "^4.0.1",
-    "shiki": "^3.9.2",
-    "tailwind-merge": "^3.3.1",
-    "tailwindcss": "^4.1.11"
+    "tailwind-merge": "^3.3.1"
   },
   "devDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "buffer": "^6.0.3",
+    "glob": "^11.0.3",
+    "@tailwindcss/vite": "^4.1.11",
+    "react-router-dom": "^7.8.0",
+    "tailwindcss": "^4.1.11",
     "@eslint/js": "^9.32.0",
     "@types/node": "^24.2.1",
     "@types/react": "^19.1.9",
@@ -91,6 +87,10 @@
   },
   "peerDependencies": {
     "react": ">=18",
-    "react-dom": ">=18"
+    "react-dom": ">=18",
+    "react-router-dom": "^7"
+  },
+  "engines": {
+    "node": ">=18"
   }
 }

package/dist/config/ai.json

@@ -1,60 +0,0 @@
-{
-  "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

@@ -1,137 +0,0 @@
-# Website Configuration
-site:
-  title: "React Docs UI Example"
-  description: "Example documentation website built with React 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: "React 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/React-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 React 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: "React Docs UI"
-  shortName: "ReactDocsUI"
-  description: "Beautiful documentation websites made simple"
-  themeColor: "#ffffff"
-  backgroundColor: "#ffffff" 

package/dist/config/site.yaml

@@ -1,137 +0,0 @@
-# 网站基本配置
-site:
-  title: "React Docs UI 示例项目"
-  description: "基于 React 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: "React 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/React-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 React 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: "React Docs UI"
-  shortName: "ReactDocsUI"
-  description: "Beautiful documentation websites made simple"
-  themeColor: "#ffffff"
-  backgroundColor: "#ffffff" 

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

@@ -1,149 +0,0 @@
-# Configuration File (`site.yaml`) Explained
-
-The project is configuration-driven. Most behavior is defined in `public/config/site.yaml`. This page documents every field using concise tables.
-
-## Top-level keys
-| Key | Purpose |
-| :-- | :-- |
-| `site` | Global metadata like title, description, logo, author |
-| `navbar` | Top navigation bar (logo/title toggles, items, actions) |
-| `sidebar` | Left navigation tree (collections/sections/children) |
-| `theme` | Theme options (default mode, toggle) |
-| `toc` | Article table of contents (enabled, levels, title) |
-| `footer` | Footer links, socials, repository meta |
-| `pwa` | Progressive Web App settings (reserved/optional) |
-
----
-
-## `site`
-| Field | Type | Description | Example |
-| :-- | :-- | :-- | :-- |
-| `title` | string | Site title | `"React Docs UI Example"` |
-| `description` | string | Short site description (SEO) | `"Beautiful docs made simple"` |
-| `logo` | string or object | Logo to display. String can be emoji or image path. Object allows light/dark images. | `"📚"`, `"/images/logo.png"`, or `{ light: "/images/favicon.svg", dark: "/images/favicon-dark.svg" }` |
-| `author` | string | Site author/organization | `"React Docs UI Team"` |
-
-Logo formats supported:
-- Emoji: `"🚀"`
-- URL or public path: `"/images/logo.png"`
-- Light/Dark object: `{ light, dark }`
-
----
-
-## `navbar`
-| Field | Type | Description |
-| :-- | :-- | :-- |
-| `showLogo` | boolean | Show logo at top-left |
-| `showTitle` | boolean | Show site title in navbar |
-| `showLanguageSwitcher` | boolean | Show language switcher |
-| `items` | array<Item> | Primary navigation links |
-| `actions` | array<Action> | Right-side action buttons (e.g. GitHub) |
-
-Item
-| Field | Type | Description | Example |
-| :-- | :-- | :-- | :-- |
-| `title` | string | Link text | `"Guide"` |
-| `link` | string | Path or URL. Internal paths start with `/`. | `"/guide"` |
-| `external` | boolean (optional) | Open in new tab if true |
-| `visible` | boolean (optional) | Conditionally hide/show |
-
-Action
-| Field | Type | Description | Example |
-| :-- | :-- | :-- | :-- |
-| `type` | `"github"` or `"custom"` (optional) | Predefined or custom action | `"github"` |
-| `title` | string (optional) | Button text when `type` is `custom` |
-| `link` | string | Destination URL |
-| `icon` | string (optional) | Icon name for custom action |
-| `enabled` | boolean (optional) | Toggle the action |
-
----
-
-## `sidebar`
-| Field | Type | Description |
-| :-- | :-- | :-- |
-| `enabled` | boolean (optional) | Global toggle for sidebar |
-| `collections` | record<string, Collection> | Map of top-level sections (e.g. `guide`) |
-| `sections` | Section[] (legacy, optional) | Backward-compatible single-tree definition |
-
-Collection
-| Field | Type | Description |
-| :-- | :-- | :-- |
-| `sections` | Section[] | Grouped side-nav sections |
-
-Section
-| Field | Type | Description | Example |
-| :-- | :-- | :-- | :-- |
-| `title` | string | Section title | `"Getting Started"` |
-| `path` | string | Base path that expands/highlights this section | `"/guide"` |
-| `children` | Child[] (optional) | Leaf links under the section |
-
-Child
-| Field | Type | Description | Example |
-| :-- | :-- | :-- | :-- |
-| `title` | string | Link text | `"Introduction"` |
-| `path` | string | Full page path | `"/guide/introduction"` |
-
----
-
-## `theme`
-| Field | Type | Description | Options | Default |
-| :-- | :-- | :-- | :-- | :-- |
-| `defaultMode` | string | Default color mode | `light`, `dark`, `auto` | `auto` |
-| `allowToggle` | boolean | Allow user theme switching | `true`/`false` | `true` |
-
----
-
-## `toc`
-| Field | Type | Description | Example |
-| :-- | :-- | :-- | :-- |
-| `enabled` | boolean | Enable page table of contents | `true` |
-| `maxLevel` | number (1-6) | Max heading depth to show | `3` |
-| `title` | string | TOC panel title | `"On This Page"` |
-
-Note: Per-page TOC visibility/anchors are also affected by page frontmatter.
-
----
-
-## `footer`
-| Field | Type | Description |
-| :-- | :-- | :-- |
-| `enabled` | boolean | Show footer |
-| `copyright` | string | Copyright text |
-| `repository` | Repository (optional) | Repo info used for links like “Edit this page” |
-| `lastUpdated` | string (optional) | Site/content last update date |
-| `links` | Link[] (optional) | Footer link columns |
-| `social` | Social[] (optional) | Social icon links |
-
-Repository
-| Field | Type | Description | Example |
-| :-- | :-- | :-- | :-- |
-| `url` | string | Repository URL | `"https://github.com/user/repo"` |
-| `branch` | string | Docs branch | `"main"` |
-
-Link
-| Field | Type | Description |
-| :-- | :-- | :-- |
-| `title` | string | Link title |
-| `link` | string | Path or URL |
-| `external` | boolean (optional) | Open in new tab |
-
-Social
-| Field | Type | Description |
-| :-- | :-- | :-- |
-| `name` | string | Provider key (e.g. `github`, `twitter`, `bilibili`) |
-| `url` | string | Profile or link URL |
-| `icon` | string | Icon name |
-
----
-
-## `pwa` (optional)
-| Field | Type | Description |
-| :-- | :-- | :-- |
-| `enabled` | boolean | Enable PWA features (reserved) |
-| `name` | string | App name |
-| `shortName` | string | Short app name |
-| `description` | string | App description |
-| `themeColor` | string | Theme color |
-| `backgroundColor` | string | Background color |
-
----

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

@@ -1,63 +0,0 @@
-# Installation
-
-## Prerequisites
-
-Before you begin, make sure your development environment meets the following requirements:
-
-- **Node.js**: Version `>= 18.0.0`
-- **Package Manager**: `npm`, `yarn`, or `pnpm`
-
-## Recommended Method: Use the Scaffolding Tool
-
-We strongly recommend using the official `create-react-docs-ui` scaffolding tool to create your new documentation project. This is the fastest and easiest way to ensure all configurations are set up correctly.
-
-1.  **Run the creation command**:
-    ```bash
-    npx create-react-docs-ui@latest my-docs
-    ```
-    This will create a new folder named `my-docs` in the current directory.
-
-2.  **Enter the project and install dependencies**:
-    ```bash
-    cd my-docs
-    npm install
-    ```
-
-3.  **Start the development server**:
-    ```bash
-    npm run dev
-    ```
-    Your documentation website is now running at `http://localhost:5173` (or another available port).
-
-## Manual Installation (for existing projects)
-
-If you want to manually integrate `react-docs-ui` into an existing Vite + React project, follow these steps:
-
-1.  **Install the core library**:
-    ```bash
-    npm install react-docs-ui
-    ```
-
-2.  **Create configuration files**:
-    In your `public` directory, create a `config` folder, and inside it, create a `site.yaml` file. You can copy a basic template from [here](https://github.com/shenjianZ/react-docs-ui/blob/main/react-docs-ui/public/config/site.yaml).
-
-3.  **Create the documentation directory**:
-    In your `public` directory, create a `docs` folder to store your Markdown files. For example: `public/docs/en/index.md`.
-
-4.  **Modify the application entry file**:
-    Update your `src/main.tsx` (or `main.jsx`) file to render the `DocsApp` component to initialize the application.
-
-    ```tsx
-    // src/main.tsx
-    import React from 'react'
-    import ReactDOM from 'react-dom/client'
-    import { DocsApp } from 'react-docs-ui'
-    import 'react-docs-ui/dist/style.css' // Import core styles
-
-    ReactDOM.createRoot(document.getElementById('root')!).render(
-      <React.StrictMode>
-        <DocsApp />
-      </React.StrictMode>,
-    )
-    ```
-5.  **Ensure your `index.html` contains `<div id="root"></div>`**

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

@@ -1,28 +0,0 @@
-# Introduction
-
-React Docs UI is a React component library and toolset designed specifically for building modern documentation websites. Its core philosophy is **configuration over code**, allowing you to focus entirely on content creation.
-
-## Core Advantages
-
-- **Configuration-Driven**: This is the core feature of React Docs UI. You don't need to write complex React components or routing logic; just maintain a clear `site.yaml` file to define everything from the site's navigation and sidebar to its theme and footer.
-
-- **Fully-Featured**: Out-of-the-box, it provides everything a modern documentation website needs:
-  - Responsive layout
-  - Light/dark theme switching
-  - Markdown-based content rendering (with GFM and Frontmatter support)
-  - Built-in code syntax highlighting
-  - Quick command menu (Cmd+K)
-  - Internationalization support
-
-- **Extremely Simple to Start**: With the official `create-react-docs-ui` scaffolding tool, you can launch a fully functional documentation website in under a minute, without any complex environment setup.
-
-- **Highly Customizable**: While it works out-of-the-box, every part (like the logo, color scheme, navigation links, social media icons, etc.) can be deeply customized through the configuration file.
-
-## Use Cases
-
-Whether you are an individual developer or part of a team, React Docs UI is perfect for the following scenarios:
-
-- **Open Source Project Documentation**: Provide a professional and easy-to-maintain documentation site for your React project.
-- **Product Manuals**: Clearly present your product's features and usage guides.
-- **Team Knowledge Bases**: Build and share knowledge based on React technology within your team.
-- **Personal Blogs or Portfolios**: Organize and display your technical articles or projects in an elegant way.