@xingwangzhe/stalux 1.27.1 → 1.28.1

package/README.md

@@ -8,7 +8,7 @@
 
 **[stalux.needhelp.icu](https://stalux.needhelp.icu)**
 
-A dark-themed, high-performance Astro blog theme with elegant glassmorphism design, unicode-range font slicing, and a focus on content-first reading experience.
+A dark-themed, high-performance Astro blog theme with elegant glassmorphism design, native per-page CJK font subsets, and a focus on content-first reading experience.
 
 ---
 
@@ -77,7 +77,7 @@ bun run dev
 ## ✨ Features
 
 - 🌙 **Dark mode** with elegant glassmorphism design
-- 🔤 **Unicode-range font slicing** — 25 MB font → ~22 woff2 chunks, browser downloads only what matches the page
+- 🔤 **Native per-page font subsets** — Rust/N-API emits cached WOFF2 subsets for each page's visible CJK text
 - 🔍 **Full-text search** via Pagefind (auto-indexed on build)
 - 📡 **RSS & Atom feeds**
 - 🗺️ **Sitemap** (bundled; `.md` source endpoints auto-filtered)
@@ -97,11 +97,11 @@ bun run dev
 
 ## 🔤 Font Optimization
 
-Stalux ships with a 25 MB Chinese font (LXGW WenKai) and a variable code font (Google Sans Code). Instead of loading the full files, the build slices the body font into ~22 woff2 chunks by `unicode-range` (via the official Astro Fonts API, `fontProviders.local()`), and the browser downloads only the chunks whose range matches characters on the page — typically 1–2 chunks (~200–600 KB each) for the above-the-fold content.
+Stalux ships with LXGW WenKai and a variable code font (Google Sans Code). During the build, the Rust/N-API package `@xingwangzhe/cjk-font-split-native` creates one content-addressed WOFF2 subset from each page's visible or expandable CJK text. The browser downloads only the page subset; repeated character sets share the same file. CJK text inside code and MathML is covered too.
 
-Every page emits `@font-face` rules with continuous `unicode-range` descriptors from the `<Font />` component; chunk filenames are content-addressed and deterministic across builds, keeping `experimental.incrementalBuild` caches stable (Astro ≥ 7.2.2).
+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.
 
-Powered by `subset-font` (Harfbuzz WASM), slicing at build time into `node_modules/.astro/stalux-fonts/`; the local provider reads files from disk with no network access.
+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.
 
 ---
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@xingwangzhe/stalux",
-    "version": "1.27.1",
+    "version": "1.28.1",
     "description": "A powerful, modern Astro blog theme — use as template or install as plugin",
     "keywords": [
         "astro",
@@ -101,6 +101,7 @@
         "@mcp-b/webmcp-polyfill": "^5.1.0",
         "@pagefind/component-ui": "^1.5.2",
         "@waline/client": "^3.15.2",
+        "@xingwangzhe/cjk-font-split-native": "0.1.0",
         "@xingwangzhe/satteri-mermaid": "0.7.8",
         "@xingwangzhe/satteri-photoswipe": "^0.2.5",
         "@xingwangzhe/tags-cloud": "^1.2.8",
@@ -109,10 +110,10 @@
         "astro-typewriter": "^1.2.0",
         "badge-maker": "^6.0.0",
         "pagefind": "^1.5.2",
+        "parse5": "8.0.1",
         "photoswipe": "^5.4.4",
         "satteri": "^0.10.5",
         "simple-icons": "^16.32.0",
-        "subset-font": "^2.9.0",
         "temml": "^0.13.5"
     },
     "devDependencies": {

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

@@ -56,48 +56,40 @@ const archiveYears = [...archivesByYearMonth.entries()]
     <div class={styles.pageHeader}>
         <div class={styles.timelineContainer}>
             {archiveYears.length > 0 ? (
-                    archiveYears.map((archiveYear) => (
-                        <div
-                            class={styles.yearSection}
-                            data-year={String(archiveYear.year)}
-                        >
-                            <div class={styles.yearHeader} data-year-header style="opacity:0">
-                                <h2 class={styles.yearTitle}>{archiveYear.year}</h2>
-                                <div class={styles.yearCount}>
-                                    {t("archives.postCount", { n: archiveYear.count })}
-                                </div>
-                            </div>
-                            {archiveYear.months.map(({ month, posts: monthPosts }) => (
-                                    <div class={styles.monthSection} data-month-section style="opacity:0">
-                                        <h3 class={styles.monthTitle}>
-                                            {t("archives.month", { n: month })}
-                                        </h3>
-                                        <ul class={styles.postList}>
-                                            {monthPosts.map((post) => (
-                                                <li class={styles.postItem} data-post-item style="opacity:0">
-                                                    <time
-                                                        class={styles.postDate}
-                                                        datetime={post.data.date}
-                                                    >
-                                                        {format(parseDate(post.data.date), 'yyyy-MM-dd')}
-                                                    </time>
-                                                    <a
-                                                        href={`/posts/${post.data.abbrlink}/`}
-                                                        class={styles.postLink}
-                                                        data-astro-prefetch="viewport"
-                                                    >
-                                                        {post.data.title}
-                                                    </a>
-                                                </li>
-                                            ))}
-                                        </ul>
-                                    </div>
-                                ))}
-                        </div>
-                    ))
-                ) : (
-                    <div class={styles.noPosts}>{t("archives.noPosts")}</div>
-                )}
+    archiveYears.map((archiveYear) => (
+        <div class={styles.yearSection} data-year={String(archiveYear.year)}>
+            <div class={styles.yearHeader} data-year-header style="opacity:0">
+                <h2 class={styles.yearTitle}>{archiveYear.year}</h2>
+                <div class={styles.yearCount}>
+                    {t("archives.postCount", { n: archiveYear.count })}
+                </div>
+            </div>
+            {archiveYear.months.map(({ month, posts: monthPosts }) => (
+                <div class={styles.monthSection} data-month-section style="opacity:0">
+                    <h3 class={styles.monthTitle}>{t("archives.month", { n: month })}</h3>
+                    <ul class={styles.postList}>
+                        {monthPosts.map((post) => (
+                            <li class={styles.postItem} data-post-item style="opacity:0">
+                                <time class={styles.postDate} datetime={post.data.date}>
+                                    {format(parseDate(post.data.date), "yyyy-MM-dd")}
+                                </time>
+                                <a
+                                    href={`/posts/${post.data.abbrlink}/`}
+                                    class={styles.postLink}
+                                    data-astro-prefetch="viewport"
+                                >
+                                    {post.data.title}
+                                </a>
+                            </li>
+                        ))}
+                    </ul>
+                </div>
+            ))}
+        </div>
+    ))
+) : (
+    <div class={styles.noPosts}>{t("archives.noPosts")}</div>
+)}
         </div>
 
         <slot name="main" />

