feat(vitepress-demo): 增加vitepress-demo演示模块，简化@142vip/vitepress模块使用配置

142vip · Oct 17, 2024 · f679759 · f679759
1 parent ef96ba7
commit f679759
Show file tree

Hide file tree

Showing 14 changed files with 569 additions and 1 deletion.
diff --git a/apps/vitepress-demo/.vitepress/config.ts b/apps/vitepress-demo/.vitepress/config.ts
@@ -0,0 +1,145 @@
+import path from 'node:path'
+import { defineConfig } from 'vitepress'
+import { getThemeConfig, getVipFooter, zhSearch } from '@142vip/vitepress'
+import { OPEN_SOURCE_ADDRESS, getDocSiteBase } from '@142vip/utils'
+import type { DefaultTheme } from 'vitepress/types/default-theme'
+import { name as pkgName, version as pkgVersion } from '../package.json'
+
+/**
+ * 导航栏
+ */
+const navbarConfig: DefaultTheme.NavItem[] = [
+  { text: '🔥 首页', link: '/docs/index.md' },
+  {
+    text: '💻 示例文档',
+    items: [
+      { text: '👩🏻‍💻 示例文档-1', link: '/docs/example/test-1.md' },
+      { text: '👨🏻‍💻 示例文档-2', link: '/docs/example/test-2.md' },
+      { text: '👨🏻 示例文档-3', link: '/docs/example/test-3.md' },
+    ],
+  },
+  {
+    text: `⚡ ${pkgVersion}`,
+    items: [
+      { text: '🎉 历史版本', link: `${OPEN_SOURCE_ADDRESS.GITHUB_REPO_CORE_X}/releases` },
+      { text: '📄 更新日志', link: `${OPEN_SOURCE_ADDRESS.GITHUB_REPO_CORE_X}/blob/main/CHANGELOG.md` },
+      {
+        text: '开源博客',
+        items: [
+          { text: '🤡 408CSFamily', link: 'https://142vip-cn.feishu.cn/share/base/view/shrcnuuRDWBoHLmYaknXWFuhR4d' },
+          { text: '📘 JavaScriptCollection', link: 'https://142vip.github.io/JavaScriptCollection/' },
+        ],
+      },
+    ],
+  },
+]
+
+/**
+ * 侧边栏
+ */
+const sidebarConfig: DefaultTheme.SidebarItem[] = [
+  {
+    text: '示例文档',
+    collapsed: false,
+    items: [
+      { text: '示例文档-1', link: '/docs/example/test-1.md' },
+      { text: '示例文档-2', link: '/docs/example/test-2.md' },
+      { text: '示例文档-3', link: '/docs/example/test-3.md' },
+    ],
+  },
+]
+
+/**
+ * 所有配置
+ */
+export default defineConfig({
+  base: getDocSiteBase('core-x'),
+  lang: 'zh-CN',
+  title: '@142vip/vitepress-demo',
+  titleTemplate: ':title - @142vip/core-x',
+  description: '@142vip/vitepress包的使用Demo演示',
+  srcDir: './',
+  // 排除部分
+  srcExclude: [
+  ],
+  // 编译输出目录
+  outDir: './dist',
+  // dev 模式下的缓存目录，默认cache
+  cacheDir: './.vitepress/.vite',
+  assetsDir: 'static',
+  metaChunk: true,
+  head: [
+    ['meta', { name: 'theme-color', content: '#3c8772' }],
+    ['meta', { property: 'og:url', content: 'https://github.com/142vip/core-x' }],
+    ['meta', { property: 'og:type', content: 'website' }],
+    ['meta', { property: 'og:title', content: '@142vip/core-x' }],
+    ['meta', { property: 'og:description', content: `${pkgName} - @142vip/vitepress-demo演示项目` }],
+  ],
+  // markdown
+  markdown: {
+    theme: {
+      dark: 'dracula-soft',
+      light: 'vitesse-light',
+    },
+    attrs: {
+      leftDelimiter: '%{',
+      rightDelimiter: '}%',
+    },
+
+  },
+  // 配置主题
+  ...getThemeConfig({
+    // 导航栏
+    nav: navbarConfig,
+    sidebar: {
+      '/': sidebarConfig,
+    },
+    // 页脚
+    footer: getVipFooter({
+      license: OPEN_SOURCE_ADDRESS.GITHUB_REPO_CORE_X,
+      pkgName,
+      pkgVersion,
+      orgLink: OPEN_SOURCE_ADDRESS.HOME_PAGE_VIP,
+      ownerLink: OPEN_SOURCE_ADDRESS.HOME_PAGE_MMDAPL,
+    }),
+
+    // 搜索
+    search: {
+      provider: 'algolia',
+      options: {
+        appId: '69JA242WYX',
+        apiKey: 'dec73bdf3277684a92aaa734e3b776c0',
+        indexName: 'core-x',
+        locales: {
+          // 支持中文搜索
+          ...zhSearch,
+        },
+      },
+    },
+    // 一些链接
+    socialLinks: [
+      { icon: 'github', link: OPEN_SOURCE_ADDRESS.GITHUB_REPO_CORE_X },
+      { icon: 'npm', link: 'https://www.npmjs.com/~mmdapl' },
+    ],
+    // 编辑链接
+    editLink: {
+      pattern: `${OPEN_SOURCE_ADDRESS.GITHUB_REPO_CORE_X}/edit/next/:path`,
+      text: '在 Github 上对本页提出修改建议',
+    },
+  }),
+  // 路径重写
+  rewrites: {
+    'CHANGELOG.md': 'changelog.md',
+    'README.md': 'index.md',
+  },
+  // 编译时路径别名
+  vite: {
+    resolve: {
+      alias: {
+        '@packages': path.resolve(__dirname, '../packages'),
+      },
+    },
+    plugins: [
+    ],
+  },
+})
diff --git a/apps/vitepress-demo/.vitepress/theme/components/HomePage.vue b/apps/vitepress-demo/.vitepress/theme/components/HomePage.vue
@@ -0,0 +1,129 @@
+<script lang="ts" setup>
+import { defineComponent, onMounted, ref } from 'vue'
+import {
+  VipBackTop,
+  VipContactAuthor,
+  VipProjectTable,
+  VipTeam,
+} from '@142vip/vitepress/components'
+import { useData } from 'vitepress'
+import { ElImage } from 'element-plus'
+
+const { isDark } = useData()
+const tableData = ref<any[]>([])
+
+defineComponent({
+  components: {
+    ElImage,
+  },
+})
+
+/**
+ * 异步加载表格数据
+ */
+onMounted(async () => {
+  tableData.value = []
+})
+</script>
+
+<!-- 首页 -->
+<template>
+  <section id="version-table">
+    <VipProjectTable :data="tableData" title="开源" />
+  </section>
+
+  <VipTeam />
+
+  <section id="sponsors">
+    <h2>赞赏列表</h2>
+    <blockquote>
+      排名不分先后， <strong>赞赏过的一定要微信跟我说呀！！！！！！</strong>
+    </blockquote>
+    <div>
+      <a href="https://github.com/ChiefPing" target="_blank">
+        <img
+          alt="ChiefPing"
+          class="image-border"
+          src="https://avatars2.githubusercontent.com/u/34122068?s=460&v=4"
+          title="ChiefPing"
+        >
+      </a>
+      <a href="https://github.com/xiaoliuxin" target="_blank">
+        <img
+          alt="xiaoliuxin"
+          class="image-border"
+          src="https://avatars2.githubusercontent.com/u/60652527?s=460&v=4"
+          title="xiaoliuxin"
+        >
+      </a>
+    </div>
+    <h2>赞助商</h2>
+    <blockquote>
+      以下排名不分先后! 还木有收到赞助，哈哈哈，先留坑
+    </blockquote>
+  </section>
+
+  <section id="contributions">
+    <h2>贡献</h2>
+
+    <blockquote>
+      感谢所有参与仓库建设的开发者
+    </blockquote>
+
+    <a href="https://github.com/142vip/core-x/graphs/contributors">
+      <img
+        alt="感谢向仓库提交PR的所有开发者"
+        src="https://contrib.rocks/image?repo=142vip/core-x"
+        title="@142vip/core-x"
+      >
+    </a>
+  </section>
+
+  <section id="trending">
+    <h2>趋势</h2>
+    <!-- 支持黑色主题 -->
+    <div class="star-history">
+      <ElImage
+        :src="`https://api.star-history.com/svg?repos=142vip/core-x,142vip/408CSFamily,142vip/JavaScriptCollection&type=Date${
+          isDark ? '&theme=dark' : ''
+        }`"
+        alt="Github Star History"
+        class="img-border"
+        title="Github Star History"
+      />
+    </div>
+  </section>
+
+  <section id="contact-author">
+    <VipContactAuthor />
+  </section>
+  <VipBackTop />
+</template>
+
+<style scoped>
+#trending {
+  .img-border {
+    border-radius: 5px;
+  }
+}
+
+#sponsors {
+  div {
+    display: flex;
+    justify-content: left;
+  }
+  .image-border {
+    border-radius: 5px;
+    width: 50px;
+  }
+  a {
+    margin: 5px;
+  }
+}
+
+.star-history {
+  display: flex;
+  justify-content: center;
+  align-content: center;
+}
+</style>
diff --git a/apps/vitepress-demo/.vitepress/theme/index.ts b/apps/vitepress-demo/.vitepress/theme/index.ts
@@ -0,0 +1,24 @@
+import { h } from 'vue'
+import DefaultTheme from 'vitepress/theme'
+import './style.css'
+import type { Theme } from 'vitepress'
+import { VipBackTop } from '@142vip/vitepress/components'
+// 导入 element-plus样式
+// import 'element-plus/dist/index.css'
+
+/**
+ * 自定义主题
+ * 参考： https://vitepress.dev/guide/custom-theme
+ */
+export default {
+  extends: DefaultTheme,
+  Layout: () => {
+    return h(DefaultTheme.Layout, null, {
+      // https://vitepress.dev/guide/extending-default-theme#layout-slots
+      'doc-bottom': () => h(VipBackTop),
+    })
+  },
+  // todo 查看这里的app、router、siteData的作用
+  enhanceApp() {
+  },
+} satisfies Theme