From 81beaaebc679ebb3b71f017c5a1efe3a6b935d62 Mon Sep 17 00:00:00 2001
From: Lily <lolpo12345@outlook.com>
Date: Sat, 23 Apr 2022 23:46:09 +0300
Subject: [PATCH 1/4] Move meta tags around

---
 public/index.html    | 56 +-------------------------------------------
 src/meta/DefMeta.jsx |  5 ----
 2 files changed, 1 insertion(+), 60 deletions(-)

diff --git a/public/index.html b/public/index.html
index 96f6927182..7efc206370 100644
--- a/public/index.html
+++ b/public/index.html
@@ -8,61 +8,7 @@
     <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"
-    />
+    <meta name="twitter:site" content="@ReactPlayIO" />
 
     <!--
       manifest.json provides metadata used when your web app is installed on a
diff --git a/src/meta/DefMeta.jsx b/src/meta/DefMeta.jsx
index 85c80c95ad..35d6fe5302 100644
--- a/src/meta/DefMeta.jsx
+++ b/src/meta/DefMeta.jsx
@@ -36,11 +36,6 @@ function DefMeta() {
         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."

From cb29e7458b9e92de60ebc938eb28feeb95e5499c Mon Sep 17 00:00:00 2001
From: Lily <lolpo12345@outlook.com>
Date: Sat, 23 Apr 2022 23:53:00 +0300
Subject: [PATCH 2/4] Add explicit URL to PlayMeta

---
 src/common/playlists/PlayMeta.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/common/playlists/PlayMeta.jsx b/src/common/playlists/PlayMeta.jsx
index 70d5926316..6d722ba2db 100644
--- a/src/common/playlists/PlayMeta.jsx
+++ b/src/common/playlists/PlayMeta.jsx
@@ -10,7 +10,7 @@ function PlayMeta({ id, name, description, path, cover, component }) {
   } else {
     try {
       // If not, try finding the cover.png in the play's folder
-      metaImage = require(`../../plays/${playFolder}/cover.png`);
+      metaImage = `https://reactplay.io${require(`../../plays/${playFolder}/cover.png`)}`;
     } catch {
       // If no image is available, cover stays as undefined
       console.log("No cover available.");

From a06fbbcb562e4b13f7ffdcc29bf33605d895aa29 Mon Sep 17 00:00:00 2001
From: Lily <lolpo12345@outlook.com>
Date: Sun, 24 Apr 2022 00:02:25 +0300
Subject: [PATCH 3/4] Add comment for explicit URL

---
 src/common/playlists/PlayMeta.jsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/common/playlists/PlayMeta.jsx b/src/common/playlists/PlayMeta.jsx
index 6d722ba2db..72c96e880c 100644
--- a/src/common/playlists/PlayMeta.jsx
+++ b/src/common/playlists/PlayMeta.jsx
@@ -10,7 +10,8 @@ function PlayMeta({ id, name, description, path, cover, component }) {
   } else {
     try {
       // If not, try finding the cover.png in the play's folder
-      metaImage = `https://reactplay.io${require(`../../plays/${playFolder}/cover.png`)}`;
+      metaImage = `https://reactplay.io${require(`../../plays/${playFolder}/cover.png`)}`; // It seems that
+      // some platforms such as Twitter need full, explicit URL's to display images correctly
     } catch {
       // If no image is available, cover stays as undefined
       console.log("No cover available.");

From c672465f1335faa07cfd8147f47947269603a30a Mon Sep 17 00:00:00 2001
From: Lily <lolpo12345@outlook.com>
Date: Sun, 24 Apr 2022 00:02:58 +0300
Subject: [PATCH 4/4] Update DefMeta og-image to use explicit URL

---
 src/meta/DefMeta.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/meta/DefMeta.jsx b/src/meta/DefMeta.jsx
index 35d6fe5302..75782b3cc7 100644
--- a/src/meta/DefMeta.jsx
+++ b/src/meta/DefMeta.jsx
@@ -28,7 +28,7 @@ function DefMeta() {
       />
       <meta
         property="og:image"
-        content="/og-image.png" // React should default these to public
+        content="https://reactplay.io/og-image.png" // React should default these to public
         data-react-helmet="true"
       />
       <meta
@@ -49,7 +49,7 @@ function DefMeta() {
       />
       <meta
         name="twitter:image"
-        content="/og-image.png" // React should default these to public
+        content="https://reactplay.io/og-image.png" // React should default these to public
         data-react-helmet="true"
       />
     </Helmet>