resolved conflicts

.all-contributorsrc

@@ -157,6 +157,51 @@
  "contributions": [
  "code"
  ]
+ },
+ {
+ "login": "Shriom-Trivedi",
+ "name": "Shri Om Trivedi",
+ "avatar_url": "https://avatars.githubusercontent.com/u/32411707?v=4",
+ "profile": "https://github.com/Shriom-Trivedi",
+ "contributions": [
+ "code"
+ ]
+ },
+ {
+ "login": "naiknareshh",
+ "name": "Naresh Naik",
+ "avatar_url": "https://avatars.githubusercontent.com/u/105363653?v=4",
+ "profile": "https://github.com/naiknareshh",
+ "contributions": [
+ "code"
+ ]
+ },
+ {
+ "login": "vincentBCP",
+ "name": "Vincent Patoc",
+ "avatar_url": "https://avatars.githubusercontent.com/u/18364292?v=4",
+ "profile": "https://github.com/vincentBCP",
+ "contributions": [
+ "code"
+ ]
+ },
+ {
+ "login": "Sachin-chaurasiya",
+ "name": "Sachin Chaurasiya",
+ "avatar_url": "https://avatars.githubusercontent.com/u/59080942?v=4",
+ "profile": "https://sachinchaurasiya.dev",
+ "contributions": [
+ "code"
+ ]
+ },
+ {
+ "login": "tejinder-sharma",
+ "name": "Tejinder Sharma",
+ "avatar_url": "https://avatars.githubusercontent.com/u/95734921?v=4",
+ "profile": "https://github.com/tejinder-sharma",
+ "contributions": [
+ "code"
+ ]
  }
  ],
  "contributorsPerLine": 7,

.github/pull_request_template.md

