The Trans Directory
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 <contact@aarnphm.xyz>
* fix(type): support removeEventListener with CustomEventMap
Signed-off-by: Aaron Pham <contact@aarnphm.xyz>
* fix: parse bool to string first
Signed-off-by: Aaron Pham <contact@aarnphm.xyz>
* chore: address comments and test on branch
Signed-off-by: Aaron Pham <contact@aarnphm.xyz>
* revert: remove comments section from main quartz pages
Signed-off-by: Aaron Pham <contact@aarnphm.xyz>
---------
Signed-off-by: Aaron Pham <contact@aarnphm.xyz>
authored by
Aaron Pham
and committed by
GitHub
1224c7d3
bf1c9d17
+90
-42
+4
globals.d.ts
+4
globals.d.ts
···
4
4
type: K,
5
5
listener: (this: Document, ev: CustomEventMap[K]) => void,
6
6
): void
7
+
removeEventListener<K extends keyof CustomEventMap>(
8
+
type: K,
9
+
listener: (this: Document, ev: CustomEventMap[K]) => void,
10
+
): void
7
11
dispatchEvent<K extends keyof CustomEventMap>(ev: CustomEventMap[K] | UIEvent): void
8
12
}
9
13
interface Window {
+19
-42
quartz/components/Comments.tsx
+19
-42
quartz/components/Comments.tsx
···
1
1
import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
2
+
import { classNames } from "../util/lang"
3
+
// @ts-ignore
4
+
import script from "./scripts/comments.inline"
2
5
3
6
type Options = {
4
7
provider: "giscus"
···
19
22
}
20
23
21
24
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
-
}
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
+
}
31
40
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)
61
-
62
-
document.addEventListener("themechange", changeTheme)
63
-
window.addCleanup(() => document.removeEventListener("themechange", changeTheme))
64
-
})`
41
+
Comments.afterDOMLoaded = script
65
42
66
43
return Comments
67
44
}) satisfies QuartzComponentConstructor<Options>
+67
quartz/components/scripts/comments.inline.ts
+67
quartz/components/scripts/comments.inline.ts
···
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
+
})