Skip to content

Commit 1224c7d

Browse files
aarnphmaarnphm
authored
refactor(comments): move script to files (#1308)
* refactor(comments): move script to files for LSP, treesitter, and the whole galore. Signed-off-by: Aaron Pham <[email protected]> * fix(type): support removeEventListener with CustomEventMap Signed-off-by: Aaron Pham <[email protected]> * fix: parse bool to string first Signed-off-by: Aaron Pham <[email protected]> * chore: address comments and test on branch Signed-off-by: Aaron Pham <[email protected]> * revert: remove comments section from main quartz pages Signed-off-by: Aaron Pham <[email protected]> --------- Signed-off-by: Aaron Pham <[email protected]>
1 parent bf1c9d1 commit 1224c7d

File tree

3 files changed

+90
-42
lines changed

3 files changed

+90
-42
lines changed

‎globals.d.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,10 @@ export declare global {
44
type: K,
55
listener: (this: Document, ev: CustomEventMap[K]) => void,
66
): void
7+
removeEventListener<K extends keyof CustomEventMap>(
8+
type: K,
9+
listener: (this: Document, ev: CustomEventMap[K]) => void,
10+
): void
711
dispatchEvent<K extends keyof CustomEventMap>(ev: CustomEventMap[K] | UIEvent): void
812
}
913
interface Window {

‎quartz/components/Comments.tsx

Lines changed: 19 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
2+
import { classNames } from "../util/lang"
3+
// @ts-ignore
4+
import script from "./scripts/comments.inline"
25

36
type Options = {
47
provider: "giscus"
@@ -19,49 +22,23 @@ function boolToStringBool(b: boolean): string {
1922
}
2023

2124
export default ((opts: Options) => {
22-
const Comments: QuartzComponent = (_props: QuartzComponentProps) => <div class="giscus"></div>
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")
43-
const giscusScript = document.createElement("script")
44-
giscusScript.src = "https://giscus.app/client.js"
45-
giscusScript.async = true
46-
giscusScript.crossOrigin = "anonymous"
47-
giscusScript.setAttribute("data-loading", "lazy")
48-
giscusScript.setAttribute("data-emit-metadata", "0")
49-
giscusScript.setAttribute("data-repo", "${opts.options.repo}")
50-
giscusScript.setAttribute("data-repo-id", "${opts.options.repoId}")
51-
giscusScript.setAttribute("data-category", "${opts.options.category}")
52-
giscusScript.setAttribute("data-category-id", "${opts.options.categoryId}")
53-
giscusScript.setAttribute("data-mapping", "${opts.options.mapping ?? "url"}")
54-
giscusScript.setAttribute("data-strict", "${boolToStringBool(opts.options.strict ?? true)}")
55-
giscusScript.setAttribute("data-reactions-enabled", "${boolToStringBool(opts.options.reactionsEnabled ?? true)}")
56-
giscusScript.setAttribute("data-input-position", "${opts.options.inputPosition ?? "bottom"}")
57-
58-
const theme = document.documentElement.getAttribute("saved-theme")
59-
giscusScript.setAttribute("data-theme", theme)
60-
giscusContainer.appendChild(giscusScript)
25+
const Comments: QuartzComponent = ({ displayClass, cfg }: QuartzComponentProps) => {
26+
return (
27+
<div
28+
class={classNames(displayClass, "giscus")}
29+
data-repo={opts.options.repo}
30+
data-repo-id={opts.options.repoId}
31+
data-category={opts.options.category}
32+
data-category-id={opts.options.categoryId}
33+
data-mapping={opts.options.mapping ?? "url"}
34+
data-strict={boolToStringBool(opts.options.strict ?? true)}
35+
data-reactions-enabled={boolToStringBool(opts.options.reactionsEnabled ?? true)}
36+
data-input-position={opts.options.inputPosition ?? "bottom"}
37+
></div>
38+
)
39+
}
6140

62-
document.addEventListener("themechange", changeTheme)
63-
window.addCleanup(() => document.removeEventListener("themechange", changeTheme))
64-
})`
41+
Comments.afterDOMLoaded = script
6542

6643
return Comments
6744
}) satisfies QuartzComponentConstructor<Options>

‎quartz/components/scripts/comments.inline.ts

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
const changeTheme = (e: CustomEventMap["themechange"]) => {
2+
const theme = e.detail.theme
3+
const iframe = document.querySelector("iframe.giscus-frame") as HTMLIFrameElement
4+
if (!iframe) {
5+
return
6+
}
7+
8+
if (!iframe.contentWindow) {
9+
return
10+
}
11+
12+
iframe.contentWindow.postMessage(
13+
{
14+
giscus: {
15+
setConfig: {
16+
theme: theme,
17+
},
18+
},
19+
},
20+
"https://giscus.app",
21+
)
22+
}
23+
24+
type GiscusElement = Omit<HTMLElement, "dataset"> & {
25+
dataset: DOMStringMap & {
26+
repo: `${string}/${string}`
27+
repoId: string
28+
category: string
29+
categoryId: string
30+
mapping: "url" | "title" | "og:title" | "specific" | "number" | "pathname"
31+
strict: string
32+
reactionsEnabled: string
33+
inputPosition: "top" | "bottom"
34+
}
35+
}
36+
37+
document.addEventListener("nav", () => {
38+
const giscusContainer = document.querySelector(".giscus") as GiscusElement
39+
if (!giscusContainer) {
40+
return
41+
}
42+
43+
const giscusScript = document.createElement("script")
44+
giscusScript.src = "https://giscus.app/client.js"
45+
giscusScript.async = true
46+
giscusScript.crossOrigin = "anonymous"
47+
giscusScript.setAttribute("data-loading", "lazy")
48+
giscusScript.setAttribute("data-emit-metadata", "0")
49+
giscusScript.setAttribute("data-repo", giscusContainer.dataset.repo)
50+
giscusScript.setAttribute("data-repo-id", giscusContainer.dataset.repoId)
51+
giscusScript.setAttribute("data-category", giscusContainer.dataset.category)
52+
giscusScript.setAttribute("data-category-id", giscusContainer.dataset.categoryId)
53+
giscusScript.setAttribute("data-mapping", giscusContainer.dataset.mapping)
54+
giscusScript.setAttribute("data-strict", giscusContainer.dataset.strict)
55+
giscusScript.setAttribute("data-reactions-enabled", giscusContainer.dataset.reactionsEnabled)
56+
giscusScript.setAttribute("data-input-position", giscusContainer.dataset.inputPosition)
57+
58+
const theme = document.documentElement.getAttribute("saved-theme")
59+
if (theme) {
60+
giscusScript.setAttribute("data-theme", theme)
61+
}
62+
63+
giscusContainer.appendChild(giscusScript)
64+
65+
document.addEventListener("themechange", changeTheme)
66+
window.addCleanup(() => document.removeEventListener("themechange", changeTheme))
67+
})

0 commit comments

Comments
 (0)