✨ Added Giscus discussions and reactions

.env.template

@@ -17,3 +17,5 @@ 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}
+GISCUS_CATEGORY_ID=#{GISCUS_CATEGORY_ID}

package.json

@@ -22,6 +22,7 @@
   },
   "dependencies": {
     "@auth0/auth0-react": "^2.2.4",
+    "@giscus/react": "^3.0.0",
     "@microsoft/applicationinsights-web": "^3.3.3",
     "@raae/gatsby-remark-oembed": "^0.3.3",
     "algoliasearch": "^4.24.0",
@@ -116,4 +117,4 @@
     "📦 gatsby-plugin-fontawesome-css": "Added to disable Font Awesomes auto CSS insertion and instead insert it at compile time. This stops the brief flicker of the icons stying being incorrect when the page is refreshed"
   },
   "packageManager": "[email protected]"
-}
+}

src/components/comments/comments.js

@@ -8,7 +8,7 @@ const Comments = (props) => {
     title: props.title,
   };
   return (
-    <div className="disqus-box">
+    <div className="discussion-box">
       <Disqus config={disqusConfig} />
     </div>
   );

src/components/discussion/discussion.js

@@ -0,0 +1,32 @@
+import Giscus from '@giscus/react';
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const Discussion = (props) => {
+  return (
+    <div className="discussion-box">
+      <Giscus
+        id="comments"
+        repo="SSWConsulting/SSW.Rules.Content"
+        repoId={process.env.GISCUS_REPO_ID}
+        categoryId={process.env.GISCUS_CATEGORY_ID}
+        mapping="specific"
+        strict="1"
+        term={props.ruleGuid}
+        reactionsEnabled="1"
+        emitMetadata="0"
+        inputPosition="bottom"
+        theme="light"
+        lang="en"
+        loading="lazy"
+        async
+      />
+    </div>
+  );
+};
+
+export default Discussion;
+
+Discussion.propTypes = {
+  ruleGuid: PropTypes.string.isRequired,
+};

src/components/dropdown-icon/dropdown-icon.js

@@ -8,7 +8,7 @@ const DropdownIcon = ({ displayActions }) => {
 
   const drop = useRef(null);
   function handleClick(e) {
-    if (!e.target.closest(`.${drop.current.className}`) && open) {
+    if (!e.target.closest(`.${drop.current?.className}`) && open) {
       setOpen(false);
     }
   }