create-react-docs-ui 0.3.0 → 0.4.0

package/template/src/components/Callout.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react'
+
+interface CalloutProps {
+  variant?: 'default' | 'primary' | 'secondary'
+  children: React.ReactNode
+}
+
+export function Callout({ variant = 'default', children }: CalloutProps) {
+  const styles = {
+    default: 'border-l-4 border-gray-500 bg-gray-50 dark:bg-gray-800',
+    primary: 'border-l-4 border-blue-500 bg-blue-50 dark:bg-blue-950',
+    secondary: 'border-l-4 border-purple-500 bg-purple-50 dark:bg-purple-950'
+  }
+
+  return (
+    <div className={`my-4 rounded-r-lg p-4 ${styles[variant]}`}>
+      {children}
+    </div>
+  )
+}

package/template/src/components/Feature.tsx

@@ -0,0 +1,15 @@
+interface FeatureProps {
+  icon?: string
+  title: string
+  description: string
+}
+
+export function Feature({ icon = '🚀', title, description }: FeatureProps) {
+  return (
+    <div className="my-4 rounded-lg border border-gray-200 p-6 shadow-sm hover:shadow-md transition-shadow dark:border-gray-700">
+      <div className="mb-3 text-4xl">{icon}</div>
+      <h3 className="mb-2 text-lg font-semibold">{title}</h3>
+      <p className="text-gray-600 dark:text-gray-300">{description}</p>
+    </div>
+  )
+}

package/template/src/components/MyTip.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+
+interface MyTipProps {
+  title?: string
+  children: React.ReactNode
+}
+
+export function MyTip({ title, children }: MyTipProps) {
+  return (
+    <div className="my-4 rounded-lg border border-green-200 bg-green-50 p-4 dark:border-green-800 dark:bg-green-950">
+      {title && (
+        <div className="mb-2 font-semibold text-green-900 dark:text-green-100">
+          💡 {title}
+        </div>
+      )}
+      <div className="text-green-800 dark:text-green-200">{children}</div>
+    </div>
+  )
+}

package/template/src/components/StepList.tsx

@@ -0,0 +1,62 @@
+import * as React from 'react'
+
+interface StepProps {
+  step: number
+  title: string
+  children: React.ReactNode
+}
+
+interface StepListProps {
+  children: React.ReactNode
+}
+
+function Step({ step, title, 'data-title': dataTitle, children }: StepProps & { 'data-title'?: string }) {
+  // 优先使用 title，如果没有则使用 data-title
+  const displayTitle = title || dataTitle
+  
+  return (
+    <div className="relative pb-8 last:pb-0">
+      <div className="absolute left-0 top-0 flex h-8 w-8 items-center justify-center rounded-full bg-blue-500 text-sm font-bold text-white">
+        {step}
+      </div>
+      <div className="ml-12">
+        <h4 className="mb-2 font-semibold">{displayTitle}</h4>
+        <div className="text-gray-600 dark:text-gray-300">{children}</div>
+      </div>
+    </div>
+  )
+}
+
+export function StepList({ children }: StepListProps) {
+  const steps = React.Children.toArray(children).filter(
+    (child): child is React.ReactElement<StepProps> => {
+      if (!React.isValidElement(child)) return false
+      
+      const childProps = child.props as any
+      
+      // 检查 props 中是否有 data-title 属性（通过我们的转换，title 变成了 data-title）
+      if (childProps && Object.prototype.hasOwnProperty.call(childProps, 'data-title')) return true
+      
+      // 检查 props 中是否有 node.tagName === 'steplist-step'
+      if (childProps?.node?.tagName === 'steplist-step') return true
+      
+      // 检查 props 中是否有 title 属性（直接使用的情况）
+      if (childProps && Object.prototype.hasOwnProperty.call(childProps, 'title')) return true
+      
+      return false
+    }
+  )
+
+  return (
+    <div className="my-4 rounded-lg border border-gray-200 p-6 dark:border-gray-700">
+      {steps.map((step, index) => 
+        React.cloneElement(step, { 
+          key: index,
+          step: index + 1 
+        })
+      )}
+    </div>
+  )
+}
+
+StepList.Step = Step

package/template/tsconfig.app.json

