@xingwangzhe/stalux 1.29.6 → 1.29.8

package/README.md

@@ -109,6 +109,20 @@ The subset CSS uses an exact per-character `unicode-range` and `font-display: sw
 
 The persistent BLAKE3 cache key includes font bytes, face index, normalized character set, and algorithm version. Cache files live under `node_modules/.astro/` and are reused across pages and incremental builds. Font inputs are read locally; builds do not fetch fonts from the network.
 
+### Visibility-aware loading and updates
+
+The desktop tag cloud loads dynamically near the viewport. Switching to mobile, leaving the viewport or hiding the document destroys it and stops animation scheduling; becoming visible recreates it. Tag clicks use Astro client navigation. Clocks and the footer runtime update only while visible, and the date changes only on a new day. Comments load within half a viewport (capped at 400px). Tag groups, archive months and category cards retain static HTML while deferring offscreen rendering.
+
+### Modern JavaScript
+
+TypeScript uses ESNext. The theme defaults `vite.build.target` to `"esnext"` to retain modern syntax with minimal compatibility transforms; an explicit consumer target takes precedence. This targets modern browsers, does not polyfill missing Web APIs, and does not move ordinary scripts onto the GPU. Biome enforces `noVar` and `useConst` as errors in maintained source; dependencies and generated bundles are outside this source policy.
+
+### Initial CSS and search styles
+
+The theme defaults to Astro's `build.inlineStylesheets: "always"`, placing route styles in the HTML to reduce stylesheet requests before the first paint. An explicit consumer setting of `build.inlineStylesheets: "never"` keeps external stylesheets. Inlining increases each HTML response in exchange for a shorter stylesheet request chain on a first visit.
+
+Pagefind dialog CSS is emitted as a separate hashed static file with a `prefetch` hint. Opening search activates the stylesheet and waits for it before displaying the dialog. It does not block the initial content or depend on JavaScript generating a CSS asset. A `<noscript>` stylesheet fallback is included.
+
 ---
 
 ## 🎨 Component Override
@@ -156,11 +170,17 @@ id: head
 bingClarityId: "YOUR_CLARITY_PROJECT_ID"
 ```
 
