mirror of
https://github.com/captbaritone/webamp.git
synced 2026-07-23 10:07:35 +00:00
Attempt to remove duplicate head tags
This commit is contained in:
Jordan Eldredge
parent
9bfc6d65b0
commit
01379b0f2b
3 changed files with 78 additions and 62 deletions
|
|
@ -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",
|
||||
|
|
|
|||
99
src/Head.js
99
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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
39
yarn.lock
39
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"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue