deploy

.github/workflows/docs.yml

@@ -0,0 +1,68 @@
+name: deploy-docs-site
+
+on:
+  # 每当 push 到 main 分支时触发部署
+  push:
+    branches: [main]
+  # 手动触发部署
+  workflow_dispatch:
+
+jobs:
+  docs-github:
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          # “最近更新时间” 等 git 日志相关信息，需要拉取全部提交记录
+          fetch-depth: 0
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          # 选择要使用的 node 版本
+          node-version: 20
+          # registry-url: https://registry.npmmirror.com/
+
+      - uses: pnpm/action-setup@v3
+        name: Install pnpm
+        id: pnpm-install
+        with:
+          version: 9
+          run_install: false
+
+      - name: Get pnpm store directory
+        id: pnpm-cache
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - uses: actions/cache@v4
+        name: Setup pnpm cache
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: Install antfu/ni
+        run: npm i -g @antfu/ni
+
+      - name: Install dependencies
+        run: ni --frozen
+
+      # 运行构建脚本
+      - name: Build VitePress site
+        run: nr build
+
+      # 查看 workflow 的文档来获取更多信息
+      # @see https://github.com/crazy-max/ghaction-github-pages
+      - name: Deploy to GitHub Pages
+        uses: crazy-max/ghaction-github-pages@v3
+        with:
+          # 部署到 gh-pages 分支
+          target_branch: gh-pages
+          # 部署目录为 VitePress 的默认输出目录
+          build_dir: .vitepress/dist
+        env:
+          # @see https://docs.github.com/cn/actions/reference/authentication-in-a-workflow#about-the-github_token-secret
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -0,0 +1,4 @@
+node_modules
+.vitepress/cache
+.vitepress/dist
+.eslintcache

.vitepress/config.ts

@@ -0,0 +1,89 @@
+import { defineConfig } from 'vitepress'
+import taskLists from 'markdown-it-task-lists'
+
+export default defineConfig({
+  title: 'Fantastic-mobile 官方文档',
+  description: '自成一派的移动端 H5 框架，采用 Vue3 + Vite 技术栈。',
+  lang: 'zh-CN',
+  base: '/',
+  head: [
+    ['meta', { name: 'keywords', content: 'vue,vite,router,vuex,pinia,typescript,template,h5,mobile,移动端,模板' }],
+    ['keywords', { content: 'vue,vite,router,vuex,pinia,typescript,template,h5,mobile,移动端,模板' }],
+    ['description', { content: '自成一派的移动端 H5 框架，采用 Vue3 + Vite 技术栈。' }],
+  ],
+  markdown: {
+    config: (md) => {
+      md.use(taskLists)
+    },
+  },
+  themeConfig: {
+    footer: {
+      copyright: 'Copyright © 2024-present Fantastic-mobile',
+    },
+    // nav: [
+    //   {
+    //     text: '指南',
+    //     link: '/guide/start',
+    //   },
+    //   {
+    //     text: '技术支持',
+    //     link: '/support',
+    //   },
+    // ],
+    // socialLinks: [
+    //   {
+    //     icon: {
+    //       svg: '<svg t="1663266323098" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2880" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" p-id="2881"></path></svg>',
+    //     },
+    //     link: 'https://gitee.com/fantastic-mobile/basic',
+    //   },
+    //   {
+    //     icon: 'github',
+    //     link: 'https://github.com/fantastic-mobile/basic',
+    //   },
+    // ],
+    // sidebar: {
+    //   '/guide/': [
+    //     {
+    //       text: '指南',
+    //       items: [
+    //         { text: '开始', link: '/guide/start' },
+    //         { text: '代码规范', link: '/guide/coding-standard' },
+    //         { text: '环境配置', link: '/guide/configure' },
+    //         { text: '全局资源', link: '/guide/global-resources' },
+    //         { text: '图标', link: '/guide/svg-icon' },
+    //         { text: '路由', link: '/guide/router' },
+    //         { text: '全局状态管理', link: '/guide/store' },
+    //         { text: '与服务端交互', link: '/guide/axios' },
+    //         { text: '代码文件自动生成', link: '/guide/plop' },
+    //         { text: '常用 API', link: '/guide/api' },
+    //         { text: '移动端支持', link: '/guide/mobile-support' },
+    //         { text: '构建与预览', link: '/guide/build' },
+    //       ],
+    //     },
+    //   ],
+    //   '/': [
+    //     {
+    //       text: '',
+    //       items: [
+    //         { text: '技术支持', link: '/support' },
+    //       ],
+    //     },
+    //   ],
+    // },
+    outline: 'deep',
+    search: {
+      provider: 'local',
+      options: {
+        translations: {
+          button: { buttonText: '搜索文档', buttonAriaLabel: '搜索文档' },
+          modal: {
+            noResultsText: '无法找到相关结果',
+            resetButtonTitle: '清除查询条件',
+            footer: { selectText: '选择', navigateText: '切换', closeText: '关闭' },
+          },
+        },
+      },
+    },
+  },
+})

.vitepress/theme/components/SponsorsAside.vue

