Fix NextJS 13 errors and now using new font compontent

This commit is contained in:
Liam 2022-10-26 10:11:39 +01:00
parent 7c25832862
commit 647aa5fbce
11 changed files with 10613 additions and 9255 deletions

12
.env.development Normal file

@ -0,0 +1,12 @@
NEXT_PUBLIC_HTTP_PROXY="https://proxy.fascinated.cc"
NEXT_PUBLIC_SITE_NAME="BeatSaber Overlay"
NEXT_PUBLIC_SITE_TITLE="BeatSaber Overlay - Simple and easy to use BeatSaber overlay"
NEXT_PUBLIC_SITE_DESCRIPTION="Free, simple, and easy to use beat saber overlay for OBS"
NEXT_PUBLIC_SITE_COLOR="#0EBFE9"
NEXT_PUBLIC_SITE_URL="https://bs-overlay.fascinated.cc"
REDIS_PORT="6379"
REDIS_HOST="195.154.220.97"
REDIS_PASSWORD="zgrq2L7TmhRLvwrBcosaSLi3pMjq6x7Arz4W2M3zDHt4"
REDIS_DATABASE="0"

@ -1,10 +1,11 @@
module.exports = { module.exports = {
reactStrictMode: true, // reactStrictMode: true,
images: { images: {
domains: [ remotePatterns: [
'cdn.scoresaber.com', {
'bs-overlay.fascinated.cc', protocol: "https",
'localhost:3000' hostname: "**.scoresaber.com",
], },
} ],
} },
};

18725
package-lock.json generated

File diff suppressed because it is too large Load Diff

@ -1,33 +1,38 @@
{ {
"name": "beatsaber-overlay", "name": "beatsaber-overlay",
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "next dev", "dev": "set APP_ENV=development && next dev",
"build": "next build", "build": "next build",
"start": "npm i && next build && next start -p 3001", "start": "APP_ENV=production npm i && next build && next start -p 3001",
"lint": "next lint" "lint": "next lint"
}, },
"dependencies": { "dependencies": {
"@emotion/cache": "^11.10.3", "@emotion/cache": "^11.10.3",
"@emotion/server": "^11.10.0", "@emotion/server": "^11.10.0",
"@nextui-org/react": "^1.0.0-beta.10", "@next/font": "^13.0.0",
"ioredis": "^5.2.3", "@nextui-org/react": "^1.0.0-beta.10",
"next": "13", "crypto": "^1.0.1",
"next-seo": "^5.8.0", "events": "^3.3.0",
"next-themes": "^0.2.1", "fs": "^0.0.1-security",
"node-fetch": "^3.2.10", "ioredis": "^5.2.3",
"prop-types": "^15.8.1", "next": "^13.0.0",
"react": "^18.2.0", "next-seo": "^5.8.0",
"react-country-flag": "^3.0.2", "next-themes": "^0.2.1",
"react-dom": "^18.2.0", "node-fetch": "^3.2.10",
"react-toastify": "^9.0.8", "prop-types": "^15.8.1",
"sharp": "^0.31.1" "react": "^18.2.0",
}, "react-country-flag": "^3.0.2",
"devDependencies": { "react-dom": "^18.2.0",
"@types/node": "^18.11.5", "react-toastify": "^9.0.8",
"@types/react": "^18.0.23", "sharp": "^0.31.1",
"eslint": "8.26.0", "styled-components": "^5.3.6"
"eslint-config-next": "13.0.0", },
"typescript": "^4.8.4" "devDependencies": {
} "@types/node": "^18.11.5",
"@types/react": "^18.0.23",
"eslint": "8.26.0",
"eslint-config-next": "^13.0.0",
"typescript": "^4.8.4"
}
} }

