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 React from "react";
import useSWRImmutable from "swr/immutable"; import useSWRImmutable from "swr/immutable";
@ -68,6 +69,41 @@ const CellData: React.FC<Props> = ({ selectedCell, counts }) => {
return ( return (
selectedCell && ( 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"]}> <ul className={styles["cell-data-list"]}>
<li> <li>
<strong>Form ID:</strong>{" "} <strong>Form ID:</strong>{" "}

34
components/ModData.tsx
View File

@ -1,4 +1,5 @@
import { format } from "date-fns"; import { format } from "date-fns";
import Head from "next/head";
import React from "react"; import React from "react";
import useSWRImmutable from "swr/immutable"; import useSWRImmutable from "swr/immutable";
@ -81,6 +82,39 @@ const ModData: React.FC<Props> = ({
if (selectedMod && data) { if (selectedMod && data) {
return ( 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> <h1>
<a <a
href={`${NEXUS_MODS_URL}/mods/${data.nexus_mod_id}`} href={`${NEXUS_MODS_URL}/mods/${data.nexus_mod_id}`}

26
pages/index.tsx
View File

@ -10,15 +10,23 @@ const Home: NextPage = () => {
<Head> <Head>
<meta charSet="utf-8" /> <meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Modmapper</title> <title key="title">Modmapper</title>
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
<meta name="description" content="Map of Skyrim mods" /> <meta
<meta property="og:title" content="Modmapper" /> 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: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:type" content="website" />
<meta property="og:url" content="https://modmapper.com" /> <meta key="og:url" property="og:url" content="https://modmapper.com" />
<meta <meta
property="og:image" property="og:image"
content="https://modmapper.com/img/screenshot.jpg" content="https://modmapper.com/img/screenshot.jpg"
@ -27,8 +35,12 @@ const Home: NextPage = () => {
property="og:image:alt" 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" 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 key="twitter:title" name="twitter:title" content="Modmapper" />
<meta name="twitter:description" content="Map of Skyrim mods" /> <meta
key="twitter:description"
name="twitter:description"
content="Map of Skyrim mods"
/>
<meta <meta
name="twitter:image" name="twitter:image"
content="https://modmapper.com/img/screenshot.jpg" content="https://modmapper.com/img/screenshot.jpg"