Enabling Comments and Reactions for the Plays

.gitignore

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

package.json

@@ -3,6 +3,7 @@
   "version": "1.0.0",
   "private": true,
   "dependencies": {
+    "@giscus/react": "^2.0.3",
     "plop": "^3.0.5",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",

src/App.css

@@ -50,6 +50,7 @@
   --fw-bold: 600;
 
   /* Font Sizes */
+  --fs-xxs: 0.6rem;
   --fs-xs: 0.7rem;
   --fs-sm: 0.8rem;
   --fs-rg: 0.9rem;
@@ -174,6 +175,11 @@ code {
   background-color: var(--color-neutral-20);
 }
 
+.app-body-overflow-hidden {
+  overflow-y: hidden;
+  height: 100%;
+}
+
 /* App Footer */
 .app-footer {
   padding: 0 2rem;

src/common/components/Comment.jsx

@@ -0,0 +1,29 @@
+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="0"
+        emitMetadata="1"
+        inputPosition="top"
+        theme="light"
+        lang="en"
+        loading="lazy"
+      />
+    </>
+  );
+};
+
+export default Comment;

src/common/components/LevelBadge.jsx

@@ -0,0 +1,43 @@
+
+import { useState, useEffect } from 'react';
+import { RiMedal2Fill } from "react-icons/ri";
+import { IoMdTrophy } from "react-icons/io";
+import { IoRibbon } from "react-icons/io5";
+
+
+const LevelBadge = ({ level }) => {
+  const [playLevel, setPlayLevel] = useState(null);
+
+  useEffect(() => {
+    switch (level) {
+      case "Beginner":
+        setPlayLevel(
+          <span className="play-level play-level-1">
+            <IoRibbon size="16px" /> {level}
+          </span>);
+        break;
+      case "Intermediate":
+        setPlayLevel(
+          <span className="play-level play-level-2">
+            <RiMedal2Fill size="16px" /> {level}
+          </span>);
+        break;
+      case "Advanced":
+        setPlayLevel(
+          <span className="play-level play-level-3">
+            <IoMdTrophy size="16px" /> {level}
+          </span>);
+        break;
+      default:
+        setPlayLevel(
+          <span className="play-level play-level-1">
+            <IoRibbon size="16px" /> {level}
+          </span>);
+    }
+  }, [level]);
+  return (
+    <>{playLevel}</>
+  );
+};
+
+export default LevelBadge;

src/common/header/Header.jsx

@@ -1,47 +1,69 @@
-import FilterPlays from 'common/search/FilterPlays';
-import SearchPlays from 'common/search/SearchPlays';
-import HeaderNav from './HeaderNav';
+import FilterPlays from "common/search/FilterPlays";
+import SearchPlays from "common/search/SearchPlays";
+import HeaderNav from "./HeaderNav";
 import { useEffect, useState } from "react";
 import { Link, useLocation } from "react-router-dom";
