Merge pull request reactplay#2 from Abhishek-90/playState

Play state

.all-contributorsrc

@@ -31,6 +31,78 @@
  "contributions": [
  "code"
  ]
+ },
+ {
+ "login": "abhishek-gogroup",
+ "name": "Abhishek Khatri",
+ "avatar_url": "https://avatars.githubusercontent.com/u/87639443?v=4",
+ "profile": "https://github.com/abhishek-gogroup",
+ "contributions": [
+ "code"
+ ]
+ },
+ {
+ "login": "Abhishek-90",
+ "name": "Abhishek Holani",
+ "avatar_url": "https://avatars.githubusercontent.com/u/43419831?v=4",
+ "profile": "https://abhishek-90.github.io/My-Portfolio/",
+ "contributions": [
+ "code"
+ ]
+ },
+ {
+ "login": "hasnainmakada-99",
+ "name": "Hasnain Makada",
+ "avatar_url": "https://avatars.githubusercontent.com/u/82728823?v=4",
+ "profile": "http:https://hasnainmakada-99.github.io",
+ "contributions": [
+ "code"
+ ]
+ },
+ {
+ "login": "shrilakshmishastry",
+ "name": "Shrilakshmi Shastry",
+ "avatar_url": "https://avatars.githubusercontent.com/u/29778698?v=4",
+ "profile": "https://twitter.com/shrilakshmihg",
+ "contributions": [
+ "code"
+ ]
+ },
+ {
+ "login": "6km",
+ "name": "Mohammed Taha",
+ "avatar_url": "https://avatars.githubusercontent.com/u/62352949?v=4",
+ "profile": "https://github.com/6km",
+ "contributions": [
+ "code"
+ ]
+ },
+ {
+ "login": "DalpatRathore",
+ "name": "Dalpat Rathore",
+ "avatar_url": "https://avatars.githubusercontent.com/u/69510006?v=4",
+ "profile": "https://dalpatrathoredev.web.app",
+ "contributions": [
+ "code"
+ ]
+ },
+ {
+ "login": "erayalkis",
+ "name": "Eray Alkış",
+ "avatar_url": "https://avatars.githubusercontent.com/u/80722863?v=4",
+ "profile": "http:https://erayalkis.netlify.app",
+ "contributions": [
+ "code"
+ ]
+ },
+ {
+ "login": "nirban256",
+ "name": "Nirban Chakraborty",
+ "avatar_url": "https://avatars.githubusercontent.com/u/74231771?v=4",
+ "profile": "https://nirban-chakraborty.netlify.app",
+ "contributions": [
+ "code"
+ ]
  }
  ],
  "contributorsPerLine": 7,

.gitignore

@@ -17,7 +17,9 @@
 .env.development.local
 .env.test.local
 .env.production.local
+.package-lock.json
 
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+yarn.lock

CREATE-PLAY.md