package/src/components/stalux/categories/categoriesList.astro

@@ -8,8 +8,8 @@ const categoryList = await getCategoryCountList(Astro.logger);
 
 <ul class={`${styles.categoriesList} stagger-children`}>
     {categoryList.map((category) => (
-            <li class={styles.item} style="opacity:0">
-                <CategoriesCard category={category} />
-            </li>
-        ))}
+    <li class={styles.item} style="opacity:0">
+        <CategoriesCard category={category} />
+    </li>
+))}
 </ul>

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

@@ -8,6 +8,4 @@ const configEntries = await getCollection("config");
 const typetextsConfig = getTypetextsData(configEntries);
 ---
 
-{typetextsConfig?.items && (
-        <Typewriter class={styles.typeWriter} messages={typetextsConfig?.items} />
-    )}
+{typetextsConfig?.items && <Typewriter class={styles.typeWriter} messages={typetextsConfig?.items} />}

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

@@ -25,30 +25,34 @@ function badgeImg(opts: BadgeOptions) {
 ---
 
 {badges && badges.length > 0 && (
-        <div class="badges-wrapper">
-            {badges.map((item: BadgeItem, idx: number) => {
-                if (isBadgeGroup(item)) {
-                    const groupId = `badge-group-${idx}`;
-                    return (
-                        <details class="badge-group" id={groupId}>
-                            <summary class="badge-group-summary">
-                                <span class="badge-group-arrow">&#9654;</span>
-                                <span class="badge-group-title">{item.title}</span>
-                                <span class="badge-group-hint" data-hint="expanded">{t("footer.collapse")}</span>
-                                <span class="badge-group-hint" data-hint="collapsed">{t("footer.expand")}</span>
-                            </summary>
-                            <div class="badge-group-items badges">
-                                {item.items.map((b) => (
-                                    <Fragment set:html={badgeImg(b)} />
-                                ))}
-                            </div>
-                        </details>
-                    );
-                }
-                return <Fragment set:html={badgeImg(item)} />;
-            })}
-        </div>
-    )}
+    <div class="badges-wrapper">
+        {badges.map((item: BadgeItem, idx: number) => {
+            if (isBadgeGroup(item)) {
+                const groupId = `badge-group-${idx}`;
+                return (
+                    <details class="badge-group" id={groupId}>
+                        <summary class="badge-group-summary">
+                            <span class="badge-group-arrow">&#9654;</span>
+                            <span class="badge-group-title">{item.title}</span>
+                            <span class="badge-group-hint" data-hint="expanded">
+                                {t("footer.collapse")}
+                            </span>
+                            <span class="badge-group-hint" data-hint="collapsed">
+                                {t("footer.expand")}
+                            </span>
+                        </summary>
+                        <div class="badge-group-items badges">
+                            {item.items.map((b) => (
+                                <Fragment set:html={badgeImg(b)} />
+                            ))}
+                        </div>
+                    </details>
+                );
+            }
+            return <Fragment set:html={badgeImg(item)} />;
+        })}
+    </div>
+)}
 
 <style>
 .badges-wrapper {

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

@@ -19,32 +19,28 @@ const showBeian = !!(icp || pubsec);
 ---
 
 {showBeian && (
-        <div class="beian-info">
-            {icp && (
-                <a
-                    href="https://beian.miit.gov.cn/"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                >
-                    {icp}
-                </a>
-            )}
-            {pubsec && pubsecNumber && (
-                <a
-                    href={`http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=${pubsecNumber}`}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    class="public-security-beian"
-                >
-                    <img
-                        src="https://beian.mps.gov.cn/img/logo01.dd7ff50e.png"
-                        alt={t("footer.securityIcon")}
-                    />
-                    {pubsec}
-                </a>
-            )}
-        </div>
-    )}
+    <div class="beian-info">
+        {icp && (
+            <a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer">
+                {icp}
+            </a>
+        )}
+        {pubsec && pubsecNumber && (
+            <a
+                href={`http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=${pubsecNumber}`}
+                target="_blank"
+                rel="noopener noreferrer"
+                class="public-security-beian"
+            >
+                <img
+                    src="https://beian.mps.gov.cn/img/logo01.dd7ff50e.png"
+                    alt={t("footer.securityIcon")}
+                />
+                {pubsec}
+            </a>
+        )}
+    </div>
+)}
 
 <style>
 .beian-info {

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

@@ -16,35 +16,36 @@ const { showStats = true, wordCount, buildtime } = Astro.props;
 ---
 
 {showStats && (
-        <p class="site-stats">
-            <span id="vercount_container_site_uv">
-                {t("footer.visitors")}<span id="vercount_value_site_uv">Loading...</span>{" "}
-                {t("footer.visits")}
-            </span>
-            <span class="stats-separator">|</span>
-            <span id="vercount_container_site_pv">
-                {t("footer.totalVisits")}
-                <span id="vercount_value_site_pv">Loading...</span> {t("footer.times")}
-            </span>
-            <span class="stats-separator">|</span>
-            <span id="word-count-container">
-                {t("footer.totalWords")}
-                <span id="word-count-value">
-                    {wordCount ?? "Loading..."}
-                </span>{" "}
-                {t("footer.chars")}
-            </span>
-        </p>
-    )}
+    <p class="site-stats">
+        <span id="vercount_container_site_uv">
+            {t("footer.visitors")}
+            <span id="vercount_value_site_uv">Loading...</span> {t("footer.visits")}
+        </span>
+        <span class="stats-separator">|</span>
+        <span id="vercount_container_site_pv">
+            {t("footer.totalVisits")}
+            <span id="vercount_value_site_pv">Loading...</span> {t("footer.times")}
+        </span>
+        <span class="stats-separator">|</span>
+        <span id="word-count-container">
+            {t("footer.totalWords")}
+            <span id="word-count-value">{wordCount ?? "Loading..."}</span> {t("footer.chars")}
+        </span>
+    </p>
+)}
 
 {buildtime && (
-        <div class="site-build-time" data-stalux-buildtime={buildtime} data-stalux-runtime-format={t("footer.runtimeFormat")}>
-            <span>
-                {t("footer.runningTime")}
-                <span id="runtime-counter" />
-            </span>
-        </div>
-    )}
+    <div
+        class="site-build-time"
+        data-stalux-buildtime={buildtime}
+        data-stalux-runtime-format={t("footer.runtimeFormat")}
+    >
+        <span>
+            {t("footer.runningTime")}
+            <span id="runtime-counter" />
+        </span>
+    </div>
+)}
 
 <style>
 .site-stats {

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

@@ -9,34 +9,30 @@ const showThemeInfoSection = !!(showPoweredBy || showThemeInfo);
 ---
 
 {showThemeInfoSection && (
-        <div class="theme-info">
-            {showPoweredBy && (
-                <span>
-                    Powered by
-                    <a
-                        href="https://astro.build"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                    >
-                        Astro
-                    </a>
-                </span>
-            )}
-            {showPoweredBy && showThemeInfo && <span> | </span>}
-            {showThemeInfo && (
-                <span>
-                    Theme is
-                    <a
-                        href="https://github.com/xingwangzhe/stalux"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                    >
-                        Stalux
-                    </a>
-                </span>
-            )}
-        </div>
-    )}
+    <div class="theme-info">
+        {showPoweredBy && (
+            <span>
+                Powered by
+                <a href="https://astro.build" target="_blank" rel="noopener noreferrer">
+                    Astro
+                </a>
+            </span>
+        )}
+        {showPoweredBy && showThemeInfo && <span> | </span>}
+        {showThemeInfo && (
+            <span>
+                Theme is
+                <a
+                    href="https://github.com/xingwangzhe/stalux"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                >
+                    Stalux
+                </a>
+            </span>
+        )}
+    </div>
+)}
 
 <style>
 .theme-info {

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

@@ -54,26 +54,17 @@ const formattedWordCount = formatWordCount(totalWordCount, siteConfig.lang || "z
     <div class={footerStyle.footerContent}>
         <!-- 版权信息 -->
         {footerConfig?.copyright?.enabled && (
-                <FooterCopyright
-                    author={author}
-                    startYear={footerConfig?.copyright?.startYear}
-                />
-            )}
+    <FooterCopyright author={author} startYear={footerConfig?.copyright?.startYear} />
+)}
 
         <!-- 徽章展示 -->
         <FooterBadges badges={badges} />
 
         <!-- 备案信息 -->
         <FooterBeian
