Merge pull request reactplay#92 from erayalkis/main

Fix embeds not working as intended
vishal-shingare · Apr 22, 2022 · b72fd9e · b72fd9e
2 parents c7dec1c + b8bcce8
commit b72fd9e
Show file tree

Hide file tree

Showing 6 changed files with 663 additions and 41 deletions.
diff --git a/package.json b/package.json
@@ -20,6 +20,7 @@
  "scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
+ "postbuild": "react-snap",
  "test": "react-scripts test",
  "eject": "react-scripts eject",
  "create-play": "plop"
@@ -30,6 +31,12 @@
  "react-app/jest"
  ]
  },
+ "reactSnap": {
+ "puppeteerArgs": [
+ "--no-sandbox",
+ "--disable-setuid-sandbox"
+ ]
+ },
  "browserslist": {
  "production": [
  ">0.2%",
@@ -41,5 +48,8 @@
  "last 1 firefox version",
  "last 1 safari version"
  ]
+ },
+ "devDependencies": {
+ "react-snap": "^1.23.0"
  }
 }
diff --git a/public/index.html b/public/index.html
@@ -5,8 +5,64 @@
  <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" />
-
- <!--All meta tags are available in src/meta/DefMeta.jsx-->
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
+ <meta name="theme-color" content="#000000" />
+ <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 name="twitter:card" content="summary_large_image" />
+ <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

diff --git a/src/index.js b/src/index.js
@@ -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 };

diff --git a/src/meta/DefMeta.jsx b/src/meta/DefMeta.jsx
@@ -3,16 +3,12 @@ import { Helmet } from "react-helmet";
 function DefMeta() {
  return (
  <Helmet>
- <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."
  data-react-helmet="true"
  />
- <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
@@ -29,15 +25,11 @@ function DefMeta() {
  content="/og-image.png" // React should default these to public
  data-react-helmet="true"
  />
- <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"
  data-react-helmet="true"
  />
- <meta name="twitter:card" content="summary_large_image" />
  <meta
  name="twitter:site"
  content="@ReactPlayIO"

diff --git a/src/plays/why-react/WhyReact.jsx b/src/plays/why-react/WhyReact.jsx
@@ -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",