Change title & meta tags on cell/mod selection

This commit is contained in:
2022-02-14 00:38:21 -05:00
parent 11be05854f
commit bf994d896f
3 changed files with 89 additions and 7 deletions

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>{" "}

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}`}