From 32fa7f806af3462ddaf329eeb0300d97349cd8da Mon Sep 17 00:00:00 2001 From: Naveen M K Date: Mon, 28 Aug 2023 00:02:57 +0530 Subject: [PATCH] Add giscus comment section (#58) --- package-lock.json | 129 +++++++++++++++++++++++++++++ package.json | 1 + src/components/giscus.tsx | 41 +++++++++ src/styles/posts-style.module.scss | 9 ++ src/templates/blog-post.js | 4 + 5 files changed, 184 insertions(+) create mode 100644 src/components/giscus.tsx diff --git a/package-lock.json b/package-lock.json index 705146ae..3d8ad96c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,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", @@ -2169,6 +2170,18 @@ "strip-ansi": "^6.0.0" } }, + "node_modules/@giscus/react": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/@giscus/react/-/react-2.3.0.tgz", + "integrity": "sha512-tj79B+NNBfidhPdXJqWoqRm5Jhoc6CBhXMYwBR9nwTwsrdaB/spcQXmHpKcUuOdXZtlYSwMfCFcBogMNbD+gKQ==", + "dependencies": { + "giscus": "^1.3.0" + }, + "peerDependencies": { + "react": "^16 || ^17 || ^18", + "react-dom": "^16 || ^17 || ^18" + } + }, "node_modules/@graphql-codegen/add": { "version": "3.2.3", "resolved": "https://registry.npmjs.org/@graphql-codegen/add/-/add-3.2.3.tgz", @@ -2725,6 +2738,19 @@ "@lezer/common": "^0.15.0" } }, + "node_modules/@lit-labs/ssr-dom-shim": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.1.1.tgz", + "integrity": "sha512-kXOeFbfCm4fFf2A3WwVEeQj55tMZa8c8/f9AKHMobQMkzNUfUj+antR3fRPaZJawsa1aZiP/Da3ndpZrwEe4rQ==" + }, + "node_modules/@lit/reactive-element": { + "version": "1.6.3", + "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.6.3.tgz", + "integrity": "sha512-QuTgnG52Poic7uM1AN5yJ09QMe0O28e10XzSvWDz02TJiiKee4stsiownEIadWm8nYzyDAyT+gKzUoZmiWQtsQ==", + "dependencies": { + "@lit-labs/ssr-dom-shim": "^1.0.0" + } + }, "node_modules/@lmdb/lmdb-darwin-arm64": { "version": "2.5.3", "resolved": "https://registry.npmjs.org/@lmdb/lmdb-darwin-arm64/-/lmdb-darwin-arm64-2.5.3.tgz", @@ -4472,6 +4498,11 @@ "resolved": "https://registry.npmjs.org/@types/tmp/-/tmp-0.0.33.tgz", "integrity": "sha512-gVC1InwyVrO326wbBZw+AO3u2vRXz/iRWq9jYhpG4W8LXyIgDv3ZmcLQ5Q4Gs+gFMyqx+viFoFT+l3p61QFCmQ==" }, + "node_modules/@types/trusted-types": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.3.tgz", + "integrity": "sha512-NfQ4gyz38SL8sDNrSixxU2Os1a5xcdFxipAFxYEuLUlvU2uDwS4NUpsImcf1//SlWItCVMMLiylsxbmNMToV/g==" + }, "node_modules/@types/unist": { "version": "2.0.6", "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.6.tgz", @@ -11128,6 +11159,14 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/giscus": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/giscus/-/giscus-1.3.0.tgz", + "integrity": "sha512-A3tVLgSmpnh2sX9uGjo9MbzmTTEJirSyFUPRvkipvy37y9rhxUYDoh9kO37QVrP7Sc7QuJ+gihB6apkO0yDyTw==", + "dependencies": { + "lit": "^2.7.5" + } + }, "node_modules/git-up": { "version": "7.0.0", "resolved": "https://registry.npmjs.org/git-up/-/git-up-7.0.0.tgz", @@ -12849,6 +12888,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": "2.8.0", + "resolved": "https://registry.npmjs.org/lit/-/lit-2.8.0.tgz", + "integrity": "sha512-4Sc3OFX9QHOJaHbmTMk28SYgVxLN3ePDjg7hofEft2zWlehFL3LiAuapWc4U/kYwMYJSh2hTCPZ6/LIC7ii0MA==", + "dependencies": { + "@lit/reactive-element": "^1.6.0", + "lit-element": "^3.3.0", + "lit-html": "^2.8.0" + } + }, + "node_modules/lit-element": { + "version": "3.3.3", + "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-3.3.3.tgz", + "integrity": "sha512-XbeRxmTHubXENkV4h8RIPyr8lXc+Ff28rkcQzw3G6up2xg5E8Zu1IgOWIwBLEQsu3cOVFqdYwiVi0hv0SlpqUA==", + "dependencies": { + "@lit-labs/ssr-dom-shim": "^1.1.0", + "@lit/reactive-element": "^1.3.0", + "lit-html": "^2.8.0" + } + }, + "node_modules/lit-html": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.8.0.tgz", + "integrity": "sha512-o9t+MQM3P4y7M7yNzqAyjp7z+mQGa4NS4CxiyLqFPyFWyc4O+nodLrkrxSaCTrla6M5YOLaT3RpbbqjszB5g3Q==", + "dependencies": { + "@types/trusted-types": "^2.0.2" + } + }, "node_modules/lmdb": { "version": "2.5.3", "resolved": "https://registry.npmjs.org/lmdb/-/lmdb-2.5.3.tgz", @@ -23080,6 +23147,14 @@ "strip-ansi": "^6.0.0" } }, + "@giscus/react": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/@giscus/react/-/react-2.3.0.tgz", + "integrity": "sha512-tj79B+NNBfidhPdXJqWoqRm5Jhoc6CBhXMYwBR9nwTwsrdaB/spcQXmHpKcUuOdXZtlYSwMfCFcBogMNbD+gKQ==", + "requires": { + "giscus": "^1.3.0" + } + }, "@graphql-codegen/add": { "version": "3.2.3", "resolved": "https://registry.npmjs.org/@graphql-codegen/add/-/add-3.2.3.tgz", @@ -23567,6 +23642,19 @@ "@lezer/common": "^0.15.0" } }, + "@lit-labs/ssr-dom-shim": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.1.1.tgz", + "integrity": "sha512-kXOeFbfCm4fFf2A3WwVEeQj55tMZa8c8/f9AKHMobQMkzNUfUj+antR3fRPaZJawsa1aZiP/Da3ndpZrwEe4rQ==" + }, + "@lit/reactive-element": { + "version": "1.6.3", + "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.6.3.tgz", + "integrity": "sha512-QuTgnG52Poic7uM1AN5yJ09QMe0O28e10XzSvWDz02TJiiKee4stsiownEIadWm8nYzyDAyT+gKzUoZmiWQtsQ==", + "requires": { + "@lit-labs/ssr-dom-shim": "^1.0.0" + } + }, "@lmdb/lmdb-darwin-arm64": { "version": "2.5.3", "resolved": "https://registry.npmjs.org/@lmdb/lmdb-darwin-arm64/-/lmdb-darwin-arm64-2.5.3.tgz", @@ -24789,6 +24877,11 @@ "resolved": "https://registry.npmjs.org/@types/tmp/-/tmp-0.0.33.tgz", "integrity": "sha512-gVC1InwyVrO326wbBZw+AO3u2vRXz/iRWq9jYhpG4W8LXyIgDv3ZmcLQ5Q4Gs+gFMyqx+viFoFT+l3p61QFCmQ==" }, + "@types/trusted-types": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.3.tgz", + "integrity": "sha512-NfQ4gyz38SL8sDNrSixxU2Os1a5xcdFxipAFxYEuLUlvU2uDwS4NUpsImcf1//SlWItCVMMLiylsxbmNMToV/g==" + }, "@types/unist": { "version": "2.0.6", "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.6.tgz", @@ -29656,6 +29749,14 @@ "get-intrinsic": "^1.1.1" } }, + "giscus": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/giscus/-/giscus-1.3.0.tgz", + "integrity": "sha512-A3tVLgSmpnh2sX9uGjo9MbzmTTEJirSyFUPRvkipvy37y9rhxUYDoh9kO37QVrP7Sc7QuJ+gihB6apkO0yDyTw==", + "requires": { + "lit": "^2.7.5" + } + }, "git-up": { "version": "7.0.0", "resolved": "https://registry.npmjs.org/git-up/-/git-up-7.0.0.tgz", @@ -30874,6 +30975,34 @@ "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz", "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==" }, + "lit": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/lit/-/lit-2.8.0.tgz", + "integrity": "sha512-4Sc3OFX9QHOJaHbmTMk28SYgVxLN3ePDjg7hofEft2zWlehFL3LiAuapWc4U/kYwMYJSh2hTCPZ6/LIC7ii0MA==", + "requires": { + "@lit/reactive-element": "^1.6.0", + "lit-element": "^3.3.0", + "lit-html": "^2.8.0" + } + }, + "lit-element": { + "version": "3.3.3", + "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-3.3.3.tgz", + "integrity": "sha512-XbeRxmTHubXENkV4h8RIPyr8lXc+Ff28rkcQzw3G6up2xg5E8Zu1IgOWIwBLEQsu3cOVFqdYwiVi0hv0SlpqUA==", + "requires": { + "@lit-labs/ssr-dom-shim": "^1.1.0", + "@lit/reactive-element": "^1.3.0", + "lit-html": "^2.8.0" + } + }, + "lit-html": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.8.0.tgz", + "integrity": "sha512-o9t+MQM3P4y7M7yNzqAyjp7z+mQGa4NS4CxiyLqFPyFWyc4O+nodLrkrxSaCTrla6M5YOLaT3RpbbqjszB5g3Q==", + "requires": { + "@types/trusted-types": "^2.0.2" + } + }, "lmdb": { "version": "2.5.3", "resolved": "https://registry.npmjs.org/lmdb/-/lmdb-2.5.3.tgz", diff --git a/package.json b/package.json index f6c5ea07..cbbe8b33 100644 --- a/package.json +++ b/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", diff --git a/src/components/giscus.tsx b/src/components/giscus.tsx new file mode 100644 index 00000000..0186178c --- /dev/null +++ b/src/components/giscus.tsx @@ -0,0 +1,41 @@ +import React from "react"; +import Giscus from "@giscus/react"; +import {ThemeContext} from "./ThemeContext"; + +/* */ + +export default function GiscusComment() { + const {colorMode} = React.useContext(ThemeContext); + return ( + + ); +} diff --git a/src/styles/posts-style.module.scss b/src/styles/posts-style.module.scss index 3424260c..bc9cd266 100644 --- a/src/styles/posts-style.module.scss +++ b/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; + } } \ No newline at end of file diff --git a/src/templates/blog-post.js b/src/templates/blog-post.js index 8e3dfed0..5f330f02 100644 --- a/src/templates/blog-post.js +++ b/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}) => { +
+ +
{/*