From 2db96fd41508fa0c25adffaa766758b6531a55d1 Mon Sep 17 00:00:00 2001 From: Gjeev Date: Sat, 17 Aug 2024 12:46:39 +0530 Subject: [PATCH] ADD REACT GISCUS --- package-lock.json | 71 +++++++++++++++++++++++++++++++++-- package.json | 1 + src/components/Comments.tsx | 51 +++++++++++++++++++++++++ src/config.ts | 14 +++++++ src/layouts/PostDetails.astro | 18 +-------- 5 files changed, 135 insertions(+), 20 deletions(-) create mode 100644 src/components/Comments.tsx diff --git a/package-lock.json b/package-lock.json index 20a6734..473a423 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,7 @@ "dependencies": { "@astrojs/check": "^0.9.1", "@astrojs/rss": "^4.0.7", + "@giscus/react": "^3.0.0", "@resvg/resvg-js": "^2.6.2", "astro": "^4.13.0", "fuse.js": "^7.0.0", @@ -755,6 +756,18 @@ "node": "^12.22.0 || ^14.17.0 || >=16.0.0" } }, + "node_modules/@giscus/react": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@giscus/react/-/react-3.0.0.tgz", + "integrity": "sha512-hgCjLpg3Wgh8VbTF5p8ZLcIHI74wvDk1VIFv12+eKhenNVUDjgwNg2B1aq/3puyHOad47u/ZSyqiMtohjy/OOA==", + "dependencies": { + "giscus": "^1.5.0" + }, + "peerDependencies": { + "react": "^16 || ^17 || ^18", + "react-dom": "^16 || ^17 || ^18" + } + }, "node_modules/@humanwhocodes/config-array": { "version": "0.11.13", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.13.tgz", @@ -1273,6 +1286,19 @@ "@jridgewell/sourcemap-codec": "^1.4.14" } }, + "node_modules/@lit-labs/ssr-dom-shim": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.2.1.tgz", + "integrity": "sha512-wx4aBmgeGvFmOKucFKY+8VFJSYZxs9poN3SDNQFF6lT6NrQUnHiPB2PWz2sc4ieEcAaYYzN+1uWahEeTq2aRIQ==" + }, + "node_modules/@lit/reactive-element": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-2.0.4.tgz", + "integrity": "sha512-GFn91inaUa2oHLak8awSIigYz0cU0Payr1rcFsrkf5OJ5eSPxElyZfKh0f2p9FsTiZWXQdWGJeXZICEfXXYSXQ==", + "dependencies": { + "@lit-labs/ssr-dom-shim": "^1.2.0" + } + }, "node_modules/@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -2117,6 +2143,11 @@ "@types/node": "*" } }, + "node_modules/@types/trusted-types": { + "version": "2.0.7", + "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz", + "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==" + }, "node_modules/@types/ungap__structured-clone": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/@types/ungap__structured-clone/-/ungap__structured-clone-0.3.0.tgz", @@ -4871,6 +4902,14 @@ "url": "/~https://github.com/sponsors/sindresorhus" } }, + "node_modules/giscus": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/giscus/-/giscus-1.5.0.tgz", + "integrity": "sha512-t3LL0qbSO3JXq3uyQeKpF5CegstGfKX/0gI6eDe1cmnI7D56R7j52yLdzw4pdKrg3VnufwCgCM3FDz7G1Qr6lg==", + "dependencies": { + "lit": "^3.1.2" + } + }, "node_modules/github-slugger": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/github-slugger/-/github-slugger-2.0.0.tgz", @@ -5731,6 +5770,34 @@ "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz", "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==" }, + "node_modules/lit": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/lit/-/lit-3.2.0.tgz", + "integrity": "sha512-s6tI33Lf6VpDu7u4YqsSX78D28bYQulM+VAzsGch4fx2H0eLZnJsUBsPWmGYSGoKDNbjtRv02rio1o+UdPVwvw==", + "dependencies": { + "@lit/reactive-element": "^2.0.4", + "lit-element": "^4.1.0", + "lit-html": "^3.2.0" + } + }, + "node_modules/lit-element": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-4.1.0.tgz", + "integrity": "sha512-gSejRUQJuMQjV2Z59KAS/D4iElUhwKpIyJvZ9w+DIagIQjfJnhR20h2Q5ddpzXGS+fF0tMZ/xEYGMnKmaI/iww==", + "dependencies": { + "@lit-labs/ssr-dom-shim": "^1.2.0", + "@lit/reactive-element": "^2.0.4", + "lit-html": "^3.2.0" + } + }, + "node_modules/lit-html": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-3.2.0.tgz", + "integrity": "sha512-pwT/HwoxqI9FggTrYVarkBKFN9MlTUpLrDHubTmW4SrkL3kkqW5gxwbxMMUnbbRHBC0WTZnYHcjDSCM559VyfA==", + "dependencies": { + "@types/trusted-types": "^2.0.2" + } + }, "node_modules/load-yaml-file": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/load-yaml-file/-/load-yaml-file-0.2.0.tgz", @@ -5827,7 +5894,6 @@ "version": "1.4.0", "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", - "dev": true, "dependencies": { "js-tokens": "^3.0.0 || ^4.0.0" }, @@ -7552,7 +7618,6 @@ "version": "18.3.1", "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz", "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==", - "dev": true, "dependencies": { "loose-envify": "^1.1.0" }, @@ -7564,7 +7629,6 @@ "version": "18.3.1", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz", "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==", - "dev": true, "dependencies": { "loose-envify": "^1.1.0", "scheduler": "^0.23.2" @@ -8102,7 +8166,6 @@ "version": "0.23.2", "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz", "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==", - "dev": true, "dependencies": { "loose-envify": "^1.1.0" } diff --git a/package.json b/package.json index 637196a..c9c530a 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "dependencies": { "@astrojs/check": "^0.9.1", "@astrojs/rss": "^4.0.7", + "@giscus/react": "^3.0.0", "@resvg/resvg-js": "^2.6.2", "astro": "^4.13.0", "fuse.js": "^7.0.0", diff --git a/src/components/Comments.tsx b/src/components/Comments.tsx new file mode 100644 index 0000000..acdccbb --- /dev/null +++ b/src/components/Comments.tsx @@ -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 ( +
+ +
+ ); +} \ No newline at end of file diff --git a/src/config.ts b/src/config.ts index 8d2e17b..1d8a5f2 100644 --- a/src/config.ts +++ b/src/config.ts @@ -1,4 +1,5 @@ import type { Site, SocialObjects } from "./types"; +import type { GiscusProps } from "@giscus/react"; export const SITE: Site = { website: "https://astro-paper.pages.dev/", // replace this with your deployed domain @@ -45,3 +46,16 @@ export const SOCIALS: SocialObjects = [ active: false, }, ]; + +export const GISCUS: GiscusProps = { + repo: "grassroots-musings/grassroots-musings.github.io", + repoId: "R_kgDOMknjLw", + category: "Announcements", + categoryId: "DIC_kwDOMknjL84ChvL5", + mapping: "title", + reactionsEnabled: "1", + emitMetadata: "0", + inputPosition: "top", + lang: "en", + loading: "lazy", +}; \ No newline at end of file diff --git a/src/layouts/PostDetails.astro b/src/layouts/PostDetails.astro index 9c0dcd2..631063c 100644 --- a/src/layouts/PostDetails.astro +++ b/src/layouts/PostDetails.astro @@ -8,6 +8,7 @@ import type { CollectionEntry } from "astro:content"; import { slugifyStr } from "@utils/slugify"; import ShareLinks from "@components/ShareLinks.astro"; import { SITE } from "@config"; +import Comments from "@components/Comments.tsx"; export interface Props { post: CollectionEntry<"blog">; @@ -95,22 +96,7 @@ const layoutProps = { - +