@xingwangzhe/stalux 1.35.12 → 1.35.13

package/README.md

@@ -93,7 +93,7 @@ bun run dev
 - 🗺️ **Sitemap** (bundled; `.md` source endpoints auto-filtered)
 - 🖼️ **PhotoSwipe** image lightbox
 - 📊 **Mermaid** diagrams and flowcharts
-  Uses Merman through `@xingwangzhe/satteri-mermaid@0.8.1`, with the `dark` theme and a transparent canvas by default. The plugin supports 11 theme presets; see the [configuration reference](https://github.com/xingwangzhe/satteri-mermaid/blob/v0.8.1/docs/configuration.md). Rendering failures throw by default.
+  Uses Merman through `@xingwangzhe/satteri-mermaid@0.8.2`, with the `dark` theme and a transparent canvas by default. The plugin supports 11 theme presets; see the [configuration reference](https://github.com/xingwangzhe/satteri-mermaid/blob/v0.8.2/docs/configuration.md). Rendering failures throw by default.
 - 📐 **Math formula rendering** (Temml → MathML)
 - 💬 **Waline** comment system
 - 🤖 **LLM discovery files** (llms.txt / llms-full.txt)
@@ -112,11 +112,13 @@ Stalux ships with LXGW WenKai and a variable code font (Google Sans Code). Durin
 
 Arabic digits `0-9` are always reserved in every subset (`RESERVED_GLYPHS`), even on pages without any visible number. Digits produced at runtime by client scripts — clocks, counters, dates, injected values — never appear in the built HTML, so reserving them keeps numbers from falling back to a system font. Callers can append more characters through the optional `extraChars` argument of `writePageFontSubset`.
 
-The subset CSS uses an exact per-character `unicode-range` and `font-display: swap`, so visible text and the downloaded glyphs stay aligned. The variable code font continues to use Astro's local Fonts API.
+The subset CSS uses an exact per-character `unicode-range` and `font-display: swap`, so visible text and the downloaded glyphs stay aligned. The variable code font continues to use Astro's local Fonts API. A same-origin font preload in the HTML head discovers the body subset early; consumers need no manual font links.
 
 The persistent BLAKE3 cache key includes font bytes, face index, normalized character set, and algorithm version. Cache files live under `node_modules/.astro/` and are reused across pages and incremental builds. Font inputs are read locally; builds do not fetch fonts from the network.
 
-Multi-page builds reuse prepared font data and hashing state through `FontSubsetter`, with up to four native worker tasks for cold subsets. Font containers are decoded/extracted to SFNT before reusable HarfBuzz preprocessing preserves original outlines; Google Brotli encodes WOFF2 at quality 8. Image dimensions, image loading hints, linked CSS text, and font character extraction share one HTML parse. Shared image dimensions and CSS-generated text are also reused within each build, and image-tag edits are assembled in a single pass.
+Multi-page builds reuse prepared font data and hashing state through `FontSubsetter`, with up to four native worker tasks for cold subsets. Font containers are decoded/extracted to SFNT before reusable HarfBuzz preprocessing preserves original outlines; Google Brotli encodes WOFF2 at quality 8. Image dimensions, image loading hints, linked CSS text, and font character extraction share one HTML parse. Shared image dimensions and CSS-generated text are also reused within each build, image and font nodes are mutated on the same parse5 AST, then changed nodes are emitted once using source locations. Untouched scripts, comments, templates and subtrees retain their original source.
+
+Local image dimensions use `image-size`, including SVG and AVIF support. Normal file reads inspect at most 512 KiB; a JPEG compatibility fallback may read the full file when the size marker is first or beyond that window. Explicit dimensions and remote images are preserved. Referenced assets are hashed as streams, and content changes at the same URL invalidate the page cache regardless of image extension.
 
 Processed pages are cached under `node_modules/.astro/stalux-page-output/`. The cache checks source HTML and page paths, referenced local CSS/image content, font inputs, and processing code. Changed inputs, missing font files, and corrupt records trigger reprocessing. Unchanged pages restore their processed output; Pagefind still rebuilds the full search index on every build. Preserve `node_modules/.astro/` to reuse caches across builds; removing it safely rebuilds them.
 
@@ -214,9 +216,7 @@ Full documentation and live demo: **[stalux.needhelp.icu](https://stalux.needhel
 
 ## 🤝 WebMCP / AI Agents
 
-Stalux ships built-in WebMCP tools that let AI agents (browsers with
-`document.modelContext`, e.g. Chrome's built-in Gemini or the [Ask nekuda](https://chromewebstore.google.com/detail/ask-nekuda/amochnnbmnkjjlblolhpddkokhnalkjp)
-extension) interact with your blog directly — **no backend required**.
+Stalux exposes page-local WebMCP tools to compatible browser agents or extensions. All data comes from static build artifacts, so **no backend is required**. This is not an HTTP `/mcp` server that a desktop MCP client can connect to directly: ordinary static hosting cannot process MCP JSON-RPC POST requests. See the [WebMCP community-group draft](https://webmachinelearning.github.io/webmcp/).
 
 When a WebMCP-aware browser opens your site, these read-only tools are registered:
 
@@ -227,17 +227,22 @@ When a WebMCP-aware browser opens your site, these read-only tools are registere
 | `stalux_current_post` | Metadata of the post currently being viewed                             | `/api/posts.json`       |
 | `stalux_random_post`  | Pick a random post's metadata                                           | `/api/posts.json`       |
 | `stalux_search_posts` | Full-text search across posts                                           | Pagefind `/pagefind/`   |
-| `stalux_read_post`    | Fetch a post's normalized Markdown                                      | `/posts/{abbrlink}.md`  |
+| `stalux_read_post`    | Read Markdown in chunks, or indexed plain text when not exported         | Markdown / Pagefind    |
 | `stalux_site_info`    | Site title, URL, description + pointers to `llms.txt` / `llms-full.txt` | `site.yml` (build-time) |
 
-All tools are `readOnlyHint: true` — they never modify any state.
+All tools are `readOnlyHint: true` — they do not write site data or initiate navigation.
+
+`stalux_search_posts` merges title, tag, category and description matches from the published metadata with body hits from the [Pagefind JavaScript API](https://pagefind.app/docs/api/), using `meta.title` and `plain_excerpt`. Results include `abbrlink` and absolute URL, are deduplicated, and prioritize title matches, with up to 10 posts per call. If the full-text index is unavailable, available metadata matches are labeled `source: "metadata"`, `fullText: false`; no metadata matches yields an index-unavailable error instead of pretending the full-text search succeeded with zero hits. Highlighted HTML is not returned as the tool excerpt. Failed metadata and Pagefind module loads remain retryable.
+
+`stalux_read_post` accepts `id`, `offset` (default 0), and `maxChars` (default and maximum 50000). Offsets use UTF-16 units and never split surrogate pairs. With `promote.export_md` enabled, the result has `format: "text/markdown"` and `markdown`. If exports are disabled or the Markdown file is unavailable, it reads Pagefind using the exact `post` filter and returns `format: "text/plain"` and `content`; Markdown syntax and non-indexed content are not preserved by this fallback. Continue with `nextOffset` until it is `null`; `totalChars` and `truncated` describe the range. Disabling both Markdown exports and Pagefind returns `CONTENT_UNAVAILABLE`.
+
+Tools initialize the polyfill and register on `astro:page-load`, then unregister and stop the outgoing batch on `astro:before-swap`. Requests only read static resources; search terms are not sent to an external search service, no model is called, and no telemetry is added. The article filter ID and Markdown export flag are public HTML attributes used to select available sources. JSON, Markdown and OpenAPI exports are static files and do not advertise dynamic quotas or fixed `RateLimit-*` balances.
 
 **Enabling / disabling:** the tools follow the `conformance` setting in
 `stalux/config/ai-discovery.yml`. Set it to `disabled` to stop registering
 tools; `essential` / `recommended` / `complete` all enable them.
 
-**Browser support:** WebMCP is a W3C community-group draft (Chrome 149 Origin
-Trial). On browsers without a native `modelContext`, Stalux loads the
+**Browser support:** WebMCP is a community-group draft; native support depends on browser and version. On browsers without a native `modelContext`, Stalux loads the
 [`@mcp-b/webmcp-polyfill`](https://www.npmjs.com/package/@mcp-b/webmcp-polyfill)
 so agents still work; the polyfill becomes a no-op once native support lands.
 
@@ -265,6 +270,14 @@ jobTitle: Software Engineer # Optional; emitted as JSON-LD Person.jobTitle
 This is a build-time metadata field. It does not create a contact endpoint or expose private information; only publish a role that is already intended to be public.
 
 
+## Loading and navigation stability
+
+The root reserves scrollbar space and uses explicit line height. The homepage typewriter reserves the maximum wrapped height of its complete messages and keeps the text origin fixed; clocks reserve line boxes and use tabular digits. Existing typing, cursor and route animations remain enabled. No additional configuration is required.
+
+A wrapper around Astro ClientRouter's `astro:before-preparation` loader warms the destination body font before the DOM swap without installing it on the old page. It waits at most one second; failures, timeout and superseding navigation do not block the route. Initial loads on slow networks may still show the system fallback. Content authors must reserve dimensions for remote images and third-party embeds. Reduced-motion and print behavior remain supported.
+
+See [style maintenance](docs/STYLING.md) and [lifecycle and static interfaces](docs/RUNTIME.md). Astro development documentation is available through the [official MCP endpoint](https://mcp.docs.astro.build/mcp); `.codex/config.toml`, `.mcp.json` and `AGENTS.md` record the project setup. This development MCP is separate from the blog's browser WebMCP tools.
+
 ## Development diagnostics
 
 Stalux routes integration, content-loader and rendering diagnostics through Astro's official logger. Normal mode keeps summaries, warnings and errors. Verbose mode adds configuration/routes, component overrides, font cache, Markdown analysis/cache, content statistics, feeds, asset sync and Pagefind stages.
@@ -297,7 +310,7 @@ Keep the TypeScript 6 alias for `astro check`, upgrade Vitest and its coverage p
 
 Stalux precompiles its UnoCSS styles; consuming projects need no UnoCSS dependency or configuration. Shared CSS is a cacheable external stylesheet by default. Article/math, archive, category, tag and quote styles load with their components. Explicit Astro `build.inlineStylesheets: "always"` restores inline output. New utilities in consumer override components require the consumer’s own compiler. See [STYLING.md](./docs/STYLING.md) for maintenance and watch mode.
 
-Wide article pages use 280px sidebars within a layout up to 1920px wide, with 16px outer padding. Sidebars collapse below 1600px. UnoCSS remains the style builder; prose and integration styles use standard CSS, and build checks reject Tailwind variables and uncompiled directives.
+Wide article pages use 280px sidebars within a layout up to 1544px wide, with 16px outer padding. Sidebars collapse below 1600px. UnoCSS remains the style builder; prose and integration styles use standard CSS, and build checks reject Tailwind variables and uncompiled directives.
 
 The friend links list is up to 1600px wide with 16px horizontal padding. Cards fill their grid columns, with one to five columns depending on the viewport.
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@xingwangzhe/stalux",
-    "version": "1.35.12",
+    "version": "1.35.13",
     "description": "A powerful, modern Astro blog theme — use as template or install as plugin",
     "keywords": [
         "astro",
@@ -117,6 +117,7 @@
         "astro-seo": "^1.2.0",
         "badge-maker": "^6.0.0",
         "css-tree": "^3.2.1",
+        "image-size": "^2.0.4",
         "magic-string": "^1.4.3",
         "pagefind": "^1.5.2",
         "parse5": "^8.0.1",

package/src/components/stalux/common/Typewriter.astro

@@ -12,6 +12,11 @@ const texts = normalizeMessages(messages);
 {texts.length > 0 && (
     <div class={className} data-stalux-typewriter data-messages={JSON.stringify(texts)}>
         <span class="stalux-typewriter-accessible">{texts.join(", ")}</span>
+        <span class="stalux-typewriter-reserve" aria-hidden="true">
+            {texts.map((text) => (
+                <span>{text}</span>
+            ))}
+        </span>
         <span class="stalux-typewriter-text" data-typewriter-text aria-hidden="true">
             {texts[0]}
         </span>
@@ -37,9 +42,34 @@ registerPageLifecycle("typewriter", mountTypewriters);
     white-space: nowrap;
     border: 0;
 }
+[data-stalux-typewriter] {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    line-height: 1.25;
+}
+.stalux-typewriter-reserve,
 .stalux-typewriter-text {
+    grid-area: 1 / 1;
+    width: 100%;
+    min-width: 0;
+    align-self: center;
     overflow-wrap: anywhere;
 }
+.stalux-typewriter-text {
+    align-self: stretch;
+}
+.stalux-typewriter-reserve {
+    display: grid;
+    visibility: hidden;
+    pointer-events: none;
+    user-select: none;
+}
+.stalux-typewriter-reserve > span {
+    grid-area: 1 / 1;
+}
+.stalux-typewriter-reserve > span::after {
+    content: "\00a0";
+}
 .stalux-typewriter-text::after {
     content: "";
     display: inline-block;
@@ -71,7 +101,8 @@ registerPageLifecycle("typewriter", mountTypewriters);
     }
 }
 @media print {
-    .stalux-typewriter-text {
+    .stalux-typewriter-text,
+    .stalux-typewriter-reserve {
         display: none;
     }
     .stalux-typewriter-accessible {

package/src/components/stalux/posts/postContent.astro

@@ -10,6 +10,7 @@ import { toMachineDateTime } from "@utils/semantic-time";
 import ArticleSummary from "./ArticleSummary.astro";
 
 interface Props {
+    postId?: string | number;
     title: string;
     description?: string;
     transitionName?: string;
@@ -107,7 +108,12 @@ const mdSourceUrl = exportMd ? `${Astro.url.pathname.replace(/\/$/, "")}.md` : "
     <ArticleSummary description={props.description} label={t("post.summary")} />
 
     <!-- Article Body -->
-    <section class="stalux-post-body stalux-prose" data-pagefind-body>
+    <section
+        class="stalux-post-body stalux-prose"
+        data-pagefind-body
+        data-stalux-post-id={props.postId === undefined ? undefined : String(props.postId)}
+        data-pagefind-filter={props.postId === undefined ? undefined : "post[data-stalux-post-id]"}
+    >
         <slot />
     </section>
 </article>

package/src/index.ts

@@ -12,14 +12,7 @@ import { styleNames } from "./internal/style-names.generated.ts";
  * 基于 Astro 7.1.3 Integration API（astro:config:setup / injectRoute / injectScript）
  */
 
-import {
-    copyFileSync,
-    existsSync,
-    promises as fs,
-    mkdirSync,
-    readdirSync,
-    readFileSync,
-} from "node:fs";
+import { copyFileSync, existsSync, promises as fs, readdirSync, readFileSync } from "node:fs";
 import { createRequire } from "node:module";
 import path from "node:path";
 import { fileURLToPath } from "node:url";
@@ -40,13 +33,16 @@ import { staluxComponentsAlias } from "./internal/components-plugin";
 import {
     clearPageFontSubsets,
     readLinkedStylesheetText,
+    removePageFontStyles,
     resolveFontInputs,
-    writePageFontSubsetAsync,
+    writePageFontSubsetIntoDocumentAsync,
 } from "./internal/font-slices";
 import { findHtmlImages } from "./internal/html-images";
-import { addLocalImageDimensions, type ImageDimensions } from "./internal/image-dimensions";
+import { createHtmlMutationEmitter } from "./internal/html-output";
+import { type ImageDimensions, updateLocalImageDimensions } from "./internal/image-dimensions";
 import { createInjectedRoutes } from "./internal/injected-routes";
 import { createPageOutputCache } from "./internal/page-output-cache";
+import { syncBackgroundSvgs, syncFontAssets } from "./internal/public-assets";
 import { createRuntimeCacheKey } from "./internal/runtime-cache-key";
 import {
     appendUniquePlugin,
@@ -85,60 +81,6 @@ function buildFontsConfig(codeNormal: string, codeItalic?: string) {
     ];
 }
 
-// ---------------------------------------------------------------------------
-// 背景 SVG 判别式同步
-// ---------------------------------------------------------------------------
-
-/**
- * 把主题包的 public/background/*.svg 同步到用户项目 public/background/。
- *
- * 判别式（非无条件覆盖）：
- * - 同名文件：内容一致则跳过（幂等）；内容不同才覆盖（主题更新了 SVG）
- * - 用户新增的文件：保留，不删除（避免误删用户自定义背景）
- * - 不做整目录 force 复制
- */
-function syncBackgroundSvgs(srcDir: string): { copied: number; skipped: number } {
-    const srcBg = path.join(srcDir, "../public/background");
-    if (!existsSync(srcBg)) return { copied: 0, skipped: 0 };
-
-    const destBg = path.resolve(process.cwd(), "public", "background");
-    mkdirSync(destBg, { recursive: true });
-
-    let copied = 0;
-    let skipped = 0;
-    for (const name of readdirSync(srcBg)) {
-        if (!name.endsWith(".svg")) continue;
-        const srcFile = path.join(srcBg, name);
-        const destFile = path.join(destBg, name);
-        if (existsSync(destFile)) {
-            const srcBuf = readFileSync(srcFile);
-            const destBuf = readFileSync(destFile);
-            if (srcBuf.equals(destBuf)) {
-                skipped++; // 内容一致，跳过
-                continue;
-            }
-        }
-        copyFileSync(srcFile, destFile);
-        copied++;
-    }
-    return { copied, skipped };
-}
-
-/** Sync packaged math fonts and licensing notices; Astro does not merge integration public directories. */
-function syncFontAssets(srcDir: string): void {
-    const source = path.join(srcDir, "../public/fonts");
-    if (!existsSync(source)) return;
-    const destination = path.resolve(process.cwd(), "public/fonts");
-    mkdirSync(destination, { recursive: true });
-    for (const name of readdirSync(source)) {
-        if (!/\.(?:woff2|txt)$/u.test(name)) continue;
-        const from = path.join(source, name);
-        const to = path.join(destination, name);
-        if (existsSync(to) && readFileSync(from).equals(readFileSync(to))) continue;
-        copyFileSync(from, to);
-    }
-}
-
 // ---------------------------------------------------------------------------
 // 集成入口
 // ---------------------------------------------------------------------------
@@ -186,7 +128,6 @@ export function stalux(options: StaluxOptions = {}): AstroIntegration[] {
             }) => {
                 const started = performance.now();
                 const configLogger = logger.fork("stalux/config");
-                const assetsLogger = logger.fork("stalux/assets");
                 const routesLogger = logger.fork("stalux/routes");
                 const markdownLogger = logger.fork("stalux/markdown");
                 const fontsLogger = logger.fork("stalux/fonts");
@@ -198,6 +139,7 @@ export function stalux(options: StaluxOptions = {}): AstroIntegration[] {
                     path.join(srcDir, "styles"),
                     JSON.stringify([styleNames, modernCssTargets]) +
                         readFileSync(path.join(srcDir, "internal/compact-styles.ts"), "utf8"),
+                    path.resolve(fileURLToPath(config.root), opt.contentDir ?? "stalux", "config"),
                 );
 
                 // 1. 注入 Vite 别名 + 组件覆盖插件 + Vue 特性标记（Waline 依赖）
@@ -240,23 +182,6 @@ export function stalux(options: StaluxOptions = {}): AstroIntegration[] {
                 injectScript("page-ssr", `import "${srcDir}/styles/generated.css";`);
                 injectScript("page", `import "${srcDir}/scripts/core-runtime.ts";`);
 
-                // 2.5 同步背景 SVG 到用户项目 public/background/
-                // 纯客户端引入：SVG 以静态 URL（/background/pattern-*.svg）被 background.ts 硬编码引用，
-                // 不经过 Astro 资源管线（import.meta.glob 会打上每次构建随机的 __ASTRO_ASSET_IMAGE__ 占位符，
-                // 破坏增量构建依赖图 hash）。Astro 不会合并集成的 public 目录，这里显式同步一次。
-                // 判别式：内容一致跳过（幂等），内容不同才覆盖，用户新增文件保留。
-                try {
-                    syncFontAssets(srcDir);
-                    const { copied, skipped } = syncBackgroundSvgs(srcDir);
-                    if (copied > 0) {
-                        assetsLogger.info(`同步背景 SVG ${copied} 个（跳过 ${skipped} 个不变）`);
-                    } else if (skipped > 0) {
-                        assetsLogger.debug(`背景 SVG 无变化（跳过 ${skipped} 个）`);
-                    }
-                } catch (error) {
-                    assetsLogger.warn(`同步背景 SVG 失败: ${describeError(error)}`);
-                }
-
                 // 3. 注入所有页面路由（仅插件模式，源码模式下使用文件路由）
                 if (isPluginMode) {
                     const routes = createInjectedRoutes(new URL(".", import.meta.url));
@@ -393,6 +318,32 @@ export function stalux(options: StaluxOptions = {}): AstroIntegration[] {
                 configLogger.info(`initialized in ${(performance.now() - started).toFixed(1)}ms`);
             },
 
+            // Read final paths after every integration has finished updating configuration.
+            // Public assets must exist before Astro creates its Vite server/build asset pipeline.
+            "astro:config:done": ({ config, logger }) => {
+                const srcDir = fileURLToPath(new URL(".", import.meta.url));
+                const publicDir = fileURLToPath(config.publicDir);
+                const assetsLogger = logger.fork("stalux/assets");
+                if (pageFontData) {
+                    pageFontData.outputDir = path.join(
+                        fileURLToPath(config.outDir),
+                        "_astro",
+                        "fonts",
+                    );
+                }
+                try {
+                    syncFontAssets(srcDir, publicDir);
+                    const { copied, skipped } = syncBackgroundSvgs(srcDir, publicDir);
+                    if (copied > 0) {
+                        assetsLogger.info(`同步背景 SVG ${copied} 个（跳过 ${skipped} 个不变）`);
+                    } else if (skipped > 0) {
+                        assetsLogger.debug(`背景 SVG 无变化（跳过 ${skipped} 个）`);
+                    }
+                } catch (error) {
+                    assetsLogger.warn(`同步主题静态资源失败: ${describeError(error)}`);
+                }
+            },
+
             "astro:build:done": async ({ dir, logger: rootLogger }) => {
                 const logger = rootLogger.fork("stalux/build");
                 const started = performance.now();
@@ -406,6 +357,7 @@ export function stalux(options: StaluxOptions = {}): AstroIntegration[] {
                 const sourceDir = fileURLToPath(new URL(".", import.meta.url));
                 const resolveModule = createRequire(import.meta.url).resolve;
                 const parserEntry = resolveModule("parse5");
+                const imageSizeEntry = resolveModule("image-size");
                 const nativeEntry = resolveModule("@xingwangzhe/cjk-font-split-native");
                 const outputCache = await createPageOutputCache(
                     path.resolve("node_modules/.astro/stalux-page-output"),
@@ -415,6 +367,7 @@ export function stalux(options: StaluxOptions = {}): AstroIntegration[] {
                             "internal/font-slices.ts",
                             "internal/image-dimensions.ts",
                             "internal/html-images.ts",
+                            "internal/html-output.ts",
                             "internal/page-output-cache.ts",
                             "internal/style-names.generated.ts",
                             "plugins/feature-flags.ts",
@@ -422,11 +375,11 @@ export function stalux(options: StaluxOptions = {}): AstroIntegration[] {
                         ].map((entry) => path.join(sourceDir, entry)),
                         path.join(path.dirname(nativeEntry), "package.json"),
                         path.resolve(path.dirname(parserEntry), "../package.json"),
+                        path.resolve(path.dirname(imageSizeEntry), "../../package.json"),
                     ],
                     pageFontData?.fontBuffer,
-                    htmlFiles
-                        .filter((entry) => /\.(?:css|png|jpe?g|gif|webp)$/iu.test(entry))
-                        .map((entry) => path.join(outDir, entry)),
+                    // Track referenced files regardless of extension, including SVG/AVIF.
+                    htmlFiles.map((entry) => path.join(outDir, entry)),
                 );
                 let cacheHits = 0;
                 let optimizedImagePages = 0;
@@ -440,11 +393,7 @@ export function stalux(options: StaluxOptions = {}): AstroIntegration[] {
                 const processPage = async (entry: string) => {
                     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,
-                        "",
-                    );
-                    const cached = await outputCache.get(entry, withoutPageFont);
+                    const cached = await outputCache.get(entry, before);
                     if (cached) {
                         if (cached.font && pageFontData) {
                             if (!referencedPageFonts.has(cached.font.filename)) {
@@ -465,34 +414,32 @@ export function stalux(options: StaluxOptions = {}): AstroIntegration[] {
                     }
                     let cachedFont: { filename: string; sourcePath: string } | undefined;
                     const dependencies = new Set<string>();
-                    const document = parse(withoutPageFont, { sourceCodeLocationInfo: true });
-                    const images = findHtmlImages(withoutPageFont, document);
-                    let after = await addLocalImageDimensions(withoutPageFont, outDir, {
-                        images,
+                    const document = parse(before, { sourceCodeLocationInfo: true });
+                    const emitHtml = createHtmlMutationEmitter(before, document);
+                    removePageFontStyles(document);
+                    const images = findHtmlImages(before, document);
+                    await updateLocalImageDimensions(images, outDir, {
                         cache: dimensionsCache,
                         loadingPolicy: true,
                         dependencies,
                     });
                     if (pageFontData) {
                         const linkedStylesheetText = readLinkedStylesheetText(
-                            after,
+                            "",
                             output,
                             outDir,
                             linkedCssTextCache,
                             document,
                             dependencies,
                         );
-                        const pageFont = await writePageFontSubsetAsync(
-                            after,
+                        const pageFont = await writePageFontSubsetIntoDocumentAsync(
+                            document,
                             pageFontData.fontBuffer,
                             pageFontData.cacheDir,
                             "/_astro/fonts/",
                             linkedStylesheetText,
-                            "",
-                            document,
                         );
                         if (pageFont) {
-                            after = pageFont.html;
                             pageFontPages++;
                             cachedFont = {
                                 filename: pageFont.filename,
@@ -507,13 +454,14 @@ export function stalux(options: StaluxOptions = {}): AstroIntegration[] {
                             referencedPageFonts.add(pageFont.filename);
                         }
                     }
+                    const after = emitHtml();
                     if (after !== before) {
                         await fs.writeFile(output, after);
                         optimizedImagePages++;
                     }
                     await outputCache.set(
                         entry,
-                        withoutPageFont,
+                        before,
                         {
                             html: after,
                             font: cachedFont,