@xingwangzhe/stalux 1.4.0 → 1.4.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@xingwangzhe/stalux",
-    "version": "1.4.0",
+    "version": "1.4.2",
     "description": "A powerful, modern Astro blog theme \u2014 use as template or install as plugin",
     "keywords": [
         "astro",
@@ -73,8 +73,10 @@
         "prepare": "git config core.hooksPath scripts/git-hooks"
     },
     "dependencies": {
+        "@astrojs/rss": "^4.0.19",
         "@astrojs/sitemap": "^3.7.3",
         "@expressive-code/plugin-line-numbers": "^0.44.1",
+        "@lucide/astro": "^1.27.0",
         "@pagefind/component-ui": "^1.5.2",
         "@waline/client": "3.15.2",
         "@xingwangzhe/satteri-mermaid": "0.7.1",
@@ -83,15 +85,13 @@
         "animejs": "^4.5.0",
         "astro": "^7.1.3",
         "astro-expressive-code": "^0.44.1",
-        "pagefind": "^1.5.2",
-        "photoswipe": "^5.4.4",
-        "subset-font": "^2.5.0",
-        "@astrojs/rss": "^4.0.19",
         "astro-seo": "^1.1.0",
         "astro-typewriter": "^1.2.0",
-        "@lucide/astro": "^1.27.0",
         "badge-maker": "^6.0.0",
+        "pagefind": "^1.5.2",
+        "photoswipe": "^5.4.4",
         "simple-icons": "^16.27.1",
+        "subset-font": "^2.5.0",
         "temml": "^0.13.3"
     },
     "devDependencies": {

package/src/index.ts

@@ -192,14 +192,14 @@ export function stalux(options: StaluxOptions = {}): AstroIntegration {
                 // 5. 字体裁剪（在 config:setup 阶段执行，保证 dev/build 都能生成）
                 try {
                     const projectRoot = process.cwd();
-                    await runFontSubsetting(projectRoot, logger);
+                    await runFontSubsetting(projectRoot, logger, true);
                 } catch (error) {
                     logger.debug(`Font subsetting deferred: ${String(error)}`);
                 }
             },
 
             "astro:build:start": async ({ logger }) => {
-                // 6. 字体裁剪（构建时备用）
+                // 6. 字体裁剪（构建时，生成全部路由子集）
                 try {
                     const projectRoot = process.cwd();
                     await runFontSubsetting(projectRoot, logger);
@@ -208,11 +208,17 @@ export function stalux(options: StaluxOptions = {}): AstroIntegration {
                 }
             },
 
-            "astro:server:setup": async ({ logger }) => {
-                // 7. 字体裁剪（开发模式备用）
+            "astro:server:setup": async ({ server, logger }) => {
+                // 7. 字体裁剪（开发模式，生成 common 子集 + 按需路由切片）
                 try {
                     const projectRoot = process.cwd();
-                    await runFontSubsetting(projectRoot, logger);
+                    // 先生成 common 子集
+                    await runFontSubsetting(projectRoot, logger, true);
+                    // 再添加按需路由切片中间件
+                    const { createDevFontMiddleware } = await import(
+                        new URL("./internal/font-subset-dev.ts", import.meta.url).href
+                    );
+                    server.middlewares.use(createDevFontMiddleware(projectRoot, logger));
                 } catch (error) {
                     logger.debug(`Font subsetting deferred in dev: ${String(error)}`);
                 }

package/src/internal/font-subset-dev.ts

@@ -0,0 +1,170 @@
+/**
+ * Dev mode on-demand font subsetting middleware.
+ *
+ * Intercepts /fonts/subset-*.css requests, generates the WOFF2 subset
+ * for the requested route on-the-fly, and serves it.
+ *
+ * Hooked into astro:server:setup.
+ */
+
+import { existsSync, mkdirSync, readFileSync, readdirSync, writeFileSync } from "node:fs";
+import { resolve, join, dirname } from "node:path";
+import { fileURLToPath } from "node:url";
+import type { AstroIntegrationLogger } from "astro";
+import subsetFontFn from "subset-font";
+
+const FONT_INPUT = "src/assets/fonts/LXGWWenKai-Regular.ttf";
+const CONTENT_ROOT = "stalux";
+const FONT_OUT_DIR = "public/fonts";
+
+/** Map route-style subset ID → content file path */
+function resolveContentFile(projectRoot: string, subsetId: string): string | null {
+  if (subsetId === "home") return null; // home has no specific content
+  if (subsetId === "about") {
+    const aboutDir = resolve(projectRoot, CONTENT_ROOT, "about");
+    if (!existsSync(aboutDir)) return null;
+    for (const f of readdirSync(aboutDir)) {
+      if (f.endsWith(".md") || f.endsWith(".mdx")) return join(aboutDir, f);
+    }
+    return null;
+  }
+  if (subsetId === "words") {
+    const wordsDir = resolve(projectRoot, CONTENT_ROOT, "words");
+    if (!existsSync(wordsDir)) return null;
+    // Aggregate all words files
+    return wordsDir; // special: aggregate all
+  }
+  if (subsetId.startsWith("posts-")) {
+    const abbrlink = subsetId.slice(6);
+    const postsDir = resolve(projectRoot, CONTENT_ROOT, "posts");
+    if (!existsSync(postsDir)) return null;
+    for (const f of readdirSync(postsDir)) {
+      if ((f.endsWith(".md") || f.endsWith(".mdx")) && !f.startsWith("_")) {
+        const content = readFileSync(join(postsDir, f), "utf-8");
+        if (content.includes(`abbrlink: ${abbrlink}`)) return join(postsDir, f);
+      }
+    }
+    return null;
+  }
+  return null;
+}
+
+/** Extract unique characters from file content */
+function extractChars(text: string): string {
+  const set = new Set<string>();
+  for (const ch of text) set.add(ch);
+  return [...set].sort().join("");
+}
+
+/**
+ * Generate and serve a font subset on demand.
+ * Returns the CSS content to be served.
+ */
+async function generateSubsetOnDemand(
+  projectRoot: string,
+  subsetId: string,
+  logger: AstroIntegrationLogger,
+): Promise<string | null> {
+  // 1. Resolve content file
+  const contentPath = resolveContentFile(projectRoot, subsetId);
+  if (!contentPath) return null;
+
+  // 2. Read content + extract chars
+  let content: string;
+  if (contentPath.endsWith("words")) {
+    // aggregate all words
+    const allWords: string[] = [];
+    for (const f of readdirSync(contentPath)) {
+      if (f.endsWith(".md") && !f.startsWith("_")) {
+        allWords.push(readFileSync(join(contentPath, f), "utf-8"));
+      }
+    }
+    content = allWords.join("\n");
+  } else {
+    content = readFileSync(contentPath, "utf-8");
+  }
+
+  const chars = extractChars(content);
+
+  // 3. Load common subset chars to find unique ones
+  const outDir = resolve(projectRoot, FONT_OUT_DIR);
+  const commonCSS = join(outDir, "common.css");
+  let commonCharsCached: string[] = [];
+
+  // Look for existing common subset to extract its covered chars
+  // We re-read the common subset data from the generated file list
+  const commonFile = existsSync(join(outDir, "common.css"))
+    ? readFileSync(join(outDir, "common.css"), "utf-8")
+    : "";
+  // We can't know exactly what chars the common subset covers without reading
+  // the original source. But we can just generate the full subset.
+  // To minimize size, we note that common subset already covers most.
+
+  // 4. Locate font file
+  const fontPaths = [
+    resolve(projectRoot, FONT_INPUT),
+    resolve(projectRoot, "node_modules", "@xingwangzhe", "stalux", FONT_INPUT),
+    resolve(dirname(fileURLToPath(import.meta.url)), "..", "..", FONT_INPUT),
+  ];
+  let fontPath: string | undefined;
+  for (const p of fontPaths) {
+    if (existsSync(p)) { fontPath = p; break; }
+  }
+  if (!fontPath) return null;
+
+  const fontBuffer = readFileSync(fontPath);
+  mkdirSync(outDir, { recursive: true });
+
+  // 5. Generate subset WOFF2
+  const hash = [...chars].slice(0, 12).join("");
+  const filename = `subset-${subsetId}-${hash}.woff2`;
+  const outPath = join(outDir, filename);
+
+  if (!existsSync(outPath)) {
+    const data = await subsetFontFn(fontBuffer, chars, { targetFormat: "woff2" });
+    writeFileSync(outPath, data);
+    logger.info(`  on-demand subset: ${(data.length / 1024).toFixed(1)} KB → ${filename}`);
+  }
+
+  // 6. Return CSS content
+  return `@font-face {
+    font-family: "LXGW WenKai Subset";
+    src: url("/fonts/${filename}") format("woff2");
+    font-display: swap;
+}`;
+}
+
+/**
+ * Create Vite middleware for on-demand font subsetting in dev mode.
+ */
+export function createDevFontMiddleware(projectRoot: string, logger: AstroIntegrationLogger) {
+  return async (req: any, res: any, next: any) => {
+    const url = req.url || "";
+    const match = url.match(/^\/fonts\/subset-(.+)\.css$/);
+    if (!match) return next();
+
+    const subsetId = match[1];
+
+    // Check if file already exists
+    const cssPath = resolve(projectRoot, FONT_OUT_DIR, `subset-${subsetId}.css`);
+    if (existsSync(cssPath)) {
+      res.statusCode = 200;
+      res.setHeader("Content-Type", "text/css");
+      res.end(readFileSync(cssPath, "utf-8"));
+      return;
+    }
+
+    // Generate on-demand
+    logger.info(`Font subset: on-demand generating for "${subsetId}"...`);
+    const css = await generateSubsetOnDemand(projectRoot, subsetId, logger);
+    if (css) {
+      // Cache it
+      writeFileSync(cssPath, css);
+      res.statusCode = 200;
+      res.setHeader("Content-Type", "text/css");
+      res.end(css);
+    } else {
+      next();
+    }
+  };
+}

package/src/internal/font-subset.ts

@@ -229,34 +229,39 @@ function deduplicate(routes: RouteCharSet[]): Map<string, string[]> {
 
 /**
  * Run font subsetting during build.
- * Called from astro:build:start hook.
+ * Called from integration hooks.
+ *
+ * @param projectRoot - Project root directory
+ * @param logger - Astro integration logger
+ * @param skipPerRoute - Skip per-route subsets (for dev mode, only generate common)
  */
 export async function runFontSubsetting(
-  projectRoot: string,
-  logger: AstroIntegrationLogger,
+    projectRoot: string,
+    logger: AstroIntegrationLogger,
+    skipPerRoute = false,
 ): Promise<void> {
-  logger.info("Font subsetting: scanning content...");
-
-  // 1. Locate font file (check project root first, then stalux package dir)
-  const fontPaths = [
-    resolve(projectRoot, FONT_INPUT),
-    resolve(projectRoot, "node_modules", "@xingwangzhe", "stalux", FONT_INPUT),
-    resolve(dirname(fileURLToPath(import.meta.url)), "..", "..", FONT_INPUT),
-  ];
-
-  let fontPath: string | undefined;
-  for (const p of fontPaths) {
-    if (existsSync(p)) {
-      fontPath = p;
-      break;
+    logger.info("Font subsetting: scanning content...");
+
+    // 1. Locate font file (check project root first, then stalux package dir)
+    const fontPaths = [
+        resolve(projectRoot, FONT_INPUT),
+        resolve(projectRoot, "node_modules", "@xingwangzhe", "stalux", FONT_INPUT),
+        resolve(dirname(fileURLToPath(import.meta.url)), "..", "..", FONT_INPUT),
+    ];
+
+    let fontPath: string | undefined;
+    for (const p of fontPaths) {
+        if (existsSync(p)) {
+            fontPath = p;
+            break;
+        }
     }
-  }
 
-  if (!fontPath) {
-    logger.warn(`Font not found at ${FONT_INPUT}, skipping subsetting`);
-    return;
-  }
-  const fontBuffer = readFileSync(fontPath);
+    if (!fontPath) {
+        logger.warn(`Font not found at ${FONT_INPUT}, skipping subsetting`);
+        return;
+    }
+    const fontBuffer = readFileSync(fontPath);
 
     // 2. Scan content files
     const contentFiles = scanContent(projectRoot);
@@ -309,69 +314,71 @@ export async function runFontSubsetting(
 `;
     writeFileSync(join(outDir, "common.css"), commonCSS);
 
-    // Generate per-route subsets (deduplicated) and their CSS
     const groups = deduplicate(routeSets);
     const routeMap: Record<string, string> = {};
     const postMap: Record<string, string> = {};
 
     let subsetCount = 0;
-    // Track which subsets we've already generated CSS for
     const cssGenerated = new Set<string>();
 
-    for (const [hash, routes] of groups) {
-        const filename = `subset-${hash}.woff2`;
-        const outPath = join(outDir, filename);
-        if (!existsSync(outPath)) {
-            // Find the route chars for this hash
-            const route = routeSets.find((r) => r.hash === hash);
-            const chars = route?.chars ?? "";
-            // Only subset characters NOT in common (already covered by common.css)
-            const uniqueChars = chars
-                .split("")
-                .filter((ch) => !commonChars.includes(ch))
-                .join("");
-            if (uniqueChars.length > 0) {
-                const data = await subsetFont(fontBuffer, uniqueChars, { targetFormat: "woff2" });
-                writeFileSync(outPath, data);
-                subsetCount++;
-                logger.info(
-                    `  subset ${subsetCount}: ${(data.length / 1024).toFixed(1)} KB → ${filename}`,
-                );
+    if (!skipPerRoute) {
+        for (const [hash, routes] of groups) {
+            const filename = `subset-${hash}.woff2`;
+            const outPath = join(outDir, filename);
+            if (!existsSync(outPath)) {
+                // Find the route chars for this hash
+                const route = routeSets.find((r) => r.hash === hash);
+                const chars = route?.chars ?? "";
+                // Only subset characters NOT in common (already covered by common.css)
+                const uniqueChars = chars
+                    .split("")
+                    .filter((ch) => !commonChars.includes(ch))
+                    .join("");
+                if (uniqueChars.length > 0) {
+                    const data = await subsetFont(fontBuffer, uniqueChars, {
+                        targetFormat: "woff2",
+                    });
+                    writeFileSync(outPath, data);
+                    subsetCount++;
+                    logger.info(
+                        `  subset ${subsetCount}: ${(data.length / 1024).toFixed(1)} KB → ${filename}`,
+                    );
+                }
             }
-        }
 
-        // Generate per-route CSS (one per unique hash, references all routes with this hash)
-        if (!cssGenerated.has(hash)) {
-            cssGenerated.add(hash);
-            for (const route of routes) {
-                const cssContent = `/* Auto-generated font subset for route: ${route} */
+            // Generate per-route CSS (one per unique hash, references all routes with this hash)
+            if (!cssGenerated.has(hash)) {
+                cssGenerated.add(hash);
+                for (const route of routes) {
+                    const cssContent = `/* Auto-generated font subset for route: ${route} */
 @font-face {
     font-family: "LXGW WenKai Subset";
     src: url("/fonts/${filename}") format("woff2");
     font-display: swap;
 }
 `;
-                // Use first route's name as the CSS filename (they share the same subset)
-                const cssName = routes.length === 1 ? route.replace("/", "-") : `group-${hash}`;
-                const cssFilename = `subset-${cssName}.css`;
-                writeFileSync(join(outDir, cssFilename), cssContent);
-                routeMap[route] = cssFilename;
-
-                if (route.startsWith("posts/")) {
-                    const abbrlink = route.replace("posts/", "");
-                    postMap[abbrlink] = cssFilename;
+                    // Use first route's name as the CSS filename (they share the same subset)
+                    const cssName = routes.length === 1 ? route.replace("/", "-") : `group-${hash}`;
+                    const cssFilename = `subset-${cssName}.css`;
+                    writeFileSync(join(outDir, cssFilename), cssContent);
+                    routeMap[route] = cssFilename;
+
+                    if (route.startsWith("posts/")) {
+                        const abbrlink = route.replace("posts/", "");
+                        postMap[abbrlink] = cssFilename;
+                    }
                 }
-            }
-        } else {
-            // CSS already generated, just map
-            for (const route of routes) {
-                const cssFilename =
-                    routes.length === 1
-                        ? `subset-${route.replace("/", "-")}.css`
-                        : `subset-group-${hash}.css`;
-                routeMap[route] = cssFilename;
-                if (route.startsWith("posts/")) {
-                    postMap[route.replace("posts/", "")] = cssFilename;
+            } else {
+                // CSS already generated, just map
+                for (const route of routes) {
+                    const cssFilename =
+                        routes.length === 1
+                            ? `subset-${route.replace("/", "-")}.css`
+                            : `subset-group-${hash}.css`;
+                    routeMap[route] = cssFilename;
+                    if (route.startsWith("posts/")) {
+                        postMap[route.replace("posts/", "")] = cssFilename;
+                    }
                 }
             }
         }

package/template/astro.config.mjs

@@ -2,9 +2,9 @@ import { satteri } from "@astrojs/markdown-satteri";
 import sitemap from "@astrojs/sitemap";
 import { mermaidHast } from "@xingwangzhe/satteri-mermaid";
 import { photoswipe } from "@xingwangzhe/satteri-photoswipe";
+import stalux from "@xingwangzhe/stalux";
 import expressiveCode from "astro-expressive-code";
 import { defineConfig, fontProviders } from "astro/config";
-import stalux from "@xingwangzhe/stalux";
 
 // https://astro.build/config
 export default defineConfig({
@@ -24,12 +24,16 @@ export default defineConfig({
                     {
                         weight: "100 900",
                         style: "normal",
-                        src: ["./node_modules/@xingwangzhe/stalux/src/assets/fonts/GoogleSansCode.woff2"],
+                        src: [
+                            "./node_modules/@xingwangzhe/stalux/src/assets/fonts/GoogleSansCode.woff2",
+                        ],
                     },
                     {
                         weight: "100 900",
                         style: "italic",
-                        src: ["./node_modules/@xingwangzhe/stalux/src/assets/fonts/GoogleSansCode-Italic.woff2"],
+                        src: [
+                            "./node_modules/@xingwangzhe/stalux/src/assets/fonts/GoogleSansCode-Italic.woff2",
+                        ],
                     },
                 ],
             },