From 01379b0f2bcd4147ac63c7d068dcbff7eeeff35b Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Wed, 11 Nov 2020 21:39:50 -0800
Subject: [PATCH] Attempt to remove duplicate head tags

---
 package.json |  2 +-
 src/Head.js  | 99 ++++++++++++++++++++++++++++++++--------------------
 yarn.lock    | 39 +++++++++------------
 3 files changed, 78 insertions(+), 62 deletions(-)

diff --git a/package.json b/package.json
index a3ea0508..278f193e 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,7 @@
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-dropzone": "^11.1.0",
-    "react-helmet": "^5.2.1",
+    "react-helmet": "^6.1.0",
     "react-redux": "^7.2.1",
     "react-scripts": "^3.4.1",
     "react-window": "^1.8.1",
diff --git a/src/Head.js b/src/Head.js
index 56072ae9..8bd888df 100644
--- a/src/Head.js
+++ b/src/Head.js
@@ -1,52 +1,75 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { connect } from "react-redux";
 import { Helmet } from "react-helmet";
 import * as Selectors from "./redux/selectors";
 import { SCREENSHOT_WIDTH, SCREENSHOT_HEIGHT } from "./constants";
 
-function Head(props) {
+const DESCRIPTION =
+  "Infinite scroll through 65k Winamp skins with interactive preview";
+
+function Image({ url, width, height, alt }) {
+  return (
+    <>
+      <meta property="og:image" content={url} />,
+      <meta property="og:image:width" content={width} />,
+      <meta property="og:image:height" content={height} />,
+      <meta property="og:image:type" key="og:image:type" content="image/png" />,
+      <meta property="og:image:alt" key="og:image:alt" content={alt} />,
+      <meta name="twitter:image" content={url} />,
+      <meta property="twitter:image:alt" content={alt} />,
+    </>
+  );
+}
+
+function Head({ url: relativeUrl, pageTitle, previewImageUrl }) {
+  useMemo(() => {
+    // HACK! Helmet does not remove the values that are hard coded in index.html.
+    // So, once JS loads, we remove them ourselves being careful not to only remove things that we will rerender.
+    const elements = window.document.head.querySelectorAll(
+      "meta, title, link[rel='canonical']"
+    );
+    Array.prototype.forEach.call(elements, function (node) {
+      node.parentNode.removeChild(node);
+    });
+  }, []);
+  const pageUrl = `https://skins.webamp.org${relativeUrl}`;
   return (
     <Helmet canUseDOM={true}>
       <meta charSet="utf-8" />
-      <title>{props.pageTitle}</title>
-      <link rel="canonical" href={`https://skins.webamp.org${props.url}`} />
-      <meta property="og:title" content={props.pageTitle} />
       <meta
-        property="og:description"
-        content="Infinite scroll through 65k Winamp skins with interactive preview"
-      />
-      <meta
-        property="og:url"
-        content={`https://skins.webamp.org${props.url}`}
+        name="viewport"
+        content="width=device-width, initial-scale=1, shrink-to-fit=no"
       />
+      <meta name="theme-color" content="#000000" />
+      <title>{pageTitle}</title>
+      <meta name="description" content={DESCRIPTION} />
+      <link rel="canonical" href={pageUrl} />
+      <meta property="og:url" content={pageUrl} />
+      <meta property="og:title" content={pageTitle} />
+      <meta property="og:description" content={DESCRIPTION} />
+      <meta property="og:type" content="website" />
       <meta property="og:site-name" content="Winamp Skin Museum" />
-      {props.previewImageUrl && [
-        <meta
-          property="og:image"
-          key="og:image"
-          content={props.previewImageUrl}
-        />,
-        <meta
-          property="og:image:type"
-          key="og:image:type"
-          content="image/png"
-        />,
-        <meta
-          property="og:image:width"
-          key="og:image:width"
-          content={SCREENSHOT_WIDTH}
-        />,
-        <meta
-          property="og:image:height"
-          key="og:image:height"
-          content={SCREENSHOT_HEIGHT}
-        />,
-        <meta
-          property="og:image:alt"
-          key="og:image:alt"
-          content={"Screenshot of a Winamp skin"}
-        />,
-      ]}
+
+      <meta name="twitter:site" content="@winampskins" />
+      <meta name="twitter:creator" content="@captbaritone" />
+      <meta name="twitter:title" content={pageTitle} />
+      <meta name="twitter:description" content={DESCRIPTION} />
+
+      {previewImageUrl ? (
+        <Image
+          alt="Screenshot of many Winamp skins in a grid."
+          url={previewImageUrl}
+          width={SCREENSHOT_WIDTH}
+          height={SCREENSHOT_HEIGHT}
+        />
+      ) : (
+        <Image
+          alt="Screenshot of many Winamp skins in a grid."
+          url="https://skins.webamp.org/preview_small.png"
+          width="1844"
+          height="1297"
+        />
+      )}
     </Helmet>
   );
 }
diff --git a/yarn.lock b/yarn.lock
index a92809eb..0ba8760f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11730,7 +11730,7 @@ prompts@^2.0.1:
     kleur "^3.0.3"
     sisteransi "^1.0.4"
 
-prop-types@^15.5.4, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -12068,10 +12068,10 @@ react-error-overlay@^6.0.3, react-error-overlay@^6.0.7:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.7.tgz#1dcfb459ab671d53f660a991513cb2f0a0553108"
   integrity sha512-TAv1KJFh3RhqxNvhzxj6LeT5NWklP6rDr2a0jaTfsZ5wSZWHOGeqQyejUp3xxLfPt2UpyJEcVQB/zyPcmonNFA==
 
-react-fast-compare@^2.0.2:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
-  integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
+react-fast-compare@^3.1.1:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb"
+  integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==
 
 react-group@^3.0.2:
   version "3.0.2"
@@ -12080,15 +12080,15 @@ react-group@^3.0.2:
   dependencies:
     prop-types "^15.7.2"
 
-react-helmet@^5.2.1:
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/react-helmet/-/react-helmet-5.2.1.tgz#16a7192fdd09951f8e0fe22ffccbf9bb3e591ffa"
-  integrity sha512-CnwD822LU8NDBnjCpZ4ySh8L6HYyngViTZLfBBb3NjtrpN8m49clH8hidHouq20I51Y6TpCTISCBbqiY5GamwA==
+react-helmet@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/react-helmet/-/react-helmet-6.1.0.tgz#a750d5165cb13cf213e44747502652e794468726"
+  integrity sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==
   dependencies:
     object-assign "^4.1.1"
-    prop-types "^15.5.4"
-    react-fast-compare "^2.0.2"
-    react-side-effect "^1.1.0"
+    prop-types "^15.7.2"
+    react-fast-compare "^3.1.1"
+    react-side-effect "^2.1.0"
 
 react-icons@^3.8.0:
   version "3.9.0"
@@ -12173,12 +12173,10 @@ react-scripts@^3.4.1:
   optionalDependencies:
     fsevents "2.1.2"
 
-react-side-effect@^1.1.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/react-side-effect/-/react-side-effect-1.2.0.tgz#0e940c78faba0c73b9b0eba9cd3dda8dfb7e7dae"
-  integrity sha512-v1ht1aHg5k/thv56DRcjw+WtojuuDHFUgGfc+bFHOWsF4ZK6C2V57DO0Or0GPsg6+LSTE0M6Ry/gfzhzSwbc5w==
-  dependencies:
-    shallowequal "^1.0.1"
+react-side-effect@^2.1.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/react-side-effect/-/react-side-effect-2.1.1.tgz#66c5701c3e7560ab4822a4ee2742dee215d72eb3"
+  integrity sha512-2FoTQzRNTncBVtnzxFOk2mCpcfxQpenBMbk5kSVBg5UcPqV9fRbgY2zhb7GTWWOlpFmAxhClBDlIq8Rsubz1yQ==
 
 react-simple-code-editor@^0.10.0:
   version "0.10.0"
@@ -13168,11 +13166,6 @@ shallow-clone@^3.0.0:
   dependencies:
     kind-of "^6.0.2"
 
-shallowequal@^1.0.1:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
-  integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==
-
 shebang-command@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"