@@ -84,7 +84,7 @@ Welcome developers! We are as excited as you are to know that you are going to c
  ```
 - You should now see your play added to the [play list](http:https://localhost:3000/plays) page. You can click on the play thumbnail to see the details of the play.
 
-- That's it. Now start coding yor `Play` using your favorite code editor!
+- That's it. Now start coding your `Play` using your favorite code editor!
 ## 👀 Submitting a Play for Review
 After you done with coding for your `Play`, you can submit it for review. Submitting a `Play` for review is a two step process.
 

README.md

@@ -1,6 +1,6 @@
 # ReactPlay(Repo: `react-play`)
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
-[![All Contributors](https://img.shields.io/badge/all_contributors-3-orange.svg?style=flat-square)](#contributors-)
+[![All Contributors](https://img.shields.io/badge/all_contributors-11-orange.svg?style=flat-square)](#contributors-)
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
 <p align="center">
@@ -55,7 +55,7 @@ Who doesn't want motivation and support? Many Thanks to all the Stargazers who h
 
 [![Stargazers repo roster for @atapas/react-play](https://reporoster.com/stars/atapas/react-play)](https://github.com/atapas/react-play/stargazers)
 
-Please support the work by giving the repository a ⭐, contributing to it, and/or sponsoring using the `Sponsor` button at the top 😍. You can also follow us on twitter [@reactplayio](https://twitter.com/reactplay).
+Please support the work by giving the repository a ⭐, contributing to it, and/or sponsoring using the `Sponsor` button at the top 😍. You can also follow us on twitter [@reactplayio](https://twitter.com/reactplayio).
 
 ## 🏗️ How to Set up `ReactPlay` for Development?
 
@@ -169,6 +169,16 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
  <td align="center"><a href="https://tapasadhikary.com"><img src="https://avatars.githubusercontent.com/u/3633137?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Tapas Adhikary</b></sub></a><br /><a href="https://github.com/atapas/react-play/commits?author=atapas" title="Code">💻</a></td>
  <td align="center"><a href="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/nirmalkc"><img src="https://avatars.githubusercontent.com/u/6359059?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Nirmal Kumar</b></sub></a><br /><a href="https://github.com/atapas/react-play/commits?author=nirmalkc" title="Code">💻</a></td>
  <td align="center"><a href="https://murtuzaali-surti.me"><img src="https://avatars.githubusercontent.com/u/68743212?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Murtuzaali Surti</b></sub></a><br /><a href="https://github.com/atapas/react-play/commits?author=murtuzaalisurti" title="Code">💻</a></td>
+ <td align="center"><a href="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/abhishek-gogroup"><img src="https://avatars.githubusercontent.com/u/87639443?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Abhishek Khatri</b></sub></a><br /><a href="https://github.com/atapas/react-play/commits?author=abhishek-gogroup" title="Code">💻</a></td>
+ <td align="center"><a href="https://abhishek-90.github.io/My-Portfolio/"><img src="https://avatars.githubusercontent.com/u/43419831?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Abhishek Holani</b></sub></a><br /><a href="https://github.com/atapas/react-play/commits?author=Abhishek-90" title="Code">💻</a></td>
+ <td align="center"><a href="http:https://hasnainmakada-99.github.io"><img src="https://avatars.githubusercontent.com/u/82728823?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Hasnain Makada</b></sub></a><br /><a href="https://github.com/atapas/react-play/commits?author=hasnainmakada-99" title="Code">💻</a></td>
+ <td align="center"><a href="https://twitter.com/shrilakshmihg"><img src="https://avatars.githubusercontent.com/u/29778698?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Shrilakshmi Shastry</b></sub></a><br /><a href="https://github.com/atapas/react-play/commits?author=shrilakshmishastry" title="Code">💻</a></td>
+ </tr>
+ <tr>
+ <td align="center"><a href="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/6km"><img src="https://avatars.githubusercontent.com/u/62352949?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Mohammed Taha</b></sub></a><br /><a href="https://github.com/atapas/react-play/commits?author=6km" title="Code">💻</a></td>
+ <td align="center"><a href="https://dalpatrathoredev.web.app"><img src="https://avatars.githubusercontent.com/u/69510006?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Dalpat Rathore</b></sub></a><br /><a href="https://github.com/atapas/react-play/commits?author=DalpatRathore" title="Code">💻</a></td>
+ <td align="center"><a href="http:https://erayalkis.netlify.app"><img src="https://avatars.githubusercontent.com/u/80722863?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Eray Alkış</b></sub></a><br /><a href="https://github.com/atapas/react-play/commits?author=erayalkis" title="Code">💻</a></td>
+ <td align="center"><a href="https://nirban-chakraborty.netlify.app"><img src="https://avatars.githubusercontent.com/u/74231771?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Nirban Chakraborty</b></sub></a><br /><a href="https://github.com/atapas/react-play/commits?author=nirban256" title="Code">💻</a></td>
  </tr>
 </table>
 
@@ -177,4 +187,4 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
 
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
-This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
+This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

package.json

@@ -7,17 +7,20 @@
  "@testing-library/react": "^12.0.0",
  "@testing-library/user-event": "^13.2.1",
  "plop": "^3.0.5",
- "react": "^17.0.2",
- "react-dom": "^17.0.2",
+ "react": "^18.0.0",
+ "react-dom": "^18.0.0",
+ "react-helmet": "^6.1.0",
  "react-icons": "^4.3.1",
  "react-organizational-chart": "^2.1.1",
  "react-router-dom": "6",
  "react-scripts": "5.0.0",
+ "react-shimmer-effect": "^1.0.9",
  "web-vitals": "^2.1.0"
  },
  "scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
+ "postbuild": "react-snap",
  "test": "react-scripts test",
  "eject": "react-scripts eject",
  "create-play": "plop"
@@ -28,6 +31,12 @@
  "react-app/jest"
  ]
  },
+ "reactSnap": {
+ "puppeteerArgs": [
+ "--no-sandbox",
+ "--disable-setuid-sandbox"
+ ]
+ },
  "browserslist": {
  "production": [
  ">0.2%",
@@ -39,5 +48,8 @@
  "last 1 firefox version",
  "last 1 safari version"
  ]
+ },
+ "devDependencies": {
+ "react-snap": "^1.23.0"
  }
 }

plop-templates/component.hbs

@@ -1,14 +1,11 @@
-
-import { useLocation } from 'react-router-dom';
 import { getPlayById } from 'meta/play-meta-util';
 
 import PlayHeader from 'common/playlists/PlayHeader';
 
-function {{pascalCase name}}() {
+function {{pascalCase name}}(props) {
  // Do not remove the below lines. 
  // The following code is to fetch the current play from the URL
- const location = useLocation();
- const { id } = location.state;
+ const { id } = props;
  const play = getPlayById(id);
 
  // Your Code Start below.

plop-templates/play-readme.hbs

@@ -0,0 +1 @@
+# {{name}}

plopfile.js

@@ -1,3 +1,7 @@
+String.prototype.replaceAll = String.prototype.replaceAll || function(string, replaced) {
+ return this.replace(new RegExp(string, 'g'), replaced);
+};
+
 module.exports = plop => {
  plop.setHelper('trim', str => str.trim());
  plop.setHelper('removeAllSpaces', str => str.replaceAll(/\s/g,''));
@@ -58,6 +62,11 @@ module.exports = plop => {
  path: 'src/plays/{{generateFolderName name}}/{{pascalCase name}}.jsx',
  templateFile: 'plop-templates/component.hbs',
  },
+ {
+ type: 'add',
+ path: 'src/plays/{{generateFolderName name}}/Readme.md',
+ templateFile: 'plop-templates/play-readme.hbs',
+ },
  {
  type: 'modify',
  path: 'src/plays/index.js',

public/index.html

@@ -4,30 +4,11 @@
  <meta charset="utf-8" />
  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
  <link rel="canonical" href="https://reactoplay.vercel.app/" />
+ <link rel="apple-touch-icon" href="%PUBLIC_URL%/og-image.png" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="theme-color" content="#000000" />
- <meta
- name="description"
- content="ReactPlay is an open-source application to learn, create and
- share ReactJS projects with the developer community."
- />
  <meta property="og:type" content="website" />
- <meta property="og:site_name" content="ReactPlay" />
- <meta property="og:description" content="ReactPlay is an open-source application to learn, create and
- share ReactJS projects with the developer community." />
- <meta property="og:title" content="ReactPlay - One app to learn, create, and share ReactJS projects." />
- <meta property="og:image" content="%PUBLIC_URL%/og-image.png" />
- <meta property="og:image:type" content="image/png" />
- <meta property="og:image:width" content="400" />
- <meta property="og:image:height" content="300" />
- <meta property="og:image:alt" content="Start React Code Arena with ReactPlay" />
- <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:site" content="@ReactPlayIO" />
- <meta name="twitter:title" content="ReactPlay - One app to learn, create, and share ReactJS projects." />
- <meta name="twitter:description" content="ReactPlay is an open-source application to learn, create and
- share ReactJS projects with the developer community." />
- <meta name="twitter:image" content="%PUBLIC_URL%/og-image.png" />
- <link rel="apple-touch-icon" href="%PUBLIC_URL%/og-image.png" />
 
  <!--
  manifest.json provides metadata used when your web app is installed on a
@@ -43,10 +24,13 @@
  work correctly both with client-side routing and a non-root public URL.
  Learn how to configure a non-root public URL by running `npm run build`.
  -->
- <link rel="preconnect" href="https://fonts.googleapis.com">
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
- <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@500&display=swap" rel="stylesheet">
-
+ <link rel="preconnect" href="https://fonts.googleapis.com" />
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+ <link
+ href="https://fonts.googleapis.com/css2?family=Quicksand:wght@500&display=swap"
+ rel="stylesheet"
+ />
+
  <title>ReactPlay</title>
  </head>
  <body>

src/common/404/404.css

@@ -0,0 +1,63 @@
+.page-404 {
+ padding: 2rem;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ min-height: calc(100vh - 120px);
+}
+
+.page-404-image {
+ max-width: 100%;
+ height: auto;
+}
+
+.page-404-lead {
+ margin: 0;
+ font-family: var(--ff-accent);
+ font-size: var(--fs-xl);
+ text-align: center;
+}
+
+@media screen and (max-width: 768px) {
+ .page-404-lead {
+ line-height: var(--lh-rg);
+ margin-bottom: 1rem;
+ }
+}
+
+.page-404-desc {
+ margin-top: 0;
+ font-size: var(--fs-md);
+ text-align: center;
+}
+
+.page-404-link {
+ position: relative;
+ color: var(--color-neutral-80);
+ text-decoration: none;
+ transition: all .5s ease-in-out;
+ font-weight: var(--fw-semibold);
+}
+.page-404-link:after {
+ content: "";
+ position: absolute;
+ left: 0;
+ right: 0;
+ bottom: 2px;
+ height: 2px;
+ background-color: var(--color-brand-primary);
+ transition: all .1s ease-in-out;
+}
+
+.page-404-link:hover,
+.page-404-link:focus {
+ color: var(--color-neutral-90);
+}
+
+.page-404-link:hover:after,
+.page-404-link:focus:after {
+ height: 5px;
+ bottom: 0;
+ /* background-color: var(--color-neutral-90); */
+}

src/common/404/PageNotFound.jsx

@@ -1,12 +1,15 @@
 import { Link } from 'react-router-dom';
+import { ReactComponent as Image404 } from "images/img-404.svg";
+import "./404.css";
 
 const PageNotFound = () => {
 
  return(
- <main style={{ padding: "1rem" }}>
- <p>OOPs!!! Look like you are lost.</p>
- <p>
- Why don't you go back to <Link to="/">home</Link>?
+ <main className='page-404'>
+ <Image404 className="page-404-image" />
+ <p className='page-404-lead'>Look like you are lost</p>
+ <p className='page-404-desc'>
+ Why don't you go back to <Link to="/" className='page-404-link'>home</Link>?
  </p>
  </main>
  );