update all depends

package.json

@@ -10,26 +10,26 @@
     "update-depends": "npm-check -u"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.4.2",
+    "@fortawesome/fontawesome-svg-core": "^6.6.0",
-    "@fortawesome/free-brands-svg-icons": "^6.4.2",
+    "@fortawesome/free-brands-svg-icons": "^6.6.0",
-    "@fortawesome/free-regular-svg-icons": "^6.4.2",
+    "@fortawesome/free-regular-svg-icons": "^6.6.0",
-    "@fortawesome/free-solid-svg-icons": "^6.4.2",
+    "@fortawesome/free-solid-svg-icons": "^6.6.0",
-    "@fortawesome/react-fontawesome": "^0.2.0",
+    "@fortawesome/react-fontawesome": "^0.2.2",
-    "@types/node": "^20.8.6",
+    "@types/node": "^22.5.1",
-    "@types/react": "^18.2.28",
+    "@types/react": "^18.3.4",
-    "@types/react-dom": "^18.2.13",
+    "@types/react-dom": "^18.3.0",
-    "autoprefixer": "^10.4.16",
+    "autoprefixer": "^10.4.20",
-    "eslint": "^8.51.0",
+    "eslint": "^9.9.1",
-    "eslint-config-next": "^13.5.4",
+    "eslint-config-next": "^14.2.7",
-    "next": "^13.5.4",
+    "next": "^14.2.7",
     "next-plugin-yaml": "^1.0.1",
     "npm-check": "^6.0.1",
-    "postcss": "^8.4.31",
+    "postcss": "^8.4.41",
-    "react": "18.2.0",
+    "react": "18.3.1",
-    "react-dom": "18.2.0",
+    "react-dom": "18.3.1",
-    "sharp": "^0.33.0",
+    "sharp": "^0.33.5",
-    "tailwindcss": "^3.3.3",
+    "tailwindcss": "^3.4.10",
-    "typescript": "^5.2.2",
+    "typescript": "^5.5.4",
-    "use-lanyard": "^1.4.4"
+    "use-lanyard": "^1.5.2"
   }
 }

pnpm-lock.yaml

@@ -30,8 +30,8 @@ dependencies:
     specifier: ^18.2.13
     version: 18.2.13
   autoprefixer:
-    specifier: ^10.4.19
+    specifier: ^10.4.16
-    version: 10.4.19(postcss@8.4.31)
+    version: 10.4.16(postcss@8.4.31)
   eslint:
     specifier: ^8.51.0
     version: 8.51.0
@@ -1044,15 +1044,15 @@ packages:
       has-symbols: 1.0.3
     dev: false
 
-  /autoprefixer@10.4.19(postcss@8.4.31):
+  /autoprefixer@10.4.16(postcss@8.4.31):
-    resolution: {integrity: sha512-BaENR2+zBZ8xXhM4pUaKUxlVdxZ0EZhjvbopwnXmxRUfqDmwSpC2lAi/QXvx7NRdPCo1WKEcEF6mV64si1z4Ew==}
+    resolution: {integrity: sha512-7vd3UC6xKp0HLfua5IjZlcXvGAGy7cBAXTg2lyQ/8WpNhd6SiZ8Be+xm3FyBSYJx5GKcpRCzBh7RH4/0dnY+uQ==}
     engines: {node: ^10 || ^12 || >=14}
     hasBin: true
     peerDependencies:
       postcss: ^8.1.0
     dependencies:
-      browserslist: 4.23.0
+      browserslist: 4.22.1
-      caniuse-lite: 1.0.30001600
+      caniuse-lite: 1.0.30001549
       fraction.js: 4.3.7
       normalize-range: 0.1.2
       picocolors: 1.0.0
@@ -1129,15 +1129,15 @@ packages:
       fill-range: 7.0.1
     dev: false
 
