diff --git a/quartz/components/Comments.tsx b/quartz/components/Comments.tsx index a7315214f..80e5cc63f 100644 --- a/quartz/components/Comments.tsx +++ b/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,28 +46,36 @@ export default ((opts: Options) => { return <> } - return ( -
- ) + if (opts.provider === "hyvor_talk") { + return
+ } else { + return ( +
+ ) + } } - Comments.afterDOMLoaded = script + if (opts.provider === "hyvor_talk") { + Comments.afterDOMLoaded = hyvorTalkScript + } else { + Comments.afterDOMLoaded = giscusScript + } return Comments }) satisfies QuartzComponentConstructor diff --git a/quartz/components/scripts/comments.inline.ts b/quartz/components/scripts/comments.giscus.inline.ts similarity index 100% rename from quartz/components/scripts/comments.inline.ts rename to quartz/components/scripts/comments.giscus.inline.ts diff --git a/quartz/components/scripts/comments.hyvor_talk.inline.ts b/quartz/components/scripts/comments.hyvor_talk.inline.ts new file mode 100644 index 000000000..c4425edf1 --- /dev/null +++ b/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) +})