-            icp={footerConfig?.beian?.icp?.enabled
-                ? footerConfig?.beian?.icp?.number
-                : undefined}
-            pubsec={footerConfig?.beian?.security?.enabled
-                ? footerConfig?.beian?.security?.text
-                : undefined}
-            pubsecNumber={footerConfig?.beian?.security?.enabled
-                ? footerConfig?.beian?.security?.number
-                : undefined}
+            icp={footerConfig?.beian?.icp?.enabled ? footerConfig?.beian?.icp?.number : undefined}
+            pubsec={footerConfig?.beian?.security?.enabled ? footerConfig?.beian?.security?.text : undefined}
+            pubsecNumber={footerConfig?.beian?.security?.enabled ? footerConfig?.beian?.security?.number : undefined}
         />
 
         <!-- 主题信息 -->

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

@@ -50,17 +50,13 @@ const ldJson = JSON.stringify(seo.schema).replace(/<\//g, "<\\/");
         openGraph={seo.openGraph}
         twitter={seo.twitter}
         extend={{
-            link: seo.links,
-            meta: seo.meta,
-    }}
+    link: seo.links,
+    meta: seo.meta,
+}}
     />
-    <!-- 字体：由 Astro Fonts API 注入（--font-body 分片 / --font-code 可变字体），
-       <Font /> 输出 @font-face 样式；浏览器按 unicode-range 按需下载正文分片 -->
-    <Font cssVariable="--font-body" />
+    <!-- 代码字体由 Astro Fonts API 注入；正文按页面生成 native CJK 子集。 -->
     <Font cssVariable="--font-code" />
