@xingwangzhe/stalux 1.46.1 → 1.46.5

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@xingwangzhe/stalux",
-    "version": "1.46.1",
+    "version": "1.46.5",
     "description": "A powerful, modern Astro blog theme — use as template or install as plugin",
     "keywords": [
         "astro",
@@ -91,7 +91,7 @@
         "knip": "knip",
         "verify:build": "node scripts/verify-build.ts",
         "validate": "bun run styles:build && bun run check && bun run node:check && bun run astro:check && bun run knip && bun run test:coverage && bun run build && bun run build:cli",
-        "prepare": "git config core.hooksPath scripts/git-hooks",
+        "prepare": "sh -c 'if [ -d scripts/git-hooks ] && git rev-parse --git-dir >/dev/null 2>&1; then git config core.hooksPath scripts/git-hooks; fi'",
         "dev:debug": "STALUX_DEBUG=1 astro dev --verbose",
         "build:debug": "STALUX_DEBUG=1 astro build --timings --verbose && node scripts/verify-build.ts",
         "styles:build": "node scripts/build-styles.ts && node scripts/build-style-names.ts",
@@ -145,6 +145,7 @@
         "@unocss/astro": "^66.11.0",
         "@vitest/coverage-v8": "^5.0.4",
         "astro": "^7.4.2",
+        "happy-dom": "^21.0.4",
         "knip": "^6.41.0",
         "sharp": "0.35.5",
         "sonda": "^0.14.0",

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

@@ -56,7 +56,7 @@ const archiveYears = [...archivesByYearMonth.entries()]
     }));
 ---
 
