feat: integrate hyvor talk

quartz/components/Comments.tsx

@@ -1,9 +1,13 @@
 import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
 import { classNames } from "../util/lang"
 // @ts-ignore
-import script from "./scripts/comments.inline"
+import giscusScript from "./scripts/comments.giscus.inline"
+// @ts-ignore
+import hyvorTalkScript from "./scripts/comments.hyvor_talk.inline"
 
-type Options = {
+type Options = GiscusOptions | HyvorTalkOptions
+
+type GiscusOptions = {
   provider: "giscus"
   options: {
     repo: `${string}/${string}`
@@ -21,6 +25,13 @@ type Options = {
   }
 }
 
+type HyvorTalkOptions = {
+  provider: "hyvor_talk"
+  options: {
+    websiteId: string
+  }
+}
+
 function boolToStringBool(b: boolean): string {
   return b ? "1" : "0"
 }
@@ -35,6 +46,9 @@ export default ((opts: Options) => {
       return <></>
     }
 
+    if (opts.provider === "hyvor_talk") {
+      return <div id="hyvor-talk-container" data-website-id={opts.options.websiteId}></div>
+    } else {
       return (
         <div
           class={classNames(displayClass, "giscus")}
@@ -55,8 +69,13 @@ export default ((opts: Options) => {
         ></div>
       )
     }
+  }
 
-  Comments.afterDOMLoaded = script
+  if (opts.provider === "hyvor_talk") {
+    Comments.afterDOMLoaded = hyvorTalkScript
+  } else {
+    Comments.afterDOMLoaded = giscusScript
+  }
 
   return Comments
 }) satisfies QuartzComponentConstructor<Options>

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

@@ -0,0 +1,33 @@
+document.addEventListener("nav", () => {
+  if (!document.getElementById("hyvor-talk-script")) {
+    const script = document.createElement("script")
+    script.id = "hyvor-talk-script"
+    script.src = "https://talk.hyvor.com/embed/embed.js"
+    script.async = true
+    script.type = "module"
+
+    document.body.appendChild(script)
+  }
+
+  const container = document.getElementById("hyvor-talk-container")
+  if (!container) {
+    return
+  }
+
+  const websiteId = container.dataset.websiteId
+  if (!websiteId) {
+    return
+  }
+
+  const comments = document.createElement("hyvor-talk-comments")
+  comments.setAttribute("website-id", websiteId)
+  comments.setAttribute("page-id", window.location.pathname)
+  comments.setAttribute("instance", "https://talk.hyvor.localhost")
+
+  if ((window as any).hyvorTalkStyles) {
+    ;(window as any).hyvorTalkStyles.stylesheet = undefined
+  }
+
+  container.innerHTML = ""
+  container.appendChild(comments)
+})