@xingwangzhe/stalux 1.25.11 → 1.25.13

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@xingwangzhe/stalux",
-    "version": "1.25.11",
+    "version": "1.25.13",
     "description": "A powerful, modern Astro blog theme — use as template or install as plugin",
     "keywords": [
         "astro",
@@ -85,12 +85,12 @@
         "prepare": "git config core.hooksPath scripts/git-hooks"
     },
     "dependencies": {
-        "@astrojs/markdown-satteri": "0.3.7",
+        "@astrojs/markdown-satteri": "0.3.8",
         "@astrojs/rss": "^4.0.19",
         "@astrojs/sitemap": "^3.7.3",
         "@expressive-code/plugin-line-numbers": "^0.44.1",
-        "@lucide/astro": "^1.33.0",
-        "@mcp-b/webmcp-polyfill": "^4.0.0",
+        "@lucide/astro": "^1.35.0",
+        "@mcp-b/webmcp-polyfill": "^5.0.1",
         "@pagefind/component-ui": "^1.5.2",
         "@waline/client": "^3.15.2",
         "@xingwangzhe/satteri-mermaid": "0.7.7",
@@ -104,20 +104,20 @@
         "photoswipe": "^5.4.4",
         "satteri": "^0.10.5",
         "simple-icons": "^16.28.0",
-        "subset-font": "^2.5.0",
+        "subset-font": "^2.6.0",
         "temml": "^0.13.4"
     },
     "devDependencies": {
         "@astrojs/check": "0.9.10",
-        "@biomejs/biome": "2.5.10",
+        "@biomejs/biome": "2.5.11",
         "@vitest/coverage-v8": "4.1.11",
-        "astro": "^7.2.4",
-        "knip": "^6.32.2",
+        "astro": "^7.2.9",
+        "knip": "^6.32.3",
         "typescript": "npm:@typescript/typescript6@6.0.2",
         "vite": "8.2.2",
         "vitest": "4.1.11"
     },
     "peerDependencies": {
-        "astro": "7.2.4"
+        "astro": "7.2.9"
     }
 }

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

@@ -5,8 +5,8 @@ import { ClientRouter } from "astro:transitions";
 import BingClarity from "@components/stalux/analytics/clarity.astro";
 import GoogleAnalytics from "@components/stalux/analytics/google.astro";
 import VerCount from "@components/stalux/common/verCount.astro";
-import { STALUX_VERSION } from "@internal/version";
 import { SEO } from "astro-seo";