-<section class="stalux-archive-container" data-stalux-motion-content>
+<section class="stalux-archive-container" data-stalux-motion-content data-stalux-motion-stage>
     <div class="stalux-archive-page-header">
         <div class="stalux-archive-timeline-container">
             {archiveYears.length > 0 ? (

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

@@ -7,7 +7,12 @@ import { getCategoryCountList } from "@utils/collections-stats";
 const categoryList = await getCategoryCountList(Astro.logger);
 ---
 
-<ul class="stalux-categories" data-stalux-motion-content data-stalux-reveal>
+<ul
+    class="stalux-categories"
+    data-stalux-motion-content
+    data-stalux-motion-stage
+    data-stalux-reveal
+>
     {categoryList.map((category) => (
         <li data-stalux-reveal-item>
             <CategoriesCard category={category} />

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

@@ -31,7 +31,7 @@ const zh = (site.lang || "zh-CN").startsWith("zh");
                 {zh ? "访客 IP 与位置加载中…" : "Loading visitor IP and location…"}
             </p>
         )}
-        <p class="stalux-weather-status" data-weather-status></p>
+        <p class="stalux-weather-status" data-weather-status />
         <button type="button" data-weather-retry hidden>
             {zh ? "重试" : "Retry"}
         </button>

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

@@ -7,7 +7,7 @@
 (() => {
     const dateElement = document.querySelector('[data-ref="date"]');
     const timeElement = document.querySelector('[data-ref="time"]');
-    if (!dateElement || !timeElement) return;
+    if (!(dateElement && timeElement)) return;
     const now = new Date();
     const pad = (value) => String(value).padStart(2, "0");
     const lang = document.documentElement.lang || "zh-CN";

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

@@ -35,6 +35,8 @@ const showBeian = !!(icp || pubsec);
                 <img
                     src="https://beian.mps.gov.cn/img/logo01.dd7ff50e.png"
                     alt={t("footer.securityIcon")}
+                    width="15"
+                    height="15"
                 />
                 {pubsec}
             </a>

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

@@ -18,7 +18,7 @@ import {
 import { toMachineDateTime } from "@utils/semantic-time";
 import { buildSeoDocument, type SeoPageInput } from "@utils/seo-document";
 import { SEO } from "astro-seo";
-import packageJson from "../../../../package.json";
+import packageJson from "../../../../package.json" with { type: "json" };
 
 const configEntries = await getCollection("config");
 const siteConfig = getSiteData(configEntries);

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

@@ -10,7 +10,7 @@ const linksConfig = getLinksData(configEntries);
 const links = linksConfig?.sites ?? [];
 ---
 
-<ul class="stalux-links" data-stalux-motion-content data-stalux-reveal>
+<ul class="stalux-links" data-stalux-motion-content data-stalux-motion-stage data-stalux-reveal>
     {links.map((link) => (
         <li class="stalux-link-list-item" data-stalux-reveal-item>
             <LinkCard link={link} />

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

@@ -38,7 +38,11 @@ const exportMd = Boolean(promoteConfig?.export_md) && !isAboutPage;
 const mdSourceUrl = exportMd ? `${Astro.url.pathname.replace(/\/$/, "")}.md` : "";
 ---
 
-<article class="stalux-article" data-stalux-gallery={props.hasImage ? "true" : undefined}>
+<article
+    class="stalux-article"
+    data-stalux-motion-stage
+    data-stalux-gallery={props.hasImage ? "true" : undefined}
+>
     <!-- Article Header -->
     <header class="stalux-post-article-header" data-stalux-motion-region>
         <h1 class="stalux-post-title" data-stalux-motion-focus>

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

@@ -11,7 +11,12 @@ const props = Astro.props as Props;
 const posts = props.posts ?? (await getCollection("posts", ({ data }) => !data.draft));
 ---
 
-<div data-stalux="postlist" class="stalux-post-list-container" data-stalux-motion-content>
+<div
+    data-stalux="postlist"
+    class="stalux-post-list-container"
+    data-stalux-motion-content
+    data-stalux-motion-stage
+>
     <ul class="post-list" data-stalux-reveal>
         {posts.map((post, index) => (
             <li data-stalux-reveal-item>

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

@@ -14,7 +14,14 @@ interface Props {
 const { headings = [], tags = [], categories = [] } = Astro.props;
 ---
 
-<aside class="stalux-sidebar-right" data-stalux-scroll-pane>
+<!--
+    The right column is a shell. Between two articles it keeps its node, its
+    scroll position and its frame; only the three article-specific lists inside
+    the slots are refreshed (see scripts/shell-hydration.ts). Rebuilding the whole
+    aside on every article change made the reader watch the sidebar disappear and
+    reflow, and it cost a full layout of the new article to do it.
+-->
+<aside class="stalux-sidebar-right" data-stalux-scroll-pane data-swup-persist="post-sidebar-right">
     <div
         class="stalux-sidebar-container"
         data-stalux-module="sidebar"
@@ -23,13 +30,13 @@ const { headings = [], tags = [], categories = [] } = Astro.props;
         <PostDate />
         <Weather />
     </div>
-    <div class="stalux-sidebar-container">
+    <div class="stalux-sidebar-container" data-stalux-shell-slot="toc">
         <PostToc headings={headings} />
     </div>
-    <div class="stalux-sidebar-container">
+    <div class="stalux-sidebar-container" data-stalux-shell-slot="tags">
         <PostTaxonomy kind="tag" items={tags} />
     </div>
-    <div class="stalux-sidebar-container">
+    <div class="stalux-sidebar-container" data-stalux-shell-slot="categories">
         <PostTaxonomy kind="category" items={categories} />
     </div>
 </aside>

package/src/components/stalux/words/wordList.astro

@@ -19,14 +19,17 @@ const sorted = [...entries].sort((a, b) => {
 });
 ---
 
-<ul class="stalux-word-list-list" data-stalux-motion-content data-stalux-reveal>
-    {sorted.map((entry) => {
-        return (
-            <li class="stalux-word-list-item" data-stalux-reveal-item>
-                <WordCard entry={entry} timezone={timezone} />
-            </li>
-        );
-    })}
+<ul
+    class="stalux-word-list-list"
+    data-stalux-motion-content
+    data-stalux-motion-stage
+    data-stalux-reveal
+>
+    {sorted.map((entry) => (
+        <li class="stalux-word-list-item" data-stalux-reveal-item>
+            <WordCard entry={entry} timezone={timezone} />
+        </li>
+    ))}
 </ul>
 
 <script src="../../../scripts/word-list.ts"></script>

package/src/index.ts

@@ -678,7 +678,7 @@ export function stalux(options: StaluxOptions = {}): AstroIntegration[] {
             const postsDir = path.resolve(process.cwd(), contentDir, "posts");
             if (existsSync(postsDir)) {
                 for (const filename of readdirSync(postsDir)) {
-                    if (!filename.endsWith(".md") && !filename.endsWith(".mdx")) {
+                    if (!(filename.endsWith(".md") || filename.endsWith(".mdx"))) {
                         continue;
                     }
                     const source = readFileSync(path.join(postsDir, filename), "utf8");

package/src/internal/compact-styles.ts

@@ -80,7 +80,7 @@ function markupEdits(value: string, names: Names): Edit[] {
             if (["pre", "code", "script", "style"].includes(node.tagName)) return;
             for (const attr of node.attrs) {
                 const loc = node.sourceCodeLocation?.attrs?.[attr.name];
-                if (!loc || !["class", "style", "data-toc-active-class"].includes(attr.name))
+                if (!(loc && ["class", "style", "data-toc-active-class"].includes(attr.name)))
                     continue;
                 const raw = value.slice(loc.startOffset, loc.endOffset);
                 const offset = loc.startOffset + raw.indexOf("=") + 1;

package/src/internal/font-slices.ts

@@ -258,7 +258,7 @@ function isHiddenElement(attrs: Array<{ name: string; value: string }>): boolean
 const CONTROL_CHARACTER = /\p{C}/u;
 function addGlyphs(text: string, output: Set<string>): void {
     for (const char of text)
-        if (!output.has(char) && !CONTROL_CHARACTER.test(char)) output.add(char);
+        if (!(output.has(char) || CONTROL_CHARACTER.test(char))) output.add(char);
 }
 
 function collectBodyText(node: HtmlNode, output: Set<string>, skipSharedComponents = false): void {
@@ -410,7 +410,7 @@ function preparePageFont(
     excludedChars: ReadonlySet<string> = new Set(),
 ) {
     const body = findBody(document);
-    if (!body) return undefined;
+    if (!body) return;
 
     const glyphs = new Set<string>();
     addGlyphs(RESERVED_GLYPHS, glyphs);
@@ -425,7 +425,7 @@ function preparePageFont(
     const chars = [...glyphs].sort(
         (a, b) => (a.codePointAt(0) as number) - (b.codePointAt(0) as number),
     );
-    if (chars.length === 0) return undefined;
+    if (chars.length === 0) return;
 
     let prepared = preparedFonts.get(fontBuffer);
     if (!prepared) {

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

@@ -59,14 +59,13 @@ export async function createPageOutputCache(
                 for (const [asset, expected] of record.assets) {
                     if ((await assetDigest(asset)) !== expected) return undefined;
                 }
-                if (record.font) {
-                    if (
-                        !/^page-[a-f\d]+\.woff2$/u.test(record.font.filename) ||
+                if (
+                    record.font &&
+                    (!/^page-[a-f\d]+\.woff2$/u.test(record.font.filename) ||
                         typeof record.font.sourcePath !== "string" ||
-                        !(await fs.stat(record.font.sourcePath)).isFile()
-                    )
-                        return undefined;
-                }
+                        !(await fs.stat(record.font.sourcePath)).isFile())
+                )
+                    return undefined;
                 return { html: record.html, font: record.font };
             } catch {
                 // Missing, truncated, or invalid cache entries are rebuilt from source.

package/src/internal/social-card-renderer.ts

@@ -87,7 +87,7 @@ async function loadCoverUncached(cover: string, paths: SocialCardPaths): Promise
         if (cachedStat && Date.now() - cachedStat.mtimeMs < 86_400_000)
             return readFile(remoteCache);
         const response = await fetch(url, { signal: AbortSignal.timeout(8000) });
-        if (!response.ok || !response.headers.get("content-type")?.startsWith("image/"))
+        if (!(response.ok && response.headers.get("content-type")?.startsWith("image/")))
             throw new Error(`cover returned HTTP ${response.status} or non-image content`);
         const chunks: Uint8Array[] = [];
         let size = 0;
@@ -100,8 +100,7 @@ async function loadCoverUncached(cover: string, paths: SocialCardPaths): Promise
         bytes = Buffer.concat(chunks);
         const dimensions = imageSize(bytes);
         if (
-            !dimensions.width ||
-            !dimensions.height ||
+            !(dimensions.width && dimensions.height) ||
             dimensions.width * dimensions.height > 32_000_000
         )
             throw new Error("invalid cover dimensions");
@@ -110,8 +109,7 @@ async function loadCoverUncached(cover: string, paths: SocialCardPaths): Promise
     }
     const dimensions = imageSize(bytes);
     if (
-        !dimensions.width ||
-        !dimensions.height ||
+        !(dimensions.width && dimensions.height) ||
         dimensions.width * dimensions.height > 32_000_000
     )
         throw new Error("invalid or oversized cover dimensions");

package/src/pages/og/[image].[format].ts

@@ -15,7 +15,7 @@ export async function getStaticPaths() {
     return posts
         .filter(
             (post) =>
-                !post.data["og:image"]?.trim() || !isSocialImageUrl(post.data["og:image"].trim()),
+                !(post.data["og:image"]?.trim() && isSocialImageUrl(post.data["og:image"].trim())),
         )
         .flatMap((post) => {
             const card = createSocialCardData(post.data, site, author);

package/src/schemas/config.ts

@@ -164,7 +164,7 @@ export const commentSchema = z.object({
         .object({
             serverURL: z.url("comment.waline.serverURL must be a valid URL").optional(),
             lang: z.string().optional().default("zh-CN"),
-            locale: z.any().optional(),
+            locale: z.unknown().optional(),
             emoji: z
                 .array(z.string())
                 .optional()
@@ -181,10 +181,10 @@ export const commentSchema = z.object({
             dark: z.union([z.string(), z.boolean()]).optional().default(true),
             noCopyright: z.boolean().optional().default(false),
             commentSorting: z.string().optional().default("latest"),
-            imageUploader: z.any().optional(),
-            highlighter: z.any().optional(),
-            texRenderer: z.any().optional(),
-            search: z.any().optional(),
+            imageUploader: z.unknown().optional(),
+            highlighter: z.unknown().optional(),
+            texRenderer: z.unknown().optional(),
+            search: z.unknown().optional(),
             wordLimit: z.number().optional().default(200),
             pageSize: z.number().optional().default(10),
         })

package/src/scripts/analytics-runtime.ts

@@ -244,7 +244,7 @@ function trackGooglePage(): void {
 
 function trackUmamiPage(): void {
     const config = document.body?.dataset;
-    if (!config?.staluxUmamiId || !config.staluxUmamiUrl) return;
+    if (!(config?.staluxUmamiId && config.staluxUmamiUrl)) return;
     // Snapshot now: a slow SDK must not attribute every queued visit to the last URL.
     const payload = {
         website: config.staluxUmamiId,

package/src/scripts/archive-descriptions.ts

@@ -36,7 +36,7 @@ export function getArchiveDescriptionPosition(
 export function mountArchiveDescriptions() {
     const root = document.querySelector<HTMLElement>(".stalux-archive-container");
     const tooltip = document.querySelector<HTMLElement>("[data-archive-tooltip]");
-    if (!root || !tooltip) return;
+    if (!(root && tooltip)) return;
     const usePopover =
         typeof tooltip.showPopover === "function" && typeof tooltip.hidePopover === "function";
     if (usePopover) tooltip.setAttribute("popover", "manual");

package/src/scripts/back-to-top.ts

@@ -1,5 +1,7 @@
-interface BackToTopWindow extends Window {
-    __STALUX_BACK_TO_TOP__?: boolean;
+declare global {
+    interface Window {
+        __STALUX_BACK_TO_TOP__?: boolean;
+    }
 }
 
 const SENTINEL_SELECTOR = "[data-stalux-scroll-sentinel]";
@@ -14,12 +16,11 @@ const BUTTON_SELECTOR = "[data-stalux-back-to-top]";
  * not reached `ready`.
  */
 export function installBackToTop(): void {
-    const host = window as BackToTopWindow;
-    if (host.__STALUX_BACK_TO_TOP__) return;
+    if (window.__STALUX_BACK_TO_TOP__) return;
     const sentinel = document.querySelector(SENTINEL_SELECTOR);
     const button = document.querySelector<HTMLButtonElement>(BUTTON_SELECTOR);
-    if (!sentinel || !button) return;
-    host.__STALUX_BACK_TO_TOP__ = true;
+    if (!(sentinel && button)) return;
+    window.__STALUX_BACK_TO_TOP__ = true;
 
     button.addEventListener("click", () => {
         window.scrollTo({

package/src/scripts/background.ts

@@ -34,7 +34,7 @@ export function installSessionBackground(): void {
         if (connection?.saveData) return;
         const a = document.querySelector<HTMLElement>('[data-stalux-background="a"]');
         const b = document.querySelector<HTMLElement>('[data-stalux-background="b"]');
-        if (!a || !b || a.style.backgroundImage || b.style.backgroundImage) return;
+        if (!(a && b) || a.style.backgroundImage || b.style.backgroundImage) return;
         const custom = Boolean(window.__STALUX_BG_URLS__?.length);
         const urls = window.__STALUX_BG_URLS__?.length
             ? window.__STALUX_BG_URLS__
@@ -50,7 +50,7 @@ export function installSessionBackground(): void {
             () => {
                 // These two shell nodes retain their identities during Swup visits.
                 // No navigation event can start another image or reset this result.
-                if (!a.isConnected || !b.isConnected) return;
+                if (!(a.isConnected && b.isConnected)) return;
                 // Original SVGs have only a viewBox: auto sizes them as contain.
                 // Raster files have intrinsic dimensions, so retain that sizing
                 // explicitly. Custom URLs keep the existing auto semantics.

package/src/scripts/countdown.ts

@@ -3,7 +3,7 @@ import { registerPageLifecycle } from "./page-runtime";
 registerPageLifecycle("not-found-countdown", () => {
     const el = document.getElementById("countdown");
     const template = el?.dataset.countdownTemplate;
-    if (!el || !template) return;
+    if (!(el && template)) return;
     let seconds = 5;
     const timer = window.setInterval(() => {
         seconds -= 1;

package/src/scripts/date-time.ts

@@ -25,7 +25,7 @@ function toDisplayDate(date: Date, lang: string): string {
 registerPageLifecycle("date-time", () => {
     const dateElement = document.querySelector<HTMLTimeElement>('[data-ref="date"]');
     const timeElement = document.querySelector<HTMLTimeElement>('[data-ref="time"]');
-    if (!dateElement || !timeElement) return;
+    if (!(dateElement && timeElement)) return;
     const lang = document.documentElement.lang || "zh-CN";
     let lastDate = "";
     const update = () => {