@@ -1,26 +1,24 @@
-{
-  "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"]
-}
-
-
+{
+    "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/vite-plugin-mdx-components.ts

@@ -0,0 +1,169 @@
+import type { Plugin } from 'vite'
+import fs from 'fs'
+import path from 'path'
+
+/**
+ * 从组件文件内容中提取复合组件的子组件
+ * 例如：从 StepList 组件中提取 StepList.Step
+ */
+function extractSubComponents(fileContent: string, componentName: string): string[] {
+  const subComponents: string[] = []
+  
+  // 匹配模式：ComponentName.SubComponent = SubComponent
+  const pattern1 = new RegExp(`${componentName}\\.(\\w+)\\s*=\\s*(\\w+)`, 'g')
+  let match
+  while ((match = pattern1.exec(fileContent)) !== null) {
+    const subComponentName = match[1]
+    if (!subComponents.includes(subComponentName)) {
+      subComponents.push(subComponentName)
+    }
+  }
+  
+  // 匹配模式：ComponentName.SubComponent = function SubComponent
+  const pattern2 = new RegExp(`${componentName}\\.(\\w+)\\s*=\\s*(?:function|const)\\s+(\\w+)`, 'g')
+  while ((match = pattern2.exec(fileContent)) !== null) {
+    const subComponentName = match[1]
+    if (!subComponents.includes(subComponentName)) {
+      subComponents.push(subComponentName)
+    }
+  }
+  
+  return subComponents
+}
+
+/**
+ * 创建一个 Vite 插件，用于自动扫描和注册 MDX 组件
+ * 这个插件会在构建时扫描 src/components 目录，并生成组件索引文件
+ */
+export function mdxComponentsPlugin(options: {
+  componentsPath?: string
+  outputPath?: string
+}): Plugin {
+  const {
+    componentsPath = './src/components',
+    outputPath = './src/generated/mdx-components.ts'
+  } = options
+
+  return {
+    name: 'mdx-components-scanner',
+    enforce: 'post',
+    buildStart() {
+      // 构建开始时，扫描组件并生成索引文件
+      try {
+        const componentsDir = path.resolve(process.cwd(), componentsPath)
+        
+        if (!fs.existsSync(componentsDir)) {
+          console.log(`[MDX] 组件目录不存在: ${componentsDir}`)
+          return
+        }
+        
+        // 递归扫描所有 .tsx 和 .ts 文件
+        const scanDirectory = (dir: string, baseDir: string = dir): string[] => {
+          const files: string[] = []
+          const entries = fs.readdirSync(dir, { withFileTypes: true })
+          
+          for (const entry of entries) {
+            const fullPath = path.join(dir, entry.name)
+            const relativePath = path.relative(baseDir, fullPath).replace(/\\/g, '/')
+            
+            if (entry.isDirectory()) {
+              files.push(...scanDirectory(fullPath, baseDir))
+            } else if (entry.isFile() && /\.(tsx?|jsx?)$/.test(entry.name)) {
+              const componentName = entry.name.replace(/\.(tsx?|jsx?)$/, '')
+              if (componentName !== 'index' && !componentName.startsWith('.')) {
+                files.push(relativePath)
+              }
+            }
+          }
+          
+          return files
+        }
+        
+        const componentFiles = scanDirectory(componentsDir)
+        
+        if (componentFiles.length === 0) {
+          console.log(`[MDX] 未找到任何组件文件`)
+          return
+        }
+        
+        console.log(`[MDX] 扫描到 ${componentFiles.length} 个组件:`)
+        componentFiles.forEach(file => console.log(`  - ${file}`))
+        
+        // 分析每个组件文件，提取子组件信息
+        const componentInfo: Array<{
+          file: string
+          componentName: string
+          subComponents: string[]
+        }> = []
+        
+        for (const file of componentFiles) {
+          const fullPath = path.join(componentsDir, file)
+          const componentName = path.basename(file).replace(/\.(tsx?|jsx?)$/, '')
+          const fileContent = fs.readFileSync(fullPath, 'utf-8')
+          const subComponents = extractSubComponents(fileContent, componentName)
+          
+          componentInfo.push({
+            file,
+            componentName,
+            subComponents
+          })
+          
+          if (subComponents.length > 0) {
+            console.log(`[MDX] 发现 ${componentName} 的子组件: ${subComponents.join(', ')}`)
+          }
+        }
+        
+        // 生成组件索引文件
+        const imports: string[] = []
+        const exports: string[] = []
+        const configEntries: string[] = []
+        
+        for (const info of componentInfo) {
+          const { file, componentName, subComponents } = info
+          const importPath = `../components/${file.replace(/\.(tsx?|jsx?)$/, '')}`
+          
+          // 导入主组件
+          imports.push(`import { ${componentName} } from '${importPath}'`)
+          exports.push(`  ${componentName},`)
+          configEntries.push(`  ${componentName}: '${importPath}'`)
+          
+          // 如果有子组件，也需要注册它们
+          for (const subComponent of subComponents) {
+            const subComponentKey = `${componentName}.${subComponent}`
+            exports.push(`  "${subComponentKey}": ${componentName}.${subComponent},`)
+            // 注意：子组件的配置指向父组件
+            configEntries.push(`  "${subComponentKey}": '${importPath}'`)
+          }
+        }
+        
+        const content = `// 自动生成的 MDX 组件索引文件
+// 请勿手动编辑此文件
+
+${imports.join('\n')}
+
+export const MDX_COMPONENTS = {
+${exports.join('\n')}
+}
+
+// 导出默认配置对象
+export const mdxComponentsConfig = {
+${configEntries.join(',\n')}
+}
+`
+        
+        // 确保输出目录存在
+        const outputDir = path.dirname(outputPath)
+        if (!fs.existsSync(outputDir)) {
+          fs.mkdirSync(outputDir, { recursive: true })
+        }
+        
+        // 写入文件
+        fs.writeFileSync(outputPath, content, 'utf-8')
+        console.log(`[MDX] 组件索引文件已生成: ${outputPath}`)
+        
+      } catch (error) {
+        console.error('[MDX] 扫描组件失败:', error)
+      }
+    }
+  }
+}

package/template/vite.config.ts

@@ -1,9 +1,16 @@
 // @ts-nocheck
 import react from "@vitejs/plugin-react"
 import { defineConfig } from "vite"
+import { mdxComponentsPlugin } from "./vite-plugin-mdx-components"
 
 export default defineConfig({
-  plugins: [react()],
+  plugins: [
+    react(),
+    mdxComponentsPlugin({
+      componentsPath: './src/components',
+      outputPath: './src/generated/mdx-components.ts'
+    })
+  ],
   resolve: {
     alias: {
       "@": "src",
@@ -14,6 +21,8 @@ export default defineConfig({
     host: "0.0.0.0",
     port: 5173,
   },
-})
-
-
+  build: {
+    // 提高 chunk 大小警告的阈值到 2000 kB
+    chunkSizeWarningLimit: 2000
+  }
+})

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

@@ -1,108 +0,0 @@
-# Quick Start
-
-This guide will walk you through creating, configuring, and running your own React documentation website from scratch in 5 minutes.
-
-## 1. Create the Project
-
-Using the official scaffolding tool is the most efficient way. Open your terminal and run the following command:
-
-```bash
-# This creates a project named "my-awesome-docs"
-npx create-react-docs-ui@latest my-awesome-docs
-```
-
-Next, enter the project directory and install the dependencies:
-
-```bash
-cd my-awesome-docs
-npm install
-```
-
-## 2. Organize Your Documents
-
-All your documentation content is stored as Markdown files in the `public/docs/` directory.
-
-- Open the `public/docs/en/` directory.
-- You can modify the existing `index.md` and files under the `guide` directory, or create new `.md` files.
-
-For example, let's create a new page. Create a new file named `about.md` in `public/docs/en/`:
-
-```markdown
----
-title: About Us
-description: This is a page about our team.
----
-
-# About Us
-
-We love open source and creation!
-```
-
-
-## 3. Configure the Website
-
-Now, let's display the newly created page by modifying the configuration file.
-
-Open the core configuration file `public/config/site.yaml`.
-
-### a. Modify Site Information
-
-Update the `site` section to give your website a new title and logo.
-
-```yaml
-site:
-  title: "My Awesome Docs"
-  description: "A website built with React Docs UI"
-  logo: "🚀" # You can use an emoji or an image path
-```
-
-### b. Add to the Navbar
-
-In the `navbar.items` array, add a link for the "About" page. Remember to update the links for the English version.
-
-```yaml
-navbar:
-  items:
-    - title: "Home"
-      link: "/en/"
-    - title: "Guide"
-      link: "/en/guide/introduction"
-    - title: "About"  # New
-      link: "/en/about" # New
-```
-
-### c. Add to the Sidebar
-
-To make the "About" page visible in the sidebar, we'll add a new entry in `sidebar.collections.guide.sections`. Make sure to use English paths.
-
-```yaml
-sidebar:
-  collections:
-    guide:
-      sections:
-        - title: "Getting Started"
-          path: "/en/guide"
-          children:
-            - title: "Introduction"
-              path: "/en/guide/introduction"
-            - title: "Installation"
-              path: "/en/guide/installation"
-            - title: "Quick Start"
-              path: "/en/guide/quick-start"
-        # You can create a new section for the "About" page
-        - title: "About Us"
-          path: "/en/about"
-          children:
-            - title: "About"
-              path: "/en/about"
-```
-
-## 4. Launch the Website
-
-Save all your changes and run the following command in your terminal:
-
-```bash
-npm run dev
-```
-
-Your website should now be running at `http://localhost:5173`. Visit it, and you will see the updated title, logo, and the new "About" link in the navbar and sidebar. Congratulations, you have successfully mastered the basic workflow of React Docs UI!

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

@@ -1,10 +0,0 @@
-# Guide
-
-This guide will help you fully understand and master all the features of React Docs UI. Whether you are a beginner or looking for in-depth customization, you will find the information you need here.
-
-## Table of Contents
-
-- **[Introduction](/guide/introduction)**: Learn about the core philosophy and main advantages of React Docs UI.
-- **[Installation](/guide/installation)**: Learn how to install via the scaffolding tool or manually.
-- **[Quick Start](/guide/quick-start)**: Create and run your first documentation website in 5 minutes.
-- **[Configuration (`site.yaml`)](/guide/configuration)**: Dive deep into each configuration option to take full control of your site.

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

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