chore(deps): update nextjs monorepo to v14

Reviewed-on: #10

-ignore .gitea/workflows/publish.yaml

@@ -1,15 +0,0 @@
-name: Gitea Actions Demo
-run-name: ${{ github.actor }} is testing out Gitea Actions
-on: [push]
-jobs:
-  Explore-Gitea-Actions:
-    runs-on: ubuntu-20.04
-    steps:
-      - run: echo "The job was automatically triggered by a ${{ github.event_name }} event."
-      - run: echo "This job is now running on a ${{ runner.os }} server hosted by Gitea!"
-      - run: echo "The name of your branch is ${{ github.ref }} and your repository is ${{ github.repository }}."
-      - name: Check out repository code
-        uses: actions/checkout@v3
-      - run: echo "The ${{ github.repository }} repository has been cloned to the runner."
-      - run: echo "The workflow is now ready to test your code on the runner."
-      - run: echo "This job's status is ${{ job.status }}."

.drone.yml

@@ -1,71 +0,0 @@
-kind: pipeline
-type: docker
-name: default
-
-steps:
-  - name: restore-cache
-    image: drillster/drone-volume-cache
-    volumes:
-      - name: cache
-        path: /cache
-    settings:
-      restore: true
-      mount:
-        - ./node_modules
-
-  - name: install depends
-    image: node:18
-    commands:
-      - npm install
-
-  - name: rebuild-cache
-    image: drillster/drone-volume-cache
-    volumes:
-      - name: cache
-        path: /cache
-    settings:
-      rebuild: true
-      mount:
-        - ./node_modules
-
-  # Other branches
-  - name: test
-    image: node:18
-    when:
-      branch:
-        exclude:
-          - main
-    commands:
-      - npm run lint
-
-  # Main branches
-  - name: docker
-    image: plugins/docker
-    when:
-      branch:
-        - main
-    settings:
-      username:
-        from_secret: dockerhub_username
-      password:
-        from_secret: dockerhub_password
-      repo: fascinated/beatsaber-overlay
-      tags: latest
-
-volumes:
-  - name: cache
-    host:
-      path: /tmp/cache
-# deploy:
-#   image: alpine:latest
-#   stage: deploy
-#   tags:
-#   script:
-#     - chmod og= $ID_RSA
-#     - apk update && apk add openssh-client
-#     - ssh -i $ID_RSA -o StrictHostKeyChecking=no $SERVER_USER@$SERVER_IP "cd /home/overlay && docker compose pull && docker compose up -d && docker image prune -f"
-#   environment:
-#     name: production
-#     url: https://bs-overlay.fascinated.cc
-#   only:
-#     - main

.eslintrc.json

@@ -1,3 +1,4 @@
 {
+  "parser": "@babel/eslint-parser",
   "extends": "next/core-web-vitals"
 }

.gitea/workflows/publish.yaml

