feat: next generate page header (#225)

docs/.vitepress/components.d.ts

@@ -0,0 +1,15 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+export {}
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    HomeContent: typeof import('./theme/components/HomeContent.vue')['default']
+    PageInfo: typeof import('./theme/components/PageInfo.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+  }
+}

docs/.vitepress/config.ts

@@ -6,7 +6,6 @@ import footnote from 'markdown-it-footnote'
 import { generateSidebar } from 'vitepress-sidebar'
 import { sidebar } from './sidebar'
 
-
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
   title: "RLE.wiki",

docs/.vitepress/plugins/markdownTransform.ts

@@ -0,0 +1,33 @@
+import type { Plugin } from 'vite'
+import { resolve, relative } from 'path'
+
+const ROOT = resolve(__dirname, '../../')
+
+export function MarkdownTransform(): Plugin {
+  return {
+    name: 'docs-md-transform',
+    enforce: 'pre',
+    async transform(code, id) {
+      if (!id.endsWith('.md'))
+        return null
+
+      id = relative(ROOT, id)
+
+      if (id == 'index.md')
+        return null
+
+      code = pageHeaderTemplate(code)
+
+      return code
+    },
+  }
+}
+
+
+const pageHeaderTemplate = (code: string) => code.replace(/(---\n\n)/, `$1
+
+# {{ $frontmatter.title }}
+
+<PageInfo />
+
+`)

docs/.vitepress/theme/components/PageInfo.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { useData } from 'vitepress'
+import { computed, onMounted, ref, watchEffect } from 'vue';
+
+const { frontmatter, page, theme, lang  } = useData()
+
+const date = computed(
+  () => new Date(frontmatter.value.lastUpdated ?? page.value.lastUpdated)
+)
+const isoDatetime = computed(() => date.value.toISOString())
+
+const datetime = ref('')
+// Avoid hydration errors
+onMounted(() => {
+  watchEffect(() => {
+    datetime.value = new Intl.DateTimeFormat(
+      theme.value.lastUpdated?.formatOptions?.forceLocale ? lang.value : undefined,
+      theme.value.lastUpdated?.formatOptions ?? {
+        dateStyle: 'short',
+        timeStyle: 'short'
+      }
+    ).format(date.value)
+  })
+})
+
+const authors = computed(() => {
+  let author = (frontmatter.value?.author ?? []) as string[]
+  if (!Array.isArray(author))
+    author = [author]
+
+  if (!author.length)
+    author = ['匿名']
+
+  return author
+})
+
+</script>
+
+<template>
+  <div class="flex flex-wrap gap-4 mt-4 mb-10">
+    <div class="inline-flex items-center gap-1">
+      <span class="i-octicon:person" />
+      <span>作者:</span>
+      <span class="space-x-2">
+        <span v-for="author of authors">
+          {{ author }}
+        </span>
+      </span>
+    </div>
+
+    <div class="inline-flex items-center gap-1">
+      <span class="i-octicon:calendar-16" />
+      <span>{{ theme.lastUpdated?.text || 'Last updated' }}:</span>
+      <time :datetime="isoDatetime">{{ datetime }}</time>
+    </div>
+  </div>
+</template>

docs/.vitepress/theme/index.ts

@@ -3,6 +3,7 @@ import { h } from 'vue'
 import type { Theme } from 'vitepress'
 import DefaultTheme from 'vitepress/theme'
 import './style.css'
+import 'uno.css'
 
 export default {
   extends: DefaultTheme,

docs/vite.config.ts

@@ -0,0 +1,19 @@
+import { resolve } from 'node:path'
+import { defineConfig } from 'vite'
+import { MarkdownTransform } from './.vitepress/plugins/markdownTransform'
+import Components from 'unplugin-vue-components/vite'
+import UnoCSS from 'unocss/vite'
+
+export default defineConfig({
+  plugins: [
+    MarkdownTransform(),
+    Components({
+      dirs: resolve(__dirname, '.vitepress/theme/components'),
+      include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
+      dts: './.vitepress/components.d.ts',
+      transformer: 'vue3',
+    }),
+
+    UnoCSS(),
+  ],
+})

package.json

@@ -14,11 +14,15 @@
     "update-package": "pnpm dlx vp-update"
   },
   "devDependencies": {
+    "@iconify-json/octicon": "^1.1.51",
     "@types/markdown-it": "^13.0.7",
     "@types/markdown-it-footnote": "^3.0.3",
     "markdown-it-footnote": "^3.0.3",
     "markdown-it-katex": "^2.0.3",
     "markdown-it-pangu": "^1.0.2",
+    "unocss": "^0.58.0",
+    "unplugin-vue-components": "^0.26.0",
+    "vite": "^5.0.5",
     "vitepress": "^1.0.0-rc.31",
     "vitepress-sidebar": "^1.18.0",
     "vue": "^3.3.8",

uno.config.ts

@@ -0,0 +1,24 @@
+import { presetAttributify, presetIcons, presetUno } from 'unocss'
+import { defineConfig } from "unocss";
+
+export default defineConfig({
+  shortcuts: [
+    ['btn', 'px-4 py-1 rounded inline-flex justify-center gap-2 text-white leading-30px children:mya !no-underline cursor-pointer disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50'],
+  ],
+  presets: [
+    presetUno({
+      dark: 'class',
+    }),
+    presetAttributify(),
+    presetIcons({
+      prefix: 'i-',
+      scale: 1,
+      extraProperties: {
+        'display': 'inline-block',
+        'vertical-align': 'middle',
+        'min-width': '1.2rem',
+      },
+      warn: true,
+    }),
+  ],
+})