Update dependency @vitejs/plugin-react to v6

Dockerfile

@@ -7,7 +7,7 @@ WORKDIR /app
 COPY ./ ./
 RUN bun install --frozen-lockfile && \
     bun lint:tsc && \
-    # bun lint:biome && \
+    bun lint:biome && \
     bun run build && \
     bun clean:cache && \
     bun clean:modules && \

packages/webapp/package.json

@@ -43,7 +43,7 @@
     "@tanstack/router-plugin": "^1.131.48",
     "@types/react": "^19.1.13",
     "@types/react-dom": "^19.1.9",
-    "@vitejs/plugin-react": "^5.0.2",
+    "@vitejs/plugin-react": "^6.0.0",
     "globals": "^16.4.0",
     "tw-animate-css": "^1.3.8",
     "typescript-eslint": "^8.44.0",

packages/webapp/src/routeTree.gen.ts

@@ -9,118 +9,50 @@
 // Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
 
 import { Route as rootRouteImport } from './routes/__root'
-import { Route as MainRouteImport } from './routes/_main'
+import { Route as IndexRouteImport } from './routes/index'
-import { Route as PazismemodRouteRouteImport } from './routes/pazismemod/route'
-import { Route as PazismemodIndexRouteImport } from './routes/pazismemod/index'
-import { Route as MainIndexRouteImport } from './routes/_main.index'
 
