giscus comments!

components/notes/Comments.tsx

@@ -1,49 +1,29 @@
-import { useRef, useEffect, useState } from "react";
 import { useTheme } from "next-themes";
-import { githubRepo } from "../../lib/config";
+import { Giscus } from "@giscus/react";
+import { giscusConfig } from "../../lib/config";
+import type { GiscusProps } from "@giscus/react";
 
 type Props = {
-  slug: string;
+  title: string;
 };
 
-const Comments = ({ slug }: Props) => {
-  const [injected, setInjected] = useState(false);
-  const scriptRef = useRef<HTMLDivElement>(null);
+const Comments = ({ title }: Props) => {
   const { resolvedTheme } = useTheme();
 
-  useEffect(() => {
-    // double check that we're ready for the script and it hasn't already been loaded
-    if (!scriptRef.current || injected) {
-      return;
-    }
-
-    // NOTE: utterances script can't be loaded w/ next/script since the iframe appears literally where the script tag is
-    const utterances = document.createElement("script");
-    utterances.src = "https://utteranc.es/client.js";
-    utterances.async = true;
-    utterances.defer = true;
-    utterances.crossOrigin = "anonymous";
-
-    // https://utteranc.es/
-    utterances.setAttribute("repo", githubRepo);
-    utterances.setAttribute("issue-term", `Comments on /notes/${slug}`);
-    utterances.setAttribute("theme", resolvedTheme === "dark" ? "github-dark" : "github-light");
-    utterances.setAttribute("label", "💬 comments");
-
-    // add inside wrapper div (target for iframe)
-    scriptRef.current.appendChild(utterances);
-    setInjected(true);
-
-    // cleanup
-    return () => utterances.remove();
-  }, [resolvedTheme]); // eslint-disable-line react-hooks/exhaustive-deps
-
   return (
     <div
-      ref={scriptRef}
       id="comments"
-      style={{ marginTop: "2em", paddingTop: "1em", borderTop: "2px solid var(--light)" }}
-    />
+      style={{ marginTop: "2em", paddingTop: "1em", borderTop: "2px solid var(--light)", minHeight: "350px" }}
+    >
+      <Giscus
+        {...(giscusConfig as GiscusProps)}
+        term={title}
+        mapping="specific"
+        reactionsEnabled="1"
+        emitMetadata="0"
+        theme={resolvedTheme === "dark" ? "dark" : "light"}
+      />
+    </div>
   );
 };
 

components/notes/Meta.module.css

@@ -21,7 +21,7 @@
 
 .meta > div:last-of-type {
   /* fix potential layout shift when number of hits loads */
-  min-width: 6em;
+  min-width: 6.5em;
   margin-right: 0;
 }