+import packageJson from "../../../../package.json";
 import "@styles/base/init.css";
 import Umami from "@components/stalux/analytics/umami.astro";
 import {
@@ -33,7 +33,7 @@ const seo = buildSeoDocument({
     pathname: Astro.url.pathname,
     protocol: Astro.url.protocol,
     exportMarkdown: Boolean(promoteConfig?.export_md),
-    version: STALUX_VERSION,
+    version: packageJson.version,
 });
 const ldJson = JSON.stringify(seo.schema).replace(/<\//g, "<\\/");
 ---

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

@@ -15,7 +15,7 @@ const { t } = createTranslator(siteConfig.lang || "zh-CN");
 const navs = navsConfig?.items ?? [];
 ---
 
-<nav aria-label={t("nav.main")} transition:persist-props>
+<nav aria-label={t("nav.main")}>
     <!-- 汉堡菜单按钮 (仅窄屏显示) -->
     <button
         type="button"

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

@@ -1,5 +1,6 @@
 ---
 import { fade } from "astro:transitions";
+import "photoswipe/dist/photoswipe.css";
 import style from "@styles/components/posts/postContent.module.css";
 import "@styles/components/markdown.css";
 import { getCollection } from "astro:content";

package/src/index.ts

@@ -26,6 +26,7 @@ import { expressiveCode } from "./expressive-code";
 import { staluxComponentsAlias } from "./internal/components-plugin";
 import { type FontSlice, runFontSlicing } from "./internal/font-slices";
 import { createInjectedRoutes } from "./internal/injected-routes";
+import { createRuntimeCacheKey } from "./internal/runtime-cache-key";
 import {
     appendUniquePlugin,
     collectPluginNames,
@@ -179,6 +180,10 @@ export function stalux(options: StaluxOptions = {}): AstroIntegration[] {
                 logger,
             }) => {
                 const srcDir = fileURLToPath(new URL(".", import.meta.url));
+                const runtimeCacheKey = createRuntimeCacheKey(
+                    path.join(srcDir, "scripts"),
+                    path.resolve(srcDir, "../package.json"),
+                );
 
                 // 1. 注入 Vite 别名 + 组件覆盖插件 + Vue 特性标记（Waline 依赖）
                 updateConfig({
@@ -191,6 +196,7 @@ export function stalux(options: StaluxOptions = {}): AstroIntegration[] {
                             __VUE_OPTIONS_API__: true,
                             __VUE_PROD_DEVTOOLS__: false,
                             __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: false,
+                            __STALUX_RUNTIME_CACHE_KEY__: JSON.stringify(runtimeCacheKey),
                         },
                     },
                 });

package/src/internal/runtime-cache-key.ts

@@ -0,0 +1,35 @@
+import { createHash } from "node:crypto";
+import { readdirSync, readFileSync } from "node:fs";
+import path from "node:path";
+
+declare const __STALUX_RUNTIME_CACHE_KEY__: string;
+
+export function hashRuntimeSources(sources: ReadonlyArray<readonly [string, string]>): string {
+    const hash = createHash("sha256");
+    for (const [name, contents] of [...sources].sort(([left], [right]) =>
+        left.localeCompare(right),
+    )) {
+        hash.update(name);
+        hash.update("\0");
+        hash.update(contents);
+        hash.update("\0");
+    }
+    return hash.digest("hex").slice(0, 16);
+}
+
+function collectFiles(directory: string, root = directory): Array<readonly [string, string]> {
+    return readdirSync(directory, { withFileTypes: true }).flatMap((entry) => {
+        const target = path.join(directory, entry.name);
+        if (entry.isDirectory()) return collectFiles(target, root);
+        return [[path.relative(root, target), readFileSync(target, "utf8")] as const];
+    });
+}
+
+export function createRuntimeCacheKey(scriptsDirectory: string, packageJson: string): string {
+    return hashRuntimeSources([
+        ...collectFiles(scriptsDirectory),
+        ["package.json", readFileSync(packageJson, "utf8")],
+    ]);
+}
+
+export const getRuntimeCacheKey = (): string => __STALUX_RUNTIME_CACHE_KEY__;

package/src/layouts/Stalux.astro

@@ -2,6 +2,9 @@
 import { getCollection } from "astro:content";
 import Footer from "@components/stalux/layout/footer.astro";
 import Head from "@components/stalux/layout/head.astro";
+// Keep Pagefind styles on the layout's static CSS graph. The component JavaScript
+// remains lazy-loaded when search opens, but preview must always have stable CSS.
+import "@pagefind/component-ui/css";
 import "@styles/base/init.css";
 import "@styles/shared/stagger.css";
 import "@styles/shared/view-transitions.css";

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

@@ -1,6 +1,7 @@
 ---
 import { type CollectionEntry, getCollection, render } from "astro:content";
 import Navs from "@components/stalux/layout/navs.astro";
+import { getRuntimeCacheKey } from "@internal/runtime-cache-key";
 import PostLayout from "@layouts/PostLayout.astro";
 import Stalux from "@layouts/Stalux.astro";
 import { analyzeFeatureFlags } from "@plugins/feature-flags";
@@ -33,6 +34,7 @@ export async function getStaticPaths() {
             post.data.updated ?? post.data.date,
             prevPost ? (prevPost.data.updated ?? prevPost.data.date) : "",
             nextPost ? (nextPost.data.updated ?? nextPost.data.date) : "",
+            getRuntimeCacheKey(),
         ].join("|");
         return {
             params: { post: post.data.abbrlink },

package/src/scripts/navigation.ts

@@ -1,7 +1,21 @@
 import { registerPageLifecycle } from "./page-runtime";
+import { upgradeAndOpenSearchDialog } from "./search-dialog";
 
 interface SearchDialog extends HTMLElement {
-    open: () => void;
+    open?: () => void;
+    close?: () => void;
+}
+
+async function openSearchDialog(): Promise<void> {
+    await import("@pagefind/component-ui");
+    const dialog = document.querySelector<SearchDialog>("pagefind-modal#search");
+    await upgradeAndOpenSearchDialog(
+        {
+            whenDefined: (name) => customElements.whenDefined(name),
+            upgrade: (element) => customElements.upgrade(element),
+        },
+        dialog,
+    );
 }
 
 registerPageLifecycle("navigation", () => {
@@ -64,11 +78,7 @@ registerPageLifecycle("navigation", () => {
         async (event) => {
             event.preventDefault();
             closeNav();
-            await Promise.all([
-                import("@pagefind/component-ui"),
-                import("@pagefind/component-ui/css"),
-            ]);
-            document.querySelector<SearchDialog>("#search")?.open();
+            await openSearchDialog();
         },
         listenerOptions,
     );
@@ -102,6 +112,7 @@ registerPageLifecycle("navigation", () => {
     scheduleUpdate();
 
     return () => {
+        document.querySelector<SearchDialog>("pagefind-modal#search")?.close?.();
         controller.abort();
         resizeObserver.disconnect();
         if (frameId) cancelAnimationFrame(frameId);

package/src/scripts/photoswipe.ts

@@ -1,4 +1,5 @@
 import { registerPageLifecycle } from "./page-runtime";
+import { createRetryableInitializer } from "./retryable-initializer";
 
 const GALLERY_SELECTOR = "a.pswp-gallery-item";
 
@@ -34,23 +35,13 @@ registerPageLifecycle("photoswipe", () => {
 
     const controller = new AbortController();
     let lightbox: import("photoswipe/lightbox").default | undefined;
-    let initPromise: Promise<void> | undefined;
     let initialized = false;
 
     const initialize = async () => {
-        const [{ default: PhotoSwipeLightbox }, { default: PhotoSwipe }, { default: css }] =
-            await Promise.all([
-                import("photoswipe/lightbox"),
-                import("photoswipe"),
-                import("photoswipe/dist/photoswipe.css?raw"),
-            ]);
-
-        if (!document.querySelector("style[data-photoswipe]") && css) {
-            const style = document.createElement("style");
-            style.dataset.photoswipe = "true";
-            style.textContent = css;
-            document.head.appendChild(style);
-        }
+        const [{ default: PhotoSwipeLightbox }, { default: PhotoSwipe }] = await Promise.all([
+            import("photoswipe/lightbox"),
+            import("photoswipe"),
+        ]);
 
         void enrichPhotoSwipeData(container);
         lightbox = new PhotoSwipeLightbox({
@@ -62,7 +53,7 @@ registerPageLifecycle("photoswipe", () => {
         lightbox.init();
     };
 
-    const ensureInitialized = () => (initPromise ??= initialize());
+    const ensureInitialized = createRetryableInitializer(initialize);
     const handleClick = (event: MouseEvent) => {
         const target = event.target;
         if (!(target instanceof Element)) return;
@@ -93,7 +84,6 @@ registerPageLifecycle("photoswipe", () => {
         controller.abort();
         lightbox?.destroy();
         lightbox = undefined;
-        initPromise = undefined;
         initialized = false;
     };
 });

package/src/scripts/retryable-initializer.ts

@@ -0,0 +1,13 @@
+export function createRetryableInitializer(initialize: () => Promise<void>): () => Promise<void> {
+    let pending: Promise<void> | undefined;
+
+    return () => {
+        if (!pending) {
+            pending = initialize().catch((error: unknown) => {
+                pending = undefined;
+                throw error;
+            });
+        }
+        return pending;
+    };
+}

package/src/scripts/search-dialog.ts

@@ -0,0 +1,18 @@
+export interface SearchDialogLike {
+    open?: () => void;
+}
+
+export interface CustomElementRegistryLike<ElementType> {
+    whenDefined(name: string): Promise<unknown>;
+    upgrade(element: ElementType): void;
+}
+
+export async function upgradeAndOpenSearchDialog<ElementType extends SearchDialogLike>(
+    registry: CustomElementRegistryLike<ElementType>,
+    dialog: ElementType | null,
+): Promise<void> {
+    await registry.whenDefined("pagefind-modal");
+    if (!dialog) return;
+    registry.upgrade(dialog);
+    dialog.open?.();
+}

package/src/utils/taxonomy.ts

@@ -1,5 +1,6 @@
 import type { GetStaticPathsResult } from "astro";
 
+import { getRuntimeCacheKey } from "../internal/runtime-cache-key";
 import { getPostContentIndex, type TaxonomyKey } from "./content-index";
 
 /**
@@ -17,7 +18,7 @@ export async function buildTaxonomyStaticPaths(key: TaxonomyKey): Promise<GetSta
     return [...taxonomy].map(([name, entry]) => {
         return {
             params: { [paramName]: name },
-            cacheKey: entry.cacheKey,
+            cacheKey: `${entry.cacheKey}|${getRuntimeCacheKey()}`,
             props: {
                 [paramName]: name,
                 count: entry.posts.length,