-import './header.css';
+import "./header.css";
 
 const Header = () => {
   const location = useLocation();
   const pathName = location.pathname;
-
-  const [showSearch, setShowSearch] = useState(false);
-  const [headerStyle, setHeaderStyle] = useState(false);
-  const [showBrowse, setShowBrowse] = useState(false);
+
+  const [showHideBits, setShowHideBits] = useState({
+    showSearch: true,
+    showBrowse: false,
+    setHeaderStyle: true,
+  });
 
   useEffect(() => {
-    if (pathName === '/') {
-      setHeaderStyle(false);
-      setShowSearch(false);
-      setShowBrowse(true);
+    if (pathName === "/") {
+      setShowHideBits({
+        ...showHideBits,
+        showSearch: false,
+        showBrowse: true,
+        setHeaderStyle: false,
+      });
+    } else if (pathName === "/ideas") {
+      setShowHideBits({
+        ...showHideBits,
+        showSearch: false,
+        showBrowse: true,
+        setHeaderStyle: true,
+      });
     } else {
-      setHeaderStyle(true);
-      setShowSearch(true);
-      setShowBrowse(false);
+      setShowHideBits({
+        ...showHideBits,
+        showSearch: true,
+        showBrowse: false,
+        setHeaderStyle: true,
+      });
     }
   }, [pathName]);
 
   return (
-    <header className={headerStyle ? "app-header" : "app-header app-header-home"}>
-        <span><Link to="/" className="app-logo"><span className="sr-only">React Play</span></Link></span>
-        <div className="app-header-search">
-        {
-          showSearch && (
-            <>                
-              <SearchPlays />
-              <FilterPlays />
-            </>
-            )
-        }
-        </div>
-        <HeaderNav showBrowse={showBrowse}/>
+    <header
+      className={
+        showHideBits.setHeaderStyle
+          ? "app-header"
+          : "app-header app-header-home"
+      }
+    >
+      <span>
+        <Link to="/" className="app-logo">
+          <span className="sr-only">React Play</span>
+        </Link>
+      </span>
+      <div className="app-header-search">
+        {showHideBits.showSearch && (
+          <>
+            <SearchPlays />
+            <FilterPlays />
+          </>
+        )}
+      </div>
+      <HeaderNav showBrowse={showHideBits.showBrowse} />
     </header>
   );
 };
 
-
-export default Header;
+export default Header;

src/common/header/HeaderNav.jsx

@@ -2,6 +2,7 @@
 import { useState } from 'react';
 import { Link } from "react-router-dom";
 import { BsTwitter, BsGithub } from 'react-icons/bs';
+import { FaLightbulb } from 'react-icons/fa';
 import { IoAddSharp, IoShareSocial } from 'react-icons/io5';
 import { MdManageSearch, MdClose } from 'react-icons/md';
 import SocialShare from 'common/components/SocialShare';
@@ -51,6 +52,12 @@ const HeaderNav = ({ showBrowse }) => {
               <span className="btn-label">Create</span>
             </a>
           </li>
+          <li>
+            <Link to="/ideas" className="app-header-btn app-header-btn--default">
+              <FaLightbulb className="icon" />
+              <span className="btn-label">Idea</span>
+            </Link>
+          </li>
           <li>
             <a
               href="https://github.com/atapas/react-play"

src/common/home/Home.jsx

@@ -6,6 +6,7 @@ import { RiSlideshow4Line } from "react-icons/ri";
 import { BiShareAlt, BiAddToQueue } from "react-icons/bi";
 import { BsGithub } from "react-icons/bs";
 import { FiStar } from "react-icons/fi";
+import { FaLightbulb } from 'react-icons/fa';
 import { ReactComponent as Flower } from "images/icon-flower.svg";
 import { MdManageSearch } from "react-icons/md";
 import YoutubeVideoEmbed from 'common/components/YouTubeEmbed';
@@ -113,6 +114,14 @@ const Home = () => {
             </p>
           </li>
         </ul>
+        <div className="home-ideas">
+          <FaLightbulb className="icon" color="var(--color-brand-primary)" size='48px'/>
+          <p className="ideas-lead">Not sure how to get started?</p>
+          <p className="ideas-title">We have got lot of ideas</p>
+          <Link to="/plays" className="home-anchor">
+            <span className="text">Get started with some ideas</span>
+          </Link>
+        </div>
       </section>
       <section className="home-plays">
         <FeaturedPlays />

src/common/home/home.css

@@ -301,6 +301,30 @@
 
 }
 
+/* Home ideas */
+.home-ideas {
+    max-width: var(--screen-lg-max);
+    margin: 4rem auto 0 auto;
+    padding: 4rem 0 0 0;
+    border-top: solid 1px var(--color-neutral-30);
+    text-align: center;
+}
+
+.home-ideas .ideas-title {
+    margin: 0 0 3rem 0;
+    font-family: var(--ff-accent);
+    font-size: var(--fs-xl);
+    font-weight: var(--fw-bold);
+    color: var(--color-brand-primary);
+}
+
+.home-ideas .ideas-lead {
+    margin: 0;
+    font-size: var(--fs-md);
+    font-weight: var(--fw-regular);
+    color: var(--color-neutral-60);
+}
+
 /* Home Plays */
 .home-plays {
     position: relative;

src/common/index.js

@@ -5,5 +5,6 @@ import Home from "./home/Home";
 import Modal from "./modal";
 import DefMeta from "meta/DefMeta";
 import PlayMeta from "./playlists/PlayMeta";
+import PlayIdeas from "./playideas/PlayIdeas";
 
-export { Header, Footer, Home, PageNotFound, Modal, PlayMeta, DefMeta };
+export { Header, Footer, Home, PageNotFound, Modal, PlayMeta, DefMeta, PlayIdeas };