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 = {
reactStrictMode: true,
images: {
domains: [
'cdn.scoresaber.com',
'bs-overlay.fascinated.cc',
'localhost:3000'
],
}
}
// reactStrictMode: true,
images: {
remotePatterns: [
{
protocol: "https",
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",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "npm i && next build && next start -p 3001",
"lint": "next lint"
},
"dependencies": {
"@emotion/cache": "^11.10.3",
"@emotion/server": "^11.10.0",
"@nextui-org/react": "^1.0.0-beta.10",
"ioredis": "^5.2.3",
"next": "13",
"next-seo": "^5.8.0",
"next-themes": "^0.2.1",
"node-fetch": "^3.2.10",
"prop-types": "^15.8.1",
"react": "^18.2.0",
"react-country-flag": "^3.0.2",
"react-dom": "^18.2.0",
"react-toastify": "^9.0.8",
"sharp": "^0.31.1"
},
"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"
}
"name": "beatsaber-overlay",
"private": true,
"scripts": {
"dev": "set APP_ENV=development && next dev",
"build": "next build",
"start": "APP_ENV=production npm i && next build && next start -p 3001",
"lint": "next lint"
},
"dependencies": {
"@emotion/cache": "^11.10.3",
"@emotion/server": "^11.10.0",
"@next/font": "^13.0.0",
"@nextui-org/react": "^1.0.0-beta.10",
"crypto": "^1.0.1",
"events": "^3.3.0",
"fs": "^0.0.1-security",
"ioredis": "^5.2.3",
"next": "^13.0.0",
"next-seo": "^5.8.0",
"next-themes": "^0.2.1",
"node-fetch": "^3.2.10",
"prop-types": "^15.8.1",
"react": "^18.2.0",
"react-country-flag": "^3.0.2",
"react-dom": "^18.2.0",
"react-toastify": "^9.0.8",
"sharp": "^0.31.1",
"styled-components": "^5.3.6"
},
"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 (
<div className={styles.playerStatsContainer}>
<div>
<Avatar url={props.avatar} />
<Avatar url={`https://cdn.scoresaber.com/avatars/${props.id}.jpg`} />
</div>
<div className={styles.playerStats}>
<p>

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

@ -16,15 +16,6 @@ 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"
/>
<link
href="https://fonts.googleapis.com/css2?family=Teko:wght@300&display=swap"
rel="stylesheet"
/>
<link rel="shortcut icon" href="/favicon.ico" />
<meta

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

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

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

1013
yarn.lock

File diff suppressed because it is too large Load Diff