Add giscus comment section (#58)

package.json

@@ -23,6 +23,7 @@
         "@fortawesome/free-brands-svg-icons": "^6.2.0",
         "@fortawesome/free-solid-svg-icons": "^6.2.0",
         "@fortawesome/react-fontawesome": "^0.2.0",
+        "@giscus/react": "^2.3.0",
         "@mdx-js/react": "^2.3.0",
         "@react-spring/web": "^9.7.2",
         "@tippyjs/react": "^4.2.6",

src/components/giscus.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import Giscus from "@giscus/react";
+import {ThemeContext} from "./ThemeContext";
+
+/* <script src="https://giscus.app/client.js"
+        data-repo="naveen521kk/naveen521kk.github.io"
+        data-repo-id="MDEwOlJlcG9zaXRvcnkyOTU2NjY0ODk="
+        data-category="Announcements"
+        data-category-id="DIC_kwDOEZ-DOc4CWtyY"
+        data-mapping="pathname"
+        data-strict="1"
+        data-reactions-enabled="1"
+        data-emit-metadata="0"
+        data-input-position="top"
+        data-theme="transparent_dark"
+        data-lang="en"
+        data-loading="lazy"
+        crossorigin="anonymous"
+        async>
+</script> */
+
+export default function GiscusComment() {
+    const {colorMode} = React.useContext(ThemeContext);
+    return (
+        <Giscus
+            id="comments"
+            repo="naveen521kk/naveen521kk.github.io"
+            repoId="MDEwOlJlcG9zaXRvcnkyOTU2NjY0ODk="
+            category="Announcements"
+            categoryId="DIC_kwDOEZ-DOc4CWtyY"
+            mapping="pathname"
+            strict="1"
+            reactionsEnabled="1"
+            emitMetadata="0"
+            inputPosition="top"
+            theme={colorMode === "dark" ? "dark" : "light"}
+            lang="en"
+            loading="lazy"
+        />
+    );
+}

src/styles/posts-style.module.scss

@@ -85,4 +85,13 @@
     border-radius: 0.5rem;
     background-color: var(--#{$prefix}tag-background-color);
     color: var(--#{$prefix}tag-color);
+}
+
+.giscusComment {
+    margin-top: 2rem;
+    margin-bottom: 5rem;
+
+    @media (min-width: 768px) {
+        margin-bottom: 2rem;
+    }
 }

src/templates/blog-post.js

@@ -6,6 +6,7 @@ import {JsonLd} from "../components/json_ld";
 import NavBar from "../components/header.tsx";
 import BgPhoto from "../components/bgphoto.jsx";
 import ScrollProgressBar from "../components/scroll-progress-bar";
+import GiscusComment from "../components/giscus";
 import * as styles from "../styles/posts-style.module.scss";
 import "../styles/posts.scss";
 
@@ -87,6 +88,9 @@ const BlogPostTemplate = ({data, location, children}) => {
                     </div>
                 </div>
             </article>
+            <div className={styles.outer_class + " " + styles.giscusComment}>
+                <GiscusComment />
+            </div>
             <ScrollProgressBar />
             {/* <nav className="blog-post-nav">
                 <ul