@@ -1,15 +1,58 @@
-name: Gitea Actions Demo
+name: Publish
-run-name: ${{ github.actor }} is testing out Gitea Actions
+
-on: [push]
+on:
-jobs:
+  push:
-  Explore-Gitea-Actions:
+    branches:
-    runs-on: ubuntu-20.04
+      - "main"
-    steps:
+      - "development"
-      - run: echo "The job was automatically triggered by a ${{ github.event_name }} event."
+
-      - run: echo "This job is now running on a ${{ runner.os }} server hosted by Gitea!"
+jobs:
-      - run: echo "The name of your branch is ${{ github.ref }} and your repository is ${{ github.repository }}."
+  docker:
-      - name: Check out repository code
+    runs-on: ubuntu-22.04
-        uses: actions/checkout@v3
+    container: fascinated/docker-images:node-latest
-      - run: echo "The ${{ github.repository }} repository has been cloned to the runner."
+    steps:
-      - run: echo "The workflow is now ready to test your code on the runner."
+      - name: Get branch name
-      - run: echo "This job's status is ${{ job.status }}."
+        id: branch-name
+        uses: tj-actions/branch-names@v7
+
+      - name: checkout
+        uses: actions/checkout@v4
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Login to Repo
+        uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.REPO_USERNAME }}
+          password: ${{ secrets.REPO_TOKEN }}
+
+      - name: Restore Docker Build Cache
+        uses: actions/cache@v3
+        id: build-cache
+        with:
+          path: /tmp/.buildx-cache
+          key: ${{ runner.os }}-buildx
+
+      - name: Build and Push (Latest)
+        uses: docker/build-push-action@v5
+        if: steps.branch-name.outputs.current_branch == 'main'
+        with:
+          push: true
+          context: .
+          tags: fascinated/beatsaber-overlay:latest
+
+      - name: Build and Push (Other Branches)
+        uses: docker/build-push-action@v5
+        if: steps.branch-name.outputs.current_branch != 'main'
+        with:
+          push: true
+          context: .
+          tags: fascinated/beatsaber-overlay:${{ steps.branch-name.outputs.current_branch }}
+
+      - name: Save Docker Build Cache
+        id: build-cache
+        uses: actions/cache/save@v3
+        with:
+          path: /tmp/.buildx-caches
+          key: ${{ runner.os }}-buildx

.gitignore

@@ -4,6 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
+package-lock.json
 
 # testing
 /coverage
@@ -37,4 +38,7 @@ yarn-error.log*
 .vercel
 
 # IntelliJ
-.idea
+.idea
+
+# Ignore Yarn
+yarn.lock

Dockerfile

@@ -1,62 +1,39 @@
-# Install dependencies only when needed
+FROM fascinated/docker-images:node-pnpm-latest AS base
-FROM node:19 AS deps
+
-# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
+# Install depends
-#RUN apk add libc6-compat
+FROM base AS deps
+RUN apk add --no-cache libc6-compat
 WORKDIR /app
+COPY package.json* pnpm-lock.yaml* ./
+RUN pnpm install --production --frozen-lockfile --quiet
 
-# Install dependencies based on the preferred package manager
+# Build from source
-COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
+FROM base AS builder
-
-# Copy cached files
-#COPY node_modules ./
-
-#RUN npm i
-
-RUN \
-  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
-  elif [ -f package-lock.json ]; then npm ci; \
-  elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i --frozen-lockfile; \
-  else echo "Lockfile not found." && exit 1; \
-  fi
-
-# Rebuild the source code only when needed
-FROM node:19 AS builder
 WORKDIR /app
 COPY --from=deps /app/node_modules ./node_modules
 COPY . .
-
 ENV NEXT_TELEMETRY_DISABLED 1
+RUN pnpm build
 
-# Build the project
+# Run the app
-RUN yarn build 
+FROM base AS runner
-
-# Production image, copy all the files and run next
-FROM node:19-alpine AS runner
 WORKDIR /app
 
 ENV NODE_ENV production
 ENV NEXT_TELEMETRY_DISABLED 1
 
-RUN addgroup -g 1001 -S nodejs
-RUN adduser -S nextjs -u 1001
-
 COPY --from=builder /app/public ./public
 
 # Automatically leverage output traces to reduce image size
 # https://nextjs.org/docs/advanced-features/output-file-tracing
-COPY --from=builder --chown=nextjs:nodejs /app/next.config.js ./
+COPY --from=builder /app/next.config.js ./
-COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder /app/.next/standalone ./
-COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+COPY --from=builder /app/.next/static ./.next/static
-COPY --from=builder --chown=nextjs:nodejs /app/public ./.next/static
+COPY --from=builder /app/public ./.next/static
 
 RUN npm i -g @beam-australia/react-env
 
-RUN chown -R nextjs:nodejs /app
-
-USER nextjs
-
 EXPOSE 3000
