feat(vuepress-demo): 引入@142vip/utils模块，调整Demo基本结构和主题配置 (#157)

* feat(vuepress-demo): 引入`@142vip/utils`模块，调整`Demo`基本结构

* chore: update

---------

Co-authored-by: chufan <mmdapl@163.com>

Author: 微信公众号：储凡

apps/vuepress-demo/README.md

@@ -2,6 +2,20 @@
 
 ## 介绍
 
+```bash
+# 在项目根目录下载依赖
+pnpm i
+
+# 切换到vuepress-demo根目录
+cd apps/vuepress-demo
+
+# 本地启动
+pnpm dev
+
+# 本地编译
+pnpm build
+```
+
 ## 证书
 
 [MIT](https://opensource.org/license/MIT)

apps/vuepress-demo/docs/.vuepress/theme/READEME.md

@@ -36,6 +36,9 @@ pnpm i @vuepress/bundler-vite@2.0.0-rc.17 -D
 
 # 安装@142vip/vuepress模块
 pnpm i @142vip/vuepress -D
+
+# 安装@142vip/utils模块
+pnpm i @142vip/utils -D
 ```
 
 ## 基本使用

apps/vuepress-demo/docs/.vuepress/theme/sidebar.ts

@@ -1,9 +1,9 @@
-import { navbar } from 'vuepress-theme-hope'
+import { navbar, sidebar } from 'vuepress-theme-hope'
 
 /**
- * 导航栏配置
+ * 导航栏
  */
-export default navbar([
+export const navbarConfig = navbar([
   {
     text: '🌐 首页',
     link: '/',
@@ -49,3 +49,30 @@ export default navbar([
     ],
   },
 ])
+
+/**
+ * 侧边栏
+ */
+export const sidebarConfig = sidebar({
+  '/example': [
+    {
+      text: '示例文档',
+      // prefix: 'example',
+      collapsible: false,
+      children: [
+        {
+          text: '示例文档-1',
+          link: 'test-1.md',
+        },
+        {
+          text: '示例文档-2',
+          link: 'test-2.md',
+        },
+        {
+          text: '示例文档-3',
+          link: 'test-3.md',
+        },
+      ],
+    },
+  ],
+})

apps/vuepress-demo/docs/README.md

@@ -16,6 +16,7 @@
     "build": "vuepress build docs"
   },
   "devDependencies": {
+    "@142vip/utils": "workspace:*",
     "@142vip/vuepress": "workspace:*",
     "@vuepress/bundler-vite": "2.0.0-rc.17",
     "vuepress": "2.0.0-rc.17"

apps/vuepress-demo/docs/.vuepress/theme/navbar.ts renamed to apps/vuepress-demo/docs/theme.config.ts

@@ -7,20 +7,17 @@ import {
   exampleHeaders,
   getCopyRightText,
   getFooterHtml,
-  getSiteBase,
   getThemeConfig,
   getViteBundler,
 } from '@142vip/vuepress'
-import navbar from './docs/.vuepress/theme/navbar'
-import sidebar from './docs/.vuepress/theme/sidebar'
+import { getDocSiteBase } from '@142vip/utils'
 
-// 当前目录名
-const __dirname = getDirname(import.meta.url)
+import { navbarConfig, sidebarConfig } from './docs/theme.config'
 
 const pkg = createRequire(import.meta.url)('./package.json')
 
 export default defineUserConfig({
-  base: getSiteBase(),
+  base: getDocSiteBase(''),
   title: pkg.name,
   description: pkg.description,
   port: 5200,
@@ -30,6 +27,8 @@ export default defineUserConfig({
     // todo 引入代码文件时的路径替换 https://vuejs.press/zh/guide/markdown.html#%E5%AF%BC%E5%85%A5%E4%BB%A3%E7%A0%81%E5%9D%97
     importCode: {
       handleImportPath: (str) => {
+        // 当前目录名
+        const __dirname = getDirname(import.meta.url)
         if (str.includes('@code')) {
           return str.replace(/^@code/, path.resolve(__dirname, 'code/'))
         }
@@ -47,9 +46,9 @@ export default defineUserConfig({
   // 主题配置
   theme: hopeTheme(getThemeConfig({
     // 导航栏
-    navbar,
+    navbar: navbarConfig,
     // 侧边栏
-    sidebar,
+    sidebar: sidebarConfig,
     // 页脚
     footer: getFooterHtml({
       name: pkg.name,