Fix embeds not working as intended

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"
   }
 }

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

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 };

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"

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",