Add Comment

website/package.json

@@ -12,6 +12,7 @@
     "@codinasion/language-data": "workspace:*",
     "@docsearch/css": "3",
     "@docsearch/react": "3",
+    "@giscus/react": "^2",
     "@tailwindcss/typography": "^0.5.10",
     "daisyui": "^4.4.22",
     "flowbite": "^2.2.0",

website/src/components/Comment/index.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import Giscus from "@giscus/react";
+
+export default function Comment() {
+  const { theme } = useTheme();
+
+  return (
+    <>
+      <div className="my-10">
+        <Giscus
+          id="giscus-comments"
+          repo={`codinasion/.github`}
+          repoId={`R_kgDOKx7Kyw`}
+          category={`General`}
+          categoryId={`DIC_kwDOKx7Ky84CcJY2`}
+          mapping={`pathname`}
+          strict={`1`}
+          reactionsEnabled={`1`}
+          emitMetadata={`0`}
+          inputPosition={`bottom`}
+          theme={theme}
+          lang={`en`}
+          loading={`lazy`}
+        />
+      </div>
+    </>
+  );
+}

website/src/components/Program/program-component.tsx

@@ -1,7 +1,7 @@
 import Pagination from "@/components/Pagination";
 import ProgramCard from "./program-card";
 import ProgramLanguageComponent from "./program-language-component";
-import SponsorCard from "../Sponsors/sponsor-card";
+import SponsorCard from "@/components/Sponsors/sponsor-card";
 import type { ProgramListType } from "@/types";
 
 interface Props {

website/src/components/Program/program-detail-component.tsx

@@ -1,5 +1,6 @@
 import { GetLanguageData } from "@codinasion/language-data";
 import MarkdownPreview from "@/components/MarkdownPreview";
+import Comment from "@/components/Comment";
 import ProgramContributorsComponent from "./program-contributors-component";
 import SponsorCard from "@/components/Sponsors/sponsor-card";
 import type { ProgramDataType } from "@/types";
@@ -36,6 +37,8 @@ ${programData.description}
 ${codeblock}
 `}
         </MarkdownPreview>
+
+        <Comment />
       </div>
 
       <div className="space-y-5 min-w-[320px]">