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

* fix comments on spa

* fix giscus
---
 quartz/components/Comments.tsx            | 45 ++++++++++++-----------
 quartz/components/scripts/graph.inline.ts |  2 +-
 quartz/plugins/index.ts                   |  8 ++--
 3 files changed, 28 insertions(+), 27 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 @@ function boolToStringBool(b: boolean): string {
 
 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 @@ export default ((opts: Options) => {
 
       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>
diff --git a/quartz/components/scripts/graph.inline.ts b/quartz/components/scripts/graph.inline.ts
index 1a4140b..1b2d322 100644
--- a/quartz/components/scripts/graph.inline.ts
+++ b/quartz/components/scripts/graph.inline.ts
@@ -1,4 +1,4 @@
-import type { ContentDetails, ContentIndex } from "../../plugins/emitters/contentIndex"
+import type { ContentDetails } from "../../plugins/emitters/contentIndex"
 import * as d3 from "d3"
 import { registerEscapeHandler, removeAllChildren } from "./util"
 import { FullSlug, SimpleSlug, getFullSlug, resolveRelative, simplifySlug } from "../../util/path"
diff --git a/quartz/plugins/index.ts b/quartz/plugins/index.ts
index 554b117..df9fd1d 100644
--- a/quartz/plugins/index.ts
+++ b/quartz/plugins/index.ts
@@ -28,10 +28,10 @@ export function getStaticResourcesFromPlugins(ctx: BuildCtx) {
       loadTime: "afterDOMReady",
       contentType: "inline",
       script: `
-            const socket = new WebSocket('${wsUrl}')
-            // reload(true) ensures resources like images and scripts are fetched again in firefox
-            socket.addEventListener('message', () => document.location.reload(true))
-          `,
+        const socket = new WebSocket('${wsUrl}')
+        // reload(true) ensures resources like images and scripts are fetched again in firefox
+        socket.addEventListener('message', () => document.location.reload(true))
+      `,
     })
   }