Merge pull request #254 from RyoJerryYu/feat/add-utterances-as-comment

feat: add utterances comment for articles

.vscode/settings.json

@@ -2,16 +2,14 @@
     "editor.formatOnSave": true,
     "editor.tabSize": 2,
     "editor.codeActionsOnSave": {
-        "source.fixAll": true,
-        "source.organizeImports": true
+        "source.fixAll": "explicit",
+        "source.organizeImports": "explicit"
     },
-    "jest.autoRun": "off",
-
+    "jest.runMode": "on-demand",
     "scss.lint.unknownAtRules": "ignore",
     "[scss]": {
         "editor.defaultFormatter": "esbenp.prettier-vscode",
     },
-
     "markdown.extension.list.indentationSize": "inherit",
     "pasteImage.insertPattern": "![[${imageFileName}]]",
     "pasteImage.path": "${currentFileDir}/${currentFileNameWithoutExt}/",
@@ -21,7 +19,7 @@
         ],
         "editor.insertSpaces": true,
         "editor.tabSize": 2,
-        "editor.wordBasedSuggestions": false,
+        "editor.wordBasedSuggestions": "off",
         "editor.formatOnSave": true,
         "editor.defaultFormatter": "ms-python.python",
     },

package.json

@@ -21,6 +21,7 @@
     "@types/node": "18.14.2",
     "@types/react": "18.0.28",
     "@types/react-dom": "18.0.11",
+    "@types/unist": "^2.0.0",
     "chart.js": "^4.2.1",
     "clsx": "^1.2.1",
     "dayjs": "^1.11.7",
@@ -54,7 +55,6 @@
     "svgo": "^3.0.2",
     "typescript": "4.9.5",
     "unified": "^10.1.2",
-    "unist": "^8.0.11",
     "unist-util-visit": "^4.1.2"
   },
   "devDependencies": {

src/components/Comments.tsx

@@ -0,0 +1,40 @@
+import useScript from "@/hooks/use-script";
+import { useRef } from "react";
+
+export type CommentsProps = {
+  theme?: string;
+  "issue-term"?: string;
+  repo?: string;
+  label?: string;
+};
+
+const Comments = (props?: CommentsProps) => {
+  const comment = useRef(null);
+
+  const status = useScript({
+    url: "https://utteranc.es/client.js",
+    attributes: {
+      theme: props?.theme ?? "github-light",
+      "issue-term": props?.["issue-term"] ?? "pathname",
+      repo: props?.repo ?? "RyoJerryYu/blog-next",
+      label: props?.label ?? "comment",
+    },
+    ref: comment,
+  });
+
+  return (
+    <div className="w-full">
+      <div ref={comment} />
+      {status === "loading" && (
+        <div className="text-center">Loading comments...</div>
+      )}
+      {status === "error" && (
+        <div className="text-center text-red-500">
+          Error loading comments. Please try again later.
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Comments;

src/hooks/use-script.ts

@@ -0,0 +1,64 @@
+import { MutableRefObject, useEffect, useState } from "react";
+
+export type UseScriptParams = {
+  url: string;
+  attributes?: Record<string, string>;
+  ref: MutableRefObject<HTMLElement | null>;
+};
+
+type ScriptStatus = "idle" | "loading" | "ready" | "error";
+
+const useScript = (params: UseScriptParams) => {
+  const { url, attributes, ref } = params;
+
+  const [status, setStatus] = useState<ScriptStatus>(url ? "loading" : "idle");
+  const setAttributeStatus = (e: Event) => {
+    setStatus(e.type === "load" ? "ready" : "error");
+  };
+
+  useEffect(
+    () => {
+      if (!url) {
+        setStatus("idle");
+        return;
+      }
+
+      // prevent adding script tag if it already exists
+      // now it's only for using utterances,
+      // replacing or only not appending script tag won't work well
+      let script: HTMLScriptElement;
+      if (ref.current?.children?.length) {
+        script = ref.current.children[0] as HTMLScriptElement;
+      } else {
+        script = document.createElement("script");
+
+        script.src = url;
+        script.async = true;
+        script.crossOrigin = "anonymous";
+        if (attributes) {
+          Object.keys(attributes).forEach((key) => {
+            script.setAttribute(key, attributes[key]);
+          });
+        }
+        ref.current?.appendChild(script);
+      }
+
+      script.addEventListener("load", setAttributeStatus);
+      script.addEventListener("error", setAttributeStatus);
+
+      return () => {
+        if (script) {
+          script.removeEventListener("load", setAttributeStatus);
+          script.removeEventListener("error", setAttributeStatus);
+        }
+      };
+    },
+    // create script tag only once
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [url, attributes]
+  );
+
+  return status;
+};
+
+export default useScript;

src/pages/articles/[slug].tsx

@@ -1,12 +1,13 @@
+import Comments from "@/components/Comments";
 import Post from "@/components/Post";
 import DefaultLayout from "@/layouts/DefaultLayout";
 import { Description, SEOObject, Title } from "@/layouts/UniversalHead";
 import parseMdx from "@/plugins";
 import {
+  PrevNextInfo,
   articleCache,
   getPostMetaOrReload,
   getTagIndex,
-  PrevNextInfo,
 } from "@/statics";
 import { PostMeta } from "@/statics/loader";
 import { TagInfo } from "@/statics/tag-index";
@@ -80,6 +81,7 @@ const ArticlePage = (props: ArticlePageProps) => {
           source={props.source}
           prevNextInfo={props.prevNextInfo}
         />
+        <Comments issue-term={props.slug} />
       </DefaultLayout>
     </>
   );

src/plugins/remark-escape.ts

@@ -1,7 +1,6 @@
-import { visit } from "unist-util-visit";
-import unified from "unified";
-import { Node } from "unist";
 import { Text } from "mdast";
+import unified from "unified";
+import { visit } from "unist-util-visit";
 /**
  * for escaping the arrow for mdx, which would raise an error
  *

src/plugins/remark-mermaid.ts

@@ -34,7 +34,7 @@ export const UserTheme = {
   Null: "null",
 } as const;
 
-export type Theme = typeof UserTheme[keyof typeof UserTheme];
+export type Theme = (typeof UserTheme)[keyof typeof UserTheme];
 
 export interface RemarkMermaidOptions {
   /**