From 792c92c526872d840ad944d86f18814cca51e6cb Mon Sep 17 00:00:00 2001
From: Liam <67254223+RealFascinated@users.noreply.github.com>
Date: Fri, 21 Oct 2022 10:56:50 +0100
Subject: [PATCH] Add better SEO

---
 pages/_app.js      | 68 ++++++++++++++++++++-------------------
 pages/_document.js |  1 +
 pages/index.js     |  3 ++
 pages/overlay.js   | 80 ++++++++++++++++++++++++----------------------
 4 files changed, 81 insertions(+), 71 deletions(-)
diff --git a/pages/_app.js b/pages/_app.js
index 82c53aa..3cbe125 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -1,5 +1,5 @@
 import { createTheme, NextUIProvider } from "@nextui-org/react";
-import { NextSeo } from "next-seo";
+import { DefaultSeo } from "next-seo";
 import { ThemeProvider as NextThemesProvider } from "next-themes";
 import "../styles/globals.css";
 
@@ -19,38 +19,40 @@ const darkTheme = createTheme({
 
 function MyApp({ Component, pageProps }) {
 	return (
-		<NextThemesProvider
-			storageKey="theme"
-			attribute="class"
-			value={{
-				dark: darkTheme,
-				light: lightTheme,
-			}}
-		>
-			<NextUIProvider>
-				<NextSeo
-					title={process.env.NEXT_PUBLIC_SITE_NAME}
-					description={process.env.NEXT_PUBLIC_SITE_DESCRIPTION}
-					openGraph={{
-						url: process.env.NEXT_PUBLIC_SITE_URL,
-						title: process.env.NEXT_PUBLIC_SITE_NAME,
-						description: process.env.NEXT_PUBLIC_SITE_DESCRIPTION,
-						site_name: process.env.NEXT_PUBLIC_SITE_NAME,
-						images: [
-							{
-								url: "https://cdn.fascinated.cc/fHknFPctAC.png?raw=true",
-								alt: "Site Example",
-							},
-						],
-					}}
-					twitter={{
-						cardType: "summary_large_image",
-						site: "@BeatSaber Overlay",
-					}}
-				/>
-				<Component {...pageProps} />
-			</NextUIProvider>
-		</NextThemesProvider>
+		<>
+			<DefaultSeo
+				titleTemplate={`${process.env.NEXT_PUBLIC_SITE_NAME} | %s`}
+				description={process.env.NEXT_PUBLIC_SITE_DESCRIPTION}
+				openGraph={{
+					url: process.env.NEXT_PUBLIC_SITE_URL,
+					title: process.env.NEXT_PUBLIC_SITE_NAME,
+					description: process.env.NEXT_PUBLIC_SITE_DESCRIPTION,
+					site_name: process.env.NEXT_PUBLIC_SITE_NAME,
+					images: [
+						{
+							url: "https://cdn.fascinated.cc/fHknFPctAC.png?raw=true",
+							alt: "Site Example",
+						},
+					],
+				}}
+				twitter={{
+					cardType: "summary_large_image",
+					site: "@BeatSaber Overlay",
+				}}
+			/>
+			<NextThemesProvider
+				storageKey="theme"
+				attribute="class"
+				value={{
+					dark: darkTheme,
+					light: lightTheme,
+				}}
+			>
+				<NextUIProvider>
+					<Component {...pageProps} />
+				</NextUIProvider>
+			</NextThemesProvider>
+		</>
 	);
 }
 
diff --git a/pages/_document.js b/pages/_document.js
index a593398..46431a4 100644
--- a/pages/_document.js
+++ b/pages/_document.js
@@ -16,6 +16,7 @@ class MyDocument extends Document {
 			<Html lang="en">
 				<Head>
 					{CssBaseline.flush()}
+
 					<link
 						href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap"
 						rel="stylesheet"
diff --git a/pages/index.js b/pages/index.js
index 2397fa6..ec3ae8b 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -18,6 +18,7 @@ import NavBar from "../src/components/Navbar";
 import { toast, ToastContainer } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
 
+import { NextSeo } from "next-seo";
 import Utils from "../src/utils/utils";
 import styles from "../styles/main.module.css";
 
@@ -152,6 +153,8 @@ export default class Home extends Component {
 			<div className={styles.main}>
 				<NavBar avatarUrl={this.state.avatarUrl}></NavBar>
 
+				<NextSeo title="Builder"></NextSeo>
+
 				<Container
 					css={{
 						marginTop: "$8",
diff --git a/pages/overlay.js b/pages/overlay.js
index 3a779b3..b8ee4a0 100644
--- a/pages/overlay.js
+++ b/pages/overlay.js
@@ -1,4 +1,5 @@
 import { Link, Spinner } from "@nextui-org/react";
+import { NextSeo } from "next-seo";
 import { Component } from "react";
 import PlayerStats from "../src/components/PlayerStats";
 import ScoreStats from "../src/components/ScoreStats";
@@ -437,44 +438,47 @@ export default class Overlay extends Component {
 		}
 
 		return (
-			<div className={styles.main}>
-				{!isValidSteamId ? (
-					<div className={styles.invalidPlayer}>
-						<h1>Invalid player, please visit the main page.</h1>
-						<Link href="/">
-							<a>Go Home</a>
-						</Link>
-					</div>
-				) : (
-					<div className={styles.overlay}>
-						{showPlayerStats && !loadingPlayerData ? (
-							<PlayerStats
-								pp={data.pp.toLocaleString()}
-								globalPos={data.rank.toLocaleString()}
-								country={data.country}
-								countryRank={data.countryRank.toLocaleString()}
-								websiteType={websiteType}
-								avatar={`/api/steamavatar?steamid=${id}`}
-								loadedDuringSong={this.state.loadedDuringSong}
-							/>
-						) : (
-							<></>
-						)}
-						{this.state.showScore && this.state.isVisible ? (
-							<ScoreStats data={this.state} />
-						) : (
-							<></>
-						)}
-						{this.state.showSongInfo &&
-						this.state.beatSaverData !== undefined &&
-						this.state.isVisible ? (
-							<SongInfo data={this.state} />
-						) : (
-							<></>
-						)}
-					</div>
-				)}
-			</div>
+			<>
+				<NextSeo title="Overlay"></NextSeo>
+				<div className={styles.main}>
+					{!isValidSteamId ? (
+						<div className={styles.invalidPlayer}>
+							<h1>Invalid player, please visit the main page.</h1>
+							<Link href="/">
+								<a>Go Home</a>
+							</Link>
+						</div>
+					) : (
+						<div className={styles.overlay}>
+							{showPlayerStats && !loadingPlayerData ? (
+								<PlayerStats
+									pp={data.pp.toLocaleString()}
+									globalPos={data.rank.toLocaleString()}
+									country={data.country}
+									countryRank={data.countryRank.toLocaleString()}
+									websiteType={websiteType}
+									avatar={`/api/steamavatar?steamid=${id}`}
+									loadedDuringSong={this.state.loadedDuringSong}
+								/>
+							) : (
+								<></>
+							)}
+							{this.state.showScore && this.state.isVisible ? (
+								<ScoreStats data={this.state} />
+							) : (
+								<></>
+							)}
+							{this.state.showSongInfo &&
+							this.state.beatSaverData !== undefined &&
+							this.state.isVisible ? (
+								<SongInfo data={this.state} />
+							) : (
+								<></>
+							)}
+						</div>
+					)}
+				</div>
+			</>
 		);
 	}
 }
