add comment component

package.json

@@ -19,6 +19,7 @@
     "@docusaurus/preset-classic": "3.4.0",
     "@mdx-js/react": "^3.0.0",
     "clsx": "^2.0.0",
+    "commentbox.io": "^2.1.0",
     "prism-react-renderer": "^2.3.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"

src/components/CommentSection.tsx

@@ -0,0 +1,24 @@
+import React, {useEffect} from 'react';
+import commentBox from 'commentbox.io';
+import {useColorMode} from '@docusaurus/theme-common';
+
+export const CommentSection = () => {
+    // Depending on the theme, we will show a different
+    // text color in the comments section
+    const {colorMode} = useColorMode();
+    const textColor = colorMode === 'dark' ? 'white' : 'black';
+
+    useEffect(() => {
+        const box = commentBox('5654072275238912-proj', {
+            textColor: textColor,
+        });
+        return () => box();
+    }, [colorMode]);
+
+
+    return (
+        <div style={{
+            marginTop: '54px',
+        }} className="commentbox"/>
+    );
+};

src/theme/BlogPostPaginator/index.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import BlogPostPaginator from '@theme-original/BlogPostPaginator';
+import {CommentSection} from "@site/src/components/CommentSection";
+
+export default function BlogPostPaginatorWrapper(props) {
+    return (
+        <>
+            <BlogPostPaginator {...props} />
+            <CommentSection/>
+        </>
+    );
+}

src/theme/DocPaginator/index.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import DocPaginator from '@theme-original/DocPaginator';
+import type DocPaginatorType from '@theme/DocPaginator';
+import type {WrapperProps} from '@docusaurus/types';
+
+import {CommentSection} from "@site/src/components/CommentSection";
+
+type Props = WrapperProps<typeof DocPaginatorType>;
+
+export default function DocPaginatorWrapper(props: Props): JSX.Element {
+  return (
+    <>
+      <DocPaginator {...props} />
+      <CommentSection/>
+    </>
+  );
+}