refactored counter

src/components/Posts/PostItem.astro

@@ -1,6 +1,6 @@
 ---
 import "@/styles/global.css";
-import Remark42Count from "@/components/remark42-counter.svelte";
+import Remark42Counter from "@/components/Remark42Counter.astro";
 import { getLangFromUrl } from "@/i18n";
 
 const lang = getLangFromUrl(Astro.url);
@@ -33,7 +33,7 @@ const tags = data.tags;
         <span class="post-date">{data.date}</span>
         <span class="post-stats">
           <span class="post-stat">
-            💬 <Remark42Count url={data.postPath} client:idle />
+            💬 <Remark42Counter url={data.postPath} />
           </span>
         </span>
       </div>

src/components/Remark42Counter.astro

@@ -0,0 +1,66 @@
+---
+const { url } = Astro.props;
+const host = import.meta.env.PUBLIC_REMARK42_HOST;
+const siteId = import.meta.env.PUBLIC_REMARK42_SITE_ID;
+---
+
+<span
+    class="remark42__counter"
+    data-url={url}
+    data-host={host}
+    data-site-id={siteId}></span>
+
+<script is:inline data-astro-rerun>
+    function getTheme() {
+        return document.documentElement.classList.contains("dark")
+            ? "dark"
+            : "light";
+    }
+
+    function mountRemark42Counters() {
+        const counters = Array.from(
+            document.querySelectorAll(".remark42__counter[data-url]"),
+        );
+
+        if (!counters.length) return;
+
+        const first = counters[0];
+        const host = first.dataset.host;
+        const siteId = first.dataset.siteId;
+
+        if (!host || !siteId) return;
+
+        window.remark_config = {
+            host,
+            site_id: siteId,
+            components: ["counter"],
+            show_rss_subscription: false,
+            theme: getTheme(),
+        };
+
+        for (const el of counters) {
+            el.textContent = "";
+        }
+
+        document.getElementById("remark42-counter-loader")?.remove();
+
+        const script = document.createElement("script");
+        script.id = "remark42-counter-loader";
+        script.defer = true;
+
+        if ("noModule" in script) {
+            script.type = "module";
+            script.src = `${host}/web/counter.mjs?ts=${Date.now()}`;
+        } else {
+            script.async = true;
+            script.src = `${host}/web/counter.js?ts=${Date.now()}`;
+        }
+
+        document.head.appendChild(script);
+    }
+
+    clearTimeout(window.__remark42CounterMountTimer);
+    window.__remark42CounterMountTimer = setTimeout(() => {
+        mountRemark42Counters();
+    }, 0);
+</script>