@xingwangzhe/stalux 1.37.1 → 1.38.0

package/src/internal/font-slices.ts

@@ -2,8 +2,9 @@ import { styleNames } from "./style-names.generated.ts";
 /**
  * Build-time CJK font subsetting engine.
  *
- * 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.
+ * LXGW WenKai uses shared subsets for the persistent header and footer, then
+ * one content-addressed subset per rendered page for the remaining glyphs.
+ * 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
@@ -12,7 +13,8 @@ import { styleNames } from "./style-names.generated.ts";
  *
  * Output layout:
  *   node_modules/.astro/stalux-page-fonts/
- *     page-{hash}.woff2   — page-specific content-addressed CJK subset
+ *     page-{hash}.woff2          — page-specific content-addressed CJK subset
+ *     shared-header/footer-*.woff2 — persistent shell glyph subsets
  */
 
 import { existsSync, readdirSync, readFileSync, unlinkSync } from "node:fs";
@@ -87,7 +89,7 @@ function findFont(projectRoot: string, rel: string): string | undefined {
 // ---------------------------------------------------------------------------
 
 /**
- * Resolve the body-font source for native page subsetting and code fonts for
+ * Resolve the body-font source for native shell/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).
  *
@@ -130,8 +132,30 @@ export interface PageFontSubset {
     filename: string;
     sourcePath: string;
     cacheHit: boolean;
+    glyphCount: number;
 }
 
+export type SharedFontGroup = "header" | "footer";
+
+export interface SharedFontGlyphs {
+    header: Set<string>;
+    footer: Set<string>;
+}
+
+export interface SharedFontSubset {
+    group: SharedFontGroup;
+    family: string;
+    chars: string[];
+    filename: string;
+    sourcePath: string;
+    cacheHit: boolean;
+}
+
+const SHARED_FONT_FAMILIES: Record<SharedFontGroup, string> = {
+    header: "LXGW WenKai Header Subset",
+    footer: "LXGW WenKai Footer Subset",
+};
+
 type HtmlNode = DefaultTreeAdapterMap["node"];
 
 const NON_RENDERED_ELEMENTS = new Set(["script", "style", "template", "title"]);
@@ -230,28 +254,96 @@ function isHiddenElement(attrs: Array<{ name: string; value: string }>): boolean
     );
 }
 
-/** Collect renderable body text nodes, including content inside collapsed controls. */
+/** Collect renderable text nodes, including content inside collapsed controls. */
 const CONTROL_CHARACTER = /\p{C}/u;
 function addGlyphs(text: string, output: Set<string>): void {
     for (const char of text)
         if (!output.has(char) && !CONTROL_CHARACTER.test(char)) output.add(char);
 }
 
-function collectBodyText(node: HtmlNode, output: Set<string>): void {
+function collectBodyText(node: HtmlNode, output: Set<string>, skipSharedComponents = false): void {
     if (node.nodeName === "#text" && "value" in node) {
         addGlyphs(node.value, output);
         return;
     }
 
     if (!("childNodes" in node)) return;
-    if (
-        "tagName" in node &&
-        (NON_RENDERED_ELEMENTS.has(node.tagName) || isHiddenElement(node.attrs))
-    ) {
-        return;
+    if ("tagName" in node) {
+        const sharedGroup = node.attrs.find(
+            (attribute) => attribute.name === "data-stalux-font-group",
+        )?.value;
+        if (skipSharedComponents && (sharedGroup === "header" || sharedGroup === "footer")) {
+            return;
+        }
+        if (NON_RENDERED_ELEMENTS.has(node.tagName) || isHiddenElement(node.attrs)) return;
     }
 
-    for (const child of node.childNodes) collectBodyText(child, output);
+    for (const child of node.childNodes) collectBodyText(child, output, skipSharedComponents);
+}
+
+/** Collect common shell glyphs separately so every page can reuse the same files. */
+export function createSharedFontGlyphs(): SharedFontGlyphs {
+    const glyphs: SharedFontGlyphs = { header: new Set(), footer: new Set() };
+    addGlyphs(RESERVED_GLYPHS, glyphs.footer);
+    return glyphs;
+}
+
+export function collectSharedFontGlyphs(
+    document: DefaultTreeAdapterMap["document"],
+    output: SharedFontGlyphs,
+): void {
+    function visit(node: HtmlNode): void {
+        if ("tagName" in node) {
+            const group = node.attrs.find(
+                (attribute) => attribute.name === "data-stalux-font-group",
+            )?.value as SharedFontGroup | undefined;
+            if (group === "header" || group === "footer") {
+                collectBodyText(node, output[group]);
+                return;
+            }
+        }
+        if ("childNodes" in node) for (const child of node.childNodes) visit(child);
+    }
+    visit(document);
+}
+
+function sortGlyphs(glyphs: Iterable<string>): string[] {
+    return [...new Set(glyphs)].sort(
+        (a, b) => (a.codePointAt(0) as number) - (b.codePointAt(0) as number),
+    );
+}
+
+/** Build content-addressed header and footer subsets once for the whole site build. */
+export async function writeSharedFontSubsetsAsync(
+    fontBuffer: Buffer,
+    glyphs: SharedFontGlyphs,
+    cacheDir: string,
+): Promise<SharedFontSubset[]> {
+    let prepared = preparedFonts.get(fontBuffer);
+    if (!prepared) {
+        prepared = new FontSubsetter(fontBuffer);
+        preparedFonts.set(fontBuffer, prepared);
+    }
+
+    const subsets: SharedFontSubset[] = [];
+    for (const group of ["header", "footer"] as const) {
+        const chars = sortGlyphs(glyphs[group]);
+        if (chars.length === 0) continue;
+        const result = await prepared.subsetAsync(chars.join(""), cacheDir);
+        subsets.push({
+            group,
+            family: SHARED_FONT_FAMILIES[group],
+            chars,
+            filename: `shared-${group}-${result.hash}.woff2`,
+            sourcePath: result.path,
+            cacheHit: result.cacheHit,
+        });
+    }
+    return subsets;
+}
+
+export function sharedFontCacheKey(subsets: readonly SharedFontSubset[]): string {
+    return subsets.map(({ group, chars }) => `${group}:${chars.join("")}`).join("\0");
 }
 
 function formatUnicodeRange(chars: string[]): string {
@@ -286,8 +378,9 @@ export function writePageFontSubset(
         publicUrlPrefix,
         input.chars,
         input.prepared.subset(input.chars.join(""), cacheDir),
+        [],
     );
-    return { ...result, html: serialize(document) };
+    return { ...result, glyphCount: input.chars.length, html: serialize(document) };
 }
 
 export async function writePageFontSubsetAsync(
@@ -303,7 +396,8 @@ export async function writePageFontSubsetAsync(
     if (!input) return undefined;
     const result = await input.prepared.subsetAsync(input.chars.join(""), cacheDir);
     return {
-        ...renderPageFont(document, publicUrlPrefix, input.chars, result),
+        ...renderPageFont(document, publicUrlPrefix, input.chars, result, []),
+        glyphCount: input.chars.length,
         html: serialize(document),
     };
 }
@@ -313,6 +407,7 @@ function preparePageFont(
     linkedStylesheetText: string,
     extraChars: string,
     document: DefaultTreeAdapterMap["document"],
+    excludedChars: ReadonlySet<string> = new Set(),
 ) {
     const body = findBody(document);
     if (!body) return undefined;
@@ -323,7 +418,10 @@ function preparePageFont(
     addGlyphs(linkedStylesheetText, glyphs);
     for (const style of collectInlineStyles(document))
         addGlyphs(cssGeneratedText(styleText(style)), glyphs);
-    collectBodyText(body, glyphs);
+    collectBodyText(body, glyphs, true);
+    for (const char of excludedChars) glyphs.delete(char);
+    // Keep runtime digits available even when the shell subset does not contain them.
+    addGlyphs(RESERVED_GLYPHS, glyphs);
     const chars = [...glyphs].sort(
         (a, b) => (a.codePointAt(0) as number) - (b.codePointAt(0) as number),
     );
@@ -342,6 +440,7 @@ function renderPageFont(
     publicUrlPrefix: string,
     chars: string[],
     result: { hash: string; path: string; cacheHit: boolean },
+    sharedFonts: readonly SharedFontSubset[],
 ): Omit<PageFontSubset, "html"> {
     const filename = `page-${result.hash}.woff2`;
 
@@ -359,12 +458,20 @@ function renderPageFont(
         .map(styleText)
         .map((css) => css.match(/--font-code:\s*([^;}]+)/u)?.[1]?.trim())
         .find(Boolean);
-    const codeStack = originalCodeStack
-        ? `${originalCodeStack},"LXGW WenKai-Page Subset"`
-        : `"LXGW WenKai-Page Subset",${fallbackStack}`;
+    const sharedStack = sharedFonts.map(({ family }) => `"${family}"`).join(",");
+    const pageFontStack = [sharedStack, '"LXGW WenKai-Page Subset"', fallbackStack]
+        .filter(Boolean)
+        .join(",");
+    const codeStack = originalCodeStack ? `${originalCodeStack},${pageFontStack}` : pageFontStack;
     // The source font is regular; advertise a weight range so browsers synthesize
     // bold weights from these same glyphs instead of falling back to system CJK.
-    const css = `@font-face{font-family:"LXGW WenKai-Page Subset";src:url("${rel}") format("woff2");font-style:normal;font-weight:100 900;font-display:swap;unicode-range:${formatUnicodeRange(chars)}}:root{--font-body:"LXGW WenKai-Page Subset",${fallbackStack};--font-code:${codeStack}}body{font-family:var(--font-body),${fallbackStack}}`;
+    const sharedFaces = sharedFonts
+        .map(
+            ({ family, filename, chars: sharedChars }) =>
+                `@font-face{font-family:"${family}";src:url("${publicUrlPrefix}${filename}") format("woff2");font-style:normal;font-weight:100 900;font-display:swap;unicode-range:${formatUnicodeRange(sharedChars)}}`,
+        )
+        .join("");
+    const css = `${sharedFaces}@font-face{font-family:"LXGW WenKai-Page Subset";src:url("${rel}") format("woff2");font-style:normal;font-weight:100 900;font-display:swap;unicode-range:${formatUnicodeRange(chars)}}:root{--font-body:${pageFontStack};--font-code:${codeStack}}body{font-family:var(--font-body),${fallbackStack}}`;
     for (const style of styles) {
         for (const node of style.childNodes) {
             if (node.nodeName !== "#text" || !("value" in node)) continue;
@@ -398,11 +505,28 @@ function renderPageFont(
             { name: "href", value: rel },
             { name: "data-stalux-page-font-preload", value: "" },
         ]);
+        for (const sharedFont of sharedFonts) {
+            if (sharedFont.group !== "header") continue;
+            const sharedPreload = defaultTreeAdapter.createElement("link", htmlNamespaces.NS.HTML, [
+                { name: "rel", value: "preload" },
+                { name: "as", value: "font" },
+                { name: "type", value: "font/woff2" },
+                { name: "crossorigin", value: "anonymous" },
+                { name: "href", value: `${publicUrlPrefix}${sharedFont.filename}` },
+                { name: "data-stalux-shared-font-preload", value: sharedFont.group },
+            ]);
+            defaultTreeAdapter.appendChild(head, sharedPreload);
+        }
         defaultTreeAdapter.appendChild(head, preload);
         defaultTreeAdapter.insertText(style, css);
         defaultTreeAdapter.appendChild(head, style);
     }
-    return { filename, sourcePath: result.path, cacheHit: result.cacheHit };
+    return {
+        filename,
+        sourcePath: result.path,
+        cacheHit: result.cacheHit,
+        glyphCount: chars.length,
+    };
 }
 
 /** Styles are selected structurally, so examples in scripts/comments/templates are untouched. */
@@ -430,7 +554,11 @@ export function removePageFontStyles(document: DefaultTreeAdapterMap["document"]
         if (
             "tagName" in node &&
             node.tagName === "link" &&
-            node.attrs.some((attr) => attr.name === "data-stalux-page-font-preload")
+            node.attrs.some(
+                (attr) =>
+                    attr.name === "data-stalux-page-font-preload" ||
+                    attr.name === "data-stalux-shared-font-preload",
+            )
         ) {
             defaultTreeAdapter.detachNode(node);
             return;
@@ -451,15 +579,18 @@ export async function writePageFontSubsetIntoDocumentAsync(
     cacheDir: string,
     publicUrlPrefix = "/_astro/fonts/",
     linkedStylesheetText = "",
+    sharedFonts: readonly SharedFontSubset[] = [],
 ): Promise<Omit<PageFontSubset, "html"> | undefined> {
-    const input = preparePageFont(fontBuffer, linkedStylesheetText, "", document);
+    const sharedChars = new Set(sharedFonts.flatMap(({ chars }) => chars));
+    const input = preparePageFont(fontBuffer, linkedStylesheetText, "", document, sharedChars);
     if (!input) return undefined;
     const result = await input.prepared.subsetAsync(input.chars.join(""), cacheDir);
-    const rendered = renderPageFont(document, publicUrlPrefix, input.chars, result);
+    const rendered = renderPageFont(document, publicUrlPrefix, input.chars, result, sharedFonts);
     return {
         filename: rendered.filename,
         sourcePath: rendered.sourcePath,
         cacheHit: rendered.cacheHit,
+        glyphCount: rendered.glyphCount,
     };
 }
 
@@ -470,7 +601,11 @@ export function clearPageFontSubsets(
 ): void {
     if (!existsSync(outputDir)) return;
     for (const name of readdirSync(outputDir)) {
-        if (name.startsWith("page-") && name.endsWith(".woff2") && !referencedFiles.has(name)) {
+        const isSubset =
+            name.startsWith("page-") ||
+            name.startsWith("shared-header-") ||
+            name.startsWith("shared-footer-");
+        if (isSubset && name.endsWith(".woff2") && !referencedFiles.has(name)) {
             unlinkSync(join(outputDir, name));
         }
     }

package/src/internal/page-output-cache.ts

@@ -15,9 +15,11 @@ export async function createPageOutputCache(
     dependencies: readonly string[],
     font?: Buffer,
     assets: readonly string[] = [],
+    contentKey = "",
 ) {
-    const hash = createHash("sha256").update("stalux-page-output-v1\0");
+    const hash = createHash("sha256").update("stalux-page-output-v2\0");
     if (font) hash.update(font);
+    if (contentKey) hash.update("\0content-key\0").update(contentKey);
     for (const dependency of [...dependencies].sort()) {
         hash.update(dependency).update("\0");
         hash.update(await fs.readFile(dependency)).update("\0");

package/src/internal/style-names.generated.ts

@@ -89,84 +89,84 @@ export const styleNames: { classes: Record<string, string>; variables: Record<st
         "stalux-footer": "s2d",
         "stalux-footer-content": "s2e",
         "stalux-home-body": "s2f",
-        "stalux-home-navs": "s2g",
-        "stalux-home-title": "s2h",
-        "stalux-license-author": "s2i",
-        "stalux-license-box": "s2j",
-        "stalux-license-content": "s2k",
-        "stalux-license-icon": "s2l",
-        "stalux-license-license": "s2m",
-        "stalux-license-title": "s2n",
-        "stalux-license-url": "s2o",
-        "stalux-license-watermark": "s2p",
-        "stalux-link-card": "s2q",
-        "stalux-link-card-avatar": "s2r",
-        "stalux-link-card-content": "s2s",
-        "stalux-link-card-description": "s2t",
-        "stalux-link-card-title": "s2u",
-        "stalux-link-list-item": "s2v",
-        "stalux-link-shell": "s2w",
-        "stalux-links": "s2x",
-        "stalux-main": "s2y",
-        "stalux-nav-container": "s2z",
-        "stalux-nav-item": "s30",
-        "stalux-nav-link": "s31",
-        "stalux-nav-list": "s32",
-        "stalux-nav-overlay": "s33",
-        "stalux-nav-scroll-btn": "s34",
-        "stalux-nav-text": "s35",
-        "stalux-nav-toggle": "s36",
-        "stalux-page-description": "s37",
-        "stalux-page-title": "s38",
-        "stalux-pagination": "s39",
-        "stalux-pagination-arrow": "s3a",
-        "stalux-pagination-content": "s3b",
-        "stalux-pagination-disabled": "s3c",
-        "stalux-pagination-inner": "s3d",
-        "stalux-pagination-label": "s3e",
-        "stalux-pagination-link": "s3f",
-        "stalux-pagination-next-post": "s3g",
-        "stalux-pagination-prev-post": "s3h",
-        "stalux-pagination-title": "s3i",
-        "stalux-post-article-footer": "s3j",
-        "stalux-post-article-header": "s3k",
-        "stalux-post-body": "s3l",
-        "stalux-post-card": "s3m",
-        "stalux-post-card-shell": "s3n",
-        "stalux-post-footer-content": "s3o",
-        "stalux-post-layout": "s3p",
-        "stalux-post-list-container": "s3q",
-        "stalux-post-meta-item": "s3r",
-        "stalux-post-meta-row": "s3s",
-        "stalux-post-metadata": "s3t",
-        "stalux-post-page": "s3u",
-        "stalux-post-page-stats": "s3v",
-        "stalux-post-reading-time": "s3w",
-        "stalux-post-source-link": "s3x",
-        "stalux-post-source-link-row": "s3y",
-        "stalux-post-taxonomy-container": "s3z",
-        "stalux-post-taxonomy-empty": "s40",
-        "stalux-post-taxonomy-item-column": "s41",
-        "stalux-post-taxonomy-item-pill": "s42",
-        "stalux-post-taxonomy-list": "s43",
-        "stalux-post-taxonomy-list-column": "s44",
-        "stalux-post-taxonomy-list-wrap": "s45",
-        "stalux-post-taxonomy-title": "s46",
-        "stalux-post-title": "s47",
-        "stalux-prose": "s48",
-        "stalux-random-container": "s49",
-        "stalux-random-error": "s4a",
-        "stalux-random-header": "s4b",
-        "stalux-random-list": "s4c",
-        "stalux-random-loading": "s4d",
-        "stalux-random-no-more": "s4e",
-        "stalux-random-refresh": "s4f",
-        "stalux-random-rotating": "s4g",
-        "stalux-random-title": "s4h",
-        "stalux-root": "s4i",
-        "stalux-sidebar": "s4j",
-        "stalux-sidebar-container": "s4k",
-        "stalux-sidebar-right": "s4l",
+        "stalux-home-title": "s2g",
+        "stalux-license-author": "s2h",
+        "stalux-license-box": "s2i",
+        "stalux-license-content": "s2j",
+        "stalux-license-icon": "s2k",
+        "stalux-license-license": "s2l",
+        "stalux-license-title": "s2m",
+        "stalux-license-url": "s2n",
+        "stalux-license-watermark": "s2o",
+        "stalux-link-card": "s2p",
+        "stalux-link-card-avatar": "s2q",
+        "stalux-link-card-content": "s2r",
+        "stalux-link-card-description": "s2s",
+        "stalux-link-card-title": "s2t",
+        "stalux-link-list-item": "s2u",
+        "stalux-link-shell": "s2v",
+        "stalux-links": "s2w",
+        "stalux-main": "s2x",
+        "stalux-nav-container": "s2y",
+        "stalux-nav-item": "s2z",
+        "stalux-nav-link": "s30",
+        "stalux-nav-list": "s31",
+        "stalux-nav-overlay": "s32",
+        "stalux-nav-scroll-btn": "s33",
+        "stalux-nav-text": "s34",
+        "stalux-nav-toggle": "s35",
+        "stalux-page-description": "s36",
+        "stalux-page-title": "s37",
+        "stalux-pagination": "s38",
+        "stalux-pagination-arrow": "s39",
+        "stalux-pagination-content": "s3a",
+        "stalux-pagination-disabled": "s3b",
+        "stalux-pagination-inner": "s3c",
+        "stalux-pagination-label": "s3d",
+        "stalux-pagination-link": "s3e",
+        "stalux-pagination-next-post": "s3f",
+        "stalux-pagination-prev-post": "s3g",
+        "stalux-pagination-title": "s3h",
+        "stalux-post-article-footer": "s3i",
+        "stalux-post-article-header": "s3j",
+        "stalux-post-body": "s3k",
+        "stalux-post-card": "s3l",
+        "stalux-post-card-shell": "s3m",
+        "stalux-post-footer-content": "s3n",
+        "stalux-post-layout": "s3o",
+        "stalux-post-list-container": "s3p",
+        "stalux-post-meta-item": "s3q",
+        "stalux-post-meta-row": "s3r",
+        "stalux-post-metadata": "s3s",
+        "stalux-post-page": "s3t",
+        "stalux-post-page-stats": "s3u",
+        "stalux-post-reading-time": "s3v",
+        "stalux-post-source-link": "s3w",
+        "stalux-post-source-link-row": "s3x",
+        "stalux-post-taxonomy-container": "s3y",
+        "stalux-post-taxonomy-empty": "s3z",
+        "stalux-post-taxonomy-item-column": "s40",
+        "stalux-post-taxonomy-item-pill": "s41",
+        "stalux-post-taxonomy-list": "s42",
+        "stalux-post-taxonomy-list-column": "s43",
+        "stalux-post-taxonomy-list-wrap": "s44",
+        "stalux-post-taxonomy-title": "s45",
+        "stalux-post-title": "s46",
+        "stalux-prose": "s47",
+        "stalux-random-container": "s48",
+        "stalux-random-error": "s49",
+        "stalux-random-header": "s4a",
+        "stalux-random-list": "s4b",
+        "stalux-random-loading": "s4c",
+        "stalux-random-no-more": "s4d",
+        "stalux-random-refresh": "s4e",
+        "stalux-random-rotating": "s4f",
+        "stalux-random-title": "s4g",
+        "stalux-root": "s4h",
+        "stalux-sidebar": "s4i",
+        "stalux-sidebar-container": "s4j",
+        "stalux-sidebar-right": "s4k",
+        "stalux-site-header": "s4l",
         "stalux-site-nav": "s4m",
         "stalux-social": "s4n",
         "stalux-social-custom-icon": "s4o",
@@ -287,48 +287,49 @@ export const styleNames: { classes: Record<string, string>; variables: Record<st
         "--stalux-bg-color": "--s1n",
         "--stalux-bg-filter": "--s1o",
         "--stalux-nav-offset": "--s1p",
-        "--stalux-text-shadow": "--s1q",
-        "--surface-glass": "--s1r",
-        "--surface-glass-shadow": "--s1s",
-        "--tag-bg": "--s1t",
-        "--tag-bg-hover": "--s1u",
-        "--tl-line": "--s1v",
-        "--tl-pad": "--s1w",
-        "--transition-fast": "--s1x",
-        "--transition-medium": "--s1y",
-        "--transition-normal": "--s1z",
-        "--transition-slow": "--s20",
-        "--transition-slower": "--s21",
-        "--transition-slowest": "--s22",
-        "--un-rotate": "--s23",
-        "--un-rotate-x": "--s24",
-        "--un-rotate-y": "--s25",
-        "--un-rotate-z": "--s26",
-        "--un-scale-x": "--s27",
-        "--un-scale-y": "--s28",
-        "--un-scale-z": "--s29",
-        "--un-skew-x": "--s2a",
-        "--un-skew-y": "--s2b",
-        "--un-translate-x": "--s2c",
-        "--un-translate-y": "--s2d",
-        "--un-translate-z": "--s2e",
-        "--updated-bg": "--s2f",
-        "--updated-border": "--s2g",
-        "--white-05p": "--s2h",
-        "--white-10p": "--s2i",
-        "--white-15p": "--s2j",
-        "--white-20p": "--s2k",
-        "--white-30p": "--s2l",
-        "--white-50p": "--s2m",
-        "--white-60p": "--s2n",
-        "--white-70p": "--s2o",
-        "--white-75p": "--s2p",
-        "--white-78p": "--s2q",
-        "--white-80p": "--s2r",
-        "--white-85p": "--s2s",
-        "--white-90p": "--s2t",
-        "--white-95p": "--s2u",
-        "--white-full": "--s2v"
+        "--stalux-site-header-height": "--s1q",
+        "--stalux-text-shadow": "--s1r",
+        "--surface-glass": "--s1s",
+        "--surface-glass-shadow": "--s1t",
+        "--tag-bg": "--s1u",
+        "--tag-bg-hover": "--s1v",
+        "--tl-line": "--s1w",
+        "--tl-pad": "--s1x",
+        "--transition-fast": "--s1y",
+        "--transition-medium": "--s1z",
+        "--transition-normal": "--s20",
+        "--transition-slow": "--s21",
+        "--transition-slower": "--s22",
+        "--transition-slowest": "--s23",
+        "--un-rotate": "--s24",
+        "--un-rotate-x": "--s25",
+        "--un-rotate-y": "--s26",
+        "--un-rotate-z": "--s27",
+        "--un-scale-x": "--s28",
+        "--un-scale-y": "--s29",
+        "--un-scale-z": "--s2a",
+        "--un-skew-x": "--s2b",
+        "--un-skew-y": "--s2c",
+        "--un-translate-x": "--s2d",
+        "--un-translate-y": "--s2e",
+        "--un-translate-z": "--s2f",
+        "--updated-bg": "--s2g",
+        "--updated-border": "--s2h",
+        "--white-05p": "--s2i",
+        "--white-10p": "--s2j",
+        "--white-15p": "--s2k",
+        "--white-20p": "--s2l",
+        "--white-30p": "--s2m",
+        "--white-50p": "--s2n",
+        "--white-60p": "--s2o",
+        "--white-70p": "--s2p",
+        "--white-75p": "--s2q",
+        "--white-78p": "--s2r",
+        "--white-80p": "--s2s",
+        "--white-85p": "--s2t",
+        "--white-90p": "--s2u",
+        "--white-95p": "--s2v",
+        "--white-full": "--s2w"
     },
     "animations": {
         "fadeInUpComment": "k0",

package/src/layouts/PostLayout.astro

@@ -52,7 +52,11 @@ const walineConfig = walineSection?.serverURL
 ---
 
 <div class="stalux-post-page">
-    <div class="stalux-post-layout">
+    <div
+        class="stalux-post-layout"
+        transition:name="stalux-article-layout"
+        transition:animate="none"
+    >
         <!-- Left Sidebar -->
         <PostLeft author={author} authorAvatar={props.authorAvatar} />
 
@@ -71,7 +75,13 @@ const walineConfig = walineSection?.serverURL
             hasImage={props.hasImage}
         >
             <slot />
-            <PostCC title={props.title} author={author} url={Astro.url.href} cc={props.cc} />
+            <PostCC
+                title={props.title}
+                author={author}
+                url={Astro.url.href}
+                cc={props.cc}
+                transitionName="stalux-article-license"
+            />
             <PostNavigation prev={props.prev} next={props.next} />
             {commentEnabled && walineConfig?.serverURL && (
                 <WalineComment

package/src/layouts/Stalux.astro

@@ -2,6 +2,7 @@
 import { getCollection } from "astro:content";
 import Footer from "@components/stalux/layout/footer.astro";
 import Head from "@components/stalux/layout/head.astro";
+import Navs from "@components/stalux/layout/navs.astro";
 import { getAccentColorStyle } from "@utils/accent-color";
 import {
     getAiDiscoveryData,
@@ -84,6 +85,15 @@ const routeAnimation = getRouteAnimation(routeKind);
         data-stalux-umami-id={headConfig?.umami?.id}
         data-stalux-umami-url={headConfig?.umami?.url}
     >
+        <header
+            class="stalux-site-header"
+            data-stalux-font-group="header"
+            transition:name="stalux-site-header"
+            transition:animate="none"
+            transition:persist="stalux-site-header"
+        >
+            <Navs />
+        </header>
         {llmPromote && (
             <section class="stalux-ai-prompt" data-stalux-ai-prompt aria-label="AI site context">
                 <p>{llmPromote}</p>
@@ -105,8 +115,10 @@ const routeAnimation = getRouteAnimation(routeKind);
         <main
             class="stalux-main"
             data-stalux-route={routeKind}
-            transition:name="stalux-page"
-            transition:animate={routeAnimation}
+            transition:name={routeKind === "article" ? "stalux-article-page" : "stalux-page"}
+            transition:animate={routeKind === "home" || routeKind === "article"
+                ? "none"
+                : routeAnimation}
         >
             <slot />
         </main>