-    {(headConfig?.anyhead) && (
-      <Fragment set:html={headConfig.anyhead} />
-    )}
+    {headConfig?.anyhead && <Fragment set:html={headConfig.anyhead} />}
     {headConfig?.googleAnalyticsId && <GoogleAnalytics />}
     {headConfig?.bingClarityId && <BingClarity />}
     {headConfig?.umami?.id && headConfig?.umami?.url && <Umami />}

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

@@ -45,23 +45,21 @@ const navs = navsConfig?.items ?? [];
 
         <ul data-ref="stalux-nav-list" class={styles.navList}>
             {navs.map((item) => {
-                    const NavIcon = item.icon ? getLucideIcon(item.icon, Astro.logger) : null;
-                    return (
-                        <li class={styles.navItem}>
-                            <a
-                                href={item.link}
-                                class={styles.navLink}
-                                data-ref="stalux-nav-link"
-                                data-astro-prefetch
-                            >
-                                {NavIcon && (
-                                    <NavIcon size={20} stroke-width={2} class="nav-icon" />
-                                )}
-                                <span class={styles.navText}>{item.title}</span>
-                            </a>
-                        </li>
-                    );
-                })}
+    const NavIcon = item.icon ? getLucideIcon(item.icon, Astro.logger) : null;
+    return (
+        <li class={styles.navItem}>
+            <a
+                href={item.link}
+                class={styles.navLink}
+                data-ref="stalux-nav-link"
+                data-astro-prefetch
+            >
+                {NavIcon && <NavIcon size={20} stroke-width={2} class="nav-icon" />}
+                <span class={styles.navText}>{item.title}</span>
+            </a>
+        </li>
+    );
+})}
             <li class={styles.navItem}>
                 <a
                     href="#search"
