✨ feat: add comment section with giscus

Follow the process mentions in [this doc](https://rikublock.dev/docs/tutorials/giscus-integration/), I added comment sections for blog and doc pages using giscus.

All the comments and reactions are stored in GitHub discussion under category "Giscus".

Author: t41372

README.md

@@ -70,3 +70,12 @@ If you're not familiar with creating pull requests but want to contribute, you c
 
 We appreciate all contributions to making the Open-LLM-VTuber documentation better!
 
+
+
+## Managing Giscus Comments When Renaming or Moving Pages
+
+We use Giscus to enable the comment section on the website. All comments and reactions are stored in this repository's GitHub Discussions under the "Page Comments" category.
+
+Giscus relies on the page path to associate comments with the correct page. If you change a page's path or filename, the comments may no longer appear because Giscus won't find them.
+
+To prevent this, you must also update the title of the corresponding GitHub Discussion to match the new page path or filename.

package-lock.json

@@ -22,6 +22,7 @@
     "@docusaurus/preset-classic": "^3.7.0",
     "@docusaurus/theme-mermaid": "^3.7.0",
     "@docusaurus/theme-search-algolia": "^3.7.0",
+    "@giscus/react": "^3.1.0",
     "clsx": "^2.0.0",
     "posthog-docusaurus": "^2.0.4",
     "prism-react-renderer": "^2.3.0",

package.json

@@ -0,0 +1,27 @@
+import React from 'react';
+import Giscus from "@giscus/react";
+import { useColorMode } from '@docusaurus/theme-common';
+
+export default function Comments() {
+  const { colorMode } = useColorMode();
+
+
+  return (
+    <Giscus
+      id="comments"
+      repo="Open-LLM-VTuber/open-llm-vtuber.github.io"
+      repoId="R_kgDOMeM4rg"
+      category="Page Comments"
+      categoryId="DIC_kwDOMeM4rs4Ctub5"
+      mapping="pathname"
+      strict="0"
+      term="Welcome to @giscus/react component!"
+      reactionsEnabled="1"
+      emitMetadata="0"
+      inputPosition="top"
+      theme="catppuccin_latte"
+      lang="en"
+      loading="eager"
+    />
+  );
+}

src/components/Comments/index.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import BlogPostItem from "@theme-original/BlogPostItem";
+import type BlogPostItemType from "@theme/BlogPostItem";
+import type { WrapperProps } from "@docusaurus/types";
+import { useBlogPost } from "@docusaurus/plugin-content-blog/client";
+import Comments from "@site/src/components/Comments";
+
+type Props = WrapperProps<typeof BlogPostItemType>;
+
+export default function BlogPostItemWrapper(props: Props): JSX.Element {
+  const { metadata, isBlogPostPage } = useBlogPost();
+  const { comments = true } = metadata.frontMatter;
+
+  return (
+    <>
+      <BlogPostItem {...props} />
+      {comments && isBlogPostPage && <Comments />}
+    </>
+  );
+}

src/theme/BlogPostItem/index.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import DocItemFooter from "@theme-original/DocItem/Footer";
+import type DocItemFooterType from "@theme/DocItem/Footer";
+import type { WrapperProps } from "@docusaurus/types";
+import { useDoc } from "@docusaurus/plugin-content-docs/client";
+import Comments from "@site/src/components/Comments";
+
+type Props = WrapperProps<typeof DocItemFooterType>;
+
+export default function DocItemFooterWrapper(props: Props): JSX.Element {
+  const { metadata } = useDoc();
+  const { comments = true } = metadata.frontMatter;
+
+  return (
+    <>
+      <DocItemFooter {...props} />
+      {comments && <Comments />}
+    </>
+  );
+}