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 (
+ <>
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ >
+ );
+}
+
+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 (
- {props.pageTitle}
-
-
-
+
+ {pageTitle}
+
+
+
+
+
+
- {props.previewImageUrl && [
- ,
- ,
- ,
- ,
- ,
- ]}
+
+
+
+
+
+
+ {previewImageUrl ? (
+
+ ) : (
+
+ )}
);
}
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"