From 6264f5685ce95a84fbce4338fee21d423ca3c8dd Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Tue, 30 Jul 2024 08:13:13 +0000
Subject: [PATCH] fix: comments on spa should work (closes #1296) (#1298)
---
quartz/components/Comments.tsx | 45 +++++++++++++++++++++++----------------------
quartz/plugins/index.ts | 8 ++++----
quartz/components/scripts/graph.inline.ts | 2 +-
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 @@
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 @@
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 @@
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))
+ `,
})
}
--
Gitblit v1.10.0