@@ -1,3 +1,6 @@
+
+> First thing, PLEASE READ THIS: [ReactPlay Code Review Checklist](https://github.com/atapas/react-play/wiki/ReactPlay-Code-Review-Checklist)
+
 # Description
 
 Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context. List any dependencies that are required for this change.

CREATE-PLAY.md

@@ -48,6 +48,11 @@ Welcome developers! We are as excited as you are to know that you are going to c
   <td>Yes</td>
   <td>Let the application know your choice of script. It supports both <b>JavaScript</b> and <b>TypeScript</b>. You can pick either of it.</td>
   </tr>
+  <tr>
+  <td>Style to be used (css/scss)</td>
+  <td>Yes</td>
+  <td>Let the application know your choice of style. It supports both <b>css</b> and <b>scss</b>. You can pick either of it.</td>
+  </tr>
   <tr>
   <td>What is the level of this play?</td>
   <td>Yes</td>

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-17-orange.svg?style=flat-square)](#contributors-)
+[![All Contributors](https://img.shields.io/badge/all_contributors-22-orange.svg?style=flat-square)](#contributors-)
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
 <p align="center">
@@ -188,6 +188,13 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
  <td align="center"><a href="https://www.showwcase.com/shivam-katare"><img src="https://avatars.githubusercontent.com/u/91705825?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Shivam Katare</b></sub></a><br /><a href="https://github.com/atapas/react-play/commits?author=Shivam-Katare" title="Code">💻</a></td>
  <td align="center"><a href="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/Angryman18"><img src="https://avatars.githubusercontent.com/u/63530626?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Shyam Mahanta</b></sub></a><br /><a href="https://github.com/atapas/react-play/commits?author=Angryman18" title="Code">💻</a></td>
  <td align="center"><a href="http:https://koustov.com"><img src="https://avatars.githubusercontent.com/u/7145967?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Koustov</b></sub></a><br /><a href="https://github.com/atapas/react-play/commits?author=koustov" title="Code">💻</a></td>
+ <td align="center"><a href="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/Shriom-Trivedi"><img src="https://avatars.githubusercontent.com/u/32411707?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Shri Om Trivedi</b></sub></a><br /><a href="https://github.com/atapas/react-play/commits?author=Shriom-Trivedi" title="Code">💻</a></td>
+ <td align="center"><a href="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/naiknareshh"><img src="https://avatars.githubusercontent.com/u/105363653?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Naresh Naik</b></sub></a><br /><a href="https://github.com/atapas/react-play/commits?author=naiknareshh" title="Code">💻</a></td>
+ <td align="center"><a href="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/vincentBCP"><img src="https://avatars.githubusercontent.com/u/18364292?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Vincent Patoc</b></sub></a><br /><a href="https://github.com/atapas/react-play/commits?author=vincentBCP" title="Code">💻</a></td>
+ <td align="center"><a href="https://sachinchaurasiya.dev"><img src="https://avatars.githubusercontent.com/u/59080942?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Sachin Chaurasiya</b></sub></a><br /><a href="https://github.com/atapas/react-play/commits?author=Sachin-chaurasiya" title="Code">💻</a></td>
+ </tr>
+ <tr>
+ <td align="center"><a href="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/tejinder-sharma"><img src="https://avatars.githubusercontent.com/u/95734921?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Tejinder Sharma</b></sub></a><br /><a href="https://github.com/atapas/react-play/commits?author=tejinder-sharma" title="Code">💻</a></td>
  </tr>
 </table>
 

package.json

@@ -4,8 +4,11 @@
  "private": true,
  "dependencies": {
  "@giscus/react": "^2.0.3",
+ "@types/lodash": "^4.14.182",
  "@types/react": "^18.0.6",
  "@types/react-dom": "^18.0.2",
+ "date-fns": "^2.28.0",
+ "lodash": "^4.17.21",
  "node-sass": "^7.0.1",
  "plop": "^3.0.5",
  "react": "^18.0.0",
@@ -55,8 +58,8 @@
  ]
  },
  "devDependencies": {
- "puppeteer": "^13.7.0",
  "react-snap": "^1.23.0",
+ "puppeteer": "^13.7.0",
  "typescript": "^4.6.4"
  }
 }

plop-templates/component_js.hbs

@@ -1,6 +1,7 @@
 import { getPlayById } from 'meta/play-meta-util';
 
 import PlayHeader from 'common/playlists/PlayHeader';
+import './{{camelCase name}}.{{style}}';
 
 function {{pascalCase name}}(props) {
  // Do not remove the below lines. 

plop-templates/component_ts.hbs

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { getPlayById } from 'meta/play-meta-util';
 
 import PlayHeader from 'common/playlists/PlayHeader';
+import './{{camelCase name}}.{{style}}';
 
 function {{pascalCase name}}(props:any) {
  // Do not remove the below lines. 

plop-templates/play-readme.hbs

@@ -1 +1,27 @@
-# {{name}}
+# {{name}}
+
+{{description}}
+
+## Play Demographic
+
+Language: {{language}}
+Level: {{level}}
+
+## Creator Information
+
+User: {{github}}
+Gihub Link: https://github.com/{{github}}
+Blog: {{blog}}
+Video: {{video}}
+
+## Implementation Details
+
+Update your implementation idea and details here
+
+## Consideration
+
+Update all considerations(if any)
+
+## Resources
+
+Update external resources(if any)

plop-templates/style_css.hbs

@@ -0,0 +1 @@
+/* enter stlyes here */

plop-templates/style_scss.hbs

@@ -0,0 +1 @@
+/* enter stlyes here */

plopfile.js

@@ -33,6 +33,12 @@ module.exports = plop => {
  message: 'Language to be used (javascript/typescript):',
  choices: ['js', 'ts']
  },
+ {
+ type: 'list',
+ name: 'style',
+ message: 'Style to be used (css/scss):',
+ choices: ['css', 'scss']
+ },
  {
  type: 'list',
  name: 'level',
@@ -71,6 +77,11 @@ module.exports = plop => {
  path: 'src/plays/{{generateFolderName name}}/{{pascalCase name}}.{{language}}x',
  templateFile: 'plop-templates/component_{{language}}.hbs',
  },
+ {
+ type: 'add',
+ path: 'src/plays/{{generateFolderName name}}/{{camelCase name}}.{{style}}',
+ templateFile: 'plop-templates/style_{{style}}.hbs',
+ },
  {
  type: 'add',
  path: 'src/plays/{{generateFolderName name}}/Readme.md',

public/index.html

@@ -31,7 +31,9 @@
  rel="stylesheet"
  />
 
- <title>ReactPlay</title>
+ <title>
+ ReactPlay - One app to learn, create, and share ReactJS projects.
+ </title>
  </head>
  <body>
  <noscript>You need to enable JavaScript to run this app.</noscript>

public/robots.txt

@@ -1,3 +1,3 @@
-# https://www.robotstxt.org/robotstxt.html
-User-agent: *
-Disallow:
+User-agent: *
+Disallow: 
+Sitemap: https://reactplay.io/sitemap.xml

public/sitemap.xml

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset
+ xmlns="http:https://www.sitemaps.org/schemas/sitemap/0.9"
+ xmlns:xsi="http:https://www.w3.org/2001/XMLSchema-instance"
+ xsi:schemaLocation="http:https://www.sitemaps.org/schemas/sitemap/0.9
+ http:https://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
+
+<url>
+ <loc>https://www.reactplay.io/</loc>
+ <lastmod>2022-05-23T15:20:03+00:00</lastmod>
+ <priority>1.00</priority>
+</url>
+<url>
+ <loc>https://www.reactplay.io/plays</loc>
+ <lastmod>2022-05-23T15:20:03+00:00</lastmod>
+ <priority>0.80</priority>
+</url>
+<url>
+ <loc>https://www.reactplay.io/ideas</loc>
+ <lastmod>2022-05-23T15:20:03+00:00</lastmod>
+ <priority>0.80</priority>
+</url>
+</urlset>

src/common/modal/index.jsx

@@ -1,11 +1,25 @@
+import { useEffect } from "react";
 import ReactDOM from "react-dom";
 import { GoCheck, GoX } from "react-icons/go";
 
 const Modal =({ title, show, onClose, onSubmit, children, cname })=> {
+ useEffect(() => {
+ const close = (e) => {
+ // e.keyCode is deprecated: developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode. So I've used e.key === 'Escape' instead, for better international keyboard support. 
+ if(e.key === 'Escape') {
+ onClose();
+ }
+ }
+ window.addEventListener('keydown', close)
+ return () => window.removeEventListener('keydown', close)
+},[])
+
  if (!show) return null;
+
+
  return ReactDOM.createPortal(
  <>
- <div className="modal-overlay"></div>
+ <div className="modal-overlay" onClick={ onClose }></div>
  <div className={`modal-${cname}`}>
  <div className={`modal-${cname}-header`}>
  <h2 className="modal-title">{ title }</h2>
@@ -14,7 +28,7 @@ const Modal =({ title, show, onClose, onSubmit, children, cname })=> {
  { children }
  </div>
  <div className={`modal-${cname}-footer`}>
- <button className="btn-default" onClick={ onClose }><GoX size="16px" /> Cancel</button>
+ <button className="btn-default-light" onClick={ onClose }><GoX size="16px" /> Cancel</button>
  { onSubmit && <button className="btn-primary" onClick={ onSubmit }><GoCheck size="16px" /> Apply</button> }
  </div>
  </div>

src/common/search/search.css

@@ -200,7 +200,7 @@
  font-size: var(--fs-rg);
 }
 
-.btn-default {
+.btn-default-light {
  border: 0;
  display: inline-flex;
  align-items: center;
@@ -214,8 +214,8 @@
  transition: all 0.16s ease-in-out;
 }
 
-.btn-default:hover,
-.btn-default:focus {
+.btn-default-light:hover,
+.btn-default-light:focus {
  background-color: rgba(var(--color-neutral-90-rgb),0.2);
  color: var(--color-neutral-90);
 }

src/meta/DefMeta.jsx

@@ -6,8 +6,8 @@ function DefMeta() {
  <meta property="og:type" content="website" />
  <meta property="og:site_name" content="ReactPlay" />
  <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:width" content="1200" />
+ <meta property="og:image:height" content="628" />
  <meta name="twitter:card" content="summary_large_image" />
  <meta
  name="description"
@@ -36,6 +36,11 @@ function DefMeta() {
  content="Start React Code Arena with ReactPlay"
  data-react-helmet="true"
  />
+ <meta
+ property="og:url"
+ content="https://reactplay.io"
+ data-react-helmet="true"
+ />
  <meta
  name="twitter:title"
  content="ReactPlay - One app to learn, create, and share ReactJS projects."