@xingwangzhe/stalux 1.29.6 → 1.29.7

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

@@ -1,69 +1,46 @@
 /* ── 移动端：卡片容器（桌面端隐藏） ── */
 .cards {
+    display: block;
+    padding: 1rem;
+    box-sizing: border-box;
+}
+
+.tagGroup {
     display: flex;
     flex-wrap: wrap;
     gap: 0.75rem;
     justify-content: center;
     align-items: flex-start;
-    align-content: flex-start;
-    padding: 1rem;
-    box-sizing: border-box;
+    margin-bottom: 0.75rem;
+    content-visibility: auto;
+    contain-intrinsic-block-size: auto 24rem;
+    overflow-clip-margin: 30px;
 }
 
-@media (min-width: 769px) {
-    .cards {
-        display: none;
+@supports not (content-visibility: auto) {
+    .tagGroup {
+        contain-intrinsic-block-size: auto;
     }
 }
 
-@media (max-width: 768px) {
-    .tagCard {
-        animation: stalux-tag-arrive 240ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
-    }
-
-    .tagCard:nth-child(2) {
-        animation-delay: 30ms;
-    }
-
-    .tagCard:nth-child(3) {
-        animation-delay: 60ms;
-    }
-
-    .tagCard:nth-child(4) {
-        animation-delay: 90ms;
-    }
-
-    .tagCard:nth-child(5) {
-        animation-delay: 120ms;
-    }
-
-    .tagCard:nth-child(n + 6) {
-        animation-delay: 150ms;
-    }
+.canvasFrame {
+    container-type: inline-size;
 }
 
-@keyframes stalux-tag-arrive {
-    from {
-        opacity: 0;
-        transform: translateY(0.5rem);
-    }
-
-    to {
-        opacity: 1;
-        transform: translateY(0);
+@media (min-width: 769px) {
+    .cards {
+        display: none;
     }
 }
 
-@media (prefers-reduced-motion: reduce) {
-    .tagCard {
-        animation: none;
-    }
-}
+/* Keep server-rendered tag links visible from the first paint. */
 
 /* ── 桌面端：Canvas 容器（移动端隐藏） ── */
 .canvas {
     display: none;
     width: 100%;
+    --cloud-base-diameter: 660px;
+    height: min(calc(var(--cloud-base-diameter) * var(--cloud-density)), 120cqw);
     min-height: 520px;
     position: relative;
 }
@@ -87,18 +64,14 @@
     border: 1px solid var(--white-20p);
     transition:
         transform var(--transition-slow),
-        border-color var(--transition-slow),
-        box-shadow var(--transition-slow);
+        border-color var(--transition-slow);
     overflow: hidden;
 }
 
 .tagCard::before {
     content: "";
     position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
+    inset: 0;
     background: linear-gradient(
         120deg,
         rgba(255, 255, 255, 0),
@@ -169,3 +142,14 @@
     padding: 2rem;
     width: 100%;
 }
+
+@media (min-width: 1024px) {
+    .canvas {
+        --cloud-base-diameter: 840px;
+    }
+}
+@media (min-width: 1440px) {
+    .canvas {
+        --cloud-base-diameter: 960px;
+    }
+}

package/src/utils/content-index.ts

@@ -94,7 +94,7 @@ function finalizeTaxonomy<T extends IndexablePost>(
 export function buildPostContentIndex<T extends IndexablePost>(
     sourcePosts: readonly T[],
 ): PostContentIndex<T> {
-    const posts = [...sourcePosts].sort(
+    const posts = sourcePosts.toSorted(
         (left, right) => toTimestamp(right.data.date) - toTimestamp(left.data.date),
     );
     const byAbbrlink = new Map<string, T>();

package/src/utils/feed.ts

@@ -32,7 +32,7 @@ export async function buildFeedItems(
     updatedTag: string,
     logger?: AstroRuntimeLogger,
 ): Promise<FeedItem[]> {
-    const sortedPosts = [...posts].sort((a, b) => {
+    const sortedPosts = posts.toSorted((a, b) => {
         // Newest first: compare post dates, use the greater of updated/date
         const aTime = toTimestamp(a.data.updated || a.data.date);
         const bTime = toTimestamp(b.data.updated || b.data.date);

package/src/scripts/after-load.ts

@@ -1,27 +0,0 @@
-type IdleWindow = Window & {
-    requestIdleCallback?: (callback: () => void, options?: { timeout: number }) => number;
-};
-
-/** Run non-essential work after the initial page load and during an idle period. */
-export function afterLoadAndIdle(callback: () => void): void {
-    let scheduled = false;
-    const schedule = () => {
-        if (scheduled) return;
-        scheduled = true;
-        const idleWindow = window as IdleWindow;
-        if (idleWindow.requestIdleCallback) {
-            idleWindow.requestIdleCallback(callback, { timeout: 2_000 });
-        } else {
-            window.setTimeout(callback, 0);
-        }
-    };
-
-    if (document.readyState === "complete") {
-        schedule();
-        return;
-    }
-
-    window.addEventListener("load", schedule, { once: true });
-    // Still load analytics if a third-party resource prevents the load event.
-    window.setTimeout(schedule, 5_000);
-}

package/src/scripts/clarity.ts

@@ -1,48 +0,0 @@
-import { afterLoadAndIdle } from "./after-load";
-import { createClientLogger } from "./logger";
-
-const logger = createClientLogger("clarity");
-
-declare global {
-    interface Window {
-        clarity?: ((...args: unknown[]) => void) & { q?: unknown[][] };
-        __staluxClarityLoaded?: boolean;
-        __staluxClarityPageLoadListener?: boolean;
-    }
-}
-
-function load() {
-    const id = document.body?.dataset.staluxClarityId;
-    if (!id || window.__staluxClarityLoaded || document.getElementById("stalux-clarity-script"))
-        return;
-    afterLoadAndIdle(() => {
-        if (window.__staluxClarityLoaded || document.getElementById("stalux-clarity-script"))
-            return;
-        window.__staluxClarityLoaded = true;
-        window.clarity =
-            window.clarity ||
-            Object.assign((...args: unknown[]) => window.clarity?.q?.push(args), { q: [] });
-        const script = document.createElement("script");
-        script.id = "stalux-clarity-script";
-        script.async = true;
-        script.src = `https://www.clarity.ms/tag/${encodeURIComponent(id)}`;
-        script.addEventListener("load", () => logger.debug("external script loaded"), {
-            once: true,
-        });
-        script.addEventListener(
-            "error",
-            () => logger.warn("external script failed to load (network or content blocker)"),
-            { once: true },
-        );
-        logger.debug("loading external script after page load and idle time");
-        document.head.appendChild(script);
-    });
-}
-
-if (!window.__staluxClarityPageLoadListener) {
-    window.__staluxClarityPageLoadListener = true;
-    document.addEventListener("astro:page-load", load);
-}
-if (document.readyState === "loading")
-    document.addEventListener("DOMContentLoaded", load, { once: true });
-else load();

package/src/scripts/google-analytics.ts

@@ -1,90 +0,0 @@
-import { createClientLogger } from "./logger";
-
-const logger = createClientLogger("google-analytics");
-
-declare global {
-    interface Window {
-        dataLayer?: unknown[];
-        gtag?: (...args: unknown[]) => void;
-        __staluxAnalyticsLoaded?: boolean;
-        __staluxAnalyticsPageLoadListener?: boolean;
-        __staluxGoogleScriptLoaded?: boolean;
-    }
-}
-
-function appendWhenIdle(script: HTMLScriptElement): void {
-    const append = () => document.head.appendChild(script);
-    const requestIdle = (
-        window as Window & {
-            requestIdleCallback?: (callback: () => void, options?: { timeout: number }) => number;
-        }
-    ).requestIdleCallback;
-
-    if (requestIdle) requestIdle.call(window, append, { timeout: 1200 });
-    else window.setTimeout(append, 0);
-}
-
-function appendAfterPageLoad(script: HTMLScriptElement): void {
-    let appended = false;
-    const schedule = () => {
-        if (appended) return;
-        appended = true;
-        appendWhenIdle(script);
-    };
-
-    if (document.readyState === "complete") {
-        schedule();
-        return;
-    }
-
-    window.addEventListener("load", schedule, { once: true });
-    // Avoid indefinitely delaying analytics if an image or other resource stalls load.
-    window.setTimeout(schedule, 5000);
-}
-
-function load() {
-    const gaID = document.body?.dataset.staluxGaId;
-    if (!gaID) return;
-    window.dataLayer = window.dataLayer || [];
-    window.gtag = window.gtag || ((...args: unknown[]) => window.dataLayer?.push(args));
-    if (!window.__staluxGoogleScriptLoaded) {
-        window.__staluxGoogleScriptLoaded = true;
-        const script = document.createElement("script");
-        script.async = true;
-        script.fetchPriority = "low";
-        script.dataset.staluxGoogle = "true";
-        script.src = `https://www.googletagmanager.com/gtag/js?id=${encodeURIComponent(gaID)}`;
-        script.addEventListener("load", () => logger.debug("external script loaded"), {
-            once: true,
-        });
-        script.addEventListener(
-            "error",
-            () => logger.warn("external script failed to load (network or content blocker)"),
-            { once: true },
-        );
-        logger.debug("deferred external script until page load and idle time");
-        appendAfterPageLoad(script);
-    }
-    if (!window.__staluxAnalyticsLoaded) {
-        window.__staluxAnalyticsLoaded = true;
-        window.gtag("js", new Date());
-        window.gtag("config", gaID);
-    }
-}
-
-if (!window.__staluxAnalyticsPageLoadListener) {
-    window.__staluxAnalyticsPageLoadListener = true;
-    let firstPageLoad = true;
-    document.addEventListener("astro:page-load", () => {
-        load();
-        if (firstPageLoad) {
-            firstPageLoad = false;
-            return;
-        }
-        window.gtag?.("event", "page_view", { page_path: window.location.pathname });
-    });
-}
-
-if (document.readyState === "loading")
-    document.addEventListener("DOMContentLoaded", load, { once: true });
-else load();

package/src/scripts/umami.ts

@@ -1,28 +0,0 @@
-import { afterLoadAndIdle } from "./after-load";
-import { createClientLogger } from "./logger";
-
-const logger = createClientLogger("umami");
-
-const id = document.body?.dataset.staluxUmamiId;
-const url = document.body?.dataset.staluxUmamiUrl;
-
-if (id && url) {
-    afterLoadAndIdle(() => {
-        if (document.querySelector("script[data-stalux-umami]")) return;
-        const script = document.createElement("script");
-        script.async = true;
-        script.dataset.staluxUmami = "true";
-        script.dataset.websiteId = id;
-        script.src = url;
-        script.addEventListener("load", () => logger.debug("external script loaded"), {
-            once: true,
-        });
-        script.addEventListener(
-            "error",
-            () => logger.warn("external script failed to load (network or content blocker)"),
-            { once: true },
-        );
-        logger.debug("loading external script after page load and idle time");
-        document.head.appendChild(script);
-    });
-}

package/src/scripts/vercount.ts

@@ -1,38 +0,0 @@
-import { afterLoadAndIdle } from "./after-load";
-import { createClientLogger } from "./logger";
-
-const logger = createClientLogger("vercount");
-
-declare global {
-    interface Window {
-        __staluxVerCountLoaded?: boolean;
-    }
-}
-
-function load() {
-    if (document.querySelector("script[data-stalux-vercount]")) return;
-    afterLoadAndIdle(() => {
-        if (window.__staluxVerCountLoaded || document.querySelector("script[data-stalux-vercount]"))
-            return;
-        window.__staluxVerCountLoaded = true;
-        const script = document.createElement("script");
-        script.async = true;
-        script.dataset.staluxVercount = "true";
-        script.src = "https://events.vercount.one/js";
-        script.addEventListener("load", () => logger.debug("external script loaded"), {
-            once: true,
-        });
-        script.addEventListener(
-            "error",
-            () => logger.warn("external script failed to load (network or content blocker)"),
-            { once: true },
-        );
-        logger.debug("loading external script after page load and idle time");
-        document.head.appendChild(script);
-    });
-}
-
-document.addEventListener("astro:page-load", load);
-if (document.readyState === "loading")
-    document.addEventListener("DOMContentLoaded", load, { once: true });
-else load();