@xingwangzhe/stalux 1.27.0 → 1.28.0

package/src/index.ts

@@ -8,7 +8,14 @@
  * 基于 Astro 7.1.3 Integration API（astro:config:setup / injectRoute / injectScript）
  */
 
-import { copyFileSync, existsSync, mkdirSync, readdirSync, readFileSync } from "node:fs";
+import {
+    copyFileSync,
+    existsSync,
+    promises as fs,
+    mkdirSync,
+    readdirSync,
+    readFileSync,
+} from "node:fs";
 import path from "node:path";
 import { fileURLToPath } from "node:url";
 
@@ -23,7 +30,11 @@ import { createIndex as pagefindCreateIndex } from "pagefind";
 import type { StaluxOptions } from "./config";
 import { expressiveCode } from "./expressive-code";
 import { staluxComponentsAlias } from "./internal/components-plugin";
-import { type FontSlice, runFontSlicing } from "./internal/font-slices";
+import {
+    clearPageFontSubsets,
+    resolveFontInputs,
+    writePageFontSubset,
+} from "./internal/font-slices";
 import { createInjectedRoutes } from "./internal/injected-routes";
 import { createRuntimeCacheKey } from "./internal/runtime-cache-key";
 import {
@@ -32,36 +43,23 @@ import {
     prepareSatteriProcessor,
 } from "./internal/satteri-config";
 import { createViteAliases } from "./internal/vite-aliases";
-import { featureFlagsHast, featureFlagsMdast } from "./plugins/feature-flags";
+import {
+    applyHtmlImageLoadingPolicy,
+    featureFlagsHast,
+    featureFlagsMdast,
+} from "./plugins/feature-flags";
 import { temml } from "./plugins/satteri-temml";
 import { describeError } from "./utils/diagnostics";
 
-// 字体配置（Astro Fonts API）通过 updateConfig 注入，两种模式（源码模板/npm 插件）都生效。
-// 官方 local provider 完全本地读文件（readFile），不联网；
-// 7.2.2 已修复 Fonts API 随机端口污染 incrementalBuild dependencyHash 的问题（PR #17659）。
-function buildFontsConfig(slices: FontSlice[], codeNormal: string, codeItalic?: string) {
+// 代码字体通过 Astro Fonts API 注入；正文字体由 native N-API 按页面生成子集。
+function buildFontsConfig(codeNormal: string, codeItalic?: string) {
     return [
-        {
-            // 正文：LXGW WenKai 按 unicode-range 分片，浏览器只下载命中区间的分片
-            provider: fontProviders.local(),
-            name: "LXGW WenKai",
-            cssVariable: "--font-body",
-            fallbacks: ["Noto Sans SC", "Noto Sans CJK SC", "system-ui", "sans-serif"],
-            optimizedFallbacks: true,
-            options: {
-                variants: slices.map((slice) => ({
-                    weight: 400,
-                    style: "normal",
-                    src: [slice.src],
-                    unicodeRange: slice.unicodeRange,
-                })),
-            },
-        },
         {
             // 代码：Google Sans Code 可变字体，原样注册，不切片
             provider: fontProviders.local(),
             name: "Google Sans Code",
             cssVariable: "--font-code",
+            display: "optional" as const,
             fallbacks: ["JetBrains Mono", "Fira Code", "Consolas", "Courier New", "monospace"],
             optimizedFallbacks: true,
             options: {
@@ -150,6 +148,7 @@ export function stalux(options: StaluxOptions = {}): AstroIntegration[] {
     // 探测是否为插件模式（通过 npm 安装）vs 源码开发模式
     // 安装在 node_modules 中时，页面的文件路由不可用，需要通过 injectRoute 注入
     const isPluginMode = import.meta.url.includes("node_modules");
+    let pageFontData: { fontBuffer: Buffer; outputDir: string; cacheDir: string } | undefined;
 
     const coreIntegration: AstroIntegration = {
         name: "stalux",
@@ -330,20 +329,20 @@ export function stalux(options: StaluxOptions = {}): AstroIntegration[] {
                     }
                 }
 
-                // 7. 字体：构建期把正文切成 unicode-range 分片，通过官方 Fonts API 注入
-                // （config:setup 阶段执行，保证 dev/build 都能生成；local provider 纯本地读文件）
+                // 7. 字体：解析本地字体输入；正文字体由 native N-API 在 build:done 阶段逐页生成。
                 try {
-                    const sliced = await runFontSlicing(process.cwd(), fontsLogger);
+                    const sliced = await resolveFontInputs(process.cwd(), fontsLogger);
                     if (sliced) {
+                        pageFontData = {
+                            fontBuffer: sliced.fontBuffer,
+                            outputDir: path.join(fileURLToPath(config.outDir), "_astro", "fonts"),
+                            cacheDir: sliced.pageSubsetDir,
+                        };
                         updateConfig({
-                            fonts: buildFontsConfig(
-                                sliced.body,
-                                sliced.codeNormal,
-                                sliced.codeItalic,
-                            ),
+                            fonts: buildFontsConfig(sliced.codeNormal, sliced.codeItalic),
                         });
                         fontsLogger.debug(
-                            `injected ${sliced.body.length} body font chunks + code font via Fonts API`,
+                            "injected code font via Astro Fonts API; page body subsets use native N-API",
                         );
                     }
                 } catch (error) {
@@ -353,9 +352,58 @@ export function stalux(options: StaluxOptions = {}): AstroIntegration[] {
             },
 
             "astro:build:done": async ({ dir, logger: rootLogger }) => {
-                const logger = rootLogger.fork("stalux/pagefind");
+                const logger = rootLogger.fork("stalux/build");
                 const started = performance.now();
-                const outDir = fileURLToPath(dir);
+                const outDir = pageFontData
+                    ? path.dirname(path.dirname(pageFontData.outputDir))
+                    : fileURLToPath(new URL(String(dir)));
+
+                // Astro's Markdown image transform drops arbitrary lazy-loading hints
+                // added during HAST processing. Reapply the policy to emitted HTML.
+                const htmlFiles = await fs.readdir(outDir, { recursive: true });
+                let optimizedImagePages = 0;
+                let pageFontPages = 0;
+                if (pageFontData) await fs.mkdir(pageFontData.outputDir, { recursive: true });
+                if (pageFontData) await fs.mkdir(pageFontData.cacheDir, { recursive: true });
+                const referencedPageFonts = new Set<string>();
+                for (const entry of htmlFiles) {
+                    if (typeof entry !== "string" || !entry.endsWith(".html")) continue;
+                    const output = path.join(outDir, entry);
+                    const before = await fs.readFile(output, "utf8");
+                    const withoutPageFont = before.replace(
+                        /<style data-stalux-page-font>[\s\S]*?<\/style>/gi,
+                        "",
+                    );
+                    let after = applyHtmlImageLoadingPolicy(withoutPageFont);
+                    if (pageFontData) {
+                        const pageFont = writePageFontSubset(
+                            after,
+                            pageFontData.fontBuffer,
+                            pageFontData.cacheDir,
+                            "/_astro/fonts/",
+                        );
+                        if (pageFont) {
+                            after = pageFont.html;
+                            pageFontPages++;
+                            referencedPageFonts.add(pageFont.filename);
+                            copyFileSync(
+                                pageFont.sourcePath,
+                                path.join(pageFontData.outputDir, pageFont.filename),
+                            );
+                        }
+                    }
+                    if (after !== before) {
+                        await fs.writeFile(output, after);
+                        optimizedImagePages++;
+                    }
+                }
+                if (pageFontData) {
+                    clearPageFontSubsets(pageFontData.outputDir, referencedPageFonts);
+                }
+                logger.info(`applied image loading hints to ${optimizedImagePages} HTML pages`);
+                logger.info(
+                    `generated page-specific body font subsets for ${pageFontPages} HTML pages`,
+                );
 
                 // 后处理：Pagefind 搜索索引。启用时任何失败都必须让构建失败，
                 // 避免发布一个页面正常但搜索已损坏的产物。

package/src/internal/font-slices.ts

@@ -1,29 +1,25 @@
-import { describeError } from "../utils/diagnostics";
 /**
- * Build-time CJK font slicing engine (Astro Fonts API variant).
+ * Build-time CJK font subsetting engine.
  *
- * Slices the full-size LXGW WenKai font (25 MB TTF) into ~20 woff2 chunks
- * by unicode-range, registered through the official `fontProviders.local()`
- * pipeline (`updateConfig({ fonts })`). The browser downloads only the chunks
- * whose unicode-range matches characters on the page.
+ * LXGW WenKai is subset per rendered page with the native N-API package. Only
+ * the independent Google Sans Code font uses Astro's local Fonts API.
  *
  * Astro's local provider reads font files from disk (`readFile`), so no
  * network access is involved at build time — identical behavior on GitHub
- * Actions and CN mirrors. Slices are emitted to `node_modules/.astro/`
- * (the Astro cacheDir) so they stay out of the repo and out of `dist/fonts`.
+ * Actions and CN mirrors. Page subset cache is emitted to `node_modules/.astro/`
+ * so it stays out of the repo and out of `dist/fonts`.
  *
  * Output layout:
- *   node_modules/.astro/stalux-fonts/
- *     lxgw-wenkai-slice-{n}-{hash}.woff2   — unicode-range chunk (content-addressed)
+ *   node_modules/.astro/stalux-page-fonts/
+ *     page-{hash}.woff2   — page-specific content-addressed CJK subset
  */
 
-import { createHash } from "node:crypto";
-import { existsSync, mkdirSync, readFileSync, writeFileSync } from "node:fs";
+import { existsSync, readdirSync, readFileSync, unlinkSync } from "node:fs";
 import { dirname, join, resolve } from "node:path";
 import { fileURLToPath } from "node:url";
-
+import { subsetFont } from "@xingwangzhe/cjk-font-split-native";
 import type { AstroIntegrationLogger } from "astro";
-import subsetFont from "subset-font";
+import { type DefaultTreeAdapterMap, parse } from "parse5";
 
 // ---------------------------------------------------------------------------
 // Configuration
@@ -36,71 +32,22 @@ const FONT_INPUT = "src/assets/fonts/LXGWWenKai-Regular.ttf";
 const CODE_FONT_INPUT = "src/assets/fonts/GoogleSansCode.woff2";
 const CODE_FONT_ITALIC_INPUT = "src/assets/fonts/GoogleSansCode-Italic.woff2";
 
-/** Output directory for generated slices (under the Astro cacheDir) */
-const SLICE_OUT_DIR = "node_modules/.astro/stalux-fonts";
-
-/** Chunk size (code points) for the CJK Unified Ideographs block */
-const CJK_CHUNK_SIZE = 1050;
+const PAGE_SLICE_OUT_DIR = "node_modules/.astro/stalux-page-fonts";
 
 // ---------------------------------------------------------------------------
 // Types
 // ---------------------------------------------------------------------------
 
-export interface FontSlice {
-    /** Absolute path to the generated woff2 file */
-    src: string;
-    /** Unicode ranges for the @font-face unicode-range descriptor */
-    unicodeRange: string[];
-}
-
-export interface SlicedFonts {
-    /** Body font slices (LXGW WenKai), one variant per chunk */
-    body: FontSlice[];
+export interface FontInputs {
+    /** Build-time per-page subset cache, outside dist so incremental builds can reuse it. */
+    pageSubsetDir: string;
+    fontBuffer: Buffer;
     /** Absolute path to the code font woff2 */
     codeNormal: string;
     /** Absolute path to the code italic woff2, if present */
     codeItalic?: string;
 }
 
-interface SliceDef {
-    /** Ordinal used in the output filename */
-    id: number;
-    /** [start, end] code-point ranges covered by this slice */
-    ranges: Array<[number, number]>;
-}
-
-// ---------------------------------------------------------------------------
-// Slice definitions
-// ---------------------------------------------------------------------------
-
-/**
- * CJK Unified Ideographs (U+4E00–U+9FFF) split into fixed-size chunks.
- * Chunk boundaries are content-independent, so slices are deterministic
- * across builds (no per-page character scanning).
- */
-function buildCjkChunks(start = 0x4e00, end = 0x9fff, size = CJK_CHUNK_SIZE): SliceDef[] {
-    const chunks: SliceDef[] = [];
-    for (let s = start, id = 2; s <= end; s += size, id++) {
-        chunks.push({ id, ranges: [[s, Math.min(s + size - 1, end)]] });
-    }
-    return chunks;
-}
-
-const SLICES: SliceDef[] = [
-    // ASCII printable + Latin-1 supplement
-    { id: 0, ranges: [[0x20, 0x7e]] },
-    // CJK punctuation / fullwidth forms / general punctuation
-    {
-        id: 1,
-        ranges: [
-            [0x2000, 0x206f],
-            [0x3000, 0x303f],
-            [0xff00, 0xffef],
-        ],
-    },
-    ...buildCjkChunks(),
-];
-
 // ---------------------------------------------------------------------------
 // Helpers
 // ---------------------------------------------------------------------------
@@ -115,43 +62,22 @@ function findFont(projectRoot: string, rel: string): string | undefined {
     return candidates.find((p) => existsSync(p));
 }
 
-/** Render a [start, end] range as a CSS unicode-range value. */
-export function toUnicodeRange(ranges: Array<[number, number]>): string[] {
-    const hex = (codePoint: number) => codePoint.toString(16).toUpperCase().padStart(4, "0");
-    return ranges.map(([start, end]) =>
-        start === end ? `U+${hex(start)}` : `U+${hex(start)}-${hex(end)}`,
-    );
-}
-
-/** Collect every code point in the ranges as a deduped, sorted string. */
-function rangesToChars(ranges: Array<[number, number]>): string {
-    const set = new Set<string>();
-    for (const [s, e] of ranges) {
-        for (let cp = s; cp <= e; cp++) {
-            set.add(String.fromCodePoint(cp));
-        }
-    }
-    return [...set].sort().join("");
-}
-
 // ---------------------------------------------------------------------------
 // Main entry
 // ---------------------------------------------------------------------------
 
 /**
- * Slice the body font into unicode-range woff2 chunks and resolve the code
- * fonts, all from local disk. Returns `null` when the body font is missing so
+ * Resolve the body-font source for native page subsetting and code fonts for
+ * Astro's local provider. Returns `null` when a required font is missing so
  * the caller can skip font injection (pages fall back to system fonts).
  *
  * Called from the `astro:config:setup` hook before `updateConfig({ fonts })`.
  */
-export async function runFontSlicing(
+export async function resolveFontInputs(
     projectRoot: string,
     logger: AstroIntegrationLogger,
-): Promise<SlicedFonts | null> {
+): Promise<FontInputs | null> {
     const started = performance.now();
-    let cached = 0;
-    let generated = 0;
     logger.debug("locating font inputs");
     // 1. Locate fonts (check project root first, then stalux package dir)
     const fontPath = findFont(projectRoot, FONT_INPUT);
@@ -167,55 +93,144 @@ export async function runFontSlicing(
     const codeItalic = findFont(projectRoot, CODE_FONT_ITALIC_INPUT);
 
     const fontBuffer = readFileSync(fontPath);
-    const outDir = resolve(projectRoot, SLICE_OUT_DIR);
-    mkdirSync(outDir, { recursive: true });
-
-    // 2. Slice the body font into unicode-range chunks.
-    // Filename is content-addressed (md5 of the character set): identical
-    // input chars → identical bytes → identical name across builds, keeping
-    // the incremental-build dependency graph stable.
-    const body: FontSlice[] = [];
-    for (const def of SLICES) {
-        const chars = rangesToChars(def.ranges);
-        if (!chars) continue;
-        const hash = createHash("md5").update(chars).digest("hex").slice(0, 12);
-        const filename = `lxgw-wenkai-slice-${def.id}-${hash}.woff2`;
-        const outPath = join(outDir, filename);
-
-        if (existsSync(outPath)) {
-            cached++;
-            logger.debug(`body slice ${def.id}: cache hit`);
-        } else {
-            try {
-                const data = await subsetFont(fontBuffer, chars, { targetFormat: "woff2" });
-                if (data.length > 0) {
-                    writeFileSync(outPath, data);
-                    generated++;
-                    logger.debug(
-                        `  body slice ${def.id}: ${(data.length / 1024).toFixed(1)} KB → ${filename}`,
-                    );
-                }
-            } catch (error) {
-                logger.warn(`  body slice ${def.id} failed: ${describeError(error)}`);
-            }
-        }
+    logger.debug(`font inputs located in ${(performance.now() - started).toFixed(1)}ms`);
+    logger.info(
+        `Native page-font source ready (LXGW ${(fontBuffer.length / 1024 / 1024).toFixed(1)} MB)`,
+    );
+    return {
+        pageSubsetDir: resolve(projectRoot, PAGE_SLICE_OUT_DIR),
+        fontBuffer,
+        codeNormal,
+        codeItalic,
+    };
+}
+
+export interface PageFontSubset {
+    html: string;
+    filename: string;
+    sourcePath: string;
+    cacheHit: boolean;
+}
 
-        if (existsSync(outPath)) {
-            body.push({ src: outPath, unicodeRange: toUnicodeRange(def.ranges) });
+type HtmlNode = DefaultTreeAdapterMap["node"];
+
+const NON_RENDERED_ELEMENTS = new Set(["script", "style", "template", "title"]);
+const VISUALLY_HIDDEN_CLASSES = new Set([
+    "agent-home-summary",
+    "screen-reader-only",
+    "sr-only",
+    "visually-hidden",
+]);
+
+function findBody(node: HtmlNode): HtmlNode | undefined {
+    if ("tagName" in node && node.tagName === "body") return node;
+    if ("childNodes" in node) {
+        for (const child of node.childNodes) {
+            const body = findBody(child);
+            if (body) return body;
         }
     }
+    return undefined;
+}
 
-    if (body.length === 0) {
-        logger.warn("Body font slicing produced no chunks, skipping font injection");
-        return null;
+function isHiddenElement(attrs: Array<{ name: string; value: string }>): boolean {
+    const attributes = new Map(attrs.map(({ name, value }) => [name, value]));
+    if (attributes.has("hidden") || attributes.has("inert")) return true;
+
+    const classes = (attributes.get("class") ?? "").split(/\s+/u);
+    if (classes.some((name) => VISUALLY_HIDDEN_CLASSES.has(name))) return true;
+
+    const style = attributes.get("style") ?? "";
+    return /(?:^|;)\s*(?:display\s*:\s*none|visibility\s*:\s*hidden|content-visibility\s*:\s*hidden)\s*(?:;|$)/iu.test(
+        style,
+    );
+}
+
+/** Collect renderable body text nodes, including content inside collapsed controls. */
+function collectBodyText(node: HtmlNode, output: string[]): void {
+    if (node.nodeName === "#text" && "value" in node) {
+        output.push(node.value);
+        return;
+    }
+
+    if (!("childNodes" in node)) return;
+    if (
+        "tagName" in node &&
+        (NON_RENDERED_ELEMENTS.has(node.tagName) || isHiddenElement(node.attrs))
+    ) {
+        return;
     }
 
-    logger.debug(
-        `generated=${generated}; cached=${cached}; elapsed=${(performance.now() - started).toFixed(1)}ms`,
+    for (const child of node.childNodes) collectBodyText(child, output);
+}
+
+/** Create a cached body-font subset containing precisely the page's CJK code points. */
+export function writePageFontSubset(
+    html: string,
+    fontBuffer: Buffer,
+    cacheDir: string,
+    publicUrlPrefix = "/_astro/fonts/",
+): PageFontSubset | undefined {
+    const document = parse(html);
+    const body = findBody(document);
+    if (!body) return undefined;
+
+    const bodyText: string[] = [];
+    collectBodyText(body, bodyText);
+    const chars = [
+        ...new Set(
+            [...bodyText.join("")].filter((char) =>
+                /[\u2000-\u206f\u3000-\u303f\u4e00-\u9fff\uff00-\uffef]/u.test(char),
+            ),
+        ),
+    ]
+        .sort()
+        .join("");
+    if (!chars) return undefined;
+
+    const result = subsetFont(fontBuffer, chars, cacheDir);
+    const filename = `page-${result.hash}.woff2`;
+
+    const rel = `${publicUrlPrefix}${filename}`;
+    // Keep Astro's broad unicode-range font out of the fallback stack; otherwise
+    // a character outside this page's subset would download multiple 300 KB slices.
+    const originalFontStack = html.match(/--font-body:\s*([^;}]+)/u)?.[1]?.trim();
+    const fallbackStack =
+        originalFontStack || '"Noto Sans SC","Noto Sans CJK SC",system-ui,sans-serif';
+    const originalCodeStack = html.match(/--font-code:\s*([^;}]+)/u)?.[1]?.trim();
+    const codeStack = originalCodeStack
+        ? `${originalCodeStack},"LXGW WenKai-Page Subset"`
+        : `"LXGW WenKai-Page Subset",${fallbackStack}`;
+    const css = `@font-face{font-family:"LXGW WenKai-Page Subset";src:url("${rel}") format("woff2");font-style:normal;font-weight:400;font-display:swap;unicode-range:${[...chars].map((c) => `U+${c.codePointAt(0)?.toString(16).toUpperCase()}`).join(",")}}:root{--font-body:"LXGW WenKai-Page Subset",${fallbackStack};--font-code:${codeStack}}`;
+    const withoutBroadBodyFonts = html.replace(
+        /@font-face\{[^}]*font-family:"LXGW WenKai-[^"]+"[^}]*\}/g,
+        (face) => {
+            const unicodeRange = face.match(/unicode-range:([^;}]+)/i)?.[1] ?? "";
+            const hasCjkRange = unicodeRange.split(",").some((range) => {
+                const start = range.match(/U\+([\da-f]+)/i)?.[1];
+                if (!start) return false;
+                const codePoint = Number.parseInt(start, 16);
+                return codePoint >= 0x4e00 && codePoint <= 0x9fff;
+            });
+            return hasCjkRange ? "" : face;
+        },
     );
-    logger.info(
-        `Font slicing done: ${body.length} body chunks + code font ` +
-            `(source ${(fontBuffer.length / 1024 / 1024).toFixed(1)} MB → woff2 chunks)`,
+    const outputHtml = withoutBroadBodyFonts.replace(
+        /<\/head\s*>/i,
+        `<style data-stalux-page-font>${css}</style></head>`,
     );
-    return { body, codeNormal, codeItalic };
+    return { html: outputHtml, filename, sourcePath: result.path, cacheHit: result.cacheHit };
+}
+
+/** Remove stale page subsets so deploy artifacts only contain the current build's referenced files. */
+export function clearPageFontSubsets(
+    outputDir: string,
+    referencedFiles: Set<string> = new Set(),
+): void {
+    if (!existsSync(outputDir)) return;
+    for (const name of readdirSync(outputDir)) {
+        if (name.startsWith("page-") && name.endsWith(".woff2") && !referencedFiles.has(name)) {
+            unlinkSync(join(outputDir, name));
+        }
+    }
 }

package/src/layouts/PostLayout.astro

@@ -67,12 +67,12 @@ const walineConfig = walineSection?.serverURL
             <PostCC title={props.title} author={author} url={Astro.url.href} cc={props.cc} />
             <PostNavigation prev={props.prev} next={props.next} />
             {commentEnabled && walineConfig?.serverURL && (
-                    <WalineComment
-                        {...buildWalineProps(walineConfig)}
-                        path={Astro.url.pathname}
-                        title={props.title}
-                    />
-                )}
+    <WalineComment
+        {...buildWalineProps(walineConfig)}
+        path={Astro.url.pathname}
+        title={props.title}
+    />
+)}
         </PostContent>
 
         <!-- Right Sidebar -->

package/src/layouts/Stalux.astro

@@ -73,11 +73,7 @@ const routeAnimation = getRouteAnimation(routeKind);
     import "../scripts/background.ts";
     import "../scripts/view-transitions.ts";
     </script>
-    {aiConfig?.conformance !== "disabled" && (
-      <script>
-        import "../scripts/webmcp.ts";
-      </script>
-    )}
+    {aiConfig?.conformance !== "disabled" && <script>import "../scripts/webmcp.ts";</script>}
     <body
         class="stalux-root dark"
         data-stalux-bg-layer="a"
@@ -90,10 +86,10 @@ const routeAnimation = getRouteAnimation(routeKind);
         data-stalux-clarity-id={headConfig?.bingClarityId}
     >
         {llmPromote && (
-      <section class="stalux-ai-prompt" data-stalux-ai-prompt aria-label="AI site context">
+    <section class="stalux-ai-prompt" data-stalux-ai-prompt aria-label="AI site context">
         <p>{llmPromote}</p>
-      </section>
-    )}
+    </section>
+)}
         <div
             class="bg-layer bg-a"
             style="opacity: 1;"

package/src/pages/about.astro

@@ -47,12 +47,12 @@ const author = authorConfig.name;
                 cc="CC-BY-NC-SA-4.0"
             />
             {commentEnabled && walineConfig?.serverURL && (
-                    <WalineComment
-                        {...buildWalineProps(walineConfig)}
-                        path={Astro.url.pathname}
-                        title={aboutPage.data.title}
-                    />
-                )}
+    <WalineComment
+        {...buildWalineProps(walineConfig)}
+        path={Astro.url.pathname}
+        title={aboutPage.data.title}
+    />
+)}
         </PostContent>
     </div>
 </Stalux>

package/src/pages/categories/[category].astro

@@ -27,7 +27,11 @@ const props = Astro.props as Props;
 
 <Stalux
     title={`${t("taxonomy.category")}: ${props.category} | ${siteConfig.title}`}
-    description={t("taxonomy.browseCategory", { title: siteConfig.title, category: props.category, count: props.count })}
+    description={t("taxonomy.browseCategory", {
+    title: siteConfig.title,
+    category: props.category,
+    count: props.count,
+})}
 >
     <div style="height: 3em;"></div>
     <Navs />

package/src/pages/posts/[post].astro

@@ -72,8 +72,8 @@ export async function getStaticPaths() {
         date={props.post.data.date}
         updated={props.post.data.updated}
         readingMinutes={flags.readingMinutes}
-        tags={props.post.data.tags||[]}
-        categories={props.post.data.categories||[]}
+        tags={props.post.data.tags || []}
+        categories={props.post.data.categories || []}
         headings={headings}
         author={authorConfig.name}
         authorAvatar={authorConfig.avatar}