feat: add Umami analytics, improve SEO and build pipeline

- analytics: hardcode Umami script, inject only in production builds
- seo: add og:image, twitter:image, per-page canonical link via transformHead
- pwa: exclude search indexes from precache, serve via NetworkFirst runtime cache
- build: switch docs:build to parallel builds (~40% faster)
- rss: add en and ja locale feeds
- hljs: register diff, sql, rust, go languages
- precompute-meta: strip HTML tags and inline Markdown from description
- parallel-build: use MAX_OLD_SPACE_SIZE env var instead of hardcoded 24576

Author: fonghehe

docs/.vitepress/config.ts

@@ -1,4 +1,5 @@
 import { defineConfig } from "vitepress";
+import { VitePWA } from "vite-plugin-pwa";
 import { buildRSS } from "./rss";
 import { zh } from "./locales/zh";
 import { en } from "./locales/en";
@@ -12,6 +13,10 @@ import { zhHk } from "./locales/zh-hk";
 //   undefined     → all 5 (dev mode only, needs lots of RAM)
 const BUILD_MODE = process.env.BUILD_MODE as "main" | "zh-variants" | undefined;
 
+// ── Analytics (Umami) ────────────────────────────────────────────────────────
+// Only injected in production builds to avoid polluting analytics with dev traffic.
+const IS_PRODUCTION = process.env.NODE_ENV === "production";
+
 const allLocales = {
   root: { ...zh },
   en: { ...en },
@@ -61,6 +66,13 @@ export default defineConfig({
       { property: "og:url", content: "https://fonghehe.github.io/blog/" },
     ],
     ["meta", { property: "og:locale", content: "zh_CN" }],
+    [
+      "meta",
+      {
+        property: "og:image",
+        content: "https://fonghehe.github.io/blog/icons/icon.svg",
+      },
+    ],
     ["meta", { name: "twitter:card", content: "summary_large_image" }],
     ["meta", { name: "twitter:title", content: "前端成长记录" }],
     [
@@ -71,10 +83,36 @@ export default defineConfig({
           "一个前端工程师从 2018 年开始的学习与成长记录。1200+ 篇深度文章，涵盖框架原理、工程化实践与前沿探索。",
       },
     ],
+    [
+      "meta",
+      {
+        name: "twitter:image",
+        content: "https://fonghehe.github.io/blog/icons/icon.svg",
+      },
+    ],
+    // Umami analytics — only injected in production builds
+    ...(IS_PRODUCTION
+      ? ([
+          [
+            "script",
+            {
+              defer: "",
+              src: "https://cloud.umami.is/script.js",
+              "data-website-id": "4d310e6b-2d69-42aa-aaa2-c788a664d3c5",
+            },
+          ],
+        ] as [string, Record<string, string>][])
+      : []),
   ],
   sitemap: {
     hostname: "https://fonghehe.github.io/blog/",
   },
+  transformHead({ pageData }) {
+    const canonical = `https://fonghehe.github.io/blog/${pageData.relativePath}`
+      .replace(/index\.md$/, "")
+      .replace(/\.md$/, ".html");
+    return [["link", { rel: "canonical", href: canonical }]];
+  },
   locales: allLocales,
   themeConfig: {
     search: {
@@ -88,14 +126,16 @@ export default defineConfig({
   markdown: {
     // 完全替换 shiki — 用轻量 highlighter 直接输出 <pre><code>
     // shiki 是构建最大瓶颈：加载语法文件 + token 化 7000 篇文章的代码块
+    // 语法高亮由客户端 highlight.js 接管（见 theme/index.ts）
     highlight(code, lang) {
       const escaped = code
         .replace(/&/g, "&amp;")
         .replace(/</g, "&lt;")
         .replace(/>/g, "&gt;")
         .replace(/\{\{/g, "&#123;&#123;")
         .replace(/\}\}/g, "&#125;&#125;");
-      return `<pre class="language-${lang}"><code>${escaped}</code></pre>`;
+      const cls = lang ? ` class="language-${lang}"` : "";
+      return `<pre class="language-${lang}"><code${cls}>${escaped}</code></pre>`;
     },
     config(md) {
       // 转义非代码区域的 {{ }} 防止 Vue 模板编译报错
@@ -132,6 +172,62 @@ export default defineConfig({
     }
   },
   vite: {
+    plugins: [
+      VitePWA({
+        // Only register service worker in the main build
+        disable: BUILD_MODE === "zh-variants",
+        registerType: "autoUpdate",
+        outDir: ".vitepress/dist",
+        injectRegister: "script-defer",
+        manifest: {
+          name: "前端成长记录",
+          short_name: "前端记录",
+          description:
+            "一个前端工程师从 2018 年开始的学习与成长记录，1200+ 篇深度文章",
+          theme_color: "#3c8772",
+          background_color: "#ffffff",
+          display: "standalone",
+          start_url: "/blog/",
+          scope: "/blog/",
+          icons: [
+            {
+              src: "/blog/icons/icon.svg",
+              sizes: "any",
+              type: "image/svg+xml",
+              purpose: "any maskable",
+            },
+          ],
+        },
+        workbox: {
+          globPatterns: ["**/*.{js,css,html,ico,png,svg,woff2}"],
+          // Exclude local search indexes (5-6 MB each) from precache — served via NetworkFirst at runtime
+          globIgnores: ["**/chunks/@localSearchIndex*"],
+          navigateFallback: null,
+          runtimeCaching: [
+            {
+              // Search indexes are large and change on every build; fetch fresh when online
+              urlPattern: /@localSearchIndex/,
+              handler: "NetworkFirst",
+              options: {
+                cacheName: "search-index",
+                expiration: { maxEntries: 10 },
+              },
+            },
+            {
+              urlPattern: /^https:\/\/fonts\.(googleapis|gstatic)\.com\/.*/i,
+              handler: "CacheFirst",
+              options: {
+                cacheName: "google-fonts",
+                expiration: {
+                  maxEntries: 20,
+                  maxAgeSeconds: 60 * 60 * 24 * 365,
+                },
+              },
+            },
+          ],
+        },
+      }),
+    ],
     build: {
       reportCompressedSize: false,
       chunkSizeWarningLimit: 4000,

docs/.vitepress/css.d.ts

@@ -0,0 +1,11 @@
+// Allow CSS side-effect imports (e.g. highlight.js styles via Vite)
+declare module "*.css" {
+  const content: Record<string, string>;
+  export default content;
+}
+declare module "*.min.css" {
+  const content: Record<string, string>;
+  export default content;
+}
+// highlight.js style side-effect imports
+declare module "highlight.js/styles/*";

docs/.vitepress/locales/zh-hk.ts

@@ -6,7 +6,7 @@ type LocaleConfig = LocaleSpecificConfig<DefaultTheme.Config> & {
 };
 
 export const zhHk: LocaleConfig = {
-  label: "繁體中文（香港）",
+  label: "繁體中文（港）",
   lang: "zh-HK",
   themeConfig: {
     nav: [

docs/.vitepress/locales/zh-tw.ts

@@ -6,7 +6,7 @@ type LocaleConfig = LocaleSpecificConfig<DefaultTheme.Config> & {
 };
 
 export const zhTw: LocaleConfig = {
-  label: "繁體中文（台灣）",
+  label: "繁體中文（台）",
   lang: "zh-TW",
   themeConfig: {
     nav: [

docs/.vitepress/rss.ts

@@ -4,25 +4,54 @@ import { writeFileSync, mkdirSync } from "fs";
 import path from "path";
 
 const SITE_URL = "https://fonghehe.github.io/blog";
-const FEED_TITLE = "前端成长记录";
-const FEED_DESCRIPTION =
-  "一个前端工程师从 2018 年开始的学习与成长记录。1200+ 篇深度文章，涵盖框架原理、工程化实践与前沿探索。";
 
-export async function buildRSS(config: SiteConfig) {
+interface FeedConfig {
+  globs: string[];
+  title: string;
+  description: string;
+  language: string;
+  outFile: string;
+}
+
+const FEEDS: FeedConfig[] = [
+  {
+    globs: ["posts/**/*.md", "archive/**/*.md"],
+    title: "前端成长记录",
+    description:
+      "一个前端工程师从 2018 年开始的学习与成长记录。1200+ 篇深度文章，涵盖框架原理、工程化实践与前沿探索。",
+    language: "zh-CN",
+    outFile: "rss.xml",
+  },
+  {
+    globs: ["en/posts/**/*.md", "en/archive/**/*.md"],
+    title: "Frontend Growth Blog",
+    description:
+      "A frontend engineer's learning journey since 2018. 1200+ in-depth articles on framework internals, engineering practices and cutting-edge exploration.",
+    language: "en",
+    outFile: "en/rss.xml",
+  },
+  {
+    globs: ["ja/posts/**/*.md", "ja/archive/**/*.md"],
+    title: "フロントエンド成長記録",
+    description:
+      "2018年から始まるフロントエンドエンジニアの学習・成長記録。フレームワーク原理、エンジニアリング実践、最新技術探索などの1200+記事。",
+    language: "ja",
+    outFile: "ja/rss.xml",
+  },
+];
+
+async function buildFeed(cfg: FeedConfig, siteConfig: SiteConfig) {
   const feed = new Feed({
-    title: FEED_TITLE,
-    description: FEED_DESCRIPTION,
+    title: cfg.title,
+    description: cfg.description,
     id: SITE_URL,
     link: SITE_URL,
-    language: "zh-CN",
-    copyright: `MIT Licensed - ${FEED_TITLE} 2018-2026`,
+    language: cfg.language,
+    copyright: `MIT Licensed - 前端成长记录 2018-2026`,
     updated: new Date(),
   });
 
-  const posts = await createContentLoader(
-    ["posts/**/*.md", "archive/**/*.md"],
-    { render: false },
-  ).load();
+  const posts = await createContentLoader(cfg.globs, { render: false }).load();
 
   const sorted = posts
     .filter((p) => p.frontmatter?.date && !p.url.endsWith("/"))
@@ -53,7 +82,11 @@ export async function buildRSS(config: SiteConfig) {
     });
   }
 
-  const outDir = config.outDir;
-  mkdirSync(outDir, { recursive: true });
-  writeFileSync(path.join(outDir, "rss.xml"), feed.rss2());
+  const outPath = path.join(siteConfig.outDir, cfg.outFile);
+  mkdirSync(path.dirname(outPath), { recursive: true });
+  writeFileSync(outPath, feed.rss2());
+}
+
+export async function buildRSS(config: SiteConfig) {
+  await Promise.all(FEEDS.map((cfg) => buildFeed(cfg, config)));
 }

docs/.vitepress/theme/ArticleTitle.vue

@@ -15,6 +15,12 @@ const shouldShow = computed(
 // so it matches PostList.vue's post.readingTime
 const readingTime = computed(() => Number(frontmatter.value.readingTime) || 1);
 
+const wordCount = computed(() => {
+  const wc = Number(frontmatter.value.wordCount) || 0;
+  if (wc === 0) return "";
+  return wc >= 1000 ? `${(wc / 1000).toFixed(1)}k` : String(wc);
+});
+
 const isOutdated = computed(() => {
   const dateStr = frontmatter.value.date;
   if (!dateStr) return false;
@@ -42,6 +48,10 @@ const articleYear = computed(() => {
       }}</time>
       <span class="meta-separator">·</span>
       <span class="meta-reading-time">{{ readingTime }} min read</span>
+      <template v-if="wordCount">
+        <span class="meta-separator">·</span>
+        <span class="meta-word-count">{{ wordCount }} 字</span>
+      </template>
       <span v-if="frontmatter.tags?.length" class="meta-separator">·</span>
       <span
         v-for="(tag, i) in (frontmatter.tags || []).slice(0, 3)"
@@ -99,6 +109,10 @@ const articleYear = computed(() => {
   color: var(--vp-c-text-3);
 }
 
+.meta-word-count {
+  color: var(--vp-c-text-3);
+}
+
 .meta-tag {
   padding: 0.1rem 0.45rem;
   background: var(--vp-c-default-soft);

docs/.vitepress/theme/NotFound.vue

@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import { useData } from "vitepress";
+
+const { site } = useData();
+const base = site.value.base ?? "/";
+</script>
+
+<template>
+  <div class="not-found">
+    <div class="not-found-inner">
+      <div class="error-code">404</div>
+      <h1 class="error-title">页面不见了</h1>
+      <p class="error-desc">
+        这个页面可能已被迁移、删除，或者链接有误。<br />
+        你可以从下面的入口重新出发：
+      </p>
+      <div class="error-actions">
+        <a :href="base" class="btn btn-primary">← 返回首页</a>
+        <a :href="base + 'posts/'" class="btn btn-secondary">最新文章</a>
+        <a :href="base + 'archive/'" class="btn btn-secondary">文章归档</a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.not-found {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: calc(100vh - var(--vp-nav-height));
+  padding: 2rem;
+  text-align: center;
+}
+
+.not-found-inner {
+  max-width: 480px;
+}
+
+.error-code {
+  font-size: clamp(4rem, 15vw, 7rem);
+  font-weight: 800;
+  line-height: 1;
+  background: linear-gradient(
+    135deg,
+    var(--vp-c-brand-1),
+    var(--vp-c-brand-2, var(--vp-c-brand-1))
+  );
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  margin-bottom: 1rem;
+  letter-spacing: -0.04em;
+}
+
+.error-title {
+  font-size: 1.8rem;
+  font-weight: 700;
+  color: var(--vp-c-text-1);
+  margin-bottom: 0.75rem;
+}
+
+.error-desc {
+  color: var(--vp-c-text-2);
+  font-size: 0.95rem;
+  line-height: 1.7;
+  margin-bottom: 2rem;
+}
+
+.error-actions {
+  display: flex;
+  gap: 0.75rem;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.btn {
+  display: inline-block;
+  padding: 0.5rem 1.25rem;
+  border-radius: 8px;
+  font-size: 0.9rem;
+  font-weight: 500;
+  text-decoration: none;
+  transition: opacity 0.2s, transform 0.15s;
+}
+
+.btn:hover {
+  opacity: 0.85;
+  transform: translateY(-1px);
+}
+
+.btn-primary {
+  background: var(--vp-c-brand-1);
+  color: white;
+}
+
+.btn-secondary {
+  background: var(--vp-c-default-soft);
+  color: var(--vp-c-text-1);
+  border: 1px solid var(--vp-c-divider);
+}
+</style>