Skip to content

Commit

Permalink
馃悰 Merge conflict
Browse files Browse the repository at this point in the history
  • Loading branch information
atapas committed Apr 22, 2022
2 parents 2649963 + b72fd9e commit fd391e0
Show file tree
Hide file tree
Showing 12 changed files with 1,100 additions and 922 deletions.
9 changes: 9 additions & 0 deletions .all-contributorsrc
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,15 @@
"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"
]
}
],
"contributorsPerLine": 7,
Expand Down
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
.env.development.local
.env.test.local
.env.production.local
.package-lock.json

npm-debug.log*
yarn-debug.log*
Expand Down
3 changes: 2 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -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-9-orange.svg?style=flat-square)](#contributors-)
[![All Contributors](https://img.shields.io/badge/all_contributors-10-orange.svg?style=flat-square)](#contributors-)
<!-- ALL-CONTRIBUTORS-BADGE:END -->

<p align="center">
Expand Down Expand Up @@ -177,6 +177,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
<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>
</tr>
</table>

Expand Down
11 changes: 11 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
"plop": "^3.0.5",
"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",
Expand All @@ -20,6 +21,7 @@
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"postbuild": "react-snap",
"test": "react-scripts test",
"eject": "react-scripts eject",
"create-play": "plop"
Expand All @@ -30,6 +32,12 @@
"react-app/jest"
]
},
"reactSnap": {
"puppeteerArgs": [
"--no-sandbox",
"--disable-setuid-sandbox"
]
},
"browserslist": {
"production": [
">0.2%",
Expand All @@ -41,5 +49,8 @@
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"react-snap": "^1.23.0"
}
}
78 changes: 58 additions & 20 deletions public/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,30 +4,65 @@
<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" />
<meta
name="description"
content="ReactPlay is an open-source application to learn, create and
share ReactJS projects with the developer community."
data-react-helmet="true"
/>
<meta
property="og:description"
content="ReactPlay is an open-source application to learn, create and
share ReactJS projects with the developer community."
data-react-helmet="true"
/>
<meta
property="og:title"
content="ReactPlay - One app to learn, create, and share ReactJS projects."
data-react-helmet="true"
/>
<meta
property="og:image"
content="/og-image.png"
these
to
public
data-react-helmet="true"
/>
<meta
property="og:image:alt"
content="Start React Code Arena with ReactPlay"
data-react-helmet="true"
/>
<meta name="twitter:site" content="@ReactPlayIO" data-react-helmet="true" />
<meta
name="twitter:title"
content="ReactPlay - One app to learn, create, and share ReactJS projects."
data-react-helmet="true"
/>
<meta
name="twitter:description"
content="ReactPlay is an open-source application to learn, create and
share ReactJS projects with the developer community."
data-react-helmet="true"
/>
<meta
name="twitter:image"
content="/og-image.png"
these
to
public
data-react-helmet="true"
/>

<!--
manifest.json provides metadata used when your web app is installed on a
Expand All @@ -43,10 +78,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>
Expand Down
21 changes: 8 additions & 13 deletions src/common/index.js
Original file line number Diff line number Diff line change
@@ -1,14 +1,9 @@
import PageNotFound from './404/PageNotFound';
import Footer from './footer/Footer';
import Header from './header/Header';
import Home from './home/Home';
import Modal from './modal';

export {
Header,
Footer,
Home,
PageNotFound,
Modal
};
import PageNotFound from "./404/PageNotFound";
import Footer from "./footer/Footer";
import Header from "./header/Header";
import Home from "./home/Home";
import Modal from "./modal";
import DefMeta from "meta/DefMeta";
import PlayMeta from "./playlists/PlayMeta";

export { Header, Footer, Home, PageNotFound, Modal, PlayMeta, DefMeta };
57 changes: 57 additions & 0 deletions src/common/playlists/PlayMeta.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
import { cloneElement } from "react";
import { Helmet } from "react-helmet";

function PlayMeta({ id, name, description, path, cover, component }) {
const playFolder = path.split("/")[2];

let metaImage; // Initialize metaImage variable
if (cover) {
metaImage = cover; // If cover path is given, use that
} else {
try {
// If not, try finding the cover.png in the play's folder
metaImage = require(`../../plays/${playFolder}/cover.png`);
} catch {
// If no image is available, cover stays as undefined
console.log("No cover available.");
}
}

return (
<>
<Helmet>
<meta name="description" content={description} />
<meta property="og:title" content={name} />
<meta property="og:description" content={description} />
{metaImage && (
<meta
property="og:image"
content={metaImage}
data-react-helmet="true"
/>
)}
<meta
property="og:image:alt"
content={description}
data-react-helmet="true"
/>
<meta name="twitter:title" content={name} data-react-helmet="true" />
<meta
name="twitter:description"
content={description}
data-react-helmet="true"
/>
{metaImage && (
<meta
name="twitter:image"
content={metaImage}
data-react-helmet="true"
/>
)}
</Helmet>
{cloneElement(component(), { id })}
</>
);
}

export default PlayMeta;
10 changes: 7 additions & 3 deletions src/common/routing/RouteDefs.jsx
Original file line number Diff line number Diff line change
@@ -1,22 +1,26 @@
import App from "App";
import { Footer, Header, Home, PageNotFound } from "common";
import { Footer, Header, Home, PlayMeta, DefMeta, PageNotFound } from "common";
import PlayList from "common/playlists/PlayList";
import { getAllPlays } from "meta/play-meta-util";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import { cloneElement } from 'react'

const RouteDefs = () => {
const plays = getAllPlays();

return (
<BrowserRouter>
<Header />
<DefMeta />
<Routes>
<Route path="/" element={<Home />} />
<Route path="/plays" element={<App />}>
<Route index element={<PlayList />} />
{plays.map((play, index) => (
<Route key={index} path={play.path} element={cloneElement(play.component(), {id: play.id})}/>
<Route
key={index}
path={play.path}
element={<PlayMeta {...play} />} // Put play data inside PlayMeta tag for dynamic meta tags
/>
))}
</Route>
<Route path="/*" element={<PageNotFound />} />
Expand Down
4 changes: 2 additions & 2 deletions src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,15 @@ import RouteDefs from "common/routing/RouteDefs";
import { SearchContext } from "common/search/search-context";
import "index.css";
import React, { useState } from "react";
import { createRoot } from 'react-dom/client';
import { createRoot } from "react-dom/client";
import reportWebVitals from "reportWebVitals";

const Index = () => {
const [searchTerm, setSearchTerm] = useState("");
const [filterQuery, setFilterQuery] = useState({
level: "",
tags: [],
creator: ""
creator: "",
});

const value = { searchTerm, setSearchTerm, filterQuery, setFilterQuery };
Expand Down
58 changes: 58 additions & 0 deletions src/meta/DefMeta.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
import { Helmet } from "react-helmet";

function DefMeta() {
return (
<Helmet>
<meta
name="description"
content="ReactPlay is an open-source application to learn, create and
share ReactJS projects with the developer community."
data-react-helmet="true"
/>
<meta
property="og:description"
content="ReactPlay is an open-source application to learn, create and
share ReactJS projects with the developer community."
data-react-helmet="true"
/>
<meta
property="og:title"
content="ReactPlay - One app to learn, create, and share ReactJS projects."
data-react-helmet="true"
/>
<meta
property="og:image"
content="/og-image.png" // React should default these to public
data-react-helmet="true"
/>
<meta
property="og:image:alt"
content="Start React Code Arena with ReactPlay"
data-react-helmet="true"
/>
<meta
name="twitter:site"
content="@ReactPlayIO"
data-react-helmet="true"
/>
<meta
name="twitter:title"
content="ReactPlay - One app to learn, create, and share ReactJS projects."
data-react-helmet="true"
/>
<meta
name="twitter:description"
content="ReactPlay is an open-source application to learn, create and
share ReactJS projects with the developer community."
data-react-helmet="true"
/>
<meta
name="twitter:image"
content="/og-image.png" // React should default these to public
data-react-helmet="true"
/>
</Helmet>
);
}

export default DefMeta;
5 changes: 1 addition & 4 deletions src/plays/why-react/WhyReact.jsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,10 @@
import PlayHeader from "common/playlists/PlayHeader";
import { useState } from "react";
import { useLocation } from "react-router-dom";
import { getPlayById } from "meta/play-meta-util";
import "./why-react.css";

const WhyReact = () => {
const WhyReact = ({ id }) => {
// The following code is to fetch the current play from the URL
const location = useLocation();
const { id } = location.state;
const play = getPlayById(id);
const [reasons] = useState([
"React is Declarative",
Expand Down
Loading

0 comments on commit fd391e0

Please sign in to comment.