-  /browserslist@4.23.0:
+  /browserslist@4.22.1:
-    resolution: {integrity: sha512-QW8HiM1shhT2GuzkvklfjcKDiWFXHOeFCIA/huJPwHsslwcydgk7X+z2zXpEijP98UCY7HbubZt5J2Zgvf0CaQ==}
+    resolution: {integrity: sha512-FEVc202+2iuClEhZhrWy6ZiAcRLvNMyYcxZ8raemul1DYVOVdFsbqckWLdsixQZCpJlwe77Z3UTalE7jsjnKfQ==}
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
     dependencies:
-      caniuse-lite: 1.0.30001600
+      caniuse-lite: 1.0.30001549
-      electron-to-chromium: 1.4.715
+      electron-to-chromium: 1.4.554
-      node-releases: 2.0.14
+      node-releases: 2.0.13
-      update-browserslist-db: 1.0.13(browserslist@4.23.0)
+      update-browserslist-db: 1.0.13(browserslist@4.22.1)
     dev: false
 
   /buffer@5.7.1:
@@ -1223,10 +1223,6 @@ packages:
     resolution: {integrity: sha512-qRp48dPYSCYaP+KurZLhDYdVE+yEyht/3NlmcJgVQ2VMGt6JL36ndQ/7rgspdZsJuxDPFIo/OzBT2+GmIJ53BA==}
     dev: false
 
-  /caniuse-lite@1.0.30001600:
-    resolution: {integrity: sha512-+2S9/2JFhYmYaDpZvo0lKkfvuKIglrx68MwOBqMGHhQsNkLjB5xtc/TGoEPs+MxjSyN/72qer2g97nzR641mOQ==}
-    dev: false
-
   /chalk@2.4.2:
     resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==}
     engines: {node: '>=4'}
@@ -1584,8 +1580,8 @@ packages:
     resolution: {integrity: sha512-1A8za6ws41LQgv9HrE/66jyC5yuSjQ3L/KOpFtoBilsAK2iA2wuS5rTt1OCzIvtS2V7nVmedsUU+DGRcjBmOYA==}
     dev: false
 
-  /electron-to-chromium@1.4.715:
+  /electron-to-chromium@1.4.554:
-    resolution: {integrity: sha512-XzWNH4ZSa9BwVUQSDorPWAUQ5WGuYz7zJUNpNif40zFCiCl20t8zgylmreNmn26h5kiyw2lg7RfTmeMBsDklqg==}
+    resolution: {integrity: sha512-Q0umzPJjfBrrj8unkONTgbKQXzXRrH7sVV7D9ea2yBV3Oaogz991yhbpfvo2LMNkJItmruXTEzVpP9cp7vaIiQ==}
     dev: false
 
   /emoji-regex@8.0.0:
@@ -1709,8 +1705,8 @@ packages:
       is-symbol: 1.0.4
     dev: false
 
-  /escalade@3.1.2:
+  /escalade@3.1.1:
-    resolution: {integrity: sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==}
+    resolution: {integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==}
     engines: {node: '>=6'}
     dev: false
 
@@ -3212,8 +3208,8 @@ packages:
       lodash: 4.17.21
     dev: false
 
-  /node-releases@2.0.14:
+  /node-releases@2.0.13:
-    resolution: {integrity: sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==}
+    resolution: {integrity: sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ==}
     dev: false
 
   /normalize-package-data@2.5.0:
@@ -4453,14 +4449,14 @@ packages:
       crypto-random-string: 2.0.0
     dev: false
 
-  /update-browserslist-db@1.0.13(browserslist@4.23.0):
+  /update-browserslist-db@1.0.13(browserslist@4.22.1):
     resolution: {integrity: sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==}
     hasBin: true
     peerDependencies:
       browserslist: '>= 4.21.0'
     dependencies:
-      browserslist: 4.23.0
+      browserslist: 4.22.1
-      escalade: 3.1.2
+      escalade: 3.1.1
       picocolors: 1.0.0
     dev: false
 
@@ -4666,7 +4662,7 @@ packages:
     engines: {node: '>=10'}
     dependencies:
       cliui: 7.0.4
-      escalade: 3.1.2
+      escalade: 3.1.1
       get-caller-file: 2.0.5
       require-directory: 2.1.1
       string-width: 4.2.3

src/app/components/Avatar.tsx

