feat(comments): 添加 Waline 评论组件，替换 Giscus 评论组件

src/components/blog/Comments.tsx

@@ -0,0 +1,61 @@
+import { useEffect, useRef } from 'react';
+import type { WalineInstance, WalineInitOptions } from '@waline/client';
+import { init } from '@waline/client';
+import '@waline/client/style';
+
+import type { Lang } from '@/types/i18n';
+
+export type CommentsProps = Partial<Omit<WalineInitOptions, 'el' | 'serverURL'>> & { lang?: Lang };
+
+export default function Comments({ lang = 'en', ...props }: CommentsProps) {
+  const walineInstanceRef = useRef<WalineInstance | null>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const walineLang = lang === 'zh' ? 'zh-CN' : 'en';
+
+  useEffect(() => {
+    if (!containerRef.current) return;
+
+    const getTheme = () => document.documentElement.classList.contains('dark') ? 'html.dark' : false;
+
+    const pathname = window.location.pathname;
+    const postsMatch = pathname.match(/\/posts\/([^/]+)/);
+    const path = postsMatch ? postsMatch[1] : pathname;
+
+    walineInstanceRef.current = init({
+      ...props,
+      el: containerRef.current,
+      serverURL: import.meta.env.PUBLIC_WALINE_SERVER_URL,
+      lang: walineLang,
+      dark: getTheme(),
+      path,
+    });
+
+    return () => walineInstanceRef.current?.destroy();
+  }, []);
+
+  useEffect(() => {
+    const getTheme = () => document.documentElement.classList.contains('dark') ? 'html.dark' : false;
+
+    walineInstanceRef.current?.update({
+      ...props,
+      lang: walineLang,
+      dark: getTheme(),
+    });
+
+    const handleThemeChange = () => {
+      walineInstanceRef.current?.update({
+        ...props,
+        lang: walineLang,
+        dark: getTheme(),
+      });
+    };
+
+    const observer = new MutationObserver(handleThemeChange);
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
+
+    return () => observer.disconnect();
+  }, [lang, props, walineLang]);
+
+  return <div ref={containerRef} className="waline-container" />;
+}

src/components/blog/GiscusComments.tsx

@@ -1,52 +0,0 @@
-import Giscus from '@giscus/react';
-import type { Lang } from '@/types/i18n';
-import { useEffect, useState } from 'react';
-
-export interface GiscusCommentsProps {
-  lang?: Lang;
-}
-
-export default function GiscusComments({ lang = 'en' }: GiscusCommentsProps) {
-  const [theme, setTheme] = useState<'light' | 'dark'>('light');
-  const [term, setTerm] = useState<string>('');
-
-  const giscusLang = lang === 'zh' ? 'zh-CN' : lang;
-
-  useEffect(() => {
-    const getTheme = () => document.documentElement.classList.contains('dark') ? 'dark' : 'light';
-
-    const pathname = window.location.pathname;
-    const postsMatch = pathname.match(/\/posts\/([^/]+)/);
-    const discussionTerm = postsMatch ? postsMatch[1] : pathname;
-
-    setTheme(getTheme());
-    setTerm(discussionTerm);
-
-    const observer = new MutationObserver(() => {
-      setTheme(getTheme());
-    });
-
-    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
-
-    return () => observer.disconnect();
-  }, []);
-
-
-  return (
-    <Giscus
-      repo="zguiyang/blog-giscus"
-      repoId="R_kgDOQ2Wnxw"
-      category="Announcements"
-      categoryId="DIC_kwDOQ2Wnx84C0vSJ"
-      mapping="specific"
-      term={term}
-      strict="0"
-      reactionsEnabled="1"
-      emitMetadata="0"
-      inputPosition="top"
-      theme={theme}
-      lang={giscusLang}
-      loading="lazy"
-    />
-  );
-}