From 45133e472fdc439e110675c3f8f00d50017b23a9 Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Tue, 30 Jul 2024 01:11:26 -0700
Subject: [PATCH] fix giscus

---
 quartz/components/Comments.tsx            | 64 +++++++++--------------
 quartz/components/scripts/graph.inline.ts |  2 +-
 quartz/plugins/index.ts                   |  8 +--
 3 files changed, 30 insertions(+), 44 deletions(-)

diff --git a/quartz/components/Comments.tsx b/quartz/components/Comments.tsx
index 4a4d5d136..ac3813b82 100644
--- a/quartz/components/Comments.tsx
+++ b/quartz/components/Comments.tsx
@@ -19,12 +19,27 @@ function boolToStringBool(b: boolean): string {
 }
 
 export default ((opts: Options) => {
-  const Comments: QuartzComponent = (props: QuartzComponentProps) => {
-    props.externalResources.js.push({
-      loadTime: "afterDOMReady",
-      spaPreserve: true,
-      contentType: "inline",
-      script: `
+  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
@@ -42,40 +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", () => {
-        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>
-  }
+      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 1a4140b48..1b2d322ab 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 554b1170b..df9fd1d24 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))
+      `,
     })
   }