The Trans Directory
fix: comments on spa should work (closes #1296) (#1298)
* fix comments on spa
* fix giscus
authored by
Jacky Zhao
and committed by
GitHub
6264f568
e1a9661b
+28
-27
+23
-22
quartz/components/Comments.tsx
+23
-22
quartz/components/Comments.tsx
···
20
20
21
21
export default ((opts: Options) => {
22
22
const Comments: QuartzComponent = (_props: QuartzComponentProps) => <div class="giscus"></div>
23
+
23
24
Comments.afterDOMLoaded = `
25
+
const changeTheme = (e) => {
26
+
const theme = e.detail.theme
27
+
const iframe = document.querySelector('iframe.giscus-frame')
28
+
if (!iframe) {
29
+
return
30
+
}
31
+
32
+
iframe.contentWindow.postMessage({
33
+
giscus: {
34
+
setConfig: {
35
+
theme: theme
36
+
}
37
+
}
38
+
}, 'https://giscus.app')
39
+
}
40
+
41
+
document.addEventListener("nav", () => {
42
+
const giscusContainer = document.querySelector(".giscus")
24
43
const giscusScript = document.createElement("script")
25
44
giscusScript.src = "https://giscus.app/client.js"
26
45
giscusScript.async = true
···
38
57
39
58
const theme = document.documentElement.getAttribute("saved-theme")
40
59
giscusScript.setAttribute("data-theme", theme)
41
-
document.head.appendChild(giscusScript)
60
+
giscusContainer.appendChild(giscusScript)
42
61
43
-
const changeTheme = (e) => {
44
-
const theme = e.detail.theme
45
-
const iframe = document.querySelector('iframe.giscus-frame')
46
-
if (!iframe) {
47
-
return
48
-
}
49
-
50
-
iframe.contentWindow.postMessage({
51
-
giscus: {
52
-
setConfig: {
53
-
theme: theme
54
-
}
55
-
}
56
-
}, 'https://giscus.app')
57
-
}
58
-
59
-
document.addEventListener("nav", () => {
60
-
document.addEventListener("themechange", changeTheme)
61
-
window.addCleanup(() => document.removeEventListener("themechange", changeTheme))
62
-
})
63
-
`
62
+
document.addEventListener("themechange", changeTheme)
63
+
window.addCleanup(() => document.removeEventListener("themechange", changeTheme))
64
+
})`
64
65
65
66
return Comments
66
67
}) satisfies QuartzComponentConstructor<Options>
+1
-1
quartz/components/scripts/graph.inline.ts
+1
-1
quartz/components/scripts/graph.inline.ts
···
1
-
import type { ContentDetails, ContentIndex } from "../../plugins/emitters/contentIndex"
1
+
import type { ContentDetails } from "../../plugins/emitters/contentIndex"
2
2
import * as d3 from "d3"
3
3
import { registerEscapeHandler, removeAllChildren } from "./util"
4
4
import { FullSlug, SimpleSlug, getFullSlug, resolveRelative, simplifySlug } from "../../util/path"
+4
-4
quartz/plugins/index.ts
+4
-4
quartz/plugins/index.ts
···
28
28
loadTime: "afterDOMReady",
29
29
contentType: "inline",
30
30
script: `
31
-
const socket = new WebSocket('${wsUrl}')
32
-
// reload(true) ensures resources like images and scripts are fetched again in firefox
33
-
socket.addEventListener('message', () => document.location.reload(true))
34
-
`,
31
+
const socket = new WebSocket('${wsUrl}')
32
+
// reload(true) ensures resources like images and scripts are fetched again in firefox
33
+
socket.addEventListener('message', () => document.location.reload(true))
34
+
`,
35
35
})
36
36
}
37
37