U

Author: Onlylonger

.github/workflows/deploy.yml

@@ -53,7 +53,7 @@ jobs:
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v3
         with:
-          path: docs-dist
+          path: doc_build
 
   # Deployment job
   deploy:

docs/components/button/index.mdx

@@ -0,0 +1,9 @@
+# Button
+
+当和用户有交互场景引导的时候，可以使用 `Button` 组件进行引导。
+
+## Playground
+
+<code src="./playground.tsx" />
+
+## API

docs/components/button/playground.tsx

@@ -0,0 +1,7 @@
+import { Button } from '@shilong/react'
+
+function App() {
+  return <Button onClick={() => alert('Ooops')}>Click Me!</Button>
+}
+
+export default App

docs/components/toast.mdx

@@ -0,0 +1 @@
+# Toast

docs/index.mdx

@@ -1,4 +1,4 @@
-# Getting Started
+# Quick Start
 
 基于 `Tailwindcss` 的一个 `React` 组件库. 参考 `shadcn-ui` 实现. 目前只提供 `ES` 模块
 

docs/public/favicon.ico

@@ -54,6 +54,7 @@
     "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
+    "@rspress/plugin-playground": "^1.45.1",
     "@rspress/plugin-preview": "^1.45.1",
     "@tailwindcss/vite": "^4.1.11",
     "@testing-library/jest-dom": "^6.6.3",

docs/public/logo.png

@@ -1,20 +1,63 @@
 import { defineConfig } from 'rspress/config'
 import { pluginPreview } from '@rspress/plugin-preview'
+import { pluginPlayground } from '@rspress/plugin-playground'
 
 export default defineConfig({
   // 文档根目录
   root: 'docs',
+  icon: '/favicon.ico',
   themeConfig: {
     nav: [
       {
-        text: 'Home',
+        text: 'Quick Start',
         link: '/',
+        activeMatch: '^/index\.html$',
+      },
+      {
+        text: 'Components',
+        link: '/components/button',
+        activeMatch: '/components',
       },
     ],
+    sidebar: {
+      '/components': [
+        {
+          text: 'Button',
+          link: '/components/button',
+        },
+        {
+          text: 'Toast',
+          link: '/components/toast',
+        },
+        {
+          text: 'Popover',
+          link: '/components/popover',
+        },
+        {
+          text: 'Input',
+          link: '/components/input',
+        },
+        {
+          text: 'Tooltip',
+          link: '/components/tooltip',
+        },
+        {
+          text: 'Activity',
+          link: '/components/activity',
+        },
+        {
+          text: 'Skeleton',
+          link: '/components/skeleton',
+        },
+      ],
+    },
   },
   plugins: [
     pluginPreview({
       defaultRenderMode: 'pure',
     }),
+    pluginPlayground({
+      defaultRenderMode: 'pure',
+    }),
   ],
 })