From 52e31600a64cf98557a1377e0703196e61f68d1b Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Mon, 29 Jul 2024 11:52:02 -0700
Subject: [PATCH] fix comments on spa

---
 quartz/components/Comments.tsx | 23 +++++++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/quartz/components/Comments.tsx b/quartz/components/Comments.tsx
index 9c22df66b..4a4d5d136 100644
--- a/quartz/components/Comments.tsx
+++ b/quartz/components/Comments.tsx
@@ -19,8 +19,12 @@ function boolToStringBool(b: boolean): string {
 }
 
 export default ((opts: Options) => {
-  const Comments: QuartzComponent = (_props: QuartzComponentProps) => <div class="giscus"></div>
-  Comments.afterDOMLoaded = `
+  const Comments: QuartzComponent = (props: QuartzComponentProps) => {
+    props.externalResources.js.push({
+      loadTime: "afterDOMReady",
+      spaPreserve: true,
+      contentType: "inline",
+      script: `
       const giscusScript = document.createElement("script")
       giscusScript.src = "https://giscus.app/client.js"
       giscusScript.async = true
@@ -57,10 +61,21 @@ export default ((opts: Options) => {
       }
 
       document.addEventListener("nav", () => {
+        iframe.contentWindow.postMessage({
+          giscus: {
+            setConfig: {
+              term: window.document.body.dataset.slug
+            },
+          },
+        }, 'https://giscus.app')
+
         document.addEventListener("themechange", changeTheme)
         window.addCleanup(() => document.removeEventListener("themechange", changeTheme))
-      })
-  `
+      })`,
+    })
+
+    return <div class="giscus"></div>
+  }
 
   return Comments
 }) satisfies QuartzComponentConstructor<Options>