diff --git a/quartz/components/Comments.tsx b/quartz/components/Comments.tsx
index ac3813b82..87aff954c 100644
--- a/quartz/components/Comments.tsx
+++ b/quartz/components/Comments.tsx
@@ -1,4 +1,7 @@
 import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import { classNames } from "../util/lang"
+// @ts-ignore
+import script from "./scripts/comments.inline"
 
 type Options = {
   provider: "giscus"
@@ -14,54 +17,24 @@ type Options = {
   }
 }
 
-function boolToStringBool(b: boolean): string {
-  return b ? "1" : "0"
-}
-
 export default ((opts: Options) => {
-  const Comments: QuartzComponent = (_props: QuartzComponentProps) => <div class="giscus"></div>
+  const Comments: QuartzComponent = ({ displayClass, cfg }: QuartzComponentProps) => {
+    return (
+      <div
+        class={classNames(displayClass, "giscus")}
+        data-repo={opts.options.repo}
+        data-repo-id={opts.options.repoId}
+        data-category={opts.options.category}
+        data-category-id={opts.options.categoryId}
+        data-mapping={opts.options.mapping ?? "url"}
+        data-strict={opts.options.strict ?? true}
+        data-reactions-enabled={opts.options.reactionsEnabled ?? true}
+        data-input-position={opts.options.inputPosition ?? "bottom"}
+      ></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
-      giscusScript.crossOrigin = "anonymous"
-      giscusScript.setAttribute("data-loading", "lazy")
-      giscusScript.setAttribute("data-emit-metadata", "0")
-      giscusScript.setAttribute("data-repo", "${opts.options.repo}")
-      giscusScript.setAttribute("data-repo-id", "${opts.options.repoId}")
-      giscusScript.setAttribute("data-category", "${opts.options.category}")
-      giscusScript.setAttribute("data-category-id", "${opts.options.categoryId}")
-      giscusScript.setAttribute("data-mapping", "${opts.options.mapping ?? "url"}")
-      giscusScript.setAttribute("data-strict", "${boolToStringBool(opts.options.strict ?? true)}")
-      giscusScript.setAttribute("data-reactions-enabled", "${boolToStringBool(opts.options.reactionsEnabled ?? true)}")
-      giscusScript.setAttribute("data-input-position", "${opts.options.inputPosition ?? "bottom"}")
-
-      const theme = document.documentElement.getAttribute("saved-theme")
-      giscusScript.setAttribute("data-theme", theme)
-      giscusContainer.appendChild(giscusScript)
-
-      document.addEventListener("themechange", changeTheme)
-      window.addCleanup(() => document.removeEventListener("themechange", changeTheme))
-    })`
+  Comments.afterDOMLoaded = script
 
   return Comments
 }) satisfies QuartzComponentConstructor<Options>
diff --git a/quartz/components/scripts/comments.inline.ts b/quartz/components/scripts/comments.inline.ts
new file mode 100644
index 000000000..7025dd4b9
--- /dev/null
+++ b/quartz/components/scripts/comments.inline.ts
@@ -0,0 +1,74 @@
+function boolToStringBool(b: boolean): string {
+  return b ? "1" : "0"
+}
+
+const changeTheme = (e: CustomEventMap["themechange"]) => {
+  const theme = e.detail.theme
+  const iframe = document.querySelector("iframe.giscus-frame") as HTMLIFrameElement
+  if (!iframe) {
+    return
+  }
+
+  if (!iframe.contentWindow) {
+    return
+  }
+
+  iframe.contentWindow.postMessage(
+    {
+      giscus: {
+        setConfig: {
+          theme: theme,
+        },
+      },
+    },
+    "https://giscus.app",
+  )
+}
+
+type GiscusElement = Omit<HTMLElement, "dataset"> & {
+  dataset: DOMStringMap & {
+    repo: `${string}/${string}`
+    repoId: string
+    category: string
+    categoryId: string
+    mapping: "url" | "title" | "og:title" | "specific" | "number" | "pathname"
+    strict: boolean
+    reactionsEnabled: boolean
+    inputPosition: "top" | "bottom"
+  }
+}
+
+document.addEventListener("nav", () => {
+  const giscusContainer = document.querySelector(".giscus") as GiscusElement
+  if (!giscusContainer) {
+    return
+  }
+
+  const giscusScript = document.createElement("script")
+  giscusScript.src = "https://giscus.app/client.js"
+  giscusScript.async = true
+  giscusScript.crossOrigin = "anonymous"
+  giscusScript.setAttribute("data-loading", "lazy")
+  giscusScript.setAttribute("data-emit-metadata", "0")
+  giscusScript.setAttribute("data-repo", giscusContainer.dataset.repo)
+  giscusScript.setAttribute("data-repo-id", giscusContainer.dataset.repoId)
+  giscusScript.setAttribute("data-category", giscusContainer.dataset.category)
+  giscusScript.setAttribute("data-category-id", giscusContainer.dataset.categoryId)
+  giscusScript.setAttribute("data-mapping", giscusContainer.dataset.mapping)
+  giscusScript.setAttribute("data-strict", boolToStringBool(giscusContainer.dataset.strict))
+  giscusScript.setAttribute(
+    "data-reactions-enabled",
+    boolToStringBool(giscusContainer.dataset.reactionsEnabled),
+  )
+  giscusScript.setAttribute("data-input-position", giscusContainer.dataset.inputPosition)
+
+  const theme = document.documentElement.getAttribute("saved-theme")
+  if (theme) {
+    giscusScript.setAttribute("data-theme", theme)
+  }
+
+  giscusContainer.appendChild(giscusScript)
+
+  document.addEventListener("themechange", changeTheme)
+  window.addCleanup(() => document.removeEventListener("themechange", changeTheme))
+})