@@ -69,9 +67,7 @@ const navs = navsConfig?.items ?? [];
                     data-ref="stalux-search-btn"
                     aria-label={t("search.title")}
                 >
-                    {SearchIcon && (
-                        <SearchIcon size={20} stroke-width={2} class="nav-icon" />
-                    )}
+                    {SearchIcon && <SearchIcon size={20} stroke-width={2} class="nav-icon" />}
                     <span class={styles.navText}>{t("nav.search")}</span>
                 </a>
             </li>

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

@@ -11,8 +11,8 @@ const links = linksConfig?.sites ?? [];
 
 <ul class={`${styles.list} stagger-children`}>
     {links.map((link) => (
-            <li class={styles.item}>
-                <LinkCard link={link} />
-            </li>
-        ))}
+    <li class={styles.item}>
+        <LinkCard link={link} />
+    </li>
+))}
 </ul>

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

@@ -42,40 +42,40 @@ function getIconByTitle(iconName: string): SimpleIcon | undefined {
 >
     <ul>
         {mediaLinks.map((item) => {
-                const icon = item.icon ? getIconByTitle(item.icon) : undefined;
-                return (
-                    <li class="social_icon">
-                        <a
-                            href={item.link}
-                            target="_blank"
-                            aria-label={item.icon}
-                            rel="noopener noreferrer"
-                            title={item.icon}
-                            class="a-none"
+    const icon = item.icon ? getIconByTitle(item.icon) : undefined;
+    return (
+        <li class="social_icon">
+            <a
+                href={item.link}
+                target="_blank"
+                aria-label={item.icon}
+                rel="noopener noreferrer"
+                title={item.icon}
+                class="a-none"
+            >
+                {icon ? (
+                    <div class="icon-container">
+                        <svg
+                            role="img"
+                            viewBox="0 0 24 24"
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="24"
+                            height="24"
+                            fill="currentColor"
+                            aria-hidden="true"
                         >
-                            {icon ? (
-                                <div class="icon-container">
-                                    <svg
-                                        role="img"
-                                        viewBox="0 0 24 24"
-                                        xmlns="http://www.w3.org/2000/svg"
-                                        width="24"
-                                        height="24"
-                                        fill="currentColor"
-                                        aria-hidden="true"
-                                    >
-                                        <title>{icon.title}</title>
-                                        <path d={icon.path} />
-                                    </svg>
-                                </div>
-                            ) : (
-                                <span class="custom-icon">
-                                    {item.icon ? item.icon.charAt(0).toUpperCase() : ""}
-                                </span>
-                            )}
-                        </a>
-                    </li>
-                );
-            })}
+                            <title>{icon.title}</title>
+                            <path d={icon.path} />
+                        </svg>
+                    </div>
+                ) : (
+                    <span class="custom-icon">
+                        {item.icon ? item.icon.charAt(0).toUpperCase() : ""}
+                    </span>
+                )}
+            </a>
+        </li>
+    );
+})}
     </ul>
 </nav>