chore: extract label config out of css

generator/base-css-generator.ts

@@ -0,0 +1,35 @@
+import { PluginOption } from 'vite'
+import fs from 'fs'
+import { SiteConfiguration } from '../src/site'
+
+export default function newsListGenerator(): PluginOption {
+  const virtualModuleId = 'virtual:base.css'
+  const resolvedVirtualModuleId = '\0' + virtualModuleId
+
+  return {
+    name: 'base-css-generator',
+    resolveId(id) {
+      if (id === virtualModuleId) {
+        return resolvedVirtualModuleId
+      }
+    },
+    load(id) {
+      if (id === resolvedVirtualModuleId) {
+        const base = fs.readFileSync('./src/assets/base.css', 'utf-8')
+        return base
+          .replace(
+            '/* warning text */',
+            SiteConfiguration.markdown.container.warningLabel ?? 'WARNING',
+          )
+          .replace('/* error text */', SiteConfiguration.markdown.container.errorLabel ?? 'ERROR')
+          .replace('/* info text */', SiteConfiguration.markdown.container.infoLabel ?? 'INFO')
+      }
+    },
+    handleHotUpdate({ server, file }) {
+      if (file.includes('src/assets/base.css')) {
+        const thisModule = server.moduleGraph.getModuleById(resolvedVirtualModuleId)
+        if (thisModule) return [thisModule]
+      }
+    },
+  }
+}

generator/content-generator.ts

@@ -5,6 +5,7 @@ import matter from 'gray-matter'
 import Shiki from '@shikijs/markdown-it'
 import MathJax3 from 'markdown-it-mathjax3'
 import MarkdownItContainer from 'markdown-it-container'
+import { SiteConfiguration } from '../src/site'
 
 const md = mdit
   .default({
@@ -19,7 +20,12 @@ const md = mdit
   .use(MarkdownItContainer, 'expander', {
     render: (tokens: Token[], idx: number) => {
       if (tokens[idx].nesting === 1) {
-        return `<ExpanderComponent class="expander" :initial-collapsed="true" :extend-toggle-area="true"><template #header><span font-bold text-sm p-y-4>MORE</span></template>\n`
+        return `
+<ExpanderComponent class="expander" :initial-collapsed="true"
+  :extend-toggle-area="true">
+  <template #header>
+    <span font-bold text-sm p-y-4>${SiteConfiguration.markdown.container.expanderLabel ?? 'MORE'}</span>
+  </template>\n`
       } else {
         return '</ExpanderComponent>\n'
       }

src/assets/base.css

@@ -5,6 +5,12 @@ body {
 }
 
 :root {
+  --warning-text: '/* warning text */';
+  --error-text: '/* error text */';
+  --info-text: '/* info text */';
+
+  /* NOT USED: refer to ../generator/content-generator.ts */
+  --expander-text: '/* expander text */';
   font-family:
     'Inter',
     -apple-system,
@@ -121,23 +127,23 @@ img {
 }
 
 .warning::before {
-  content: 'WARNING';
+  content: var(--warning-text);
 }
 
 .error {
   --at-apply: 'text-red-800 bg-red-300/20 dark:bg-red-500/20 dark:text-red-100';
 }
 
 .error::before {
-  content: 'ERROR';
+  content: var(--error-text);
 }
 
 .info {
   --at-apply: 'text-blue-800 bg-blue-300/20 dark:bg-blue-500/20 dark:text-blue-100';
 }
 
 .info::before {
-  content: 'INFO';
+  content: var(--info-text);
 }
 
 .expander {

src/main.ts

@@ -1,5 +1,5 @@
 import 'virtual:uno.css'
-import './assets/base.css'
+import 'virtual:base.css'
 
 import { createSSRApp } from 'vue'
 import App from './App.vue'

src/site.ts

@@ -0,0 +1,21 @@
+interface SiteConfiguration {
+  markdown: {
+    container: {
+      warningLabel?: string
+      errorLabel?: string
+      infoLabel?: string
+      expanderLabel?: string
+    }
+  }
+}
+
+export const SiteConfiguration: SiteConfiguration = {
+  markdown: {
+    container: {
+      warningLabel: '警告',
+      errorLabel: '错误',
+      infoLabel: '信息',
+      expanderLabel: '更多',
+    },
+  },
+}

tsconfig.node.json

@@ -7,7 +7,8 @@
     "nightwatch.conf.*",
     "playwright.config.*",
     "generator/*",
-    "src/data/*.ts"
+    "src/data/*.ts",
+    "src/site.ts"
   ],
   "compilerOptions": {
     "composite": true,

vite.config.ts

@@ -7,6 +7,7 @@ import UnoCSS from 'unocss/vite'
 import ActivityListGenerator from './generator/activity-list-generator'
 import NewsListGenerator from './generator/news-list-generator'
 import MarkdownContentGenerator from './generator/content-generator'
+import BaseCssGenerator from './generator/base-css-generator'
 
 // https://vite.dev/config/
 export default defineConfig({
@@ -24,6 +25,7 @@ export default defineConfig({
     UnoCSS(),
     ActivityListGenerator(),
     NewsListGenerator(),
+    BaseCssGenerator(),
   ],
   resolve: {
     alias: {