fix: address docs routing review

package-lock.json

@@ -39,6 +39,9 @@
         "typescript": "~6.0.2",
         "typescript-eslint": "^8.58.0",
         "vite": "^8.0.4"
+      },
+      "engines": {
+        "node": ">=20.19"
       }
     },
     "node_modules/@babel/code-frame": {

package.json

@@ -3,6 +3,9 @@
   "private": true,
   "version": "0.0.1",
   "type": "module",
+  "engines": {
+    "node": ">=20.19"
+  },
   "scripts": {
     "dev": "vite",
     "build": "tsc -b && vite build",

src/pages/docs/DocsLayout.tsx

@@ -13,7 +13,7 @@ export function DocsLayout(): React.JSX.Element {
             <Link
               className="docs-home-link"
               to="/"
-              aria-label="Retour a l'accueil"
+              aria-label="Retour à l'accueil"
             >
               <Home size={18} strokeWidth={2.25} aria-hidden="true" />
             </Link>

src/pages/docs/DocsRouteComponents.tsx

@@ -0,0 +1,71 @@
+import { Suspense, lazy } from "react";
+
+const LazyDocsLayout = lazy(() =>
+  import("@/pages/docs/DocsLayout").then((module) => ({
+    default: module.DocsLayout,
+  })),
+);
+
+const LazyDocsReadmePage = lazy(() =>
+  import("@/pages/docs/page").then((module) => ({
+    default: module.DocsReadmePage,
+  })),
+);
+
+const LazyDocsArchitecturePage = lazy(() =>
+  import("@/pages/docs/architecture/page").then((module) => ({
+    default: module.DocsArchitecturePage,
+  })),
+);
+
+const LazyDocsTargetArchitecturePage = lazy(() =>
+  import("@/pages/docs/target-architecture/page").then((module) => ({
+    default: module.DocsTargetArchitecturePage,
+  })),
+);
+
+const LazyDocsFeaturesPage = lazy(() =>
+  import("@/pages/docs/features/page").then((module) => ({
+    default: module.DocsFeaturesPage,
+  })),
+);
+
+export function DocsLayoutRoute(): React.JSX.Element {
+  return (
+    <Suspense fallback={null}>
+      <LazyDocsLayout />
+    </Suspense>
+  );
+}
+
+export function DocsReadmeRoute(): React.JSX.Element {
+  return (
+    <Suspense fallback={null}>
+      <LazyDocsReadmePage />
+    </Suspense>
+  );
+}
+
+export function DocsArchitectureRoute(): React.JSX.Element {
+  return (
+    <Suspense fallback={null}>
+      <LazyDocsArchitecturePage />
+    </Suspense>
+  );
+}
+
+export function DocsTargetArchitectureRoute(): React.JSX.Element {
+  return (
+    <Suspense fallback={null}>
+      <LazyDocsTargetArchitecturePage />
+    </Suspense>
+  );
+}
+
+export function DocsFeaturesRoute(): React.JSX.Element {
+  return (
+    <Suspense fallback={null}>
+      <LazyDocsFeaturesPage />
+    </Suspense>
+  );
+}

src/pages/docs/docsSections.ts

@@ -26,7 +26,7 @@ export const docSections: DocSection[] = [
   },
   {
     path: "/docs/features",
-    title: "Fonctionnalites",
+    title: "Fonctionnalités",
     subtitle: "Implemented scope",
     meta: "04",
   },

src/pages/docs/features/page.tsx

@@ -8,7 +8,7 @@ export function DocsFeaturesPage(): React.JSX.Element {
       content={features}
       frContent={featuresFr}
       meta="04"
-      title="Fonctionnalites"
+      title="Fonctionnalités"
     />
   );
 }

src/router.tsx

@@ -5,11 +5,13 @@ import {
   createRouter,
 } from "@tanstack/react-router";
 import { HomePage } from "@/pages/HomePage";
-import { DocsArchitecturePage } from "@/pages/docs/architecture/page";
+import {
-import { DocsLayout } from "@/pages/docs/DocsLayout";
+  DocsArchitectureRoute,
-import { DocsFeaturesPage } from "@/pages/docs/features/page";
+  DocsFeaturesRoute,
-import { DocsReadmePage } from "@/pages/docs/page";
+  DocsLayoutRoute,
-import { DocsTargetArchitecturePage } from "@/pages/docs/target-architecture/page";
+  DocsReadmeRoute,
+  DocsTargetArchitectureRoute,
+} from "@/pages/docs/DocsRouteComponents";
 
 const rootRoute = createRootRoute({
   component: Outlet,
@@ -24,31 +26,31 @@ const indexRoute = createRoute({
 const docsRoute = createRoute({
   getParentRoute: () => rootRoute,
   path: "/docs",
-  component: DocsLayout,
+  component: DocsLayoutRoute,
 });
 
 const docsIndexRoute = createRoute({
   getParentRoute: () => docsRoute,
   path: "/",
-  component: DocsReadmePage,
+  component: DocsReadmeRoute,
 });
 
 const docsArchitectureRoute = createRoute({
   getParentRoute: () => docsRoute,
   path: "/architecture",
-  component: DocsArchitecturePage,
+  component: DocsArchitectureRoute,
 });
 
 const docsTargetArchitectureRoute = createRoute({
   getParentRoute: () => docsRoute,
   path: "/target-architecture",
-  component: DocsTargetArchitecturePage,
+  component: DocsTargetArchitectureRoute,
 });
 
 const docsFeaturesRoute = createRoute({
   getParentRoute: () => docsRoute,
   path: "/features",
-  component: DocsFeaturesPage,
+  component: DocsFeaturesRoute,
 });
 
 const routeTree = rootRoute.addChildren([