@xingwangzhe/stalux 1.28.3 → 1.28.5

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@xingwangzhe/stalux",
-    "version": "1.28.3",
+    "version": "1.28.5",
     "description": "A powerful, modern Astro blog theme — use as template or install as plugin",
     "keywords": [
         "astro",

package/src/components/stalux/analytics/umami.astro

@@ -1,19 +1 @@
----
-import { getCollection } from "astro:content";
-import { getHeadData } from "@utils/config-utils";
-
-const configEntries = await getCollection("config");
-const headConfig = getHeadData(configEntries);
-const umamiConfig = headConfig?.umami;
-const umamiID = umamiConfig?.id;
-const umamiURL = umamiConfig?.url;
----
-
-<script
-    is:inline
-    defer
-    src={umamiURL}
-    data-website-id={umamiID}
-    type="text/javascript"
-    transition:persist="stalux-umami"
-></script>
+<script src="../../../scripts/umami.ts"></script>

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

@@ -6,3 +6,24 @@ import styles from "@styles/components/common/date.module.css";
     <time id={styles.date} data-ref="date" datetime=""></time>
     <time id={styles.time} data-ref="time" datetime=""></time>
 </div>
+
+<script is:inline>
+(() => {
+    const dateElement = document.querySelector('[data-ref="date"]');
+    const timeElement = document.querySelector('[data-ref="time"]');
+    if (!dateElement || !timeElement) return;
+    const now = new Date();
+    const pad = (value) => String(value).padStart(2, "0");
+    const lang = document.documentElement.lang || "zh-CN";
+    dateElement.textContent = lang.startsWith("zh")
+        ? `${now.getFullYear()}年${pad(now.getMonth() + 1)}月${pad(now.getDate())}日`
+        : new Intl.DateTimeFormat("en-US", {
+              year: "numeric",
+              month: "short",
+              day: "2-digit",
+          }).format(now);
+    dateElement.dateTime = `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())}`;
+    timeElement.textContent = `${pad(now.getHours())}:${pad(now.getMinutes())}:${pad(now.getSeconds())}`;
+    timeElement.dateTime = timeElement.textContent;
+})();
+</script>

package/src/layouts/Stalux.astro

@@ -84,6 +84,8 @@ const routeAnimation = getRouteAnimation(routeKind);
         data-stalux-site-lang={siteConfig.lang}
         data-stalux-ga-id={headConfig?.googleAnalyticsId}
         data-stalux-clarity-id={headConfig?.bingClarityId}
+        data-stalux-umami-id={headConfig?.umami?.id}
+        data-stalux-umami-url={headConfig?.umami?.url}
     >
         {llmPromote && (
     <section class="stalux-ai-prompt" data-stalux-ai-prompt aria-label="AI site context">

package/src/scripts/after-load.ts

@@ -0,0 +1,27 @@
+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,3 +1,4 @@
+import { afterLoadAndIdle } from "./after-load";
 import { createClientLogger } from "./logger";
 
 const logger = createClientLogger("clarity");
@@ -14,22 +15,28 @@ function load() {
     const id = document.body?.dataset.staluxClarityId;
     if (!id || 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");
-    document.head.appendChild(script);
+    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) {

package/src/scripts/google-analytics.ts

@@ -12,6 +12,36 @@ declare global {
     }
 }
 
+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;
@@ -21,6 +51,7 @@ function load() {
         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"), {
@@ -31,8 +62,8 @@ function load() {
             () => logger.warn("external script failed to load (network or content blocker)"),
             { once: true },
         );
-        logger.debug("loading external script");
-        document.head.appendChild(script);
+        logger.debug("deferred external script until page load and idle time");
+        appendAfterPageLoad(script);
     }
     if (!window.__staluxAnalyticsLoaded) {
         window.__staluxAnalyticsLoaded = true;

package/src/scripts/umami.ts

@@ -0,0 +1,28 @@
+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,3 +1,4 @@
+import { afterLoadAndIdle } from "./after-load";
 import { createClientLogger } from "./logger";
 
 const logger = createClientLogger("vercount");
@@ -10,19 +11,25 @@ declare global {
 
 function load() {
     if (document.querySelector("script[data-stalux-vercount]")) return;
-    window.__staluxVerCountLoaded = true;
-    const script = document.createElement("script");
-    script.defer = 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");
-    document.head.appendChild(script);
+    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);

package/src/scripts/waline-client.ts

@@ -0,0 +1,23 @@
+import { init, type WalineInitOptions } from "@waline/client";
+import walineCss from "@waline/client/style?inline";
+import staluxWalineCss from "../styles/components/posts/waline.css?inline";
+
+export function mountWaline(config: Record<string, unknown>, element: HTMLElement): () => void {
+    const style = document.createElement("style");
+    style.dataset.staluxWaline = "true";
+    style.textContent = `${walineCss}\n${staluxWalineCss}`;
+    document.head.append(style);
+
+    const options = {
+        ...config,
+        el: element,
+        serverURL: config.serverURL,
+        path: typeof config.path === "string" ? config.path : window.location.pathname,
+    } as WalineInitOptions;
+    const instance = init(options);
+
+    return () => {
+        instance?.destroy();
+        style.remove();
+    };
+}

package/src/scripts/waline.ts

@@ -1,6 +1,3 @@
-import type { WalineInitOptions } from "@waline/client";
-import walineCss from "@waline/client/style?inline";
-import staluxWalineCss from "../styles/components/posts/waline.css?inline";
 import { createClientLogger } from "./logger";
 import { registerPageLifecycle } from "./page-runtime";
 
@@ -34,32 +31,39 @@ registerPageLifecycle("waline", () => {
 
     let disposed = false;
     let destroy: (() => void) | undefined;
+    let observer: IntersectionObserver | undefined;
 
-    void import("@waline/client")
-        .then((waline) => {
-            if (disposed || !commentElement.isConnected) return;
-            const style = document.createElement("style");
-            style.dataset.staluxWaline = "true";
-            style.textContent = `${walineCss}\n${staluxWalineCss}`;
-            document.head.append(style);
-            const options = {
-                ...decoded,
-                el: commentElement,
-                serverURL: decoded.serverURL,
-                path: typeof decoded.path === "string" ? decoded.path : window.location.pathname,
-            } as WalineInitOptions;
-            const instance = waline.init(options);
-            destroy = () => instance?.destroy();
-            logger.debug("comment widget initialized");
-        })
-        .catch((error) => {
-            logger.warn(
-                `comment assets failed to load (${error instanceof Error ? error.name : "unknown error"})`,
-            );
-        });
+    const load = () => {
+        observer?.disconnect();
+        observer = undefined;
+        void import("./waline-client")
+            .then(({ mountWaline }) => {
+                if (disposed || !commentElement.isConnected) return;
+                destroy = mountWaline(decoded, commentElement);
+                logger.debug("comment widget initialized near viewport");
+            })
+            .catch((error) => {
+                logger.warn(
+                    `comment assets failed to load (${error instanceof Error ? error.name : "unknown error"})`,
+                );
+            });
+    };
+
+    if ("IntersectionObserver" in window) {
+        observer = new IntersectionObserver(
+            (entries) => {
+                if (entries.some((entry) => entry.isIntersecting)) load();
+            },
+            { rootMargin: "1000px 0px" },
+        );
+        observer.observe(container);
+    } else {
+        load();
+    }
 
     return () => {
         disposed = true;
+        observer?.disconnect();
         destroy?.();
     };
 });