Add 2022 posts

Author: emeraldjava

package-lock.json

@@ -16,6 +16,7 @@
   "dependencies": {
     "@astrojs/check": "^0.9.3",
     "@astrojs/rss": "^4.0.7",
+    "@giscus/react": "^3.0.0",
     "@resvg/resvg-js": "^2.6.2",
     "astro": "^4.16.3",
     "fuse.js": "^7.0.0",

package.json

@@ -0,0 +1,51 @@
+import Giscus, { type Theme } from "@giscus/react";
+import { GISCUS } from "@config";
+import { useEffect, useState } from "react";
+
+interface CommentsProps {
+    lightTheme?: Theme;
+    darkTheme?: Theme;
+}
+
+export default function Comments({
+                                     lightTheme = "light",
+                                     darkTheme = "dark",
+                                 }: CommentsProps) {
+    const [theme, setTheme] = useState(() => {
+        const currentTheme = localStorage.getItem("theme");
+        const browserTheme = window.matchMedia("(prefers-color-scheme: dark)")
+            .matches
+            ? "dark"
+            : "light";
+
+        return currentTheme || browserTheme;
+    });
+
+    useEffect(() => {
+        const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+        const handleChange = ({ matches }: MediaQueryListEvent) => {
+            setTheme(matches ? "dark" : "light");
+        };
+
+        mediaQuery.addEventListener("change", handleChange);
+
+        return () => mediaQuery.removeEventListener("change", handleChange);
+    }, []);
+
+    useEffect(() => {
+        const themeButton = document.querySelector("#theme-btn");
+        const handleClick = () => {
+            setTheme(prevTheme => (prevTheme === "dark" ? "light" : "dark"));
+        };
+
+        themeButton?.addEventListener("click", handleClick);
+
+        return () => themeButton?.removeEventListener("click", handleClick);
+    }, []);
+
+    return (
+        <div className="mt-8">
+            <Giscus theme={theme === "light" ? lightTheme : darkTheme} {...GISCUS} />
+        </div>
+    );
+}

src/components/Comments.tsx

@@ -1,4 +1,5 @@
 import type { Site, SocialObjects } from "./types";
+import type { GiscusProps } from "@giscus/react";
 
 export const SITE: Site = {
   website: "https://emeraldjava.github.io/", // replace this with your deployed domain
@@ -45,3 +46,16 @@ export const SOCIALS: SocialObjects = [
     active: true,
   },
 ];
+
+export const GISCUS: GiscusProps = {
+  repo: "[ENTER REPO HERE]",
+  repoId: "[ENTER REPO ID HERE]",
+  category: "[ENTER CATEGORY NAME HERE]",
+  categoryId: "[ENTER CATEGORY ID HERE]",
+  mapping: "pathname",
+  reactionsEnabled: "0",
+  emitMetadata: "0",
+  inputPosition: "bottom",
+  lang: "en",
+  loading: "lazy",
+};

src/config.ts

@@ -15,3 +15,7 @@ description: "Upgrade of Google Analytics tags"
 https://webreaper.dev/posts/astro-google-tag-manager-ga4/
 
 https://tagmanager.google.com/#/container/accounts/6236586547/containers/188259084/workspaces/2
+
+## update
+
+Need to use is:inline to enable.

content/post/2022/11/20/application-portal-reverse-proxy-settings.png renamed to src/content/blog/2022/11/20/application-portal-reverse-proxy-settings.png

@@ -7,6 +7,7 @@ import Datetime from "@components/Datetime";
 import type { CollectionEntry } from "astro:content";
 import { slugifyStr } from "@utils/slugify";
 import ShareLinks from "@components/ShareLinks.astro";
+import Comments from "@components/Comments";
 import { SITE } from "@config";
 
 export interface Props {
@@ -177,6 +178,18 @@ const nextPost =
         )
       }
     </div>
+
+    <!--
+    https://github.com/giscus/giscus-component
+    https://github.com/satnaing/astro-paper/blob/main/src/content/blog/how-to-integrate-giscus-comments.md -->
+    <Comments client:only="react" />
+    <!--<script async src="https://giscus.app/client.js"-->
+    <!--    data-repo="[ENTER REPO HERE]"-->
+    <!--    data-repo-id="[ENTER REPO ID HERE]"-->
+    <!--    data-category="[ENTER CATEGORY NAME HERE]"-->
+    <!--    data-category-id="[ENTER CATEGORY ID HERE]">-->
+    <!--</script>-->
+
   </main>
   <Footer />
 </Layout>