-const MainRoute = MainRouteImport.update({
+const IndexRoute = IndexRouteImport.update({
-  id: '/_main',
-  getParentRoute: () => rootRouteImport,
-} as any)
-const PazismemodRouteRoute = PazismemodRouteRouteImport.update({
-  id: '/pazismemod',
-  path: '/pazismemod',
-  getParentRoute: () => rootRouteImport,
-} as any)
-const PazismemodIndexRoute = PazismemodIndexRouteImport.update({
   id: '/',
   path: '/',
-  getParentRoute: () => PazismemodRouteRoute,
+  getParentRoute: () => rootRouteImport,
-} as any)
-const MainIndexRoute = MainIndexRouteImport.update({
-  id: '/',
-  path: '/',
-  getParentRoute: () => MainRoute,
 } as any)
 
 export interface FileRoutesByFullPath {
-  '/pazismemod': typeof PazismemodRouteRouteWithChildren
+  '/': typeof IndexRoute
-  '/': typeof MainIndexRoute
-  '/pazismemod/': typeof PazismemodIndexRoute
 }
 export interface FileRoutesByTo {
-  '/': typeof MainIndexRoute
+  '/': typeof IndexRoute
-  '/pazismemod': typeof PazismemodIndexRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
-  '/pazismemod': typeof PazismemodRouteRouteWithChildren
+  '/': typeof IndexRoute
-  '/_main': typeof MainRouteWithChildren
-  '/_main/': typeof MainIndexRoute
-  '/pazismemod/': typeof PazismemodIndexRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/pazismemod' | '/' | '/pazismemod/'
+  fullPaths: '/'
   fileRoutesByTo: FileRoutesByTo
-  to: '/' | '/pazismemod'
+  to: '/'
-  id: '__root__' | '/pazismemod' | '/_main' | '/_main/' | '/pazismemod/'
+  id: '__root__' | '/'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
-  PazismemodRouteRoute: typeof PazismemodRouteRouteWithChildren
+  IndexRoute: typeof IndexRoute
-  MainRoute: typeof MainRouteWithChildren
 }
 
 declare module '@tanstack/react-router' {
   interface FileRoutesByPath {
-    '/_main': {
+    '/': {
-      id: '/_main'
+      id: '/'
-      path: ''
-      fullPath: '/'
-      preLoaderRoute: typeof MainRouteImport
-      parentRoute: typeof rootRouteImport
-    }
-    '/pazismemod': {
-      id: '/pazismemod'
-      path: '/pazismemod'
-      fullPath: '/pazismemod'
-      preLoaderRoute: typeof PazismemodRouteRouteImport
-      parentRoute: typeof rootRouteImport
-    }
-    '/pazismemod/': {
-      id: '/pazismemod/'
-      path: '/'
-      fullPath: '/pazismemod/'
-      preLoaderRoute: typeof PazismemodIndexRouteImport
-      parentRoute: typeof PazismemodRouteRoute
-    }
-    '/_main/': {
-      id: '/_main/'
       path: '/'
       fullPath: '/'
-      preLoaderRoute: typeof MainIndexRouteImport
+      preLoaderRoute: typeof IndexRouteImport
-      parentRoute: typeof MainRoute
+      parentRoute: typeof rootRouteImport
     }
   }
 }
 
-interface PazismemodRouteRouteChildren {
-  PazismemodIndexRoute: typeof PazismemodIndexRoute
-}
-
-const PazismemodRouteRouteChildren: PazismemodRouteRouteChildren = {
-  PazismemodIndexRoute: PazismemodIndexRoute,
-}
-
-const PazismemodRouteRouteWithChildren = PazismemodRouteRoute._addFileChildren(
-  PazismemodRouteRouteChildren,
-)
-
-interface MainRouteChildren {
-  MainIndexRoute: typeof MainIndexRoute
-}
-
-const MainRouteChildren: MainRouteChildren = {
-  MainIndexRoute: MainIndexRoute,
-}
-
-const MainRouteWithChildren = MainRoute._addFileChildren(MainRouteChildren)
-
 const rootRouteChildren: RootRouteChildren = {
-  PazismemodRouteRoute: PazismemodRouteRouteWithChildren,
+  IndexRoute: IndexRoute,
-  MainRoute: MainRouteWithChildren,
 }
 export const routeTree = rootRouteImport
   ._addFileChildren(rootRouteChildren)

packages/webapp/src/routes/__root.tsx

@@ -1,5 +1,12 @@
 import { createRootRoute, Outlet } from "@tanstack/react-router"
 import { TanStackRouterDevtools } from "@tanstack/react-router-devtools"
+import { useTranslation } from "react-i18next"
+import { DiGit } from "react-icons/di"
+import { FaCode } from "react-icons/fa"
+import root from "react-shadow"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent } from "@/components/ui/card"
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
 
 
 export const Route = createRootRoute({
@@ -7,8 +14,86 @@ export const Route = createRootRoute({
 })
 
 function RootComponent() {
+    const { t, i18n } = useTranslation()
+
     return <>
-        <Outlet />
+        <div className="flex flex-row items-center justify-center gap-2 p-2">
+            <Button
+                variant={i18n.language !== "en" ? "default" : "noShadow"}
+                onClick={() => i18n.changeLanguage("en")}
+            >
+                🇬🇧 English
+            </Button>
+
+            <Button
+                variant={i18n.language !== "fr" ? "default" : "noShadow"}
+                onClick={() => i18n.changeLanguage("fr")}
+            >
+                🇫🇷 Français
+            </Button>
+        </div>
+
+        <div className="container mt-20 mr-auto ml-auto">
+            <div className="mr-auto ml-auto flex w-fit flex-row items-start justify-around gap-10">
+                <root.div>
+                    <link rel="stylesheet" href="/98.css/dist/98.css" />
+
+                    <div className="window" style={{ width: 300 }}>
+                        <div className="title-bar">
+                            <div className="title-bar-text">Julien Valverde</div>
+                        </div>
+                        <div className="window-body">
+                            <p>There's so much room for activities!</p>
+                        </div>
+                    </div>
+                </root.div>
+
+                <div>
+                    <h1>Ingénieur Full Stack &bull; Entrepreneur</h1>
+
+                    <p className="mt-2">
+                        I am passionate about integrating functionality and design in applications to create intuitive, user-friendly experiences.
+                    </p>
+
+                    <div className="flex w-fit flex-row items-center justify-center gap-2 mt-4">
+                        <TooltipProvider>
+                            <Tooltip>
+                                <TooltipTrigger asChild>
+                                    <Button asChild>
+                                        <a href="https://git.valverde.cloud"><DiGit /> {t($ => $.gitRepos.title, { ns: "nav" })}</a>
+                                    </Button>
+                                </TooltipTrigger>
+
+                                <TooltipContent><p>{t($ => $.gitRepos.tooltip, { ns: "nav" })}</p></TooltipContent>
+                            </Tooltip>
+                        </TooltipProvider>
+
+                        <TooltipProvider>
+                            <Tooltip>
+                                <TooltipTrigger asChild>
+                                    <Button asChild>
+                                        <a href="https://git.valverde.cloud/thilawyn/website"><FaCode /> {t($ => $.sourceCode.title, { ns: "nav" })}</a>
+                                    </Button>
+                                </TooltipTrigger>
+
+                                <TooltipContent><p>{t($ => $.sourceCode.tooltip, { ns: "nav" })}</p></TooltipContent>
+                            </Tooltip>
+                        </TooltipProvider>
+
+                        <Button>Resumé</Button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div className="mx-auto w-[750px] max-w-full px-5 pt-28 pb-10 text-foreground">
+            <Card>
+                <CardContent>
+                    <Outlet />
+                </CardContent>
+            </Card>
+        </div>
+
         <TanStackRouterDevtools />
     </>
 }

packages/webapp/src/routes/_main.tsx

@@ -1,109 +0,0 @@
-import { createFileRoute, Outlet } from "@tanstack/react-router"
-import { useTranslation } from "react-i18next"
-import { DiGit } from "react-icons/di"
-import { FaCode } from "react-icons/fa"
-import root from "react-shadow"
-import { Button } from "@/components/ui/button"
-import { Card, CardContent } from "@/components/ui/card"
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
-
-
-export const Route = createFileRoute("/_main")({
-    component: WIPLayout,
-})
-
-function WIPLayout() {
-    return (
-        <div className="mx-auto w-[750px] max-w-full px-5 pt-28 pb-10 text-foreground">
-            <Card>
-                <CardContent>
-                    <Outlet />
-                </CardContent>
-            </Card>
-        </div>
-    )
-}
-
-// @ts-ignore
-function SharedLayout() {
-    const { t, i18n } = useTranslation()
-
-    return <>
-        <div className="flex flex-row items-center justify-center gap-2 p-2">
-            <Button
-                variant={i18n.language !== "en" ? "default" : "noShadow"}
-                onClick={() => i18n.changeLanguage("en")}
-            >
-                🇬🇧 English
-            </Button>
-
-            <Button
-                variant={i18n.language !== "fr" ? "default" : "noShadow"}
-                onClick={() => i18n.changeLanguage("fr")}
-            >
-                🇫🇷 Français
-            </Button>
-        </div>
-
-        <div className="container mt-20 mr-auto ml-auto">
-            <div className="mr-auto ml-auto flex w-fit flex-row items-start justify-around gap-10">
-                <root.div>
-                    <link rel="stylesheet" href="/98.css/dist/98.css" />
-
-                    <div className="window" style={{ width: 300 }}>
-                        <div className="title-bar">
-                            <div className="title-bar-text">Julien Valverde</div>
-                        </div>
-                        <div className="window-body">
-                            <p>There's so much room for activities!</p>
-                        </div>
-                    </div>
-                </root.div>
-
-                <div>
-                    <h1>Ingénieur Full Stack &bull; Entrepreneur</h1>
-
-                    <p className="mt-2">
-                        I am passionate about integrating functionality and design in applications to create intuitive, user-friendly experiences.
-                    </p>
-
-                    <div className="mt-4 flex w-fit flex-row items-center justify-center gap-2">
-                        <TooltipProvider>
-                            <Tooltip>
-                                <TooltipTrigger asChild>
-                                    <Button asChild>
-                                        <a href="https://git.valverde.cloud"><DiGit /> {t($ => $.gitRepos.title, { ns: "nav" })}</a>
-                                    </Button>
-                                </TooltipTrigger>
-
-                                <TooltipContent><p>{t($ => $.gitRepos.tooltip, { ns: "nav" })}</p></TooltipContent>
-                            </Tooltip>
-                        </TooltipProvider>
-
-                        <TooltipProvider>
-                            <Tooltip>
-                                <TooltipTrigger asChild>
-                                    <Button asChild>
-                                        <a href="https://git.valverde.cloud/thilawyn/website"><FaCode /> {t($ => $.sourceCode.title, { ns: "nav" })}</a>
-                                    </Button>
-                                </TooltipTrigger>
-
-                                <TooltipContent><p>{t($ => $.sourceCode.tooltip, { ns: "nav" })}</p></TooltipContent>
-                            </Tooltip>
-                        </TooltipProvider>
-
-                        <Button>Resumé</Button>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <div className="mx-auto w-[750px] max-w-full px-5 pt-28 pb-10 text-foreground">
-            <Card>
-                <CardContent>
-                    <Outlet />
-                </CardContent>
-            </Card>
-        </div>
-    </>
-}

packages/webapp/src/routes/index.tsx

@@ -1,7 +1,7 @@
 import { createFileRoute } from "@tanstack/react-router"
 
 
-export const Route = createFileRoute("/_main/")({
+export const Route = createFileRoute("/")({
     component: RouteComponent,
 })
 

packages/webapp/src/routes/pazismemod/index.css

@@ -1,7 +0,0 @@
-@font-face {
-  font-family: "Coolvetica";
-  src: url("/public/fonts/Coolvetica Rg.otf") format("opentype");
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-}

packages/webapp/src/routes/pazismemod/index.tsx

@@ -1,104 +0,0 @@
-import { createFileRoute } from "@tanstack/react-router"
-import { useEffect, useRef } from "react"
-import "./index.css"
-import screen1 from "./screen1.png"
-import song from "./We Are Charlie Kirk.mp3"
-
-
-export const Route = createFileRoute("/pazismemod/")({
-    component: RouteComponent,
-})
-
-const SONG_START_TIME = 46
-
-function RouteComponent() {
-    const audioRef = useRef<HTMLAudioElement>(null)
-
-    useEffect(() => {
-        const audio = audioRef.current
-
-        if (!audio) {
-            return
-        }
-
-        const syncStartTime = () => {
-            if (Number.isFinite(audio.duration) && audio.duration > SONG_START_TIME) {
-                audio.currentTime = SONG_START_TIME
-            }
-        }
-
-        const loopFromOffset = async () => {
-            syncStartTime()
-
-            try {
-                await audio.play()
-            }
-            catch {
-                // Ignore autoplay failures. Some embedded browsers require user interaction.
-            }
-        }
-
-        const tryAutoplay = async () => {
-            syncStartTime()
-
-            try {
-                await audio.play()
-            }
-            catch {
-                // Ignore autoplay failures. Some embedded browsers require user interaction.
-            }
-        }
-
-        const gameDetails = (
-            _servername: string,
-            _serverurl: string,
-            _mapname: string,
-            _maxplayers: string,
-            _steamid: string,
-            _gamemode: string,
-            volume: number | string,
-        ) => {
-            const parsedVolume = Number(volume)
-
-            if (Number.isFinite(parsedVolume)) {
-                audio.volume = Math.min(1, Math.max(0, parsedVolume))
-            }
-        }
-
-        audio.addEventListener("loadedmetadata", syncStartTime)
-        audio.addEventListener("ended", loopFromOffset)
-        void tryAutoplay()
-        ;(window as Window & { GameDetails?: typeof gameDetails }).GameDetails = gameDetails
-
-        return () => {
-            audio.removeEventListener("loadedmetadata", syncStartTime)
-            audio.removeEventListener("ended", loopFromOffset)
-
-            if ((window as Window & { GameDetails?: typeof gameDetails }).GameDetails === gameDetails) {
-                delete (window as Window & { GameDetails?: typeof gameDetails }).GameDetails
-            }
-        }
-    }, [])
-
-    return (
-        <div className="relative h-screen w-screen overflow-hidden bg-black">
-            <audio ref={audioRef} src={song} preload="auto" hidden />
-
-            <img
-                src={screen1}
-                alt="Pazismemod screenshot"
-                className="h-full w-full object-contain"
-            />
-
-            <h1
-                className="absolute bottom-12 left-6 leading-none text-white"
-                style={{
-                    fontFamily: "\"Coolvetica\", sans-serif",
-                    fontSize: "92px",
-                }}
-            >
-                pazisme mod
-            </h1>
-        </div>
-    )
-}

packages/webapp/src/routes/pazismemod/route.tsx

@@ -1,10 +0,0 @@
-import { createFileRoute, Outlet } from "@tanstack/react-router"
-
-
-export const Route = createFileRoute("/pazismemod")({
-    component: PazismemodLayout,
-})
-
-function PazismemodLayout() {
-    return <Outlet />
-}