thallada/modmapper-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Change title & meta tags on cell/mod selection

Browse Source
This commit is contained in:
Tyler Hallada 2022-02-14 00:38:21 -05:00
parent 11be05854f
commit bf994d896f
3 changed files with 89 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
components/CellData.tsx
View File

@ -1,3 +1,4 @@
import Head from "next/head";
import React from "react";
import useSWRImmutable from "swr/immutable";
@ -68,6 +69,41 @@ const CellData: React.FC<Props> = ({ selectedCell, counts }) => {
return (
selectedCell && (
<>
<Head>
<title key="title">{`Modmapper - Cell ${data.x}, ${data.y}`}</title>
<meta
key="description"
name="description"
content={`Map of Skyrim showing ${data.mods_count} mods that edit cell ${data.x}, ${data.y}`}
/>
<meta
key="og:title"
property="og:title"
content={`Modmapper - Cell ${data.x}, ${data.y}`}
/>
<meta
key="og:description"
property="og:description"
content={`Map of Skyrim showing ${data.mods_count} mods that edit cell ${data.x}, ${data.y}`}
/>
<meta
key="twitter:title"
name="twitter:title"
content={`Modmapper - Cell ${data.x}, ${data.y}`}
/>
<meta
key="twitter:description"
name="twitter:description"
content={`Map of Skyrim showing ${data.mods_count} mods that edit cell ${data.x}, ${data.y}`}
/>
<meta
key="og:url"
property="og:url"
content={`https://modmapper.com/?cell=${encodeURIComponent(
`${data.x},${data.y}`
)}`}
/>
</Head>
<ul className={styles["cell-data-list"]}>
<li>
<strong>Form ID:</strong>{" "}

34
components/ModData.tsx
View File

@ -1,4 +1,5 @@
import { format } from "date-fns";
import Head from "next/head";
import React from "react";
import useSWRImmutable from "swr/immutable";
@ -81,6 +82,39 @@ const ModData: React.FC<Props> = ({
if (selectedMod && data) {
return (
<>
<Head>
<title key="title">{`Modmapper - ${data.name}`}</title>
<meta
key="description"
name="description"
content={`Map of Skyrim showing ${data.cells.length} cell edits from the mod: ${data.name}`}
/>
<meta
key="og:title"
property="og:title"
content={`Modmapper - ${data.name}`}
/>
<meta
key="og:description"
property="og:description"
content={`Map of Skyrim showing ${data.cells.length} cell edits from the mod: ${data.name}`}
/>
<meta
key="twitter:title"
name="twitter:title"
content={`Modmapper - ${data.name}`}
/>
<meta
key="twitter:description"
name="twitter:description"
content={`Map of Skyrim showing ${data.cells.length} cell edits from the mod: ${data.name}`}
/>
<meta
key="og:url"
property="og:url"
content={`https://modmapper.com/?mod=${data.nexus_mod_id}`}
/>
</Head>
<h1>
<a
href={`${NEXUS_MODS_URL}/mods/${data.nexus_mod_id}`}

26
pages/index.tsx
View File

@ -10,15 +10,23 @@ const Home: NextPage = () => {
<Head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Modmapper</title>
<title key="title">Modmapper</title>
<link rel="icon" href="/favicon.ico" />
<meta name="description" content="Map of Skyrim mods" />
<meta property="og:title" content="Modmapper" />
<meta
key="description"
name="description"
content="Map of Skyrim mods"
/>
<meta key="og:title" property="og:title" content="Modmapper" />
<meta property="og:site_name" content="Modmapper"></meta>
<meta property="og:description" content="Map of Skyrim mods" />
<meta
key="og:description"
property="og:description"
content="Map of Skyrim mods"
/>
<meta property="og:type" content="website" />
<meta property="og:url" content="https://modmapper.com" />
<meta key="og:url" property="og:url" content="https://modmapper.com" />
<meta
property="og:image"
content="https://modmapper.com/img/screenshot.jpg"
@ -27,8 +35,12 @@ const Home: NextPage = () => {
property="og:image:alt"
content="A screenshot of Modmapper displaying a map of Skyrim with a grid of cells overlayed colored green to red indicating how many mods edited each cell"
/>
<meta name="twitter:title" content="Modmapper" />
<meta name="twitter:description" content="Map of Skyrim mods" />
<meta key="twitter:title" name="twitter:title" content="Modmapper" />
<meta
key="twitter:description"
name="twitter:description"
content="Map of Skyrim mods"
/>
<meta
name="twitter:image"
content="https://modmapper.com/img/screenshot.jpg"