add gitcus-comments

https://astro-paper.pages.dev/posts/how-to-integrate-giscus-comments/

package.json

@@ -15,6 +15,7 @@
   "dependencies": {
     "@astrojs/check": "^0.9.4",
     "@astrojs/rss": "^4.0.7",
+    "@giscus/react": "^3.0.0",
     "@resvg/resvg-js": "^2.6.2",
     "astro": "^4.16.3",
     "fuse.js": "^7.0.0",

src/components/Comments.tsx

@@ -0,0 +1,52 @@
+import Giscus, { type Theme } from "@giscus/react";
+import { GISCUS } from "@config";
+import { useEffect, useState } from "react";
+
+interface CommentsProps {
+  lightTheme?: Theme;
+  darkTheme?: Theme;
+}
+
+export default function Comments({
+  lightTheme = "light",
+  darkTheme = "dark",
+}: CommentsProps) {
+  const [theme, setTheme] = useState(() => {
+    const currentTheme = localStorage.getItem("theme");
+    const browserTheme = window.matchMedia("(prefers-color-scheme: dark)")
+      .matches
+      ? "dark"
+      : "light";
+
+    return currentTheme || browserTheme;
+  });
+
+  useEffect(() => {
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const handleChange = ({ matches }: MediaQueryListEvent) => {
+      setTheme(matches ? "dark" : "light");
+    };
+
+    mediaQuery.addEventListener("change", handleChange);
+
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, []);
+
+  useEffect(() => {
+    const themeButton = document.querySelector("#theme-btn");
+    const handleClick = () => {
+      setTheme(prevTheme => (prevTheme === "dark" ? "light" : "dark"));
+    };
+
+    themeButton?.addEventListener("click", handleClick);
+
+    return () => themeButton?.removeEventListener("click", handleClick);
+  }, []);
+
+  return (
+    <div className="mt-8">
+      <Giscus theme={theme === "light" ? lightTheme : darkTheme} {...GISCUS} />
+    </div>
+  );
+}
+

src/config.ts

@@ -1,4 +1,25 @@
 import type { Site, SocialObjects } from "./types";
+import type { GiscusProps } from "@giscus/react";
+
+// GiscusProps
+//
+// https://astro-paper.pages.dev/posts/how-to-integrate-giscus-comments/
+// https://giscus.app/
+
+
+export const GISCUS: GiscusProps = {
+  repo: "kalug/kalug",
+  repoId: "MDEwOlJlcG9zaXRvcnk0NjM5OTI2Mg==",
+  category: "General",
+  categoryId: "DIC_kwDOAsP_Hs4CjuBs",
+  mapping: "pathname",
+  reactionsEnabled: "1",
+  emitMetadata: "0",
+  inputPosition: "bottom",
+  lang: "en",
+  loading: "lazy",
+};
+
 
 export const SITE: Site = {
   website: "https://kalug.tw/", // replace this with your deployed domain

src/layouts/PostDetails.astro

@@ -3,6 +3,7 @@ import Layout from "@layouts/Layout.astro";
 import Header from "@components/Header.astro";
 import Footer from "@components/Footer.astro";
 import Tag from "@components/Tag.astro";
+import Comments from "@components/Comments";
 import Datetime from "@components/Datetime";
 import type { CollectionEntry } from "astro:content";
 import { slugifyStr } from "@utils/slugify";
@@ -177,6 +178,7 @@ const nextPost =
         )
       }
     </div>
+    <Comments client:only="react" />
   </main>
   <Footer />
 </Layout>