From b14f4e0528b4cd0d6d1bd5cecec1782d4c066fc4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=E1=BA=A7n=20=C4=90=E1=BB=A9c=20Nam?= <me@dynamotn.dev>
Date: Sun, 13 Oct 2024 17:40:22 +0700
Subject: [PATCH] feat: add disqus and commento comments providers

---
 quartz.config.ts                             |  3 +
 quartz/cfg.ts                                | 25 ++++++++
 quartz/components/Comments.tsx               | 66 +++++++++++---------
 quartz/components/scripts/comments.inline.ts | 65 +++++++++++++++++--
 4 files changed, 127 insertions(+), 32 deletions(-)

diff --git a/quartz.config.ts b/quartz.config.ts
index e96ee4843fda1..1ddc97e3fcdc5 100644
--- a/quartz.config.ts
+++ b/quartz.config.ts
@@ -52,6 +52,9 @@ const config: QuartzConfig = {
         },
       },
     },
+    comments: {
+      provider: "giscus",
+    }
   },
   plugins: {
     transformers: [
diff --git a/quartz/cfg.ts b/quartz/cfg.ts
index 85527a093c410..3bf6d551260c8 100644
--- a/quartz/cfg.ts
+++ b/quartz/cfg.ts
@@ -43,6 +43,31 @@ export type Analytics =
       projectId?: string
     }
 
+export type Comments =
+  | null
+  | {
+      provider: "giscus"
+      repo: `${string}/${string}`
+      repoId: string
+      category: string
+      categoryId: string
+      mapping?: "url" | "title" | "og:title" | "specific" | "number" | "pathname"
+      strict?: boolean
+      reactionsEnabled?: boolean
+      inputPosition?: "top" | "bottom"
+    }
+  | {
+      provider: "commento"
+      host?: string
+      cssOverride?: string
+      noFonts?: boolean
+      hideDeleted?: boolean
+    }
+  | {
+      provider: "disqus"
+      shortName: string
+    }
+
 export interface GlobalConfiguration {
   pageTitle: string
   pageTitleSuffix?: string
diff --git a/quartz/components/Comments.tsx b/quartz/components/Comments.tsx
index 8e449402683c1..3615c9e683d1a 100644
--- a/quartz/components/Comments.tsx
+++ b/quartz/components/Comments.tsx
@@ -3,39 +3,49 @@ import { classNames } from "../util/lang"
 // @ts-ignore
 import script from "./scripts/comments.inline"
 
-type Options = {
-  provider: "giscus"
-  options: {
-    repo: `${string}/${string}`
-    repoId: string
-    category: string
-    categoryId: string
-    mapping?: "url" | "title" | "og:title" | "specific" | "number" | "pathname"
-    strict?: boolean
-    reactionsEnabled?: boolean
-    inputPosition?: "top" | "bottom"
-  }
-}
-
 function boolToStringBool(b: boolean): string {
   return b ? "1" : "0"
 }
 
-export default ((opts: Options) => {
+export default (() => {
   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>
-    )
+    switch (cfg.comments?.provider) {
+      case "giscus": return (
+        <div id="comment" data-provider={cfg.comments.provider}>
+          <div
+            class={classNames(displayClass, "giscus")}
+            data-repo={cfg.comments?.repo}
+            data-repo-id={cfg.comments?.repoId}
+            data-category={cfg.comments?.category}
+            data-category-id={cfg.comments?.categoryId}
+            data-mapping={cfg.comments?.mapping ?? "url"}
+            data-strict={boolToStringBool(cfg.comments?.strict ?? true)}
+            data-reactions-enabled={boolToStringBool(cfg.comments?.reactionsEnabled ?? true)}
+            data-input-position={cfg.comments?.inputPosition ?? "bottom"}
+          ></div>
+        </div>
+      )
+      case "commento": return (
+        <div id="comment" data-provider={cfg.comments.provider}>
+          <div
+            id="commento"
+            data-host={cfg.comments?.host ?? "cdn.commento.io" }
+            data-css-override={cfg.comments?.cssOverride ?? ""}
+            data-no-fonts={cfg.comments?.noFonts ?? true}
+            data-hide-deleted={cfg.comments?.hideDeleted ?? false}
+          ></div>
+        </div>
+      )
+      case "disqus": return (
+        <div id="comment" data-provider={cfg.comments.provider}>
+          <div
+            id="disqus_thread"
+            data-short-name={cfg.comments?.shortName}
+          ></div>
+        </div>
+      )
+      default: return (<></>)
+    }
   }
 
   Comments.afterDOMLoaded = script
diff --git a/quartz/components/scripts/comments.inline.ts b/quartz/components/scripts/comments.inline.ts
index 4ab29f087cc08..a6a28036197aa 100644
--- a/quartz/components/scripts/comments.inline.ts
+++ b/quartz/components/scripts/comments.inline.ts
@@ -1,4 +1,4 @@
-const changeTheme = (e: CustomEventMap["themechange"]) => {
+const changeGiscusTheme = (e: CustomEventMap["themechange"]) => {
   const theme = e.detail.theme
   const iframe = document.querySelector("iframe.giscus-frame") as HTMLIFrameElement
   if (!iframe) {
@@ -34,7 +34,7 @@ type GiscusElement = Omit<HTMLElement, "dataset"> & {
   }
 }
 
-document.addEventListener("nav", () => {
+function setupGiscus() {
   const giscusContainer = document.querySelector(".giscus") as GiscusElement
   if (!giscusContainer) {
     return
@@ -62,6 +62,63 @@ document.addEventListener("nav", () => {
 
   giscusContainer.appendChild(giscusScript)
 
-  document.addEventListener("themechange", changeTheme)
-  window.addCleanup(() => document.removeEventListener("themechange", changeTheme))
+  document.addEventListener("themechange", changeGiscusTheme)
+  window.addCleanup(() => document.removeEventListener("themechange", changeGiscusTheme))
+}
+
+type CommentoElement = Omit<HTMLElement, "dataset"> & {
+  dataset: DOMStringMap & {
+    host: string
+    cssOverride: string
+    noFonts: string
+    hideDeleted: string
+  }
+}
+
+function setupCommento() {
+  const commentoContainer = document.querySelector("#commento") as CommentoElement
+  if (!commentoContainer) {
+    return
+  }
+
+  const commentoScript = document.createElement("script")
+  commentoScript.src = "https://" + commentoContainer.dataset.host + "/js/commento.js"
+  commentoScript.defer = true
+  commentoScript.setAttribute("data-css-override", commentoContainer.dataset.cssOverride)
+  commentoScript.setAttribute("data-no-fonts", commentoContainer.dataset.noFonts)
+  commentoScript.setAttribute("data-hide-deleted", commentoContainer.dataset.hideDeleted)
+
+  commentoContainer.appendChild(commentoScript)
+}
+
+type DisqusElement = Omit<HTMLElement, "dataset"> & {
+  dataset: DOMStringMap & {
+    shortName: string
+  }
+}
+
+function setupDisqus() {
+  const disqusContainer = document.querySelector("#disqus_thread")
+  if (!disqusContainer) {
+    return
+  }
+
+  const disqusScript = document.createElement("script")
+  disqusScript.src = "https://" + disqusContainer.dataset.shortName + ".disqus.com/embed.js"
+  disqusScript.setAttribute('data-timestamp', +new Date())
+
+  disqusContainer.appendChild(disqusScript)
+}
+
+document.addEventListener("nav", () => {
+  const commentContainer = document.querySelector("#comment")
+  if (!commentContainer) {
+    return
+  }
+  const provider = commentContainer.getAttribute("data-provider")
+  switch (provider) {
+    case "giscus": setupGiscus()
+    case "commento": setupCommento()
+    case "disqus": setupDisqus()
+  }
 })