Merge pull request #61 from syfxlin/develop

fix: artalk comment not working

package.json

@@ -28,7 +28,7 @@
     "@syfxlin/reve": "^1.0.5",
     "@tippyjs/react": "^4.2.6",
     "@vanilla-extract/css": "^1.14.0",
-    "artalk": "^2.7.2",
+    "artalk": "^2.6.4",
     "fs-extra": "^11.2.0",
     "fuse.js": "^7.0.0",
     "gh-lang-colors": "^0.1.3",

src/components/templates/template/index.tsx

@@ -4,7 +4,7 @@ import { Main } from "../../layouts/main";
 import { Title } from "../../layouts/title";
 import { Toc } from "../../widgets/toc";
 import { CursorPagination } from "../../ui/pagination";
-import { Artalk } from "../../widgets/artalk/dynamic";
+import { Artalk } from "../../widgets/artalk";
 import { Footer } from "../../layouts/footer";
 import { TocData } from "../../../contents/types";
 

src/components/widgets/artalk/index.tsx

@@ -1,8 +1,7 @@
 "use client";
 import "artalk/dist/Artalk.css";
 import * as styles from "./styles.css";
-import React, { useEffect } from "react";
-import ArtalkComment from "artalk";
+import React, { useEffect, useRef } from "react";
 import { COLINE_ARTALK_SERVER_URL, COLINE_ARTALK_SITE_NAME } from "../../../env/public";
 import { useTheme } from "next-themes";
 
@@ -12,20 +11,24 @@ type Props = {
 };
 
 export const Artalk: React.FC<Props> = ({ name, link }) => {
+  const artalk = useRef<any>();
   const { resolvedTheme } = useTheme();
   useEffect(() => {
-    try {
-      ArtalkComment.init({
-        el: `#comment`,
+    import("artalk").then((mod) => {
+      artalk.current = new mod.default({
+        el: `#artalk`,
         pageTitle: name,
         pageKey: link,
         darkMode: resolvedTheme === "dark",
         server: COLINE_ARTALK_SERVER_URL,
         site: COLINE_ARTALK_SITE_NAME,
       });
-    } catch (e) {
-      // ignore
-    }
+    });
+    return () => {
+      if (artalk.current) {
+        artalk.current.destroy();
+      }
+    };
   }, [name, link, resolvedTheme]);
-  return <section id="comment" aria-label="评论系统" className={styles.container} />;
+  return <section id="artalk" aria-label="评论系统" className={styles.container} />;
 };