-`bingClarityId` is the historical Stalux field name for a Microsoft Clarity Project ID. Get the ID from the Clarity project under **Settings → Setup → Get tracking code**. Stalux injects the asynchronous tracking code into `<head>` and keeps one loader during Astro View Transitions. Do not install the same project again through `anyhead`, a tag manager, or another plugin.
+> The Partytown migration in this branch is an unpublished candidate. Representative route measurements show lower TBT, but LCP regresses on the homepage and category page, so performance validation is incomplete. The following describes the candidate implementation.
+
+`stalux()` includes Partytown. The Google Analytics, Clarity, and Umami scripts run in a Web Worker without an additional consumer integration. Page tracking follows `astro:page-load`; browsers with `Element.moveBefore()` preserve the worker during navigation. Vercount loads asynchronously in the main window, avoiding worker startup and DOM bridge delays for visible counters. It runs once after each `astro:page-load` to bind incoming page counters and use the current URL and first-party visitor cookie.
+
+For Google Analytics, turn off **Page changes based on browser history events** under **Admin → Data streams → Enhanced measurement → Page views → Advanced settings**. Stalux sets `send_page_view: false` and sends the URL and title for each navigation explicitly. GA's history tracking must also be disabled in the property to prevent duplicate soft-navigation pageviews. Other enhanced measurement options can remain enabled. See [Google's pageview documentation](https://developers.google.com/analytics/devguides/collection/ga4/views).
+
+`bingClarityId` is the historical Stalux field name for a Microsoft Clarity Project ID. Get the ID from the Clarity project under **Settings → Setup → Get tracking code**. Stalux loads the tracking code through Partytown and keeps one loader in browsers that support preserving the worker. Do not install the same project again through `anyhead`, a tag manager, or another plugin.
 
 The Project ID is a public browser identifier. Never put a Clarity Data Export API token in this YAML or in client-side code. If the site uses a strict CSP, consent banner, or CMP, configure those host-site policies and signals separately; this theme does not make legal compliance decisions for the site.
 
-After deployment, verify the script URL contains the exact Project ID and that the browser sends requests to `https://www.clarity.ms/collect`.
+After deployment, verify the script URL contains the exact Project ID and that the browser sends Clarity `/collect` requests (the collection host may be a regional endpoint such as `a.clarity.ms`).
 
 ---
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@xingwangzhe/stalux",
-    "version": "1.29.6",
+    "version": "1.29.8",
     "description": "A powerful, modern Astro blog theme — use as template or install as plugin",
     "keywords": [
         "astro",
@@ -94,6 +94,7 @@
     },
     "dependencies": {
         "@astrojs/markdown-satteri": "0.4.2",
+        "@astrojs/partytown": "2.1.8",
         "@astrojs/rss": "^4.0.19",
         "@astrojs/sitemap": "^3.7.4",
         "@expressive-code/plugin-line-numbers": "^0.44.2",

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

@@ -1,4 +1,4 @@
 ---
 ---
 
-<script src="../../../scripts/clarity.ts"></script>
+<script src="../../../scripts/analytics-runtime.ts"></script>

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

@@ -1,4 +1,4 @@
 ---
 ---
 
-<script src="../../../scripts/google-analytics.ts"></script>
+<script src="../../../scripts/analytics-runtime.ts"></script>

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

@@ -1 +1 @@
-<script src="../../../scripts/umami.ts"></script>
+<script src="../../../scripts/analytics-runtime.ts"></script>

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

@@ -65,24 +65,36 @@ const archiveYears = [...archivesByYearMonth.entries()]
                 </div>
             </div>
             {archiveYear.months.map(({ month, posts: monthPosts }) => (
-                <div class={styles.monthSection}>
+                <div
+                    class={styles.monthSection}
+                    style={{
+                        "--archive-estimate": `${Math.ceil(monthPosts.length / 12) * 12 * 48 + 40}px`,
+                    }}
+                >
                     <h3 class={styles.monthTitle}>{t("archives.month", { n: month })}</h3>
-                    <ul class={styles.postList}>
-                        {monthPosts.map((post) => (
-                            <li class={styles.postItem}>
-                                <time class={styles.postDate} datetime={post.data.date}>
-                                    {format(parseDate(post.data.date), "yyyy-MM-dd")}
-                                </time>
-                                <a
-                                    href={`/posts/${post.data.abbrlink}/`}
-                                    class={styles.postLink}
-                                    data-astro-prefetch="viewport"
-                                >
-                                    {post.data.title}
-                                </a>
-                            </li>
-                        ))}
-                    </ul>
+                    {Array.from({ length: Math.ceil(monthPosts.length / 12) }, (_, index) =>
+                        monthPosts.slice(index * 12, (index + 1) * 12),
+                    ).map((group) => (
+                        <ul
+                            class={styles.postList}
+                            style={{ "--archive-group-estimate": `${group.length * 48}px` }}
+                        >
+                            {group.map((post) => (
+                                <li class={styles.postItem}>
+                                    <time class={styles.postDate} datetime={post.data.date}>
+                                        {format(parseDate(post.data.date), "yyyy-MM-dd")}
+                                    </time>
+                                    <a
+                                        href={`/posts/${post.data.abbrlink}/`}
+                                        class={styles.postLink}
+                                        data-astro-prefetch="viewport"
+                                    >
+                                        {post.data.title}
+                                    </a>
+                                </li>
+                            ))}
+                        </ul>
+                    ))}
                 </div>
             ))}
         </div>

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

@@ -6,9 +6,9 @@ import { getCategoryCountList } from "@utils/collections-stats";
 const categoryList = await getCategoryCountList(Astro.logger);
 ---
 
-<ul class={`${styles.categoriesList} stagger-children`}>
+<ul class={styles.categoriesList}>
     {categoryList.map((category) => (
-    <li class={styles.item}>
+    <li>
         <CategoriesCard category={category} />
     </li>
 ))}

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

@@ -1,4 +1,4 @@
 ---
 ---
 
-<Fragment />
+<script src="../../../scripts/analytics-runtime.ts"></script>

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

@@ -15,12 +15,18 @@ const siteConfig = getSiteData(configEntries);
 const { t } = createTranslator(siteConfig.lang || "zh-CN");
 
 function badgeImg(opts: BadgeOptions) {
-    const src = svgToDataUrl(generateBadge(opts, Astro.logger));
+    const svg = generateBadge(opts, Astro.logger);
+    const src = svgToDataUrl(svg);
     const alt = opts.alt || `${opts.label}: ${opts.message}`;
+    const width = svg.match(/<svg\b[^>]*\bwidth="(\d+)"/)?.[1];
+    const height = svg.match(/<svg\b[^>]*\bheight="(\d+)"/)?.[1];
+    const dimensions = width && height ? ` width="${width}" height="${height}"` : "";
+    // Closed badge groups should not initialize every SVG document during first paint.
+    const img = `<img src="${src}" alt="${alt}" class="badge" loading="lazy" decoding="async"${dimensions} />`;
     if (opts.href) {
-        return `<a href="${opts.href}" target="_blank" rel="${opts.rel ?? "noopener"}"><img src="${src}" alt="${alt}" class="badge" /></a>`;
+        return `<a href="${opts.href}" target="_blank" rel="${opts.rel ?? "noopener"}">${img}</a>`;
     }
-    return `<img src="${src}" alt="${alt}" class="badge" />`;
+    return img;
 }
 ---
 
@@ -63,6 +69,11 @@ function badgeImg(opts: BadgeOptions) {
     gap: 0.5rem;
 }
 
+/* Badge HTML is emitted by set:html, so target it through the scoped wrapper. */
+.badges-wrapper :global(.badge) {
+    width: auto;
+}
+
 .badge-group {
     width: 100%;
     border: none;

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

@@ -4,11 +4,11 @@ import { getCollection } from "astro:content";
 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 { SEO } from "astro-seo";
-import packageJson from "../../../../package.json";
-import "@styles/base/init.css";
 import Umami from "@components/stalux/analytics/umami.astro";
+import VerCount from "@components/stalux/common/verCount.astro";
+// Emit a stable asset even while the search component JavaScript stays lazy.
+// The closed search dialog does not need to block the page's first paint.
+import pagefindStyles from "@pagefind/component-ui/css?url";
 import {
     getAuthorData,
     getHeadData,
@@ -17,6 +17,8 @@ import {
     getSiteData,
 } from "@utils/config-utils";
 import { buildSeoDocument, type SeoPageInput } from "@utils/seo-document";
+import { SEO } from "astro-seo";
+import packageJson from "../../../../package.json";
 
 const configEntries = await getCollection("config");
 const siteConfig = getSiteData(configEntries);
@@ -56,6 +58,8 @@ const ldJson = JSON.stringify(seo.schema).replace(/<\//g, "<\\/");
     />
     <!-- 代码字体由 Astro Fonts API 注入；正文按页面生成 native CJK 子集。 -->
     <Font cssVariable="--font-code" />
+    <link rel="prefetch" as="style" href={pagefindStyles} data-stalux-search-style>
+    <noscript><link rel="stylesheet" href={pagefindStyles}></noscript>
     {headConfig?.anyhead && <Fragment set:html={headConfig.anyhead} />}
     {headConfig?.googleAnalyticsId && <GoogleAnalytics />}
     {headConfig?.bingClarityId && <BingClarity />}

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

@@ -9,7 +9,7 @@ const linksConfig = getLinksData(configEntries);
 const links = linksConfig?.sites ?? [];
 ---
 
-<ul class={`${styles.list} stagger-children`}>
+<ul class={styles.list}>
     {links.map((link) => (
     <li class={styles.item}>
         <LinkCard link={link} />

package/src/components/stalux/tags/tagsCloud.astro

@@ -9,6 +9,10 @@ const configEntries = await getCollection("config");
 const siteConfig = getSiteData(configEntries);
 const { t } = createTranslator(siteConfig.lang || "zh-CN");
 const tagList = await getTagCountList(Astro.logger);
+const tagGroups = Array.from({ length: Math.ceil(tagList.length / 32) }, (_, index) =>
+    tagList.slice(index * 32, (index + 1) * 32),
+);
+const cloudDensity = Math.sqrt(Math.max(tagList.length, 100) / 100);
 const tagLinks = tagList.map((t) => ({
     type: "link" as const,
     text: t.name,
@@ -19,17 +23,21 @@ const tagLinks = tagList.map((t) => ({
 <!-- 移动端：SSR 卡片 -->
 <div class={styles.cards} id="tags-cards">
     {tagList.length > 0 ? (
-    tagList.map(({ name, count }) => (
-        <a
-            href={`/tags/${name}/`}
-            class={styles.tagCard}
-            data-stalux-tag-card
-            data-count={count}
-            data-astro-prefetch
-        >
-            <span class={styles.tagName}>{name}</span>
-            <span class={styles.tagCount}>{count}</span>
-        </a>
+    tagGroups.map((group) => (
+        <div class={styles.tagGroup}>
+            {group.map(({ name, count }) => (
+                <a
+                    href={`/tags/${name}/`}
+                    class={styles.tagCard}
+                    data-stalux-tag-card
+                    data-count={count}
+                    data-astro-prefetch
+                >
+                    <span class={styles.tagName}>{name}</span>
+                    <span class={styles.tagCount}>{count}</span>
+                </a>
+            ))}
+        </div>
     ))
 ) : (
     <div class={styles.noTags}>{t("tags.noTags")}</div>
@@ -37,7 +45,9 @@ const tagLinks = tagList.map((t) => ({
 </div>
 
 <!-- 桌面端：Canvas 标签云 -->
-<div class={styles.canvas} id="tags-canvas" data-tags={JSON.stringify(tagLinks)}></div>
+<div class={styles.canvasFrame} style={{ "--cloud-density": cloudDensity }}>
+    <div class={styles.canvas} id="tags-canvas" data-tags={JSON.stringify(tagLinks)}></div>
+</div>
 
 <script>
 import "../../../scripts/tags-cloud";

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

@@ -18,7 +18,7 @@ const sorted = [...entries].sort((a, b) => {
 });
 ---
 
-<ul class={`${styles.list} stagger-children`}>
+<ul class={styles.list}>
     {sorted.map((entry) => {
     const hash = entry.data.abbrlink ? `#word-${entry.data.abbrlink}` : undefined;
     return (

package/src/index.ts

@@ -18,7 +18,7 @@ import {
 } from "node:fs";
 import path from "node:path";
 import { fileURLToPath } from "node:url";
-
+import partytown from "@astrojs/partytown";
 import sitemap from "@astrojs/sitemap";
 import { mermaidHast, mermaidMdast } from "@xingwangzhe/satteri-mermaid";
 import { photoswipe } from "@xingwangzhe/satteri-photoswipe";
@@ -179,7 +179,14 @@ export function stalux(options: StaluxOptions = {}): AstroIntegration[] {
 
                 // 1. 注入 Vite 别名 + 组件覆盖插件 + Vue 特性标记（Waline 依赖）
                 updateConfig({
+                    // Keep route CSS on the first-response path. Search UI CSS is
+                    // a separate prefetched asset; respect explicit external CSS.
+                    build: {
+                        inlineStylesheets:
+                            config.build.inlineStylesheets === "never" ? "never" : "always",
+                    },
                     vite: {
+                        build: { target: config.vite.build?.target ?? "esnext" },
                         resolve: {
                             alias: createViteAliases(srcDir),
                         },
@@ -458,8 +465,13 @@ export function stalux(options: StaluxOptions = {}): AstroIntegration[] {
     };
 
     // 打包内置集成：Astro 的 integrations 配置支持嵌套数组并自动展平（schema 里 val.flat(Infinity)），
-    // 因此这里返回 [coreIntegration, sitemap, expressiveCode]，让消费方一行 `integrations: [stalux()]` 即可完成配置。
-    const bundled: AstroIntegration[] = [coreIntegration];
+    // 因此这里返回 [coreIntegration, partytown, sitemap, expressiveCode]，让消费方一行 `integrations: [stalux()]` 即可完成配置。
+    const bundled: AstroIntegration[] = [
+        coreIntegration,
+        partytown({
+            config: { forward: ["dataLayer.push", "gtag"], mainWindowAccessors: ["CSS"] },
+        }),
+    ];
 
     if (opt.sitemap !== false) {
         const userSitemap = opt.sitemap === true ? undefined : opt.sitemap;

package/src/layouts/Stalux.astro

@@ -2,11 +2,6 @@
 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";
 import { getAccentColorStyle } from "@utils/accent-color";
 import {

package/src/scripts/analytics-runtime.ts

@@ -0,0 +1,169 @@
+/**
+ * Keep analytics trackers in Partytown. This small main-thread bridge owns the
+ * Astro navigation lifecycle and tells the worker about each completed page.
+ */
+declare global {
+    interface Window {
+        __staluxAnalyticsRuntime?: {
+            installed?: boolean;
+            googleId?: string;
+            googleInitialized?: boolean;
+            clarityId?: string;
+            umamiKey?: string;
+            previousPage?: string;
+        };
+    }
+}
+
+window.__staluxAnalyticsRuntime ??= {};
+const state = window.__staluxAnalyticsRuntime;
+
+function appendWorkerInline(code: string): void {
+    const script = document.createElement("script");
+    script.type = "text/partytown";
+    script.textContent = code;
+    document.head.appendChild(script);
+    window.dispatchEvent(new CustomEvent("ptupdate"));
+}
+
+function appendWorkerScript(src: string, attributes: Record<string, string> = {}): void {
+    const script = document.createElement("script");
+    script.type = "text/partytown";
+    script.src = src;
+    for (const [name, value] of Object.entries(attributes)) script.setAttribute(name, value);
+    document.head.appendChild(script);
+    window.dispatchEvent(new CustomEvent("ptupdate"));
+}
+
+function initializeTrackers(): void {
+    const config = document.body?.dataset;
+    if (!config) return;
+
+    if (config.staluxGaId) {
+        state.googleId = config.staluxGaId;
+    }
+
+    if (config.staluxClarityId && state.clarityId !== config.staluxClarityId) {
+        state.clarityId = config.staluxClarityId;
+        appendWorkerInline(`
+            window.clarity = window.clarity || function () {
+                (window.clarity.q = window.clarity.q || []).push(arguments);
+            };
+            window.clarity.q = window.clarity.q || [];
+        `);
+        appendWorkerScript(`https://www.clarity.ms/tag/${encodeURIComponent(state.clarityId)}`, {
+            "data-stalux-clarity": "true",
+        });
+    }
+
+    if (
+        config.staluxUmamiId &&
+        config.staluxUmamiUrl &&
+        state.umamiKey !== `${config.staluxUmamiId}\n${config.staluxUmamiUrl}`
+    ) {
+        state.umamiKey = `${config.staluxUmamiId}\n${config.staluxUmamiUrl}`;
+        appendWorkerScript(config.staluxUmamiUrl, {
+            "data-stalux-umami": "true",
+            "data-website-id": config.staluxUmamiId,
+            "data-auto-pageview": "false",
+        });
+    }
+}
+
+function trackGooglePage(): void {
+    if (!state.googleId) return;
+    const page = {
+        page_location: window.location.href,
+        page_path: window.location.pathname + window.location.search,
+        page_title: document.title,
+    };
+    const initialize = !state.googleInitialized;
+    state.googleInitialized = true;
+    appendWorkerInline(`
+        // Partytown 0.14 serializes HTMLCollection as its worker NodeList.
+        // GA user-data detection checks instanceof HTMLCollection before sending page_view.
+        window.HTMLCollection = window.HTMLCollection || window.NodeList;
+        window.dataLayer = window.dataLayer || [];
+        window.gtag = function () { window.dataLayer.push(arguments); };
+        ${initialize ? `window.gtag("js", new Date());window.gtag("config", ${JSON.stringify(state.googleId)}, { send_page_view: false });` : ""}
+        window.gtag("event", "page_view", ${JSON.stringify(page)});
+    `);
+    if (initialize)
+        appendWorkerScript(
+            `https://www.googletagmanager.com/gtag/js?id=${encodeURIComponent(state.googleId)}`,
+            { "data-stalux-google": "true" },
+        );
+}
+
+function trackUmamiPage(): void {
+    const id = document.body?.dataset.staluxUmamiId;
+    if (!id || !state.umamiKey) return;
+    const payload = JSON.stringify({
+        website: id,
+        url: window.location.href,
+        title: document.title,
+        hostname: window.location.hostname,
+        screen: `${window.screen.width}x${window.screen.height}`,
+        language: navigator.language,
+        referrer: state.previousPage ?? document.referrer,
+    });
+    appendWorkerInline(`
+        (function send(attempt) {
+            if (window.umami?.track) window.umami.track(${payload});
+            else if (attempt < 50) setTimeout(() => send(attempt + 1), 100);
+        })(0);
+    `);
+}
+
+function trackVercountPage(): void {
+    // Visible counters need the current window's URL, cookie and DOM nodes.
+    // Avoid worker startup and synchronous DOM bridges; bind fresh nodes once
+    // per completed Astro navigation using the small upstream async script.
+    document.querySelector("script[data-stalux-vercount]")?.remove();
+    const script = document.createElement("script");
+    script.async = true;
+    script.src = "https://events.vercount.one/js";
+    script.dataset.staluxVercount = "true";
+    document.head.appendChild(script);
+}
+
+if (!state.installed) {
+    state.installed = true;
+    let sandbox: HTMLIFrameElement | undefined;
+    // Moving an iframe with append() reloads its browsing context. Park it outside
+    // the replaced body with moveBefore(), which preserves the running worker.
+    // Capture runs before @astrojs/partytown's iframe recreation handler.
+    document.addEventListener(
+        "astro:before-swap",
+        () => {
+            const frame = document.body.querySelector<HTMLIFrameElement>(
+                'iframe[src*="~partytown/"]',
+            );
+            if (frame && typeof document.documentElement.moveBefore === "function") {
+                sandbox = frame;
+                document.documentElement.moveBefore(frame, null);
+            } else if (!window.crossOriginIsolated) {
+                // Atomics mode has no sandbox iframe and keeps its worker alive.
+                state.googleInitialized = false;
+                state.clarityId = undefined;
+                state.umamiKey = undefined;
+            }
+        },
+        true,
+    );
+    document.addEventListener("astro:after-swap", () => {
+        if (sandbox) {
+            document.body.moveBefore(sandbox, null);
+            sandbox = undefined;
+        }
+    });
+    document.addEventListener("astro:page-load", () => {
+        initializeTrackers();
+        trackGooglePage();
+        trackUmamiPage();
+        trackVercountPage();
+        state.previousPage = window.location.href;
+    });
+}
+
+export {};

package/src/scripts/core-runtime.ts

@@ -4,4 +4,3 @@ import "./date-time";
 import "./footer-badges";
 import "./navigation";
 import "./runtime-counter";
-import "./vercount";

package/src/scripts/date-time.ts

@@ -1,4 +1,5 @@
 import { registerPageLifecycle } from "./page-runtime";
+import { observeVisibleClock } from "./visible-clock";
 
 const pad2 = (value: number) => String(value).padStart(2, "0");
 
@@ -26,15 +27,18 @@ registerPageLifecycle("date-time", () => {
     const timeElement = document.querySelector<HTMLTimeElement>('[data-ref="time"]');
     if (!dateElement || !timeElement) return;
     const lang = document.documentElement.lang || "zh-CN";
+    let lastDate = "";
     const update = () => {
         const now = new Date();
         const time = toMachineTime(now);
-        dateElement.textContent = toDisplayDate(now, lang);
-        dateElement.dateTime = toMachineDate(now);
+        const date = toMachineDate(now);
+        if (date !== lastDate) {
+            dateElement.textContent = toDisplayDate(now, lang);
+            dateElement.dateTime = date;
+            lastDate = date;
+        }
         timeElement.textContent = time;
         timeElement.dateTime = time;
     };
-    update();
-    const timer = window.setInterval(update, 1_000);
-    return () => window.clearInterval(timer);
+    return observeVisibleClock(timeElement, update);
 });