From 6264f5685ce95a84fbce4338fee21d423ca3c8dd Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Tue, 30 Jul 2024 08:13:13 +0000
Subject: [PATCH] fix: comments on spa should work (closes #1296) (#1298)

---
 quartz/components/Comments.tsx |   45 +++++++++++++++++++++++----------------------
 1 files changed, 23 insertions(+), 22 deletions(-)

diff --git a/quartz/components/Comments.tsx b/quartz/components/Comments.tsx
index 9c22df6..ac3813b 100644
--- a/quartz/components/Comments.tsx
+++ b/quartz/components/Comments.tsx
@@ -20,7 +20,26 @@
 
 export default ((opts: Options) => {
   const Comments: QuartzComponent = (_props: QuartzComponentProps) => <div class="giscus"></div>
+
   Comments.afterDOMLoaded = `
+    const changeTheme = (e) => {
+      const theme = e.detail.theme
+      const iframe = document.querySelector('iframe.giscus-frame')
+      if (!iframe) {
+        return
+      }
+
+      iframe.contentWindow.postMessage({
+        giscus: {
+          setConfig: {
+            theme: theme
+          }
+        }
+      }, 'https://giscus.app')
+    }
+
+    document.addEventListener("nav", () => {
+      const giscusContainer = document.querySelector(".giscus")
       const giscusScript = document.createElement("script")
       giscusScript.src = "https://giscus.app/client.js"
       giscusScript.async = true
@@ -38,29 +57,11 @@
 
       const theme = document.documentElement.getAttribute("saved-theme")
       giscusScript.setAttribute("data-theme", theme)
-      document.head.appendChild(giscusScript)
+      giscusContainer.appendChild(giscusScript)
 
-      const changeTheme = (e) => {
-        const theme = e.detail.theme
-        const iframe = document.querySelector('iframe.giscus-frame')
-        if (!iframe) {
-          return
-        }
-
-        iframe.contentWindow.postMessage({
-          giscus: {
-            setConfig: {
-              theme: theme
-            }
-          }
-        }, 'https://giscus.app')
-      }
-
-      document.addEventListener("nav", () => {
-        document.addEventListener("themechange", changeTheme)
-        window.addCleanup(() => document.removeEventListener("themechange", changeTheme))
-      })
-  `
+      document.addEventListener("themechange", changeTheme)
+      window.addCleanup(() => document.removeEventListener("themechange", changeTheme))
+    })`
 
   return Comments
 }) satisfies QuartzComponentConstructor<Options>

--
Gitblit v1.10.0