feat: 增加演示Demo展示入口，优化配置文件 (#173)

* feat: 支持示例项目的显示

* feat: 支持示例项目的显示

* feat: 增加演示Demo展示入口，优化配置文件

* chore: update

Author: mmdapl

.github/workflows/CI.yml

@@ -1,9 +1,7 @@
-# 代码检查
 name: CI
 
 # 触发条件
 on:
-  # 提PR到next分支触发CI
   pull_request:
     branches:
       - next
@@ -55,9 +53,9 @@ jobs:
           ./scripts/ci
 
       # Eslint 检测
-      #      - name: Code LintFix By ESLint
-      #        run: |
-      #          npx eslint .
+      - name: Code LintFix By ESLint
+        run: |
+          pnpm lint
 
       # 编辑模块代码
       - name: Build Package Code

.vitepress/config.ts

@@ -140,6 +140,8 @@ export default defineConfig({
   rewrites: {
     ':packages/:pkg/README.md': ':packages/:pkg/index.md',
     ':packages/:pkg/CHANGELOG.md': 'changelogs/:pkg/changelog.md',
+    ':apps/:pkg/README.md': ':apps/:pkg/index.md',
+    ':apps/:pkg/CHANGELOG.md': 'changelogs/:pkg/changelog.md',
     'CHANGELOG.md': 'changelogs/core-x/changelog.md',
     'README.md': 'index.md',
   },
@@ -148,6 +150,7 @@ export default defineConfig({
     resolve: {
       alias: {
         '@packages': path.resolve(__dirname, '../packages'),
+        '@apps': path.resolve(__dirname, '../apps'),
       },
     },
     plugins: [

.vitepress/sidebar.ts

@@ -8,6 +8,7 @@ enum ProjectId {
   Nest = 'Nest.js框架',
   Blog = '博客工具',
   Infra = '工程化',
+  Demo = '演示Demo',
 }
 
 /**
@@ -61,24 +62,47 @@ export const sidebarConfig: DefaultTheme.SidebarItem[] = [
       { text: '@142vip/vuepress', link: '/packages/vuepress/index.md' },
     ],
   },
+  {
+    text: `🎮 ${ProjectId.Demo}`,
+    items: [
+      { text: 'vitepress-demo', link: '/apps/vitepress-demo/index.md' },
+      { text: 'vuepress-demo', link: '/apps/vuepress-demo/index.md' },
+    ],
+  },
 ]
 
 /**
  * 获取基本包信息
  * - 注意目录格式，例如：@packages/utils
  */
 async function getBasePkgJSON(pkgDirName: string) {
+  // 参考格式：@packages/xxx @apps/xxx
+
   const pkgJSON = await import(`@packages/${pkgDirName}/package.json`)
   return pick(pkgJSON, ['name', 'description', 'version', 'private'])
 }
 
+/**
+ * 获取apps目录下的模块
+ * - @apps/vitepress-demo
+ */
+async function getAppsPkgJSON(pkgDirName: string) {
+  // 参考格式：@packages/xxx @apps/xxx
+  const pkgJSON = await import(`@apps/${pkgDirName}/package.json`)
+  return pick(pkgJSON, ['name', 'description', 'version', 'private'])
+}
+
 /**
  * 动态获取模块信息
  * - 注意：遍历侧边栏
  */
 export async function getCoreProjectData(): Promise<VipProject[]> {
   const coreProjects: VipProject[] = []
   for (const { items, text } of sidebarConfig) {
+    // 过滤掉apps下的模块
+    if (text?.includes(ProjectId.Demo)) {
+      continue
+    }
     for (const { text: pkgName } of items) {
       const pkgDirName = pkgName.split('@142vip/')[1]
       const basePkg = await getBasePkgJSON(`${pkgDirName}`)
@@ -95,14 +119,36 @@ export async function getCoreProjectData(): Promise<VipProject[]> {
   return coreProjects
 }
 
+/**
+ * demo项目
+ */
+export async function getExampleDemoTableData() {
+  const pkgNames = ['vuepress-demo', 'vitepress-demo']
+
+  const exampleDemos = []
+  for (const pkgDirName of pkgNames) {
+    const pkg = await getAppsPkgJSON(`${pkgDirName}`)
+    exampleDemos.push({
+      ...pkg,
+      private: true,
+      id: '🤡',
+      changelog: `../apps/${pkgDirName}/changelog.html`,
+      readme: `../apps/${pkgDirName}/index.html`,
+      sourceCode: `https://github.com/142vip/core-x/tree/main/apps/${pkgDirName}/`,
+    })
+  }
+  return exampleDemos
+}
+
 /**
  * 根据侧边栏获取变更日志侧边栏
  */
 export function getChangelogsSidebar() {
   const changelogsSidebar: DefaultTheme.SidebarItem[] = []
   for (const { items } of sidebarConfig) {
     for (const { text: pkgName } of items) {
-      const pkgDirName = pkgName.split('@142vip/')[1]
+      // 兼容apps目录
+      const pkgDirName = pkgName?.includes('@142vip') ? pkgName.split('@142vip/')[1] : pkgName
       changelogsSidebar.push({
         text: pkgName,
         link: `/changelogs/${pkgDirName}/changelog.md`,

.vitepress/theme/components/HomePage.vue

@@ -8,10 +8,11 @@ import {
 } from '@142vip/vitepress/components'
 import { useData } from 'vitepress'
 import { ElImage } from 'element-plus'
-import { getCoreProjectData } from '../../sidebar'
+import { getCoreProjectData, getExampleDemoTableData } from '../../sidebar'
 
 const { isDark } = useData()
-const tableData = ref<any[]>([])
+const coreProjectTableData = ref<any[]>([])
+const exampleDemoTableData = ref()
 
 defineComponent({
   components: {
@@ -23,14 +24,16 @@ defineComponent({
  * 异步加载表格数据
  */
 onMounted(async () => {
-  tableData.value = await getCoreProjectData()
+  coreProjectTableData.value = await getCoreProjectData()
+  exampleDemoTableData.value = await getExampleDemoTableData()
 })
 </script>
 
 <!-- 首页 -->
 <template>
   <section id="version-table">
-    <VipProjectTable :data="tableData" title="开源" />
+    <VipProjectTable :data="exampleDemoTableData" title="演示Demo" />
+    <VipProjectTable :data="coreProjectTableData" title="开源模块" />
   </section>
 
   <VipTeam />

apps/vitepress-demo/CHANGELOG.md

@@ -4,14 +4,12 @@ All notable changes to this project will be documented in this file. See [commit
 
 <!-- #region recent-alpha -->
 
-
-
-<!-- #endregion recent-alpha -->
-
 ## v0.0.1-alpha.1 (2024-10-17)
 
 ### ✨ Features
 
 - 增加`vitepress-demo`演示模块，简化`@142vip/vitepress`模块使用配置 &nbsp;-&nbsp; by **chufan** [<samp>(f6797)</samp>](https://github.com/142vip/core-x/commit/f679759)
 
-**Release New Version v0.0.1-alpha.1 [👉 View New Package On NPM](https://www.npmjs.com/package/vitepress-demo)**
+**Release New Version v0.0.1-alpha.1 [👉 View New Package On NPM](https://www.npmjs.com/package/vitepress-demo)**
+
+<!-- #endregion recent-alpha -->

apps/vuepress-demo/vuepress.config.ts

@@ -38,7 +38,6 @@ export default defineUserConfig({
         return str
       },
     },
-    // md doc formatter  headerDepth
     headers: {
       level: [2, 3, 4],
     },