✨ Added giscus integration

.env.template

@@ -17,3 +17,4 @@ GITHUB_REPO=#{GITHUB_REPO}
 GATSBY_ALGOLIA_APP_ID=#{GATSBY_ALGOLIA_APP_ID}
 GATSBY_ALGOLIA_SEARCH_KEY=#{GATSBY_ALGOLIA_SEARCH_KEY}
 ALGOLIA_ADMIN_KEY=#{ALGOLIA_ADMIN_KEY}
+GISCUS_REPO_ID=#{GISCUS_REPO_ID}

.github/workflows/template-build.yml

@@ -136,6 +136,7 @@ jobs:
           GATSBY_ALGOLIA_APP_ID: ${{ vars.GATSBY_ALGOLIA_APP_ID }}
           GATSBY_ALGOLIA_SEARCH_KEY: ${{ secrets.GATSBY_ALGOLIA_SEARCH_KEY }}
           ALGOLIA_ADMIN_KEY: ${{ secrets.ALGOLIA_ADMIN_KEY }}
+          GISCUS_REPO_ID: ${{ secrets.GISCUS_REPO_ID }}
 
       - name: Rename env file
         run: |

package.json

@@ -21,6 +21,7 @@
   },
   "dependencies": {
     "@auth0/auth0-react": "^2.2.4",
+    "@giscus/react": "^1.0.0",
     "@microsoft/applicationinsights-web": "^3.1.0",
     "@raae/gatsby-remark-oembed": "^0.3.3",
     "algoliasearch": "^4.22.1",

src/components/comments/comments.js

@@ -1,16 +1,31 @@
-import { Disqus } from 'gatsby-plugin-disqus';
+import { Giscus } from '@giscus/react';
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const Comments = (props) => {
-  let disqusConfig = {
-    identifier: props.ruleGuid,
-    title: props.title,
-  };
+const GISCUS_REPO_ID = process.env.GISCUS_REPO_ID;
+
+const Comments = () => {
   return (
-    <div className="disqus-box">
-      <Disqus config={disqusConfig} />
-    </div>
+    <>
+      <div className="disqus-box">
+        <Giscus
+          id="comments"
+          repo="SSWConsulting/SSW.Rules"
+          repoId={GISCUS_REPO_ID}
+          category="General"
+          categoryId="DIC_kwDOD1jvwM4B_y_I"
+          mapping="pathname"
+          term="Welcome to SSW Rules"
+          reactionsEnabled="1"
+          emitMetadata="0"
+          inputPosition="top"
+          theme="light"
+          lang="en"
+          loading="lazy"
+          async
+        />
+      </div>
+    </>
   );
 };
 

yarn.lock

@@ -2430,6 +2430,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@giscus/react@npm:^1.0.0":
+  version: 1.1.2
+  resolution: "@giscus/react@npm:1.1.2"
+  peerDependencies:
+    react: ^16 || ^17 || ^18
+    react-dom: ^16 || ^17 || ^18
+  checksum: 63d0cb7324c0953f7e87420c97324f3732adc4a08547db33d922e611647419b8ac7ea7053f248e56f638ce21b7df6bd6aa78c71cdb426910d320238604835a10
+  languageName: node
+  linkType: hard
+
 "@graphql-codegen/add@npm:^3.2.3":
   version: 3.2.3
   resolution: "@graphql-codegen/add@npm:3.2.3"
@@ -5711,6 +5721,7 @@ __metadata:
     "@fortawesome/free-brands-svg-icons": "npm:^6.5.1"
     "@fortawesome/free-solid-svg-icons": "npm:^6.5.1"
     "@fortawesome/react-fontawesome": "npm:^0.2.0"
+    "@giscus/react": "npm:^1.0.0"
     "@microsoft/applicationinsights-web": "npm:^3.1.0"
     "@playwright/test": "npm:^1.41.2"
     "@raae/gatsby-remark-oembed": "npm:^0.3.3"