comment

src/components/Comment.astro

@@ -1,25 +1,52 @@
 <div id="tcomment"></div>
 
-<script>
+<script is:inline>
-  document.addEventListener('astro:page-load', () => {
+  (() => {
-    (()=>{
+    const TWIKOO_SRC =
-        const commentsContainer = document.getElementById('tcomment');
+      'https://cdn.jsdelivr.net/npm/twikoo@1.6.44/dist/twikoo.min.js'
-        if (commentsContainer) {
+    const TARGET_SELECTOR = '#tcomment'
-        const script = document.createElement('script');
+    const state = { loading: false, loaded: false }
-        script.src = 'https://cdn.jsdelivr.net/npm/twikoo@1.6.44/dist/twikoo.min.js';
+
-        script.async = true;
+    const initTwikoo = () => {
-        script.onload = () => {
+      const container = document.querySelector(TARGET_SELECTOR)
-            const initScript = document.createElement('script');
+      if (!container) return
-            initScript.innerHTML = `
+
-                twikoo.init({
+      const runInit = () => {
-                    envId: 'https://twikoo.hk.nvme0n1p.dev/',
+        if (state.loaded) return
-                    el: '#tcomment',
+        state.loaded = true
-                });
+        window.twikoo?.init({
-            `;
+          envId: 'https://twikoo.hk.nvme0n1p.dev/',
-            document.body.appendChild(initScript);
+          el: TARGET_SELECTOR,
-        };
+        })
-        document.body.appendChild(script);
       }
-    })();
+
-  });
+      if (window.twikoo) {
+        runInit()
+        return
+      }
+
+      if (state.loading) return
+      state.loading = true
+
+      const script = document.createElement('script')
+      script.src = TWIKOO_SRC
+      script.async = true
+      script.onload = runInit
+      script.onerror = (err) => {
+        console.error('Failed to load Twikoo:', err)
+      }
+      document.head.appendChild(script)
+    }
+
+    const onLoad = () => initTwikoo()
+
+    if (document.readyState === 'complete') {
+      onLoad()
+    } else {
+      window.addEventListener('load', onLoad, { once: true })
+    }
+
+    document.addEventListener('astro:page-load', onLoad)
+    document.addEventListener('astro:after-swap', onLoad)
+  })()
 </script>