fix: hack into vitepress to get naiveui ssr style working

bsdayo · May 5, 2024 · 4c8d8da · 4c8d8da
1 parent fbad895
commit 4c8d8da
Show file tree

Hide file tree

Showing 7 changed files with 60 additions and 18 deletions.
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -0,0 +1,5 @@
+{
+  "printWidth": 100,
+  "semi": false,
+  "singleQuote": true
+}
diff --git a/.vitepress/config.ts b/.vitepress/config.ts
@@ -1,7 +1,12 @@
-import { defineConfigWithTheme } from 'vitepress'
+import { EnhanceAppContext, defineConfigWithTheme } from 'vitepress'
+import { setup } from '@css-render/vue3-ssr'
 import { createContainer } from './utils'
 import { ThemeConfig } from './theme'
 import tags from './tags'
+import { renderToString } from 'vue/server-renderer'
+import { Mutex } from 'async-mutex'
+
+const transformHtmlMutex = new Mutex()
 
 export default defineConfigWithTheme<ThemeConfig>({
   title: 'SynBlog',
@@ -39,6 +44,29 @@ export default defineConfigWithTheme<ThemeConfig>({
 
   ignoreDeadLinks: 'localhostLinks',
 
+  async transformHtml(html, id, ctx) {
+    // VitePress 似乎是对所有页面同时进行渲染，但因为限制只能拿到一个固定的 App 实例，所以需要加互斥锁，防止抢 router
+    const release = await transformHtmlMutex.acquire()
+    try {
+      // ./theme/index.ts 中存了一个全局的 App 实例下来
+      const { app, router } = (globalThis as any).__EnhanceAppContext__ as EnhanceAppContext
+      const { collect } = setup(app)
+
+      // 随后仿照 VitePress 走 SSR 渲染流程
+      // https://github.com/vuejs/vitepress/blob/main/src/client/app/ssr.ts
+      const path = (this.base || '/') + ctx.page.replace(/\.md$/, '.html')
+      await router.go(path)
+      await renderToString(app)
+
+      // 此时可以收集到所有的 CSS 了！
+      const styles = collect()
+      return html.replace('<head>', `<head>${styles}`)
+    } finally {
+      // 释放互斥锁
+      release()
+    }
+  },
+
   themeConfig: {
     tags,
 

diff --git a/.vitepress/theme/Layout.vue b/.vitepress/theme/Layout.vue
@@ -11,11 +11,7 @@
             <n-flex justify="space-between">
               <DateTag :time="currentPost.create" />
               <n-flex>
-                <PostTag
-                  v-for="tag in currentPost.tags"
-                  :key="tag"
-                  :tag="tag"
-                />
+                <PostTag v-for="tag in currentPost.tags" :key="tag" :tag="tag" />
               </n-flex>
             </n-flex>
           </template>
@@ -39,14 +35,7 @@ import { ref, computed, nextTick, watch, onMounted } from 'vue'
 import { useData } from 'vitepress'
 import DefaultTheme from 'vitepress/theme'
 import { data as posts } from '../posts.data'
-import {
-  NConfigProvider,
-  NThing,
-  NDivider,
-  NFlex,
-  lightTheme,
-  darkTheme,
-} from 'naive-ui'
+import { NConfigProvider, NThing, NDivider, NFlex, lightTheme, darkTheme } from 'naive-ui'
 import Giscus from '@giscus/vue'
 import mediumZoom from 'medium-zoom'
 import { ThemeConfig } from '.'
@@ -72,8 +61,7 @@ const mdImgSelector = '.vp-doc img'
 function setRandomTagline() {
   const taglineElement = document.querySelector('.tagline')
   if (!taglineElement) return
-  taglineElement.innerHTML =
-    taglines[Math.floor(Math.random() * taglines.length)]
+  taglineElement.innerHTML = taglines[Math.floor(Math.random() * taglines.length)]
 }
 
 function appendImgAlt() {

diff --git a/.vitepress/theme/custom.scss b/.vitepress/theme/custom.scss
@@ -14,8 +14,8 @@ $custom-blocks: (
 );
 
 :root {
-  --vp-font-family-mono: 'JetBrains Mono', ui-monospace, 'Menlo', 'Monaco',
-    'Consolas', 'Liberation Mono', 'Courier New', monospace;
+  --vp-font-family-mono: 'JetBrains Mono', ui-monospace, 'Menlo', 'Monaco', 'Consolas',
+    'Liberation Mono', 'Courier New', monospace;
 
   --vp-c-brand-1: #0d47a1;
   --vp-c-brand-2: #1565c0;

diff --git a/.vitepress/theme/index.ts b/.vitepress/theme/index.ts
@@ -7,6 +7,11 @@ import './custom.scss'
 const theme: Theme = {
   extends: DefaultTheme,
   Layout,
+  async enhanceApp(ctx) {
+    if (!(globalThis as any).__EnhanceAppContext__) {
+      ;(globalThis as any).__EnhanceAppContext__ = ctx
+    }
+  },
 }
 
 export default theme

diff --git a/package.json b/package.json
@@ -17,6 +17,7 @@
     "@types/markdown-it-container": "^2.0.10",
     "@types/node": "^20.12.8",
     "@types/webfontloader": "^1.6.38",
+    "async-mutex": "^0.5.0",
     "js-convert-case": "^4.2.0",
     "markdown-it-container": "^4.0.0",
     "medium-zoom": "^1.1.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml