✨ Initial set of changes to get comment and reactions

.gitignore

@@ -13,6 +13,7 @@
 
 # misc
 .DS_Store
+.env
 .env.local
 .env.development.local
 .env.test.local

package.json

@@ -3,6 +3,7 @@
  "version": "0.1.0",
  "private": true,
  "dependencies": {
+ "@giscus/react": "^2.0.3",
  "@testing-library/jest-dom": "^5.14.1",
  "@testing-library/react": "^12.0.0",
  "@testing-library/user-event": "^13.2.1",

src/common/components/Comment.jsx

@@ -0,0 +1,25 @@
+import Giscus from "@giscus/react";
+
+const Comment= () => {
+ const projectRepoId = process.env.REACT_APP_GISCUS_PROJECT_REPO_ID;
+ const discussionCategoryId = process.env.REACT_APP_GISCUS_DISCUSSION_CATEGORY_ID;
+ const discussionCategoryName = process.env.REACT_APP_GISCUS_DISCUSSION_CATEGORY_NAME;
+
+ return (
+ <Giscus
+ repo="atapas/react-play"
+ repoId={ projectRepoId }
+ category={ discussionCategoryName }
+ categoryId={ discussionCategoryId }
+ mapping="pathname"
+ reactionsEnabled="1"
+ emitMetadata="1"
+ inputPosition="top"
+ theme="light"
+ lang="en"
+ loading="lazy"
+ />
+ );
+};
+
+export default Comment;

src/plays/social-card/SocialCard.jsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
 import { getPlayById } from 'meta/play-meta-util';
+import Comment from "common/components/Comment";
 
 import PlayHeader from 'common/playlists/PlayHeader';
 
@@ -37,6 +38,7 @@ function SocialCard(props) {
  </div>
  </SocialContext.Provider>
  </div>
+ <Comment />
  </div>
  </>
  );

yarn.lock

@@ -1261,6 +1261,13 @@
  minimatch "^3.0.4"
  strip-json-comments "^3.1.1"
 
+"@giscus/react@^2.0.3":
+ version "2.0.3"
+ resolved "https://registry.yarnpkg.com/@giscus/react/-/react-2.0.3.tgz#d80fb9a5a0c9d5a6364ba6711277ae64d9e4cbe2"
+ integrity sha512-ynywOgvvlPn7zmWXDWAPr3jqfYC43vwK1g5P8qr528GjyWKXVyxBLJIve/mBrl+aCpZurcaExtsoJ2z6gq+Xgg==
+ dependencies:
+ giscus "^1.0.3"
+
 "@humanwhocodes/config-array@^0.9.2":
  version "0.9.2"
  resolved "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.2.tgz"
@@ -1460,6 +1467,11 @@
  "@types/yargs" "^16.0.0"
  chalk "^4.0.0"
 
+"@lit/reactive-element@^1.3.0":
+ version "1.3.1"
+ resolved "https://registry.yarnpkg.com/@lit/reactive-element/-/reactive-element-1.3.1.tgz#3021ad0fa30a75a41212c5e7f1f169c5762ef8bb"
+ integrity sha512-nOJARIr3pReqK3hfFCSW2Zg/kFcFsSAlIE7z4a0C9D2dPrgD/YSn3ZP2ET/rxKB65SXyG7jJbkynBRm+tGlacw==
+
 "@nodelib/[email protected]":
  version "2.1.5"
  resolved "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz"
@@ -4844,6 +4856,13 @@ get-symbol-description@^1.0.0:
  call-bind "^1.0.2"
  get-intrinsic "^1.1.1"
 
+giscus@^1.0.3:
+ version "1.0.3"
+ resolved "https://registry.yarnpkg.com/giscus/-/giscus-1.0.3.tgz#7f6895325c197f9f1a8ff469f09729a2786564ba"
+ integrity sha512-SaytuVitbLN3f8VaVeClhRvZ8XEIvjy5H4sHfaQne0yb5oKy990F12cNQtgGcTjgC8NZcJdv2bDunqQGY6sr8g==
+ dependencies:
+ lit "^2.2.2"
+
 glob-parent@^5.1.2, glob-parent@~5.1.2:
  version "5.1.2"
  resolved "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz"
@@ -6461,6 +6480,30 @@ lines-and-columns@^1.1.6:
  resolved "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.1.6.tgz"
  integrity sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=
 
+lit-element@^3.2.0:
+ version "3.2.0"
+ resolved "https://registry.yarnpkg.com/lit-element/-/lit-element-3.2.0.tgz#9c981c55dfd9a8f124dc863edb62cc529d434db7"
+ integrity sha512-HbE7yt2SnUtg5DCrWt028oaU4D5F4k/1cntAFHTkzY8ZIa8N0Wmu92PxSxucsQSOXlODFrICkQ5x/tEshKi13g==
+ dependencies:
+ "@lit/reactive-element" "^1.3.0"
+ lit-html "^2.2.0"
+
+lit-html@^2.2.0:
+ version "2.2.2"
+ resolved "https://registry.yarnpkg.com/lit-html/-/lit-html-2.2.2.tgz#06ced65dd3fb2d7a214d998c65acc576ae2cb3c4"
+ integrity sha512-cJofCRXuizwyaiGt9pJjJOcauezUlSB6t87VBXsPwRhbzF29MgD8GH6fZ0BuZdXAAC02IRONZBd//VPUuU8QbQ==
+ dependencies:
+ "@types/trusted-types" "^2.0.2"
+
+lit@^2.2.2:
+ version "2.2.2"
+ resolved "https://registry.yarnpkg.com/lit/-/lit-2.2.2.tgz#b7f729d6ca7e17efbf2bf589df2d5eb04d9620ba"
+ integrity sha512-eN3+2QRHn/erxYB88AXiiRgQA6RltE9MhzySCwX+ACOxA/MLWN3VdXvcbZD9PN09zmUwlgzDvW3T84YWj2Sa0A==
+ dependencies:
+ "@lit/reactive-element" "^1.3.0"
+ lit-element "^3.2.0"
+ lit-html "^2.2.0"
+
 loader-runner@^4.2.0:
  version "4.2.0"
  resolved "https://registry.npmjs.org/loader-runner/-/loader-runner-4.2.0.tgz"