From fdd55fb068495f0006782e4e1f712f425ef95c0e Mon Sep 17 00:00:00 2001
From: ClovertaTheTrilobita <cloverta@petalmail.com>
Date: Mon, 13 Apr 2026 23:02:21 +0300
Subject: [PATCH] refactored counter

---
 src/components/Posts/PostItem.astro  |  4 +-
 src/components/Remark42Counter.astro | 66 ++++++++++++++++++++++++++++
 2 files changed, 68 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Remark42Counter.astro

diff --git a/src/components/Posts/PostItem.astro b/src/components/Posts/PostItem.astro
index 053457d..309422b 100644
--- a/src/components/Posts/PostItem.astro
+++ b/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>
diff --git a/src/components/Remark42Counter.astro b/src/components/Remark42Counter.astro
new file mode 100644
index 0000000..e576d13
--- /dev/null
+++ b/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>