diff --git a/quartz/components/Comments.tsx b/quartz/components/Comments.tsx index 9c22df66..ac3813b8 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) =>
+ 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 diff --git a/quartz/components/scripts/graph.inline.ts b/quartz/components/scripts/graph.inline.ts index 1a4140b4..1b2d322a 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 554b1170..df9fd1d2 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)) + `, }) }