website: Add Breadcrumb,Comment (#4978)

* Add Breadcrumb

* 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/app/program/[slug]/page.tsx

@@ -1,5 +1,6 @@
 import type { Metadata } from "next";
 import SEO from "@/components/SEO";
+import Breadcrumb from "@/components/Breadcrumb";
 import ProgramDetailComponent from "@/components/Program/program-detail-component";
 import { GetProgramList, GetProgramData } from "@/data";
 import type { ProgramDataType, ProgramListType } from "@/types";
@@ -56,6 +57,14 @@ export default async function ProgramDetailPage({
 
   return (
     <>
+      <Breadcrumb
+        paths={[
+          { title: "Home", href: "/" },
+          { title: "Program", href: "/program" },
+          { title: programData.title },
+        ]}
+      />
+
       <ProgramDetailComponent programData={programData} />
     </>
   );

website/src/components/Breadcrumb/index.tsx

@@ -0,0 +1,26 @@
+import Link from "@/components/Link";
+
+interface Props {
+  paths: {
+    title: string;
+    href?: string;
+  }[];
+}
+
+export default function Breadcrumb({ paths }: Props) {
+  return (
+    <div className="text-sm breadcrumbs mb-5">
+      <ul>
+        {paths.map((path, index) => (
+          <li key={index}>
+            {path.href ? (
+              <Link href={path.href}>{path.title}</Link>
+            ) : (
+              <span>{path.title}</span>
+            )}
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}

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/MarkdownPreview/Code.tsx

@@ -31,7 +31,7 @@ function Code({ className, children, ...props }: CodeProps): JSX.Element {
     </SyntaxHighlighter>
   ) : (
     // Inline code
-    <kbd className="bg-base-300 rounded-md px-2 pt-1 font-mono break-words">
+    <kbd className="bg-neutral rounded-md px-2 pt-1 font-mono break-words">
       {String(children.trim()).replace(/\n$/, "")}
     </kbd>
   );

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]">