@xingwangzhe/stalux 1.29.5 → 1.29.7

package/src/scripts/navigation.ts

@@ -1,7 +1,7 @@
 import { createClientLogger } from "./logger";
 
 import { registerPageLifecycle } from "./page-runtime";
-import { upgradeAndOpenSearchDialog } from "./search-dialog";
+import { ensureSearchStyles, upgradeAndOpenSearchDialog } from "./search-dialog";
 
 const logger = createClientLogger("navigation");
 
@@ -12,7 +12,12 @@ interface SearchDialog extends HTMLElement {
 
 async function openSearchDialog(): Promise<void> {
     logger.debug("loading search UI");
-    await import("@pagefind/component-ui");
+    await Promise.all([
+        import("@pagefind/component-ui"),
+        ensureSearchStyles(
+            document.querySelector<HTMLLinkElement>("link[data-stalux-search-style]"),
+        ),
+    ]);
     const dialog = document.querySelector<SearchDialog>("pagefind-modal#search");
     await upgradeAndOpenSearchDialog(
         {
@@ -35,6 +40,8 @@ registerPageLifecycle("navigation", () => {
     const listenerOptions = { signal: controller.signal };
     let frameId = 0;
     let lastScale = "1";
+    let needsScale = true;
+    const mobileNav = window.matchMedia("(max-width: 600px)");
 
     const closeNav = () => {
         navList.removeAttribute("data-state");
@@ -46,37 +53,51 @@ registerPageLifecycle("navigation", () => {
         navOverlay?.setAttribute("data-state", "show");
         document.body.style.overflow = "hidden";
     };
-    const updateScrollButtons = () => {
-        const hasOverflow = navList.scrollWidth > navList.clientWidth;
-        const atStart = navList.scrollLeft <= 1;
-        const atEnd = navList.scrollLeft + navList.clientWidth >= navList.scrollWidth - 1;
-        buttonLeft.toggleAttribute("data-visible", hasOverflow && !atStart);
-        buttonRight.toggleAttribute("data-visible", hasOverflow && !atEnd);
-    };
     const updateButtons = () => {
         frameId = 0;
-        const baseFontSize = Number.parseFloat(getComputedStyle(navList).fontSize) || 16;
-        const gap = Number.parseFloat(getComputedStyle(navList).gap) || 0;
-        const estimatedWidth =
-            [...navList.children].reduce(
-                (total, item) => total + item.getBoundingClientRect().width,
-                0,
-            ) +
-            gap * Math.max(0, navList.children.length - 1);
-        const scale =
-            estimatedWidth > navList.clientWidth
-                ? Math.max(12 / baseFontSize, navList.clientWidth / estimatedWidth)
-                : 1;
-        const nextScale = String(scale);
+        // Read layout before writing styles or attributes. Scrolling does not
+        // change item sizes, so only resize events need to recalculate scale.
+        const { clientWidth, scrollWidth, scrollLeft } = navList;
+        let nextScale = lastScale;
+        if (needsScale) {
+            needsScale = false;
+            if (mobileNav.matches) {
+                nextScale = "1";
+            } else {
+                const style = getComputedStyle(navList);
+                const baseFontSize = Number.parseFloat(style.fontSize) || 16;
+                const gap = Number.parseFloat(style.gap) || 0;
+                let estimatedWidth = gap * Math.max(0, navList.children.length - 1);
+                for (const item of navList.children) {
+                    // offsetWidth excludes the existing transform, avoiding
+                    // scale feedback during repeated resize notifications.
+                    if (item instanceof HTMLElement) estimatedWidth += item.offsetWidth;
+                }
+                nextScale = String(
+                    estimatedWidth > clientWidth
+                        ? Math.max(12 / baseFontSize, clientWidth / estimatedWidth)
+                        : 1,
+                );
+            }
+        }
         if (nextScale !== lastScale) {
             navList.style.setProperty("--nav-scale", nextScale);
             lastScale = nextScale;
         }
-        updateScrollButtons();
+        const hasOverflow = scrollWidth > clientWidth;
+        buttonLeft.toggleAttribute("data-visible", hasOverflow && scrollLeft > 1);
+        buttonRight.toggleAttribute(
+            "data-visible",
+            hasOverflow && scrollLeft + clientWidth < scrollWidth - 1,
+        );
     };
     const scheduleUpdate = () => {
         if (!frameId) frameId = requestAnimationFrame(updateButtons);
     };
+    const scheduleResize = () => {
+        needsScale = true;
+        scheduleUpdate();
+    };
 
     document.querySelector("[data-ref='stalux-search-btn']")?.addEventListener(
         "click",
@@ -112,12 +133,14 @@ registerPageLifecycle("navigation", () => {
         passive: true,
         signal: controller.signal,
     });
-    window.addEventListener("resize", scheduleUpdate, {
+    window.addEventListener("resize", scheduleResize, {
         passive: true,
         signal: controller.signal,
     });
 
-    const resizeObserver = new ResizeObserver(scheduleUpdate);
+    document.fonts.addEventListener("loadingdone", scheduleResize, listenerOptions);
+
+    const resizeObserver = new ResizeObserver(scheduleResize);
     resizeObserver.observe(navList);
     if (navList.parentElement) resizeObserver.observe(navList.parentElement);
     scheduleUpdate();

package/src/scripts/runtime-counter.ts

@@ -1,4 +1,5 @@
 import { registerPageLifecycle } from "./page-runtime";
+import { observeVisibleClock } from "./visible-clock";
 
 registerPageLifecycle("runtime-counter", () => {
     const container = document.querySelector<HTMLElement>("[data-stalux-buildtime]");
@@ -17,7 +18,5 @@ registerPageLifecycle("runtime-counter", () => {
             .replace("{minutes}", String(Math.floor((total % 3600) / 60)))
             .replace("{seconds}", String(total % 60));
     };
-    update();
-    const timer = window.setInterval(update, 1000);
-    return () => window.clearInterval(timer);
+    return observeVisibleClock(counter, update);
 });

package/src/scripts/search-dialog.ts

@@ -7,6 +7,30 @@ export interface CustomElementRegistryLike<ElementType> {
     upgrade(element: ElementType): void;
 }
 
+/** Promote the deferred stylesheet before showing a search dialog on a cold visit. */
+export async function ensureSearchStyles(link: HTMLLinkElement | null): Promise<void> {
+    if (!link) return;
+    link.rel = "stylesheet";
+    link.media = "all";
+    if (link.sheet) return;
+    await new Promise<void>((resolve, reject) => {
+        const cleanup = () => {
+            link.removeEventListener("load", loaded);
+            link.removeEventListener("error", failed);
+        };
+        const loaded = () => {
+            cleanup();
+            resolve();
+        };
+        const failed = () => {
+            cleanup();
+            reject(new Error("Search stylesheet failed to load"));
+        };
+        link.addEventListener("load", loaded, { once: true });
+        link.addEventListener("error", failed, { once: true });
+    });
+}
+
 export async function upgradeAndOpenSearchDialog<ElementType extends SearchDialogLike>(
     registry: CustomElementRegistryLike<ElementType>,
     dialog: ElementType | null,

package/src/scripts/tags-cloud.ts

@@ -1,4 +1,4 @@
-import { TagCloud } from "@xingwangzhe/tags-cloud";
+import { navigate } from "astro:transitions/client";
 import { createClientLogger } from "./logger";
 
 import { registerPageLifecycle } from "./page-runtime";
@@ -36,35 +36,69 @@ function parseTags(value: string | undefined): LinkTag[] {
 }
 
 registerPageLifecycle("tags-cloud", () => {
-    const mobile = window.matchMedia("(max-width: 768px)").matches;
-    if (mobile) {
-        logger.debug("mobile layout; cloud skipped");
-        return;
-    }
-
     const container = document.getElementById("tags-canvas");
     if (!container) return;
-    const rawTags = parseTags(container.dataset.tags);
-    if (rawTags.length === 0) return;
-    const tags = rawTags.map((tag) => ({
-        ...tag,
-        onClick: () => {
-            window.location.href = tag.url;
+    const desktop = window.matchMedia("(min-width: 769px)");
+    const controller = new AbortController();
+    let cloud: import("@xingwangzhe/tags-cloud").TagCloud | undefined;
+    let visible = false;
+    let loading = false;
+    let disposed = false;
+    const active = () => !disposed && desktop.matches && visible && !document.hidden;
+    const update = async () => {
+        if (!active()) {
+            // destroy also cancels the library's rAF; pause() only skips drawing.
+            cloud?.destroy();
+            cloud = undefined;
+            return;
+        }
+        if (cloud || loading) return;
+        loading = true;
+        try {
+            const { TagCloud } = await import("@xingwangzhe/tags-cloud");
+            if (!active()) return;
+            const tags = parseTags(container.dataset.tags).map((tag) => ({
+                ...tag,
+                onClick: () => {
+                    void navigate(tag.url);
+                },
+            }));
+            if (!tags.length) return;
+            const width = container.clientWidth;
+            const baseRadius =
+                window.innerWidth < 1_024 ? 330 : window.innerWidth < 1_440 ? 420 : 480;
+            const radius = Math.min(
+                Math.round(baseRadius * Math.sqrt(Math.max(tags.length, 100) / 100)),
+                Math.round(width * 0.6),
+            );
+            cloud = new TagCloud(container, {
+                tags,
+                radius,
+                spinY: 0.15,
+                fontSize: 16,
+                color: "#ffffff",
+                fontFamily: "system-ui, -apple-system, sans-serif",
+            });
+        } catch (error) {
+            logger.warn(`tag cloud loading failed: ${String(error)}`);
+        } finally {
+            loading = false;
+        }
+    };
+    const observer = new IntersectionObserver(
+        (entries) => {
+            visible = entries.some((entry) => entry.isIntersecting);
+            void update();
         },
-    }));
-    const width = container.getBoundingClientRect().width;
-    const baseRadius = window.innerWidth < 1_024 ? 330 : window.innerWidth < 1_440 ? 420 : 480;
-    const densityScale = Math.sqrt(Math.max(tags.length, 100) / 100);
-    const radius = Math.min(Math.round(baseRadius * densityScale), Math.round(width * 0.6));
-    container.style.height = `${Math.round(radius * 2)}px`;
-    const cloud = new TagCloud(container, {
-        tags,
-        radius,
-        spinY: 0.15,
-        fontSize: 16,
-        color: "#ffffff",
-        fontFamily: "system-ui, -apple-system, sans-serif",
-    });
-    logger.debug(`cloud initialized; tags=${tags.length}`);
-    return () => cloud.destroy();
+        { rootMargin: "200px 0px" },
+    );
+    observer.observe(container);
+    desktop.addEventListener("change", update, { signal: controller.signal });
+    document.addEventListener("visibilitychange", update, { signal: controller.signal });
+    return () => {
+        disposed = true;
+        controller.abort();
+        observer.disconnect();
+        cloud?.destroy();
+    };
 });

package/src/scripts/visible-clock.ts

@@ -0,0 +1,24 @@
+/** Run a wall-clock update only while its element and document are visible. */
+export function observeVisibleClock(element: Element, update: () => void): () => void {
+    const controller = new AbortController();
+    let visible = false;
+    let timer: ReturnType<typeof setInterval> | undefined;
+    const sync = () => {
+        if (timer !== undefined) clearInterval(timer);
+        timer = undefined;
+        if (!visible || document.hidden) return;
+        update();
+        timer = setInterval(update, 1_000);
+    };
+    const observer = new IntersectionObserver((entries) => {
+        visible = entries.some((entry) => entry.isIntersecting);
+        sync();
+    });
+    observer.observe(element);
+    document.addEventListener("visibilitychange", sync, { signal: controller.signal });
+    return () => {
+        controller.abort();
+        observer.disconnect();
+        if (timer !== undefined) clearInterval(timer);
+    };
+}

package/src/scripts/waline.ts

@@ -54,7 +54,7 @@ registerPageLifecycle("waline", () => {
             (entries) => {
                 if (entries.some((entry) => entry.isIntersecting)) load();
             },
-            { rootMargin: "1000px 0px" },
+            { rootMargin: `${Math.min(400, Math.round(window.innerHeight * 0.5))}px 0px` },
         );
         observer.observe(container);
     } else {

package/src/styles/components/archives/archivesList.module.css

@@ -9,7 +9,6 @@
     --tl-line: var(--radius-sm);
     --tl-pad: var(--space-xl);
     padding-left: var(--tl-pad);
-    animation: contentReveal 220ms ease 360ms both;
 }
 
 .timelineContainer::before {
@@ -67,6 +66,10 @@
 }
 
 .monthSection {
+    content-visibility: auto;
+    contain-intrinsic-block-size: auto var(--archive-estimate, 600px);
+    margin-left: calc(-1 * var(--tl-pad));
+    padding-left: var(--tl-pad);
     margin-bottom: 2rem;
     position: relative;
 }
@@ -79,72 +82,15 @@
     background-color: var(--black-10p);
     border-radius: 0.5rem;
     width: 100%;
-    animation: stalux-content-reveal 220ms ease 360ms both;
-}
-
-/* 懒加载指示器样式 */
-.lazyloadObserver {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding: 2rem 0;
-    opacity: 0.8;
-    transition: opacity var(--transition-normal) ease;
-}
-
-.lazyloadObserver:hover {
-    opacity: 1;
-}
-
-.loadingSpinner {
-    display: flex;
-    justify-content: center;
-    margin-bottom: 0.5rem;
-}
-
-.loadingSpinner .dot {
-    display: inline-block;
-    width: 10px;
-    height: 10px;
-    margin: 0 3px;
-    border-radius: 50%;
-    background-color: var(--accent-80p);
-    animation: dotPulse 1.4s infinite ease-in-out both;
-}
-
-.loadingSpinner .dot:nth-child(1) {
-    animation-delay: -0.32s;
-}
-
-.loadingSpinner .dot:nth-child(2) {
-    animation-delay: -0.16s;
-}
-
-.loadingSpinner .dot:nth-child(3) {
-    animation-delay: 0s;
-}
-
-@keyframes dotPulse {
-    0%,
-    80%,
-    100% {
-        transform: scale(0.3);
-    }
-    40% {
-        transform: scale(1);
-    }
-}
-
-.loadingText {
-    font-size: 0.9rem;
-    color: var(--white-70p);
 }
 
 /* 文章列表和项目样式（静态 DOM）*/
 .postList {
+    content-visibility: auto;
+    contain-intrinsic-block-size: auto var(--archive-group-estimate, 576px);
     list-style: none;
-    padding: 0;
-    margin: 0;
+    padding: 0 0 0 var(--tl-pad);
+    margin: 0 0 0 calc(-1 * var(--tl-pad));
 }
 
 .postItem {
@@ -157,6 +103,13 @@
     align-items: center;
 }
 
+@supports not (content-visibility: auto) {
+    .monthSection,
+    .postList {
+        contain-intrinsic-block-size: auto;
+    }
+}
+
 .postItem::before {
     content: "";
     position: absolute;
@@ -202,10 +155,6 @@
     z-index: 1;
 }
 
-.monthBlock {
-    margin: 0.5rem 0;
-}
-
 @media (max-width: 768px) {
     .archivesContainer {
         padding: 1.5rem 0.5rem 2rem 1.5rem;
@@ -215,14 +164,6 @@
         margin-bottom: 2rem;
     }
 
-    .pageHeader .page-title {
-        font-size: 2rem;
-    }
-
-    .pageHeader .page-description {
-        font-size: 1rem;
-    }
-
     .timelineContainer {
         --tl-pad: 1.5rem;
     }
@@ -246,10 +187,6 @@
         padding: 1.5rem 0.5rem 2rem 1.2rem;
     }
 
-    .pageHeader .page-title {
-        font-size: 1.8rem;
-    }
-
     .timelineContainer {
         --tl-pad: 1.2rem;
         --tl-line: 3px;
@@ -264,12 +201,3 @@
         font-size: 1.1rem;
     }
 }
-
-@keyframes contentReveal {
-    from {
-        opacity: 0;
-    }
-    to {
-        opacity: 1;
-    }
-}

package/src/styles/components/categories/categoriesCard.module.css

@@ -10,8 +10,7 @@
     box-shadow: var(--card-box-shadow);
     transition:
         transform 220ms ease,
-        background-color 220ms ease,
-        box-shadow 220ms ease;
+        background-color 220ms ease;
     overflow: hidden;
     height: fit-content;
 }
@@ -19,10 +18,7 @@
 .categoryCard::before {
     content: "";
     position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
+    inset: 0;
     background: linear-gradient(
         120deg,
         rgba(255, 255, 255, 0),
@@ -76,8 +72,7 @@
     transition:
         transform 240ms ease,
         background-color 240ms ease,
-        color 240ms ease,
-        box-shadow 240ms ease;
+        color 240ms ease;
     z-index: 2;
     transform-origin: center center;
     background: var(--black-15p);

package/src/styles/components/categories/categoriesList.module.css

@@ -10,15 +10,14 @@
     list-style: none;
 }
 
-.item {
-    animation: contentReveal 220ms ease 360ms both;
+.categoriesList > li {
+    content-visibility: auto;
+    contain-intrinsic-block-size: auto 180px;
+    overflow-clip-margin: 30px;
 }
 
-@keyframes contentReveal {
-    from {
-        opacity: 0;
-    }
-    to {
-        opacity: 1;
+@supports not (content-visibility: auto) {
+    .categoriesList > li {
+        contain-intrinsic-block-size: auto;
     }
 }

package/src/styles/components/links/linkCard.module.css

@@ -13,7 +13,6 @@
     overflow: visible;
     transition:
         transform 220ms ease,
-        box-shadow 220ms ease,
         background-color 220ms ease,
         border-color 220ms ease;
     box-shadow: var(--card-box-shadow);
@@ -40,7 +39,6 @@
     transform-origin: center;
     transition:
         transform 220ms ease,
-        box-shadow 220ms ease,
         border-color 220ms ease;
 }
 

package/src/styles/components/links/linkList.module.css

@@ -23,21 +23,21 @@
 }
 
 /* 中等屏幕：4个卡片一行 */
-@media (max-width: 1399px) and (min-width: 1100px) {
+@media (1100px <= width <= 1399px) {
     .list {
         grid-template-columns: repeat(4, 1fr);
     }
 }
 
 /* 小屏幕：3个卡片一行 */
-@media (max-width: 1099px) and (min-width: 768px) {
+@media (768px <= width <= 1099px) {
     .list {
         grid-template-columns: repeat(3, 1fr);
     }
 }
 
 /* 平板：2个卡片一行 */
-@media (max-width: 767px) and (min-width: 480px) {
+@media (480px <= width <= 767px) {
     .list {
         grid-template-columns: repeat(2, 1fr);
         gap: 16px;

package/src/styles/components/posts/postAuthor.module.css

@@ -17,7 +17,6 @@
     border-radius: var(--radius-lg);
     padding: var(--space-md);
     box-shadow: var(--card-box-shadow);
-    transition: all var(--transition-normal) ease;
 }
 
 .authorBio {

package/src/styles/components/posts/postCard.module.css

@@ -37,9 +37,7 @@
     border-radius: var(--radius-lg);
     box-shadow: var(--card-box-shadow);
     padding: var(--space-lg);
-    transition:
-        transform 220ms cubic-bezier(0.22, 0.72, 0.22, 1),
-        box-shadow 220ms ease;
+    transition: transform 220ms cubic-bezier(0.22, 0.72, 0.22, 1);
     cursor: pointer;
     display: flex;
     flex-direction: column;
@@ -66,8 +64,7 @@
     transition: transform var(--transition-fast) ease;
 }
 
-.postContainer:hover .postCover img,
-.postContainer:focus-within .postCover img {
+.postContainer:is(:hover, :focus-within) .postCover img {
     transform: scale(1.05);
 }
 
@@ -79,13 +76,7 @@
 }
 
 /* 卡片悬停和焦点效果 */
-.postContainer {
-    transition:
-        transform 220ms cubic-bezier(0.22, 0.72, 0.22, 1),
-        box-shadow 220ms ease;
-}
-.postContainer:hover,
-.postContainer:focus-within {
+.postContainer:is(:hover, :focus-within) {
     transform: translateY(-3px);
     box-shadow: var(--card-box-shadow-hover);
 }

package/src/styles/components/tags/tagHeader.module.css

@@ -1,44 +1,44 @@
-/* 页面标题部分 */
+/* Keep header selectors local with native nesting. */
 .pageHeader {
     margin: 3em;
     margin-bottom: 2.5rem;
     position: relative;
     padding-bottom: 1rem;
     border-bottom: 1px solid var(--white-10p);
-}
 
-.pageHeader .pageTitle {
-    font-size: 1.8rem;
-    margin-bottom: 0.5rem;
-    display: flex;
-    align-items: center;
-    color: var(--white-full);
-}
+    & .pageTitle {
+        font-size: 1.8rem;
+        margin-bottom: 0.5rem;
+        display: flex;
+        align-items: center;
+        color: var(--white-full);
 
-.pageHeader .pageTitle .categoryIcon {
-    margin-right: 0.8rem;
-    color: var(--accent-80p);
-}
+        & .categoryIcon {
+            margin-right: 0.8rem;
+            color: var(--accent-80p);
+        }
 
-.pageHeader .pageTitle .categoryName {
-    color: var(--accent-90p);
-    font-weight: 500;
-}
+        & .categoryName {
+            color: var(--accent-90p);
+            font-weight: 500;
+        }
+    }
 
-.pageHeader .pageDescription {
-    font-size: 1rem;
-    color: var(--white-70p);
-    margin-bottom: 0.5rem;
-}
+    & .pageDescription {
+        font-size: 1rem;
+        color: var(--white-70p);
+        margin-bottom: 0.5rem;
+    }
 
-.pageHeader .backLink {
-    font-size: 0.9rem;
-    color: var(--white-60p);
-    text-decoration: none;
-    display: inline-block;
-    transition: all var(--transition-fast) ease;
-}
+    & .backLink {
+        font-size: 0.9rem;
+        color: var(--white-60p);
+        text-decoration: none;
+        display: inline-block;
+        transition: color var(--transition-fast) ease;
 
-.pageHeader .backLink:hover {
-    color: var(--accent-90p);
+        &:hover {
+            color: var(--accent-90p);
+        }
+    }
 }