@@ -0,0 +1,123 @@
+<template>
+  <div>
+    <div class="sponsors-aside-text">
+      作者其他作品
+    </div>
+    <div class="sponsor-container special">
+      <a href="https://fantastic-admin.github.io/" target="_blank" class="sponsor-item">
+        <img src="https://fantastic-admin.github.io/logo.png">
+        <div class="info">
+          <div class="main">Fantastic-admin</div>
+          <div class="sub">杰出的管理系统框架</div>
+        </div>
+      </a>
+      <a href="https://one-step-admin.github.io/" target="_blank" class="sponsor-item">
+        <img src="https://one-step-admin.github.io/logo.png">
+        <div class="info">
+          <div class="main">One-step-admin</div>
+          <div class="sub">巧妙的管理系统框架</div>
+        </div>
+      </a>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.sponsors-aside-text {
+  color: var(--vp-c-text-3);
+  display: block;
+  margin: 3em 0 1em;
+  font-weight: 700;
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.4px;
+}
+
+.sponsor-container {
+  --max-width: 100%;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(var(--max-width), 1fr));
+  column-gap: 4px;
+}
+
+.sponsor-item {
+  margin: 2px 0;
+  background-color: var(--vp-c-bg-soft);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 12px;
+  padding-inline: 20px;
+  border-radius: 2px;
+  transition: background-color 0.2s ease;
+  height: calc(var(--max-width) / 2 - 6px);
+  font-size: 13px;
+}
+.sponsor-item.action {
+  font-size: 11px;
+  color: var(--vt-c-text-3);
+}
+.sponsor-item img {
+  max-width: calc(var(--max-width) - 30px);
+  max-height: calc(var(--max-width) / 2 - 20px);
+}
+.sponsor-item .info {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 4px;
+}
+.sponsor-item .info .main {
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 1.5;
+  color: var(--vp-c-text-1);
+}
+.sponsor-item .info .sub {
+  font-size: 12px;
+  line-height: 1.2;
+  color: var(--vp-c-text-3);
+}
+.special .sponsor-item {
+  height: 160px;
+}
+.special .sponsor-item img {
+  max-width: 300px;
+  max-height: 150px;
+}
+
+/* dark mode */
+.dark .aside .sponsor-item,
+.dark .landing .sponsor-item {
+  background-color: var(--vp-c-gray-soft);
+}
+.aside .sponsor-item img,
+.landing .sponsor-item img {
+  transition: filter 0.2s ease;
+}
+.dark .aside .sponsor-item img,
+.dark .landing .sponsor-item img {
+  filter: grayscale(1) invert(1);
+}
+.dark .sponsor-item:hover img {
+  filter: none;
+}
+
+/* aside mode (on content pages) */
+.sponsor-container.platinum.aside {
+  --max-width: 110px;
+  column-gap: 1px;
+}
+.aside .sponsor-item {
+  margin: 1px 0;
+}
+.aside .special .sponsor-item {
+  width: 100%;
+  height: 70px;
+}
+.aside .special .sponsor-item img {
+  max-width: 120px;
+  max-height: 36px;
+}
+</style>

.vitepress/theme/fonts/fira_code/fira_code.css

@@ -0,0 +1,48 @@
+@font-face {
+  font-family: 'Fira Code';
+  src: url('woff2/FiraCode-Light.woff2') format('woff2'),
+    url("woff/FiraCode-Light.woff") format("woff");
+  font-weight: 300;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Fira Code';
+  src: url('woff2/FiraCode-Regular.woff2') format('woff2'),
+    url("woff/FiraCode-Regular.woff") format("woff");
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Fira Code';
+  src: url('woff2/FiraCode-Medium.woff2') format('woff2'),
+    url("woff/FiraCode-Medium.woff") format("woff");
+  font-weight: 500;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Fira Code';
+  src: url('woff2/FiraCode-SemiBold.woff2') format('woff2'),
+    url("woff/FiraCode-SemiBold.woff") format("woff");
+  font-weight: 600;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Fira Code';
+  src: url('woff2/FiraCode-Bold.woff2') format('woff2'),
+    url("woff/FiraCode-Bold.woff") format("woff");
+  font-weight: 700;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Fira Code VF';
+  src: url('woff2/FiraCode-VF.woff2') format('woff2-variations'),
+       url('woff/FiraCode-VF.woff') format('woff-variations');
+  /* font-weight requires a range: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide#Using_a_variable_font_font-face_changes */
+  font-weight: 300 700;
+  font-style: normal;
+}

.vitepress/theme/index.ts

@@ -0,0 +1,43 @@
+import { h, toRefs } from 'vue'
+import Theme from 'vitepress/theme'
+import giscusTalk from 'vitepress-plugin-comment-with-giscus'
+import { useData, useRoute } from 'vitepress'
+import './fonts/fira_code/fira_code.css'
+import './styles/var.css'
+import SponsorsAside from './components/SponsorsAside.vue'
+
+export default {
+  ...Theme,
+  Layout() {
+    return h(Theme.Layout, null, {
+      'aside-bottom': () => h(SponsorsAside),
+    })
+  },
+  setup() {
+    // 获取前言和路由
+    const { frontmatter } = toRefs(useData())
+    const route = useRoute()
+
+    // 评论组件 - https://giscus.app/
+    giscusTalk({
+      repo: 'hooray/fantastic-startkit',
+      repoId: 'MDEwOlJlcG9zaXRvcnkzNzMzNjIxOTI=',
+      category: 'Announcements', // 默认: `General`
+      categoryId: 'DIC_kwDOFkEOEM4CeRHv',
+      mapping: 'pathname', // 默认: `pathname`
+      inputPosition: 'top', // 默认: `top`
+      lang: 'zh-CN', // 默认: `zh-CN`
+      lightTheme: 'light', // 默认: `light`
+      darkTheme: 'transparent_dark', // 默认: `transparent_dark`
+      loading: true,
+    }, {
+      frontmatter,
+      route,
+    },
+    // 是否全部页面启动评论区。
+    // 默认为 true，表示启用，此参数可忽略；
+    // 如果为 false，表示不启用。
+    // 可以在页面使用 `comment: true` 前言单独启用
+    true)
+  },
+}