feat: add common markdown transform projects

Author: YunYouJun

.vscode/settings.json

@@ -46,5 +46,6 @@
     "scss",
     "pcss",
     "postcss"
-  ]
+  ],
+  "typescript.tsdk": "node_modules/typescript/lib"
 }

docs/.vitepress/components.d.ts

@@ -9,7 +9,10 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     DemoDocsProjectList: typeof import('./theme/components/demo/DemoDocsProjectList.vue')['default']
+    DocsProjectCard: typeof import('./../../packages/docs/client/components/DocsProjectCard.vue')['default']
+    DocsProjectList: typeof import('./../../packages/docs/client/components/DocsProjectList.vue')['default']
     GitHubBadge: typeof import('./theme/components/GitHubBadge.vue')['default']
     SiteLinkBadge: typeof import('./theme/components/SiteLinkBadge.vue')['default']
+    StatusBadge: typeof import('./theme/components/StatusBadge.vue')['default']
   }
 }

docs/.vitepress/config/index.ts

@@ -34,6 +34,7 @@ export default defineConfig({
       {
         text: '应用项目',
         items: [
+          { text: 'Girid - 动画角色印象表', link: '/projects/girid' },
           { text: 'Web Resume 简历', link: '/projects/web-resume' },
           { text: '哔哩哔哩封面生成器', link: '/projects/bilibili-cover-generator' },
         ],

docs/.vitepress/plugins/markdownTransform.ts

@@ -0,0 +1,69 @@
+import type { Plugin } from 'vite'
+// node import
+import { replacer } from '../../../packages/docs/utils'
+
+export function MarkdownTransform(): Plugin {
+  return {
+    name: 'yyj-docs:md-transform',
+    enforce: 'pre',
+    async transform(code, id) {
+      if (!id.match(/\.md\b/)) {
+        return null
+      }
+
+      // 满足 /projects/*.md 的条件
+      if (id.match(/\/projects\//)) {
+        // const [projectsPath, _name] = id.split('/')
+        // const name = _name.toLowerCase().slice(0, -3)
+
+        const frontmatterEnds = code.indexOf('---\n\n')
+        const firstHeader = code.search(/\n#{2,6}\s.+/)
+        const slideIndex = firstHeader < 0
+          ? (
+              (frontmatterEnds < 0)
+                ? 0
+                : frontmatterEnds + 4)
+          : firstHeader
+
+        const { footer, header } = getProjectMarkdown()
+        if (header) {
+          code = code.slice(0, slideIndex) + header + code.slice(slideIndex)
+        }
+
+        if (footer) {
+          code = replacer(code, footer, 'footer', 'tail')
+        }
+
+        return code
+      }
+
+      // code =
+    },
+  }
+}
+
+/**
+ * 包裹项目介绍的 Markdown 额外信息
+ *
+ * 根据 frontmatter 中字段生成
+ */
+export function getProjectMarkdown() {
+  const projectInfo = `
+# {{ $frontmatter.title }}
+
+> {{ $frontmatter.description }}
+
+当前状态：<StatusBadge :status="$frontmatter.status" />
+
+<SiteLinkBadge :link="$frontmatter.link" />
+<GitHubBadge :repo="$frontmatter.repo" />
+`
+
+  const footer = ''
+  const header = `${projectInfo}\n`
+
+  return {
+    footer,
+    header,
+  }
+}

docs/.vitepress/theme/components/StatusBadge.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { DocsProjectItem } from '../../types'
+import { computed } from 'vue'
+
+const props = defineProps<{
+  status: DocsProjectItem['status']
+}>()
+
+const type = computed(() => {
+  switch (props.status) {
+    case 'dev':
+      return 'warning'
+    case 'prod':
+      return 'tip'
+    default:
+      return 'info'
+  }
+})
+</script>
+
+<template>
+  <Badge :type="type">
+    {{ status }}
+  </Badge>
+</template>

docs/.vitepress/types/index.ts

@@ -0,0 +1,24 @@
+export interface DocsProjectItem {
+  /**
+   * 项目标题
+   */
+  title: string
+  /**
+   * 项目描述
+   */
+  description: string
+  /**
+   * 项目状态
+   */
+  status: 'dev' | 'prod'
+  /**
+   * 项目仓库
+   *
+   * YunYouJun/docs -> https://github.com/YunYouJun/docs
+   */
+  repo: string
+  /**
+   * 项目链接
+   */
+  link: string
+}

docs/projects/bilibili-cover-generator.md

@@ -1,16 +1,10 @@
 ---
+title: 哔哩哔哩封面生成器
 status: dev
 repo: YunYouJun/bilibili-cover-generator
 link: https://bilibili-cover-generator.yunyoujun.cn
 ---
 
-# 哔哩哔哩封面生成器
-
-当前状态：<Badge type="warning">{{ $frontmatter.status }}</Badge>
-
-<SiteLinkBadge :link="$frontmatter.link" />
-<GitHubBadge :repo="$frontmatter.repo" />
-
 ## 背景
 
 我计划尝试在 B 站上投稿视频，并拟定了多个主题。

docs/projects/girid.md

@@ -0,0 +1,11 @@
+---
+title: Girid - 动画角色印象表
+description: ❤ 动画角色喜好表生成器
+status: prod
+repo: YunYouJun/girid
+link: https://girid.yunyoujun.cn
+---
+
+## Thanks
+
+[YunYouJun/girid](https://github.com/YunYouJun/girid) inspired by [itorr/anime-grid](https://github.com/itorr/anime-grid).

docs/projects/web-resume.md

@@ -1,18 +1,11 @@
 ---
+title: Web Resume 简历生成器
+description: Web 端可打印为 PDF 的简历
 status: prod
 repo: YunYouJun/web-resume
 link: https://web-resume.yunyoujun.cn/
 ---
 
-# Web Resume 简历生成器
-
-> Web 端可打印为 PDF 的简历
-
-当前状态：<Badge type="info">{{ $frontmatter.status }}</Badge>
-
-<SiteLinkBadge :link="$frontmatter.link" />
-<GitHubBadge :repo="$frontmatter.repo" />
-
 ## 使用
 
 ### 在线使用

docs/vite.config.ts

@@ -1,14 +1,18 @@
 import { defineConfig } from 'vite'
+
 import { getViteConfig } from '../packages/docs/node'
+import { MarkdownTransform } from './.vitepress/plugins/markdownTransform'
 
 const viteConfig = getViteConfig({})
 
-export default defineConfig({
-  ...viteConfig,
+viteConfig.plugins!.push(MarkdownTransform())
 
+export default defineConfig({
   resolve: {
     alias: {
-      '@yunyoujun/docs': '../packages/docs/index.ts',
+      '@yunyoujun/docs': '../packages/docs/node/index.ts',
     },
   },
+
+  ...viteConfig,
 })