Add better SEO

This commit is contained in:
Liam 2022-10-21 10:56:50 +01:00
parent 8e607cda18
commit 792c92c526
4 changed files with 81 additions and 71 deletions

@ -1,5 +1,5 @@
import { createTheme, NextUIProvider } from "@nextui-org/react"; 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 { ThemeProvider as NextThemesProvider } from "next-themes";
import "../styles/globals.css"; import "../styles/globals.css";
@ -19,38 +19,40 @@ const darkTheme = createTheme({
function MyApp({ Component, pageProps }) { function MyApp({ Component, pageProps }) {
return ( return (
<NextThemesProvider <>
storageKey="theme" <DefaultSeo
attribute="class" titleTemplate={`${process.env.NEXT_PUBLIC_SITE_NAME} | %s`}
value={{ description={process.env.NEXT_PUBLIC_SITE_DESCRIPTION}
dark: darkTheme, openGraph={{
light: lightTheme, url: process.env.NEXT_PUBLIC_SITE_URL,
}} title: process.env.NEXT_PUBLIC_SITE_NAME,
> description: process.env.NEXT_PUBLIC_SITE_DESCRIPTION,
<NextUIProvider> site_name: process.env.NEXT_PUBLIC_SITE_NAME,
<NextSeo images: [
title={process.env.NEXT_PUBLIC_SITE_NAME} {
description={process.env.NEXT_PUBLIC_SITE_DESCRIPTION} url: "https://cdn.fascinated.cc/fHknFPctAC.png?raw=true",
openGraph={{ alt: "Site Example",
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, twitter={{
images: [ cardType: "summary_large_image",
{ site: "@BeatSaber Overlay",
url: "https://cdn.fascinated.cc/fHknFPctAC.png?raw=true", }}
alt: "Site Example", />
}, <NextThemesProvider
], storageKey="theme"
}} attribute="class"
twitter={{ value={{
cardType: "summary_large_image", dark: darkTheme,
site: "@BeatSaber Overlay", light: lightTheme,
}} }}
/> >
<Component {...pageProps} /> <NextUIProvider>
</NextUIProvider> <Component {...pageProps} />
</NextThemesProvider> </NextUIProvider>
</NextThemesProvider>
</>
); );
} }

@ -16,6 +16,7 @@ class MyDocument extends Document {
<Html lang="en"> <Html lang="en">
<Head> <Head>
{CssBaseline.flush()} {CssBaseline.flush()}
<link <link
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap"
rel="stylesheet" rel="stylesheet"

@ -18,6 +18,7 @@ import NavBar from "../src/components/Navbar";
import { toast, ToastContainer } from "react-toastify"; import { toast, ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css"; import "react-toastify/dist/ReactToastify.css";
import { NextSeo } from "next-seo";
import Utils from "../src/utils/utils"; import Utils from "../src/utils/utils";
import styles from "../styles/main.module.css"; import styles from "../styles/main.module.css";
@ -152,6 +153,8 @@ export default class Home extends Component {
<div className={styles.main}> <div className={styles.main}>
<NavBar avatarUrl={this.state.avatarUrl}></NavBar> <NavBar avatarUrl={this.state.avatarUrl}></NavBar>
<NextSeo title="Builder"></NextSeo>
<Container <Container
css={{ css={{
marginTop: "$8", marginTop: "$8",

@ -1,4 +1,5 @@
import { Link, Spinner } from "@nextui-org/react"; import { Link, Spinner } from "@nextui-org/react";
import { NextSeo } from "next-seo";
import { Component } from "react"; import { Component } from "react";
import PlayerStats from "../src/components/PlayerStats"; import PlayerStats from "../src/components/PlayerStats";
import ScoreStats from "../src/components/ScoreStats"; import ScoreStats from "../src/components/ScoreStats";
@ -437,44 +438,47 @@ export default class Overlay extends Component {
} }
return ( return (
<div className={styles.main}> <>
{!isValidSteamId ? ( <NextSeo title="Overlay"></NextSeo>
<div className={styles.invalidPlayer}> <div className={styles.main}>
<h1>Invalid player, please visit the main page.</h1> {!isValidSteamId ? (
<Link href="/"> <div className={styles.invalidPlayer}>
<a>Go Home</a> <h1>Invalid player, please visit the main page.</h1>
</Link> <Link href="/">
</div> <a>Go Home</a>
) : ( </Link>
<div className={styles.overlay}> </div>
{showPlayerStats && !loadingPlayerData ? ( ) : (
<PlayerStats <div className={styles.overlay}>
pp={data.pp.toLocaleString()} {showPlayerStats && !loadingPlayerData ? (
globalPos={data.rank.toLocaleString()} <PlayerStats
country={data.country} pp={data.pp.toLocaleString()}
countryRank={data.countryRank.toLocaleString()} globalPos={data.rank.toLocaleString()}
websiteType={websiteType} country={data.country}
avatar={`/api/steamavatar?steamid=${id}`} countryRank={data.countryRank.toLocaleString()}
loadedDuringSong={this.state.loadedDuringSong} websiteType={websiteType}
/> avatar={`/api/steamavatar?steamid=${id}`}
) : ( loadedDuringSong={this.state.loadedDuringSong}
<></> />
)} ) : (
{this.state.showScore && this.state.isVisible ? ( <></>
<ScoreStats data={this.state} /> )}
) : ( {this.state.showScore && this.state.isVisible ? (
<></> <ScoreStats data={this.state} />
)} ) : (
{this.state.showSongInfo && <></>
this.state.beatSaverData !== undefined && )}
this.state.isVisible ? ( {this.state.showSongInfo &&
<SongInfo data={this.state} /> this.state.beatSaverData !== undefined &&
) : ( this.state.isVisible ? (
<></> <SongInfo data={this.state} />
)} ) : (
</div> <></>
)} )}
</div> </div>
)}
</div>
</>
); );
} }
} }