From 1224c7d32fd2e6d4029fd34aaf6aeb3ef234d239 Mon Sep 17 00:00:00 2001 From: Aaron Pham Date: Mon, 5 Aug 2024 15:17:11 -0400 Subject: [PATCH] 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 * fix(type): support removeEventListener with CustomEventMap Signed-off-by: Aaron Pham * fix: parse bool to string first Signed-off-by: Aaron Pham * chore: address comments and test on branch Signed-off-by: Aaron Pham * revert: remove comments section from main quartz pages Signed-off-by: Aaron Pham --------- Signed-off-by: Aaron Pham --- globals.d.ts | 4 ++ quartz/components/Comments.tsx | 61 ++++++------------ quartz/components/scripts/comments.inline.ts | 67 ++++++++++++++++++++ 3 files changed, 90 insertions(+), 42 deletions(-) create mode 100644 quartz/components/scripts/comments.inline.ts diff --git a/globals.d.ts b/globals.d.ts index ee13005c9..6cf30f8a1 100644 --- a/globals.d.ts +++ b/globals.d.ts @@ -4,6 +4,10 @@ export declare global { type: K, listener: (this: Document, ev: CustomEventMap[K]) => void, ): void + removeEventListener( + type: K, + listener: (this: Document, ev: CustomEventMap[K]) => void, + ): void dispatchEvent(ev: CustomEventMap[K] | UIEvent): void } interface Window { diff --git a/quartz/components/Comments.tsx b/quartz/components/Comments.tsx index ac3813b82..8e4494026 100644 --- a/quartz/components/Comments.tsx +++ b/quartz/components/Comments.tsx @@ -1,4 +1,7 @@ import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types" +import { classNames } from "../util/lang" +// @ts-ignore +import script from "./scripts/comments.inline" type Options = { provider: "giscus" @@ -19,49 +22,23 @@ function boolToStringBool(b: boolean): string { } export default ((opts: Options) => { - const Comments: QuartzComponent = (_props: QuartzComponentProps) =>
+ const Comments: QuartzComponent = ({ displayClass, cfg }: QuartzComponentProps) => { + return ( +
+ ) + } - 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 - giscusScript.crossOrigin = "anonymous" - giscusScript.setAttribute("data-loading", "lazy") - giscusScript.setAttribute("data-emit-metadata", "0") - giscusScript.setAttribute("data-repo", "${opts.options.repo}") - giscusScript.setAttribute("data-repo-id", "${opts.options.repoId}") - giscusScript.setAttribute("data-category", "${opts.options.category}") - giscusScript.setAttribute("data-category-id", "${opts.options.categoryId}") - giscusScript.setAttribute("data-mapping", "${opts.options.mapping ?? "url"}") - giscusScript.setAttribute("data-strict", "${boolToStringBool(opts.options.strict ?? true)}") - giscusScript.setAttribute("data-reactions-enabled", "${boolToStringBool(opts.options.reactionsEnabled ?? true)}") - giscusScript.setAttribute("data-input-position", "${opts.options.inputPosition ?? "bottom"}") - - const theme = document.documentElement.getAttribute("saved-theme") - giscusScript.setAttribute("data-theme", theme) - giscusContainer.appendChild(giscusScript) - - document.addEventListener("themechange", changeTheme) - window.addCleanup(() => document.removeEventListener("themechange", changeTheme)) - })` + Comments.afterDOMLoaded = script return Comments }) satisfies QuartzComponentConstructor diff --git a/quartz/components/scripts/comments.inline.ts b/quartz/components/scripts/comments.inline.ts new file mode 100644 index 000000000..4ab29f087 --- /dev/null +++ b/quartz/components/scripts/comments.inline.ts @@ -0,0 +1,67 @@ +const changeTheme = (e: CustomEventMap["themechange"]) => { + const theme = e.detail.theme + const iframe = document.querySelector("iframe.giscus-frame") as HTMLIFrameElement + if (!iframe) { + return + } + + if (!iframe.contentWindow) { + return + } + + iframe.contentWindow.postMessage( + { + giscus: { + setConfig: { + theme: theme, + }, + }, + }, + "https://giscus.app", + ) +} + +type GiscusElement = Omit & { + dataset: DOMStringMap & { + repo: `${string}/${string}` + repoId: string + category: string + categoryId: string + mapping: "url" | "title" | "og:title" | "specific" | "number" | "pathname" + strict: string + reactionsEnabled: string + inputPosition: "top" | "bottom" + } +} + +document.addEventListener("nav", () => { + const giscusContainer = document.querySelector(".giscus") as GiscusElement + if (!giscusContainer) { + return + } + + const giscusScript = document.createElement("script") + giscusScript.src = "https://giscus.app/client.js" + giscusScript.async = true + giscusScript.crossOrigin = "anonymous" + giscusScript.setAttribute("data-loading", "lazy") + giscusScript.setAttribute("data-emit-metadata", "0") + giscusScript.setAttribute("data-repo", giscusContainer.dataset.repo) + giscusScript.setAttribute("data-repo-id", giscusContainer.dataset.repoId) + giscusScript.setAttribute("data-category", giscusContainer.dataset.category) + giscusScript.setAttribute("data-category-id", giscusContainer.dataset.categoryId) + giscusScript.setAttribute("data-mapping", giscusContainer.dataset.mapping) + giscusScript.setAttribute("data-strict", giscusContainer.dataset.strict) + giscusScript.setAttribute("data-reactions-enabled", giscusContainer.dataset.reactionsEnabled) + giscusScript.setAttribute("data-input-position", giscusContainer.dataset.inputPosition) + + const theme = document.documentElement.getAttribute("saved-theme") + if (theme) { + giscusScript.setAttribute("data-theme", theme) + } + + giscusContainer.appendChild(giscusScript) + + document.addEventListener("themechange", changeTheme) + window.addCleanup(() => document.removeEventListener("themechange", changeTheme)) +})