-
+ENV HOSTNAME "0.0.0.0"
 ENV PORT 3000
-
+CMD npx react-env --env APP_ENV && pnpm start
-CMD npx react-env --env APP_ENV && yarn start

README.md

@@ -1,10 +1,8 @@
 # BeatSaber Overlay with real-time data from HttpSiraStatus
 
-[![Build Status](https://drone.fascinated.cc/api/badges/Fascinated/beatsaber-overlay/status.svg)](https://drone.fascinated.cc/Fascinated/beatsaber-overlay)
+The project is on my [Gitea](https://git.fascinated.cc/Fascinated/beatsaber-overlay) now, but the repo will be kept in sync on GitHub. <br />
-
-The project is on my [Gitea](https://git.fascinated.cc/Fascinated/beatsaber-overlay) now, but the repo will be kept in sync here. <br />
 The public url to view/use: <https://bs-overlay.fascinated.cc> <br />
-Need help? Feel free to message me at: Fascinated#7668
+Need help? Feel free to message me on Discord: Fascinated#7668 or Matrix: @fascinated:matrix.fascinated.cc
 
 ## Usage
 
@@ -15,13 +13,6 @@ Go to the [Wiki](https://git.fascinated.cc/Fascinated/beatsaber-overlay/wiki/Usa
 ![Overlay](./assets/overlay.png)
 ![Builder Menu](./assets/builder.png)
 
-## Todo
-
-- Add toggle for showing pp
-- Change the song time to a circular style in the song art
-- Add overall stream stats (avg acc, misses, highest combo)
-- Add option to scale the ui using css scale
-
 ## Getting started with developent
 
 - Clone the repo

docker-compose.yml

@@ -1,6 +1,6 @@
 services:
   beatsaber-overlay:
-    image: fascinated/beatsaber-overlay:latest
+    image: git.fascinated.cc/fascinated/beatsaber-overlay:latest
     restart: always
     env_file:
       - .env.production

package.json

@@ -1,40 +1,44 @@
 {
-	"name": "beatsaber-overlay",
+  "name": "beatsaber-overlay",
-	"private": true,
+  "private": true,
-	"scripts": {
+  "scripts": {
-		"dev": "react-env -- next",
+    "dev": "react-env -- next",
-		"build": "next build",
+    "build": "next build",
-		"start": "APP_ENV=production node server.js",
+    "start": "APP_ENV=production node server.js",
-		"lint": "next lint",
+    "lint": "next lint",
-		"update-depends": "npm-check -u"
+    "update-depends": "npm-check -u"
-	},
+  },
-	"dependencies": {
+  "dependencies": {
-		"@beam-australia/react-env": "^3.1.1",
+    "@babel/eslint-parser": "^7.22.15",
-		"@emotion/cache": "^11.10.5",
+    "@beam-australia/react-env": "^3.1.1",
-		"@emotion/server": "^11.10.0",
+    "@emotion/cache": "^11.11.0",
-		"@nextui-org/react": "^1.0.0-beta.12",
+    "@emotion/server": "^11.11.0",
-		"axios": "^1.3.4",
+    "@nextui-org/react": "1.0.0-beta.10",
-		"core-js-pure": "^3.29.1",
+    "@typescript-eslint/eslint-plugin": "^6.7.5",
-		"critters": "^0.0.16",
+    "@typescript-eslint/parser": "^6.7.5",
-		"ioredis": "^5.3.1",
+    "axios": "^1.5.1",
-		"next": "^13.2.4",
+    "core-js-pure": "^3.33.0",
-		"next-seo": "^5.15.0",
+    "critters": "^0.0.20",
-		"next-themes": "^0.2.1",
+    "ioredis": "^5.3.2",
-		"prop-types": "^15.8.1",
+    "next": "^14.0.0",
-		"react": "^18.2.0",
+    "next-seo": "^6.1.0",
-		"react-country-flag": "^3.0.2",
+    "next-themes": "^0.2.1",
-		"react-dom": "^18.2.0",
+    "prop-types": "^15.8.1",
-		"react-toastify": "^9.1.2",
+    "react": "^18.2.0",
-		"sharp": "^0.32.0",
+    "react-country-flag": "^3.1.0",
-		"websocket": "^1.0.34",
+    "react-dom": "^18.2.0",
-		"zustand": "^4.3.6"
+    "react-toastify": "^9.1.3",
-	},
+    "sharp": "^0.32.6",
-	"devDependencies": {
+    "websocket": "^1.0.34",
-		"@types/node": "^18.15.10",
+    "zustand": "^4.4.3"
-		"@types/react": "^18.0.29",
+  },
-		"@types/websocket": "^1.0.5",
+  "devDependencies": {
-		"eslint": "^8.36.0",
+    "@types/node": "^20.8.4",
-		"eslint-config-next": "^13.2.4",
+    "@types/react": "^18.2.28",
-		"typescript": "^5.0.2"
+    "@types/websocket": "^1.0.7",
-	}
+    "eslint": "^8.51.0",
+    "eslint-config-next": "^14.0.0",
+    "npm-check": "^6.0.1",
+    "typescript": "^5.2.2"
+  }
 }

renovate.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "extends": [
+    "local>Fascinated/renovate-config"
+  ]
+}

src/components/Navbar.js

@@ -2,19 +2,19 @@ import { Navbar, Text } from "@nextui-org/react";
 import Settings from "./Settings";
 
 const NavBar = (props) => {
-	return (
+  return (
-		<Navbar isBordered variant={"sticky"}>
+    <Navbar isBordered variant={"sticky"}>
-			<Navbar.Brand>
+      <Navbar.Brand>
-				<Text b color="inherit">
+        <Text b color="inherit">
-					BeatSaber Overlay
+          BeatSaber Overlay
-				</Text>
+        </Text>
-			</Navbar.Brand>
+      </Navbar.Brand>
 
-			<Navbar.Content>
+      <Navbar.Content>
-				<Settings {...props}></Settings>
+        <Settings {...props}></Settings>
-			</Navbar.Content>
+      </Navbar.Content>
-		</Navbar>
+    </Navbar>
-	);
+  );
 };
 
 export default NavBar;

src/components/ScoreStats.js

@@ -61,13 +61,15 @@ export default function ScoreStats() {
 								width={30}
 								height={30}
 								src="https://cdn.fascinated.cc/Hc1eD7QY.png"
+								unoptimized
+								alt="BeatLeader logo"
 							></Image>
 							<p
 								style={{
 									marginLeft: "5px",
 								}}
 							>
-								{scoreSaberPP.toFixed(0)}pp
+								{scoreSaberPP.pp.toFixed(0)}pp
 							</p>
 						</div>
 					) : null}
@@ -82,6 +84,8 @@ export default function ScoreStats() {
 								width={30}
 								height={30}
 								src="https://cdn.fascinated.cc/Wo9JRAfD.png"
+								unoptimized
+								alt="BeatLeader logo"
 							></Image>
 							<div>
 								{Object.entries(beatLeaderPP).map((value, i) => {

src/components/Settings.js

@@ -1,8 +1,8 @@
 import {
-	Avatar as NextAvatar,
-	changeTheme,
 	Dropdown,
+	Avatar as NextAvatar,
 	Text,
+	changeTheme,
 	useTheme,
 } from "@nextui-org/react";
 
@@ -27,6 +27,7 @@ const Avatar = (props) => {
 						as="button"
 						color="primary"
 						src={avatarUrl}
+						alt="Account avatar"
 					/>
 				</Dropdown.Trigger>
 				<Dropdown.Menu aria-label="Static Actions">

src/pages/_app.js

@@ -6,57 +6,56 @@ import { VARS } from "../consts/EnvVars";
 import "../styles/globals.css";
 
 const lightTheme = createTheme({
-	type: "light",
+  type: "light",
-	theme: {
+  theme: {
-		colors: {},
+    colors: {},
-	},
+  },
 });
 
 const darkTheme = createTheme({
-	type: "dark",
+  type: "dark",
-	theme: {
+  theme: {
-		colors: {},
+    colors: {},
-	},
+  },
 });
 
 function MyApp({ Component, pageProps }) {
-	return (
+  return (
-		<>
+    <>
-			<DefaultSeo
+      <DefaultSeo
-				titleTemplate={`${env(VARS.SITE_NAME)} - %s`}
+        titleTemplate={`${env(VARS.SITE_NAME)} - %s`}
-				title={env(VARS.SITE_TITLE)}
+        title={env(VARS.SITE_TITLE)}
-				description={env(VARS.SITE_DESCRIPTION)}
+        description={env(VARS.SITE_DESCRIPTION)}
-				openGraph={{
+        openGraph={{
-					url: env(VARS.SITE_URL),
+          url: env(VARS.SITE_URL),
-					title: env(VARS.SITE_NAME),
+          title: env(VARS.SITE_NAME),
-					description: env(VARS.SITE_DESCRIPTION),
+          description: env(VARS.SITE_DESCRIPTION),
-					siteName: env(VARS.SITE_NAME),
+          siteName: env(VARS.SITE_NAME),
-					images: [
+          images: [
-						{
+            {
-							url: "https://git.fascinated.cc/Fascinated/beatsaber-overlay/media/branch/main/assets/overlay.png",
+              url: "https://git.fascinated.cc/Fascinated/beatsaber-overlay/media/branch/main/assets/overlay.png",
-							alt: "Site Example",
+              alt: "Site Example",
-						},
+            },
-					],
+          ],
-				}}
+        }}
-				twitter={{
+        twitter={{
-					cardType: "summary_large_image",
+          cardType: "summary_large_image",
-					// site: "@BeatSaber Overlay",
+        }}
-				}}
+      />
-			/>
+      <NextThemesProvider
-			<NextThemesProvider
+        storageKey="theme"
-				storageKey="theme"
+        attribute="class"
-				attribute="class"
+        value={{
-				value={{
+          dark: darkTheme,
-					dark: darkTheme,
+          light: lightTheme,
-					light: lightTheme,
+        }}
-				}}
+      >
-			>
+        <NextUIProvider>
-				<NextUIProvider>
+          <Component {...pageProps} />
-					<Component {...pageProps} />
+        </NextUIProvider>
-				</NextUIProvider>
+      </NextThemesProvider>
-			</NextThemesProvider>
+    </>
-		</>
+  );
-	);
 }
 
 export default MyApp;

src/pages/index.js

@@ -190,7 +190,6 @@ export default class Home extends Component {
 						<Grid xs={12} lg={9}>
 							<Card>
 								<Card.Body>
-									<Spacer y={1.2} />
 									<Text>
 										How to use{" "}
 										<span>
@@ -360,9 +359,9 @@ export default class Home extends Component {
 										}}
 									>
 										<Link href="https://git.fascinated.cc/Fascinated/beatsaber-overlay">
-											<a>
+											<a href="https://git.fascinated.cc/Fascinated/beatsaber-overlay">
-												If you like this project and want to support it. Come
+												If you like this project and want to help me make it
-												check out the project on Gitea!
+												better, come check out the project on Gitea!
 											</a>
 										</Link>
 									</Text>

src/store/songDataStore.ts

@@ -154,6 +154,8 @@ export const useSongDataStore = create<SongDataState>()((set) => ({
 		}
 		const { bsr, mapArt } = mapDataresponse.data.data;
 
+		console.log(scoreSaberLeaderboardData);
+
 		set({
 			isLoading: false,
 			hasError: hasError,