@ -7,7 +7,7 @@ const PlayerStats = (props) => {
return ( return (
<div className={styles.playerStatsContainer}> <div className={styles.playerStatsContainer}>
<div> <div>
<Avatar url={props.avatar} /> <Avatar url={`https://cdn.scoresaber.com/avatars/${props.id}.jpg`} />
</div> </div>
<div className={styles.playerStats}> <div className={styles.playerStats}>
<p> <p>

@ -19,7 +19,7 @@ const darkTheme = createTheme({
function MyApp({ Component, pageProps }) { function MyApp({ Component, pageProps }) {
return ( return (
<> <div>
<DefaultSeo <DefaultSeo
titleTemplate={`${process.env.NEXT_PUBLIC_SITE_NAME} | %s`} titleTemplate={`${process.env.NEXT_PUBLIC_SITE_NAME} | %s`}
description={process.env.NEXT_PUBLIC_SITE_DESCRIPTION} description={process.env.NEXT_PUBLIC_SITE_DESCRIPTION}
@ -52,7 +52,7 @@ function MyApp({ Component, pageProps }) {
<Component {...pageProps} /> <Component {...pageProps} />
</NextUIProvider> </NextUIProvider>
</NextThemesProvider> </NextThemesProvider>
</> </div>
); );
} }

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

@ -1,3 +1,4 @@
import { Teko } from "@next/font/google";
import { Link, Spinner } from "@nextui-org/react"; import { Link, Spinner } from "@nextui-org/react";
import { NextSeo } from "next-seo"; import { NextSeo } from "next-seo";
import { Component } from "react"; import { Component } from "react";
@ -9,6 +10,11 @@ import Utils from "../../src/utils/utils";
import styles from "../styles/overlay.module.css"; import styles from "../styles/overlay.module.css";
const teko = Teko({
weight: "300",
subsets: ["latin"],
});
export default class Overlay extends Component { export default class Overlay extends Component {
#_beatSaverURL = ""; #_beatSaverURL = "";
@ -440,7 +446,7 @@ export default class Overlay extends Component {
} }
return ( return (
<> <div className={teko.className}>
<NextSeo title="Overlay"></NextSeo> <NextSeo title="Overlay"></NextSeo>
<div className={styles.main}> <div className={styles.main}>
{!isValidSteamId ? ( {!isValidSteamId ? (
@ -454,6 +460,7 @@ export default class Overlay extends Component {
<div className={styles.overlay}> <div className={styles.overlay}>
{showPlayerStats && !loadingPlayerData ? ( {showPlayerStats && !loadingPlayerData ? (
<PlayerStats <PlayerStats
id={id}
pp={data.pp.toLocaleString("en-US", { pp={data.pp.toLocaleString("en-US", {
maximumFractionDigits: 2, maximumFractionDigits: 2,
minimumFractionDigits: 2, minimumFractionDigits: 2,
@ -462,7 +469,6 @@ export default class Overlay extends Component {
country={data.country} country={data.country}
countryRank={data.countryRank.toLocaleString()} countryRank={data.countryRank.toLocaleString()}
websiteType={websiteType} websiteType={websiteType}
avatar={`https://cdn.scoresaber.com/avatars/${id}.jpg`}
loadedDuringSong={this.state.loadedDuringSong} loadedDuringSong={this.state.loadedDuringSong}
/> />
) : ( ) : (
@ -483,7 +489,7 @@ export default class Overlay extends Component {
</div> </div>
)} )}
</div> </div>
</> </div>
); );
} }
} }

@ -1,5 +1,4 @@
.main { .main {
font-family: "Roboto", sans-serif !important;
color: white; color: white;
font-size: xx-large; font-size: xx-large;
line-height: 1.4em !important; line-height: 1.4em !important;

@ -1,12 +1,12 @@
.main { .main {
font-family: "Teko", sans-serif !important; font-family: inherit !important;
color: white; color: white;
font-size: xx-large; font-size: xx-large;
line-height: 1.4em !important; line-height: 1.4em !important;
} }
.main p { .main p {
font-family: "Teko", sans-serif !important; font-family: inherit !important;
color: white; color: white;
letter-spacing: normal; letter-spacing: normal;
} }

1013
yarn.lock

File diff suppressed because it is too large Load Diff