fix: comments on spa should work (closes #1296) (#1298)

* fix comments on spa

* fix giscus

Author: jackyzha0

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)
-
-      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')
-      }
+      giscusContainer.appendChild(giscusScript)
 
-      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>

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"

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))
+      `,
     })
   }