@xingwangzhe/stalux 1.37.0 → 1.38.0

package/README.md

@@ -34,7 +34,7 @@ bunx stalux init                    # Generate stalux/ content directory
 Requires Node.js 26 or later. Then configure `astro.config.ts`. All plugins are bundled into the Stalux integration by default — **no manual configuration is needed**:
 
 - **Markdown**: Mermaid (MDAST detection + HAST/SVG rendering), math formulas (Temml → MathML), word count / feature flags, and PhotoSwipe image lightbox are injected into the default `satteri()` processor automatically (math / frontmatter / gfm / smart punctuation are enabled by default).
-- **Sitemap**: `@astrojs/sitemap` is bundled (published post `/posts/*.md` endpoints are included when `promote.export_md` is enabled; other Markdown mirrors stay filtered by default).
+- **Sitemap**: Automatically generates `/sitemap.xml` after build (copies `sitemap-0.xml` for a single sitemap, or the index for multiple sitemaps). `@astrojs/sitemap` is bundled (published post `/posts/*.md` endpoints are included when `promote.export_md` is enabled; other Markdown mirrors stay filtered by default).
 - **Expressive Code**: bundled with line numbers enabled by default.
 
 ```ts

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@xingwangzhe/stalux",
-    "version": "1.37.0",
+    "version": "1.38.0",
     "description": "A powerful, modern Astro blog theme — use as template or install as plugin",
     "keywords": [
         "astro",

package/src/components/stalux/archives/toArchive.astro

@@ -9,6 +9,10 @@ const siteConfig = getSiteData(configEntries);
 const { t } = createTranslator(siteConfig.lang || "zh-CN");
 ---
 
-<div id={"stalux-to-archive-archs"}>
+<div
+    id={"stalux-to-archive-archs"}
+    transition:name="stalux-home-archive-link"
+    transition:animate="slide"
+>
     <a href="/archives" data-astro-prefetch>{t("archives.viewAll")}</a>
 </div>

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

@@ -10,7 +10,13 @@ const texts = normalizeMessages(messages);
 ---
 
 {texts.length > 0 && (
-    <div class={className} data-stalux-typewriter data-messages={JSON.stringify(texts)}>
+    <div
+        class={className}
+        data-stalux-typewriter
+        data-messages={JSON.stringify(texts)}
+        transition:name="stalux-home-typewriter"
+        transition:animate="fade"
+    >
         <span class="stalux-typewriter-accessible">{texts.join(", ")}</span>
         <span class="stalux-typewriter-reserve" aria-hidden="true">
             {texts.map((text) => (

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

@@ -20,6 +20,8 @@ const navigationHref = isHomePage ? "/about" : "/";
 <article
     class="stalux-author stalux-u-flex stalux-u-justify-center stalux-u-flex-col"
     transition:persist-props
+    transition:name={isHomePage ? "stalux-home-author" : undefined}
+    transition:animate={isHomePage ? "fade" : undefined}
 >
     <figure
         class={`stalux-author-figure ${props.iscolum ? "stalux-author-figure-column stalux-u-flex-col" : ""}`}

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

@@ -1,7 +1,14 @@
 ---
+const isHomePage = Astro.url.pathname === "/";
 ---
 
-<div id={"stalux-date-date-time"} class="date-time" transition:persist-props>
+<div
+    id={"stalux-date-date-time"}
+    class="date-time"
+    transition:persist-props
+    transition:name={isHomePage ? "stalux-home-date-time" : undefined}
+    transition:animate={isHomePage ? "fade" : undefined}
+>
     <time id={"stalux-date-date"} data-ref="date" datetime=""></time>
     <time id={"stalux-date-time"} data-ref="time" datetime=""></time>
 </div>

package/src/components/stalux/layout/PageHeading.astro

@@ -0,0 +1,27 @@
+---
+interface Props {
+    heading: string;
+    description?: string;
+}
+
+const { heading, description } = Astro.props;
+---
+
+<>
+    <h1
+        class="stalux-page-title stalux-u-text-center"
+        transition:name="stalux-page-title"
+        transition:animate="none"
+    >
+        {heading}
+    </h1>
+    {description && (
+        <div
+            class="stalux-page-description stalux-u-text-center"
+            transition:name="stalux-page-description"
+            transition:animate="none"
+        >
+            {description}
+        </div>
+    )}
+</>

package/src/components/stalux/layout/footer.astro

@@ -51,7 +51,12 @@ const totalWordCount = await getTotalWordCount(Astro.logger);
 const formattedWordCount = formatWordCount(totalWordCount, siteConfig.lang || "zh-CN");
 ---
 
-<footer class="stalux-footer stalux-u-w-full stalux-u-text-center" transition:persist-props>
+<footer
+    class="stalux-footer stalux-u-w-full stalux-u-text-center"
+    data-stalux-font-group="footer"
+    transition:persist="stalux-site-footer"
+    transition:persist-props
+>
     <div class="stalux-footer-content stalux-u-flex stalux-u-flex-col">
         <!-- 版权信息 -->
         {footerConfig?.copyright?.enabled && (

package/src/components/stalux/layout/listPage.astro

@@ -1,9 +1,8 @@
 ---
 import { getCollection } from "astro:content";
-import Navs from "@components/stalux/layout/navs.astro";
 import Stalux from "@layouts/Stalux.astro";
-
 import { getSiteData } from "@utils/config-utils";
+import PageHeading from "./PageHeading.astro";
 
 interface Props {
     title: string;
@@ -18,9 +17,6 @@ const siteConfig = getSiteData(configEntries);
 ---
 
 <Stalux title={`${title} | ${siteConfig.title}`} description={description}>
-    <div style="height: 3em;"></div>
-    <Navs />
-    <h1 class="stalux-page-title stalux-u-text-center">{heading}</h1>
-    {subheading && <div class="stalux-page-description stalux-u-text-center">{subheading}</div>}
+    <PageHeading heading={heading} description={subheading} />
     <slot />
 </Stalux>

package/src/components/stalux/links/socialMedia.astro

@@ -18,6 +18,7 @@ const configEntries = await getCollection("config");
 const mediaLinksSection = getMediaLinksData(configEntries);
 const mediaLinks = mediaLinksSection?.items ?? [];
 const isPostPage = Astro.url.pathname.startsWith("/posts/");
+const isHomePage = Astro.url.pathname === "/";
 
 // 静态图标映射表：新增图标时只需添加对应的 simple-icons 导入和映射
 const iconMap: Record<string, SimpleIcon> = {
@@ -37,6 +38,8 @@ function getIconByTitle(iconName: string): SimpleIcon | undefined {
 <nav
     class="stalux-social"
     transition:persist-props
+    transition:name={isHomePage ? "stalux-home-social" : undefined}
+    transition:animate={isHomePage ? "fade" : undefined}
     aria-label="Social media"
     data-stalux-social-animate={String(!isPostPage)}
 >

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

@@ -2,13 +2,19 @@
 interface Props {
     description?: string;
     label: string;
+    transitionName: string;
 }
-const { description, label } = Astro.props;
+const { description, label, transitionName } = Astro.props;
 const summary = description?.trim();
 ---
 
 {summary && (
-    <aside class="stalux-article-summary" aria-label={label}>
+    <aside
+        class="stalux-article-summary"
+        aria-label={label}
+        transition:name={transitionName}
+        transition:animate="none"
+    >
         <p class="stalux-article-summary-label">{label}</p>
         <p class="stalux-article-summary-text">{summary}</p>
     </aside>

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

@@ -46,11 +46,12 @@ const cfg = {
 <nav
     class="stalux-post-taxonomy-container"
     transition:name={cfg.containerName}
+    transition:animate="none"
     aria-label={title ?? cfg.heading}
 >
-    {items.length > 0 && <h3 class="stalux-post-taxonomy-title">{title ?? cfg.heading}</h3>}
+    <h3 class="stalux-post-taxonomy-title">{title ?? cfg.heading}</h3>
     {items.length > 0 ? (
-        <div class={cfg.listClass} transition:name={cfg.contentName}>
+        <div class={cfg.listClass} transition:name={cfg.contentName} transition:animate="fade">
             {items.map((item) => (
                 <a
                     href={`${cfg.prefix}${item}/`}
@@ -62,6 +63,12 @@ const cfg = {
             ))}
         </div>
     ) : (
-        <div class="stalux-post-taxonomy-empty">{cfg.empty}</div>
+        <div
+            class="stalux-post-taxonomy-empty"
+            transition:name={cfg.contentName}
+            transition:animate="fade"
+        >
+            {cfg.empty}
+        </div>
     )}
 </nav>

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

@@ -11,6 +11,7 @@ interface Props {
     author: string;
     url: string;
     cc?: string;
+    transitionName?: string;
 }
 
 const configEntries = await getCollection("config");
@@ -19,13 +20,13 @@ const siteConfig = (configEntries.find((e) => e.id === "site")?.data ?? {}) as R
     unknown
 >;
 const { t } = createTranslator((siteConfig.lang as string) || "zh-CN");
-const { title, author, url, cc = "CC-BY-NC-SA-4.0" } = Astro.props;
+const { title, author, url, cc = "CC-BY-NC-SA-4.0", transitionName } = Astro.props;
 
 const licenseLink = buildCCLink(cc);
 const licenseName = buildCCName(cc, t);
 ---
 
-<div class="stalux-license-box">
+<div class="stalux-license-box" transition:name={transitionName} transition:animate="none">
     <div class="stalux-license-content">
         <p class="stalux-license-title">{title}</p>
         <p class="stalux-license-author">{t("post.author")}{author}</p>

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

@@ -15,6 +15,7 @@ interface Props {
     description?: string;
     transitionName?: string;
     titleTransitionName?: string;
+    transitionScope?: "article" | "about";
     date?: string;
     updated?: string;
     readingMinutes?: number;
@@ -23,6 +24,7 @@ interface Props {
 }
 
 const props = Astro.props as Props;
+const transitionPrefix = props.transitionScope === "about" ? "stalux-about" : "stalux-article";
 const configEntries = await getCollection("config");
 const siteConfig = getSiteData(configEntries);
 const promoteConfig = getPromoteData(configEntries);
@@ -39,14 +41,23 @@ const mdSourceUrl = exportMd ? `${Astro.url.pathname.replace(/\/$/, "")}.md` : "
 <article
     class="stalux-article"
     data-stalux-gallery={props.hasImage ? "true" : undefined}
-    transition:name={props.transitionName}
+    transition:name={props.transitionName ?? "stalux-article-container"}
+    transition:animate="none"
 >
     <!-- Article Header -->
-    <header class="stalux-post-article-header">
+    <header
+        class="stalux-post-article-header"
+        transition:name={`${transitionPrefix}-header`}
+        transition:animate="fade"
+    >
         <h1 class="stalux-post-title" transition:name={props.titleTransitionName}>
             {props.title}
         </h1>
-        <div class="stalux-post-metadata">
+        <div
+            class="stalux-post-metadata"
+            transition:name={`${transitionPrefix}-metadata`}
+            transition:animate="none"
+        >
             {props.date && (
                 <time
                     class="stalux-post-meta-item"
@@ -67,30 +78,32 @@ const mdSourceUrl = exportMd ? `${Astro.url.pathname.replace(/\/$/, "")}.md` : "
                 </time>
             )}
         </div>
-        {(
-            <div class="stalux-post-page-stats">
-                {(props.readingMinutes ?? 0) > 0 && (
-                    <span class="stalux-post-reading-time">
-                        {t("post.readingTime")}
-                        {props.readingMinutes && props.readingMinutes > 0
-                            ? props.readingMinutes < 1
-                                ? t("common.lessThanOneMinute")
-                                : t("common.minute", { n: props.readingMinutes })
-                            : ""}
-                    </span>
-                )}
-                {(props.wordCount ?? 0) > 0 && (
-                    <span class="wordCount">
-                        {t("post.wordCount")}
-                        {props.wordCount}
-                    </span>
-                )}
-                <span id="vercount_container_page_pv">
-                    {t("post.viewCount")}
-                    <span id="vercount_value_page_pv">Loading...</span>
+        <div
+            class="stalux-post-page-stats"
+            transition:name={`${transitionPrefix}-stats`}
+            transition:animate="none"
+        >
+            {(props.readingMinutes ?? 0) > 0 && (
+                <span class="stalux-post-reading-time">
+                    {t("post.readingTime")}
+                    {props.readingMinutes && props.readingMinutes > 0
+                        ? props.readingMinutes < 1
+                            ? t("common.lessThanOneMinute")
+                            : t("common.minute", { n: props.readingMinutes })
+                        : ""}
                 </span>
-            </div>
-        )}
+            )}
+            {(props.wordCount ?? 0) > 0 && (
+                <span class="wordCount">
+                    {t("post.wordCount")}
+                    {props.wordCount}
+                </span>
+            )}
+            <span id="vercount_container_page_pv">
+                {t("post.viewCount")}
+                <span id="vercount_value_page_pv">Loading...</span>
+            </span>
+        </div>
         {exportMd && (
             <div class="stalux-post-source-link-row">
                 <a
@@ -105,7 +118,11 @@ const mdSourceUrl = exportMd ? `${Astro.url.pathname.replace(/\/$/, "")}.md` : "
         )}
     </header>
 
-    <ArticleSummary description={props.description} label={t("post.summary")} />
+    <ArticleSummary
+        description={props.description}
+        label={t("post.summary")}
+        transitionName={`${transitionPrefix}-summary`}
+    />
 
     <!-- Article Body -->
     <section
@@ -113,6 +130,8 @@ const mdSourceUrl = exportMd ? `${Astro.url.pathname.replace(/\/$/, "")}.md` : "
         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]"}
+        transition:name={`${transitionPrefix}-body`}
+        transition:animate="none"
     >
         <slot />
     </section>

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

@@ -12,11 +12,25 @@ import { getSidebarAnimation } from "@utils/view-transitions";
     transition:name="left-sidebar"
     transition:animate={getSidebarAnimation("left")}
 >
-    <PostAuthor />
-    <div class="stalux-sidebar-container">
+    <div
+        class="stalux-sidebar-container"
+        transition:name="stalux-article-left-author"
+        transition:animate="fade"
+    >
+        <PostAuthor />
+    </div>
+    <div
+        class="stalux-sidebar-container"
+        transition:name="stalux-article-left-social"
+        transition:animate="fade"
+    >
         <SocialMedia />
     </div>
-    <div class="stalux-sidebar-container">
+    <div
+        class="stalux-sidebar-container"
+        transition:name="stalux-article-left-random"
+        transition:animate="fade"
+    >
         <RandomPost />
     </div>
 </aside>

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

@@ -21,17 +21,33 @@ const { headings = [], tags = [], categories = [] } = Astro.props;
     transition:name="right-sidebar"
     transition:animate={getSidebarAnimation("right")}
 >
-    <div class="stalux-sidebar-container">
+    <div
+        class="stalux-sidebar-container"
+        transition:name="stalux-article-right-date"
+        transition:animate="none"
+    >
         <PostDate />
         <Weather />
     </div>
-    <div class="stalux-sidebar-container">
+    <div
+        class="stalux-sidebar-container"
+        transition:name="stalux-article-right-toc"
+        transition:animate="none"
+    >
         <PostToc headings={headings} />
     </div>
-    <div class="stalux-sidebar-container">
+    <div
+        class="stalux-sidebar-container"
+        transition:name="stalux-article-right-tags"
+        transition:animate="none"
+    >
         <PostTaxonomy kind="tag" items={tags} />
     </div>
-    <div class="stalux-sidebar-container">
+    <div
+        class="stalux-sidebar-container"
+        transition:name="stalux-article-right-categories"
+        transition:animate="none"
+    >
         <PostTaxonomy kind="category" items={categories} />
     </div>
 </aside>

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

@@ -31,12 +31,13 @@ const tocItems = headings
 
 <nav
     transition:name="toc-container"
+    transition:animate="none"
     data-toc-active-class="stalux-toc-active"
     aria-label={t("taxonomy.toc")}
 >
     <h3 class="stalux-toc-title">{title}</h3>
     {tocItems.length > 0 ? (
-        <ul class="stalux-toc-list" transition:name="toc-content">
+        <ul class="stalux-toc-list" transition:name="toc-content" transition:animate="fade">
             {tocItems.map((heading) => (
                 <li>
                     <a
@@ -50,7 +51,9 @@ const tocItems = headings
             ))}
         </ul>
     ) : (
-        <div class="stalux-toc-empty">{t("taxonomy.noToc")}</div>
+        <div class="stalux-toc-empty" transition:name="toc-content" transition:animate="fade">
+            {t("taxonomy.noToc")}
+        </div>
     )}
 </nav>
 

package/src/components/stalux/tags/tagHeader.astro

@@ -27,7 +27,11 @@ if (typeKey === "category" || typeKey === "categories" || typeKey === "分类")
 }
 ---
 
-<header class="stalux-tag-header">
+<header
+    class="stalux-tag-header"
+    transition:name="stalux-taxonomy-page-header-shell"
+    transition:animate="none"
+>
     <h1 class="stalux-tag-page-title">
         <span class="stalux-tag-category-icon">
             <svg

package/src/index.ts

@@ -32,10 +32,14 @@ import { expressiveCode } from "./expressive-code";
 import { staluxComponentsAlias } from "./internal/components-plugin";
 import {
     clearPageFontSubsets,
+    collectSharedFontGlyphs,
+    createSharedFontGlyphs,
     readLinkedStylesheetText,
     removePageFontStyles,
     resolveFontInputs,
+    sharedFontCacheKey,
     writePageFontSubsetIntoDocumentAsync,
+    writeSharedFontSubsetsAsync,
 } from "./internal/font-slices";
 import { findHtmlImages } from "./internal/html-images";
 import { createHtmlMutationEmitter } from "./internal/html-output";
@@ -61,7 +65,7 @@ import { imageCaptions } from "./plugins/image-captions";
 import { temml } from "./plugins/satteri-temml";
 import { describeError } from "./utils/diagnostics";
 
-// 代码字体通过 Astro Fonts API 注入；正文字体由 native N-API 按页面生成子集。
+// 代码字体通过 Astro Fonts API 注入；正文字体由 native N-API 生成共享壳层与页面子集。
 function buildFontsConfig(codeNormal: string, codeItalic?: string) {
     return [
         {
@@ -308,7 +312,7 @@ export function stalux(options: StaluxOptions = {}): AstroIntegration[] {
                     }
                 }
 
-                // 7. 字体：解析本地字体输入；正文字体由 native N-API 在 build:done 阶段逐页生成。
+                // 7. 字体：解析本地字体输入；壳层共享子集与页面正文字形在 build:done 阶段生成。
                 try {
                     const sliced = await resolveFontInputs(process.cwd(), fontsLogger);
                     if (sliced) {
@@ -371,6 +375,26 @@ export function stalux(options: StaluxOptions = {}): AstroIntegration[] {
                 const parserEntry = resolveModule("parse5");
                 const imageSizeEntry = resolveModule("image-size");
                 const nativeEntry = resolveModule("@xingwangzhe/cjk-font-split-native");
+                const pageEntries = htmlFiles.filter((entry) => entry.endsWith(".html"));
+                let sharedFonts: Awaited<ReturnType<typeof writeSharedFontSubsetsAsync>> = [];
+                let sharedFontKey = "";
+                if (pageFontData) {
+                    const sharedGlyphs = createSharedFontGlyphs();
+                    await fs.mkdir(pageFontData.outputDir, { recursive: true });
+                    await fs.mkdir(pageFontData.cacheDir, { recursive: true });
+                    // The common shell is static across soft navigations; scan once, then
+                    // reuse each component's content-addressed subset on every route.
+                    await forEachBounded(pageEntries, 4, async (entry) => {
+                        const html = await fs.readFile(path.join(outDir, entry), "utf8");
+                        collectSharedFontGlyphs(parse(html), sharedGlyphs);
+                    });
+                    sharedFonts = await writeSharedFontSubsetsAsync(
+                        pageFontData.fontBuffer,
+                        sharedGlyphs,
+                        pageFontData.cacheDir,
+                    );
+                    sharedFontKey = sharedFontCacheKey(sharedFonts);
+                }
                 const outputCache = await createPageOutputCache(
                     path.resolve("node_modules/.astro/stalux-page-output"),
                     [
@@ -394,16 +418,24 @@ export function stalux(options: StaluxOptions = {}): AstroIntegration[] {
                     pageFontData?.fontBuffer,
                     // Track referenced files regardless of extension, including SVG/AVIF.
                     htmlFiles.map((entry) => path.join(outDir, entry)),
+                    sharedFontKey,
                 );
                 let cacheHits = 0;
                 let optimizedImagePages = 0;
                 let pageFontPages = 0;
+                let pageFontSubsetCacheHits = 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 sharedFont of sharedFonts) {
+                    copyFileSync(
+                        sharedFont.sourcePath,
+                        path.join(pageFontData?.outputDir ?? outDir, sharedFont.filename),
+                    );
+                    referencedPageFonts.add(sharedFont.filename);
+                }
                 const linkedCssTextCache = new Map<string, string>();
                 const dimensionsCache = new Map<string, Promise<ImageDimensions | undefined>>();
-                const pageEntries = htmlFiles.filter((entry) => entry.endsWith(".html"));
                 const processPage = async (entry: string) => {
                     const output = path.join(outDir, entry);
                     const before = await fs.readFile(output, "utf8");
@@ -454,9 +486,11 @@ export function stalux(options: StaluxOptions = {}): AstroIntegration[] {
                             pageFontData.cacheDir,
                             "/_astro/fonts/",
                             linkedStylesheetText,
+                            sharedFonts,
                         );
                         if (pageFont) {
                             pageFontPages++;
+                            if (pageFont.cacheHit) pageFontSubsetCacheHits++;
                             cachedFont = {
                                 filename: pageFont.filename,
                                 sourcePath: pageFont.sourcePath,
@@ -492,8 +526,17 @@ export function stalux(options: StaluxOptions = {}): AstroIntegration[] {
                 }
                 logger.info(`applied image loading hints to ${optimizedImagePages} HTML pages`);
                 logger.info(
-                    `generated page-specific body font subsets for ${pageFontPages} HTML pages`,
+                    `generated page-specific body font subsets for ${pageFontPages} HTML pages (subset cache ${pageFontSubsetCacheHits}/${pageFontPages})`,
                 );
+                if (sharedFonts.length > 0) {
+                    const sharedSummary = sharedFonts
+                        .map(
+                            ({ group, chars, cacheHit }) =>
+                                `${group} ${chars.length} glyphs${cacheHit ? " (cached)" : ""}`,
+                        )
+                        .join(", ");
+                    logger.info(`generated shared shell font subsets (${sharedSummary})`);
+                }
                 logger.info(
                     `HTML postprocessing ${(performance.now() - started).toFixed(1)}ms; cache ${cacheHits}/${htmlFiles.filter((entry) => entry.endsWith(".html")).length}`,
                 );
@@ -602,6 +645,26 @@ export function stalux(options: StaluxOptions = {}): AstroIntegration[] {
                 customPages,
                 filter,
             }),
+            {
+                name: "stalux/sitemap-alias",
+                hooks: {
+                    // Run after @astrojs/sitemap has written its output.
+                    "astro:build:done": async ({ dir, logger }) => {
+                        const base = userSitemap?.filenameBase ?? "sitemap";
+                        const source = new URL(`${base}-0.xml`, dir);
+                        if (!existsSync(source)) return;
+                        // Keep every URL discoverable when a site uses multiple chunks.
+                        const index = new URL(`${base}-index.xml`, dir);
+                        const indexXml = await fs.readFile(index, "utf8");
+                        const hasMultipleSitemaps = (indexXml.match(/<sitemap>/g)?.length ?? 0) > 1;
+                        await fs.copyFile(
+                            hasMultipleSitemaps ? index : source,
+                            new URL("sitemap.xml", dir),
+                        );
+                        logger.info("Generated sitemap.xml");
+                    },
+                },
+            },
         );
     }