From 1224c7d32fd2e6d4029fd34aaf6aeb3ef234d239 Mon Sep 17 00:00:00 2001
From: Aaron Pham <Aaronpham0103@gmail.com>
Date: Mon, 05 Aug 2024 19:17:11 +0000
Subject: [PATCH] refactor(comments): move script to files (#1308)
---
globals.d.ts | 4 +
quartz/components/Comments.tsx | 61 ++++++--------------
quartz/components/scripts/comments.inline.ts | 67 ++++++++++++++++++++++
3 files changed, 90 insertions(+), 42 deletions(-)
diff --git a/globals.d.ts b/globals.d.ts
index ee13005..6cf30f8 100644
--- a/globals.d.ts
+++ b/globals.d.ts
@@ -4,6 +4,10 @@
type: K,
listener: (this: Document, ev: CustomEventMap[K]) => void,
): void
+ removeEventListener<K extends keyof CustomEventMap>(
+ type: K,
+ listener: (this: Document, ev: CustomEventMap[K]) => void,
+ ): void
dispatchEvent<K extends keyof CustomEventMap>(ev: CustomEventMap[K] | UIEvent): void
}
interface Window {
diff --git a/quartz/components/Comments.tsx b/quartz/components/Comments.tsx
index ac3813b..8e44940 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 @@
}
export default ((opts: Options) => {
- const Comments: QuartzComponent = (_props: QuartzComponentProps) => <div class="giscus"></div>
+ const Comments: QuartzComponent = ({ displayClass, cfg }: QuartzComponentProps) => {
+ return (
+ <div
+ class={classNames(displayClass, "giscus")}
+ data-repo={opts.options.repo}
+ data-repo-id={opts.options.repoId}
+ data-category={opts.options.category}
+ data-category-id={opts.options.categoryId}
+ data-mapping={opts.options.mapping ?? "url"}
+ data-strict={boolToStringBool(opts.options.strict ?? true)}
+ data-reactions-enabled={boolToStringBool(opts.options.reactionsEnabled ?? true)}
+ data-input-position={opts.options.inputPosition ?? "bottom"}
+ ></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
- 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<Options>
diff --git a/quartz/components/scripts/comments.inline.ts b/quartz/components/scripts/comments.inline.ts
new file mode 100644
index 0000000..4ab29f0
--- /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<HTMLElement, "dataset"> & {
+ 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))
+})
--
Gitblit v1.10.0