feat(comments): add giscus for comments

package.json

@@ -18,6 +18,7 @@
   "dependencies": {
     "@astrojs/check": "^0.4.1",
     "@astrojs/rss": "^4.0.1",
+    "@giscus/react": "^2.4.0",
     "@resvg/resvg-js": "^2.6.0",
     "astro": "^4.1.1",
     "fuse.js": "^7.0.0",

src/components/Comments.tsx

@@ -0,0 +1,38 @@
+import Giscus, { type GiscusProps, type Theme } from "@giscus/react";
+import { GISCUS } from "@config";
+import { useState } from "react";
+
+interface Props {
+  lightTheme?: Theme;
+  darkTheme?: Theme;
+}
+
+export default function Comments({
+  lightTheme = "light",
+  darkTheme = "dark",
+}: Props) {
+  const currentTheme = localStorage.getItem("theme");
+  const browserTheme = window.matchMedia("(prefers-color-scheme: dark)").matches
+    ? "dark"
+    : "light";
+
+  const [theme, setTheme] = useState(currentTheme || browserTheme);
+
+  // manual theme toggle
+  document.querySelector("#theme-btn")?.addEventListener("click", () => {
+    theme === "dark" ? setTheme("light") : setTheme("dark");
+  });
+
+  // browser preference
+  window
+    .matchMedia("(prefers-color-scheme: dark)")
+    .addEventListener("change", ({ matches: isDark }) => {
+      isDark ? setTheme("dark") : setTheme("light");
+    });
+
+  return (
+    <div className="mt-8">
+      <Giscus theme={theme === "light" ? lightTheme : darkTheme} {...GISCUS} />
+    </div>
+  );
+}

src/config.ts

@@ -1,3 +1,4 @@
+import type { GiscusProps } from "@giscus/react";
 import type { Site, SocialObjects } from "./types";
 
 export const SITE: Site = {
@@ -23,6 +24,20 @@ export const LOGO_IMAGE = {
   width: 480,
 };
 
+export const GISCUS: GiscusProps = {
+  id: "comments",
+  repo: "FjellOverflow/blog",
+  repoId: "R_kgDOLFslYw",
+  category: "Giscus comments",
+  categoryId: "DIC_kwDOLFslY84Ccm0m",
+  mapping: "pathname",
+  reactionsEnabled: "0",
+  emitMetadata: "0",
+  inputPosition: "bottom",
+  lang: "en",
+  loading: "lazy",
+};
+
 export const SOCIALS: SocialObjects = [
   {
     name: "Github",

src/layouts/PostDetails.astro

@@ -7,6 +7,7 @@ import Datetime from "@components/Datetime";
 import type { CollectionEntry } from "astro:content";
 import { slugifyStr } from "@utils/slugify";
 import ShareLinks from "@components/ShareLinks.astro";
+import Comments from "@components/Comments";
 
 export interface Props {
   post: CollectionEntry<"blog">;
@@ -92,6 +93,8 @@ const layoutProps = {
 
       <ShareLinks />
     </div>
+
+    <Comments client:only />
   </main>
   <Footer />
 </Layout>