✨ Added Giscus discussions and reactions (#1579)

* added giscus package

* added giscus component

* removed reaction component and it's style

* removed the link to profile page in dropdown

* removed unused props

* delete profiles pages

* cleaned up apiService.js

* remove unused var

* fixed repo name

* added strict option to giscus

* fixed repo name

* added strict option to giscus

* Revert "removed the link to profile page in dropdown"

This reverts commit d292331.

* Revert "removed unused props"

This reverts commit cdc20db.

* Revert "delete profiles pages"

This reverts commit a942df6.

* Revert "cleaned up apiService.js"

This reverts commit 78d5628.

* Revert "remove unused var"

This reverts commit eac9235.

.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",

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);
     }
   }

src/style.css

@@ -1221,66 +1221,6 @@ div.bad-example {
   @apply text-ssw-red; 
 }
 
-.reaction-grid {
-  grid-template-columns: auto 2.5rem 2.2rem 0.7rem 2.2rem 2.2rem 0.7rem 2.2rem 2.2rem 0.7rem 2.2rem 2.7rem auto;
-  display: grid;
-  grid-template-rows: 2rem;
-  padding-bottom: 1rem;
-}
-
-.agree-btn-container:after, .agree-btn-container-pressed:after  {
-  content: '\f004';
-  font-family: FontAwesome;
-  font-size: 1.7rem;
-  padding-left: 0.5rem;
-}
-
-.agree-btn-container-pressed:after, .somewhat-disagree-btn-container-pressed:after, .disagree-btn-container-pressed:after, .somewhat-agree-btn-container-pressed:after  {
-  @apply text-ssw-red; 
-}
-
-.agree-btn-container:hover:after, .agree-btn-container-pressed:hover:after, .somewhat-disagree-btn-container:hover:after, .somewhat-disagree-btn-container-pressed:hover:after, .disagree-btn-container:hover:after, .disagree-btn-container-pressed:hover:after, .somewhat-agree-btn-container:hover:after, .somewhat-agree-btn-container-pressed:hover:after {
-  @apply text-ssw-red; 
-  font-size: 1.8rem;
-  transition: font-size 0.2s;
-}
-
-.somewhat-agree-btn-container:after, .somewhat-agree-btn-container-pressed:after  {
-  content: '\f164';
-  font-family: FontAwesome;
-  font-size: 1.7rem;
-}
-
-.somewhat-disagree-btn-container:after, .somewhat-disagree-btn-container-pressed:after {
-  content: '\f165';
-  font-family: FontAwesome;
-  font-size: 1.7rem;
-  align-self: center;
-}
-
-.disagree-btn-container:after, .disagree-btn-container-pressed:after {
-  content: '\f05e';
-  font-family: FontAwesome;
-  font-size: 1.7rem;
-  padding-left: 0.1rem;
-}
-
-.agree-grid-item {
-  grid-column: 2;
-}
-
-.somewhat-agree-grid-item {
-  grid-column: 5;
-}
-
-.somewhat-disagree-grid-item {
-  grid-column: 8;
-}
-
-.disagree-grid-item { 
-  grid-column: 11;
-}
-
 .rule-header-container {
   display: flex;
 }
@@ -1342,7 +1282,7 @@ div.bad-example {
   margin-top: 0;
 }
 
-.tooltip, .react-tooltip, .disqus-tooltip, .info-tooltip, .forgot-username-tooltip {
+.tooltip, .disqus-tooltip, .info-tooltip, .forgot-username-tooltip {
   position: relative;
   margin: 2px 0;
   height: 2.5rem;
@@ -1435,12 +1375,6 @@ div.bad-example {
   bottom: 105%;
 }
 
-.react-tooltip .tooltiptext {
-  margin-left: -53px !important;
-  bottom: 90%;
-  width: 80px;
-}
-
 .disqus-tooltip .tooltiptext {
   margin-left: 0 !important;
   bottom: 2.5rem;
@@ -1473,7 +1407,7 @@ div.bad-example {
 }
 
 /* Show the tooltip text when you mouse over the tooltip container */
-.tooltip:hover .tooltiptext, .react-tooltip:hover .tooltiptext, .disqus-tooltip:hover .tooltip, .info-tooltip:hover .tooltiptext, .forgot-username-tooltip:hover .tooltiptext{
+.tooltip:hover .tooltiptext, .disqus-tooltip:hover .tooltip, .info-tooltip:hover .tooltiptext, .forgot-username-tooltip:hover .tooltiptext{
   visibility: visible;
   opacity: 1;
   padding: 0.3rem !important;
@@ -1630,9 +1564,6 @@ div.bad-example {
   .rule-content {
     padding: 1rem;
   }
-  .reaction-grid {
-    grid-template-columns: auto 2rem 0.5rem 1.5rem 2.2rem 0.5rem 1.5rem 2.2rem 0.5rem 1.5rem 2.3rem 1rem auto;
-  }
   .profile-image {
     visibility: hidden;
     grid-column: 1;
@@ -2065,7 +1996,7 @@ div.bad-example {
   border-top: 1px solid #f5f5f5
 }
 
-.disqus-box {
+.discussion-box {
   margin-bottom: 5rem;
   padding: 1rem 1.5rem;
 }