feat: 支持评论

Author: coderz-w

package.json

@@ -18,6 +18,7 @@
     "@floating-ui/dom": "^1.6.11",
     "@floating-ui/react": "^0.26.25",
     "@floating-ui/react-dom": "^2.1.2",
+    "@giscus/react": "^3.1.0",
     "@iconify-json/material-symbols": "^1.2.4",
     "@iconify-json/mingcute": "^1.2.1",
     "@next/bundle-analyzer": "^14.2.15",

pnpm-lock.yaml

@@ -15,6 +15,7 @@ import { type PostItem as PostItemType, getPostData } from '@/core';
 import { LayoutRightSidePortal } from '@/providers/shared/LayoutRightSideProvider';
 import { ArticleRightAside } from '@/components/modules/shared/ArticleRightAside';
 import { Signature } from '@/components/modules/shared/signature';
+import Gisus from '@/components/modules/comment/Giscus';
 
 const { postDataMap } = await getPostData();
 
@@ -64,6 +65,7 @@ export default async function Page({ params }: { params: Record<string, any> })
       <PaperLayout>
         <PageInner postData={postData} />
       </PaperLayout>
+      <Gisus />
     </PageTransition>
   );
 }

src/app/(app)/notes/[nid]/page.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import Giscus from '@giscus/react';
+import { useTheme } from 'next-themes';
+
+export default function GS() {
+  const { theme, systemTheme } = useTheme();
+  const [resolvedTheme, setResolvedTheme] = useState<'light' | 'dark'>('light');
+
+  useEffect(() => {
+    if (theme === 'system') {
+      setResolvedTheme(
+        systemTheme ??
+          (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'),
+      );
+    } else {
+      setResolvedTheme(theme as 'light' | 'dark');
+    }
+  }, [theme, systemTheme]);
+
+  return (
+    <div className="mt-16">
+      <Giscus
+        id="comments"
+        repo="coderz-w/blog"
+        repoId="R_kgDOMhALnA"
+        category="Announcements"
+        categoryId="DIC_kwDOMhALnM4CpMFu"
+        mapping="pathname"
+        term=""
+        reactionsEnabled="1"
+        emitMetadata="0"
+        inputPosition="bottom"
+        theme={resolvedTheme}
+        lang="en"
+        loading="lazy"
+      />
+    </div>
+  );
+}

src/components/modules/comment/Giscus.tsx

@@ -11,3 +11,4 @@
 @import url(./mdContainer.css);
 
 @import url(./theme.css);
+