Change layout

packages/webapp/src/routeTree.gen.ts

@@ -9,50 +9,118 @@
 // 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 IndexRouteImport } from './routes/index'
+import { Route as GarrysmodRouteImport } from './routes/garrysmod'
+import { Route as MainRouteImport } from './routes/_main'
+import { Route as GarrysmodIndexRouteImport } from './routes/garrysmod.index'
+import { Route as MainIndexRouteImport } from './routes/_main.index'
 
-const IndexRoute = IndexRouteImport.update({
+const GarrysmodRoute = GarrysmodRouteImport.update({
+  id: '/garrysmod',
+  path: '/garrysmod',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const MainRoute = MainRouteImport.update({
+  id: '/_main',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const GarrysmodIndexRoute = GarrysmodIndexRouteImport.update({
   id: '/',
   path: '/',
-  getParentRoute: () => rootRouteImport,
+  getParentRoute: () => GarrysmodRoute,
+} as any)
+const MainIndexRoute = MainIndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => MainRoute,
 } as any)
 
 export interface FileRoutesByFullPath {
-  '/': typeof IndexRoute
+  '/garrysmod': typeof GarrysmodRouteWithChildren
+  '/': typeof MainIndexRoute
+  '/garrysmod/': typeof GarrysmodIndexRoute
 }
 export interface FileRoutesByTo {
-  '/': typeof IndexRoute
+  '/': typeof MainIndexRoute
+  '/garrysmod': typeof GarrysmodIndexRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
-  '/': typeof IndexRoute
+  '/_main': typeof MainRouteWithChildren
+  '/garrysmod': typeof GarrysmodRouteWithChildren
+  '/_main/': typeof MainIndexRoute
+  '/garrysmod/': typeof GarrysmodIndexRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/'
+  fullPaths: '/garrysmod' | '/' | '/garrysmod/'
   fileRoutesByTo: FileRoutesByTo
-  to: '/'
+  to: '/' | '/garrysmod'
-  id: '__root__' | '/'
+  id: '__root__' | '/_main' | '/garrysmod' | '/_main/' | '/garrysmod/'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
-  IndexRoute: typeof IndexRoute
+  MainRoute: typeof MainRouteWithChildren
+  GarrysmodRoute: typeof GarrysmodRouteWithChildren
 }
 
 declare module '@tanstack/react-router' {
   interface FileRoutesByPath {
-    '/': {
+    '/garrysmod': {
-      id: '/'
+      id: '/garrysmod'
+      path: '/garrysmod'
+      fullPath: '/garrysmod'
+      preLoaderRoute: typeof GarrysmodRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/_main': {
+      id: '/_main'
+      path: ''
+      fullPath: ''
+      preLoaderRoute: typeof MainRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/garrysmod/': {
+      id: '/garrysmod/'
+      path: '/'
+      fullPath: '/garrysmod/'
+      preLoaderRoute: typeof GarrysmodIndexRouteImport
+      parentRoute: typeof GarrysmodRoute
+    }
+    '/_main/': {
+      id: '/_main/'
       path: '/'
       fullPath: '/'
-      preLoaderRoute: typeof IndexRouteImport
+      preLoaderRoute: typeof MainIndexRouteImport
-      parentRoute: typeof rootRouteImport
+      parentRoute: typeof MainRoute
     }
   }
 }
 
+interface MainRouteChildren {
+  MainIndexRoute: typeof MainIndexRoute
+}
+
+const MainRouteChildren: MainRouteChildren = {
+  MainIndexRoute: MainIndexRoute,
+}
+
+const MainRouteWithChildren = MainRoute._addFileChildren(MainRouteChildren)
+
+interface GarrysmodRouteChildren {
+  GarrysmodIndexRoute: typeof GarrysmodIndexRoute
+}
+
+const GarrysmodRouteChildren: GarrysmodRouteChildren = {
+  GarrysmodIndexRoute: GarrysmodIndexRoute,
+}
+
+const GarrysmodRouteWithChildren = GarrysmodRoute._addFileChildren(
+  GarrysmodRouteChildren,
+)
+
 const rootRouteChildren: RootRouteChildren = {
-  IndexRoute: IndexRoute,
+  MainRoute: MainRouteWithChildren,
+  GarrysmodRoute: GarrysmodRouteWithChildren,
 }
 export const routeTree = rootRouteImport
   ._addFileChildren(rootRouteChildren)

packages/webapp/src/routes/__root.tsx

@@ -1,12 +1,5 @@
 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({
@@ -14,86 +7,8 @@ export const Route = createRootRoute({
 })
 
 function RootComponent() {
-    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="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.index.tsx

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

packages/webapp/src/routes/_main.tsx

@@ -0,0 +1,96 @@
+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: SharedLayout,
+})
+
+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/garrysmod.index.tsx

@@ -0,0 +1,10 @@
+import { createFileRoute } from "@tanstack/react-router"
+
+
+export const Route = createFileRoute("/garrysmod/")({
+    component: RouteComponent,
+})
+
+function RouteComponent() {
+    return null
+}

packages/webapp/src/routes/garrysmod.tsx

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