@@ -5,7 +5,7 @@ import Image from "next/image";
 import { Fragment } from "react";
 import { useLanyardWS } from "use-lanyard";
 
-const Config: Config = require("../../../config.yml") as any;
+const config: Config = require("../../../config.yml") as any;
 
 function LanyardWrapper(props: { children: any }) {
   return <Fragment>{props.children}</Fragment>;
@@ -13,7 +13,7 @@ function LanyardWrapper(props: { children: any }) {
 
 export default function Avatar(props: any) {
   const { avatar } = props;
-  const { discord }: any = Config;
+  const { discord }: any = config;
 
   return (
     <div className="relative inline-block">

src/app/layout.tsx

@@ -1,21 +1,18 @@
 import { Config } from "@/src/types/config";
-import { config } from "@fortawesome/fontawesome-svg-core";
+import { config as fontAwesomeConfig } from "@fortawesome/fontawesome-svg-core";
 import "@fortawesome/fontawesome-svg-core/styles.css";
 import { Inter } from "next/font/google";
 import "./globals.css";
+import { ReactNode } from "react";
 
-const Config: Config = require("../../config.yml") as any;
+const config: Config = require("../../config.yml") as any;
-config.autoAddCss = false;
+fontAwesomeConfig.autoAddCss = false;
 
 const inter = Inter({ subsets: ["latin"] });
 
-export const metadata = Config.metadata; // Site metadata from the config
+export const metadata = config.metadata; // Site metadata from the config
 
-export default function RootLayout({
+export default function RootLayout({ children }: { children: ReactNode }) {
-  children,
-}: {
-  children: React.ReactNode;
-}) {
   return (
     <html lang="en">
       <body className={inter.className}>{children}</body>

src/app/page.tsx

@@ -8,7 +8,7 @@ import Image from "next/image";
 import Link from "next/link";
 import Avatar from "./components/Avatar";
 
-const Config: Config = require("../../config.yml") as any;
+const config: Config = require("../../config.yml") as any;
 
 library.add(fab, far, fas); // Loading in the icons from FontAwesome
 
@@ -23,7 +23,7 @@ export default function Home() {
     options,
     description,
     theme,
-  } = Config; // All of the settings pulled from the config file
+  } = config; // All the settings pulled from the config file
 
   // Theme colors to use when using the selected theme
   // all used colors are from TailwindCSS
@@ -54,32 +54,23 @@ export default function Home() {
   const selectedTheme = themeColors[theme] || themeColors.dark; // The theme to use (fallback of dark)
 
   return (
-    <>
+    <div className={"relative"}>
+      {/* Background Image */}
+      {background.showBackground && background.backgroundImage && (
+        // eslint-disable-next-line @next/next/no-img-element
+        <img
+          alt="Background image"
+          src={background.backgroundImage}
+          className={`absolute z-0 object-cover w-full h-full ${background.blur && "blur-sm"} brightness-${background.darken.enabled && background.darken.amount / 2}`}
+        />
+      )}
+
       <main
         className={`flex flex-col items-center justify-center w-screen h-screen ${selectedTheme.backgroundColor} ${selectedTheme.textColor}`}
       >
-        {/* Background Image */}
-        {background.showBackground && background.backgroundImage && (
-          <Image
-            alt="Background image"
-            src={background.backgroundImage}
-            fill={true}
-            style={{
-              zIndex: 0,
-              filter: `${background.blur && "blur(4px)"} brightness(${
-                background.darken.enabled && background.darken.amount / 2
-              })`,
-            }}
-          />
-        )}
-
         {/* Info Card */}
         <div
-          className={`${
+          className={`${infoCard.transparency != 0 && `${selectedTheme.infoCardColor} shadow-lg rounded-lg`} text-center`}
-            infoCard.transparency != 0
-              ? `${selectedTheme.infoCardColor} shadow-lg rounded-lg`
-              : ``
-          } text-center`}
           style={{
             zIndex: 1,
             opacity: infoCard.transparency != 0 ? infoCard.transparency : 1,
@@ -184,6 +175,6 @@ export default function Home() {
           )}
         </div>
       </main>
-    </>
+    </div>
   );
 }