group docs navigation by audience

src/index.css

@@ -69,6 +69,21 @@ canvas {
   display: grid;
 }
 
+.docs-nav-group {
+  display: grid;
+  border-bottom: 2px solid #d8d0c4;
+}
+
+.docs-nav-group h2 {
+  margin: 0;
+  padding: 13px 16px 8px;
+  color: #a9a196;
+  font-size: 10px;
+  font-weight: 800;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+}
+
 .docs-sidebar a {
   color: #f4efe7;
   text-decoration: none;
@@ -80,7 +95,7 @@ canvas {
   justify-content: space-between;
   min-height: 46px;
   padding: 0 16px;
-  border-bottom: 2px solid #d8d0c4;
+  border-top: 1px solid rgba(216, 208, 196, 0.35);
   color: #f4efe7;
   transition:
     background 160ms ease,

src/pages/docs/DocsLayout.tsx

@@ -1,7 +1,7 @@
 import { Link, Outlet } from "@tanstack/react-router";
 import { Home } from "lucide-react";
 import { DocsLanguageProvider } from "@/pages/docs/DocsLanguageProvider";
-import { docSections } from "@/pages/docs/docsSections";
+import { docGroups } from "@/pages/docs/docsSections";
 
 export function DocsLayout(): React.JSX.Element {
   return (
@@ -20,22 +20,28 @@ export function DocsLayout(): React.JSX.Element {
           </header>
 
           <nav>
-            {docSections.map((section) => (
-              <Link
-                activeProps={{
-                  className: "docs-nav-item docs-nav-item--active",
-                }}
-                activeOptions={{ exact: true }}
-                className="docs-nav-item"
-                key={section.path}
-                to={section.path}
-              >
-                <span>
-                  <strong>{section.title}</strong>
-                  <small>{section.subtitle}</small>
-                </span>
-                <span className="docs-nav-item__meta">{section.meta}</span>
-              </Link>
+            {docGroups.map((group) => (
+              <section className="docs-nav-group" key={group.label}>
+                <h2>{group.label}</h2>
+
+                {group.sections.map((section) => (
+                  <Link
+                    activeProps={{
+                      className: "docs-nav-item docs-nav-item--active",
+                    }}
+                    activeOptions={{ exact: true }}
+                    className="docs-nav-item"
+                    key={section.path}
+                    to={section.path}
+                  >
+                    <span>
+                      <strong>{section.title}</strong>
+                      <small>{section.subtitle}</small>
+                    </span>
+                    <span className="docs-nav-item__meta">{section.meta}</span>
+                  </Link>
+                ))}
+              </section>
             ))}
           </nav>
         </aside>

src/pages/docs/DocsRouteComponents.tsx

@@ -24,12 +24,24 @@ const LazyDocsTargetArchitecturePage = lazy(() =>
   })),
 );
 
+const LazyDocsTechnicalEditorPage = lazy(() =>
+  import("@/pages/docs/technical-editor/page").then((module) => ({
+    default: module.DocsTechnicalEditorPage,
+  })),
+);
+
 const LazyDocsFeaturesPage = lazy(() =>
   import("@/pages/docs/features/page").then((module) => ({
     default: module.DocsFeaturesPage,
   })),
 );
 
+const LazyDocsEditorPage = lazy(() =>
+  import("@/pages/docs/editor/page").then((module) => ({
+    default: module.DocsEditorPage,
+  })),
+);
+
 export function DocsLayoutRoute(): React.JSX.Element {
   return (
     <Suspense fallback={null}>
@@ -62,6 +74,14 @@ export function DocsTargetArchitectureRoute(): React.JSX.Element {
   );
 }
 
+export function DocsTechnicalEditorRoute(): React.JSX.Element {
+  return (
+    <Suspense fallback={null}>
+      <LazyDocsTechnicalEditorPage />
+    </Suspense>
+  );
+}
+
 export function DocsFeaturesRoute(): React.JSX.Element {
   return (
     <Suspense fallback={null}>
@@ -69,3 +89,11 @@ export function DocsFeaturesRoute(): React.JSX.Element {
     </Suspense>
   );
 }
+
+export function DocsEditorRoute(): React.JSX.Element {
+  return (
+    <Suspense fallback={null}>
+      <LazyDocsEditorPage />
+    </Suspense>
+  );
+}

src/pages/docs/docsSections.ts

@@ -5,29 +5,56 @@ export interface DocSection {
   meta: string;
 }
 
-export const docSections: DocSection[] = [
+export interface DocGroup {
+  label: string;
+  sections: DocSection[];
+}
+
+export const docGroups: DocGroup[] = [
   {
-    path: "/docs",
-    title: "README",
-    subtitle: "Project overview",
-    meta: "01",
+    label: "Technical",
+    sections: [
+      {
+        path: "/docs",
+        title: "README",
+        subtitle: "Project overview",
+        meta: "01",
+      },
+      {
+        path: "/docs/architecture",
+        title: "Current Architecture",
+        subtitle: "Runtime structure",
+        meta: "02",
+      },
+      {
+        path: "/docs/target-architecture",
+        title: "Target Architecture",
+        subtitle: "Next direction",
+        meta: "03",
+      },
+      {
+        path: "/docs/technical-editor",
+        title: "Editor Technical Notes",
+        subtitle: "Implementation details",
+        meta: "04",
+      },
+    ],
   },
   {
-    path: "/docs/architecture",
-    title: "Architecture actuelle",
-    subtitle: "Runtime structure",
-    meta: "02",
-  },
-  {
-    path: "/docs/target-architecture",
-    title: "Architecture cible",
-    subtitle: "Next direction",
-    meta: "03",
-  },
-  {
-    path: "/docs/features",
-    title: "Fonctionnalités",
-    subtitle: "Implemented scope",
-    meta: "04",
+    label: "User",
+    sections: [
+      {
+        path: "/docs/features",
+        title: "Features",
+        subtitle: "Implemented scope",
+        meta: "05",
+      },
+      {
+        path: "/docs/editor",
+        title: "Editor User Guide",
+        subtitle: "Editing workflow",
+        meta: "06",
+      },
+    ],
   },
 ];

src/pages/docs/features/page.tsx

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

src/router.tsx

@@ -8,10 +8,12 @@ import { HomePage } from "@/pages/HomePage";
 import { EditorPage } from "@/pages/editor/EditorPage";
 import {
   DocsArchitectureRoute,
+  DocsEditorRoute,
   DocsFeaturesRoute,
   DocsLayoutRoute,
   DocsReadmeRoute,
   DocsTargetArchitectureRoute,
+  DocsTechnicalEditorRoute,
 } from "@/pages/docs/DocsRouteComponents";
 
 const rootRoute = createRootRoute({
@@ -54,12 +56,24 @@ const docsTargetArchitectureRoute = createRoute({
   component: DocsTargetArchitectureRoute,
 });
 
+const docsTechnicalEditorRoute = createRoute({
+  getParentRoute: () => docsRoute,
+  path: "/technical-editor",
+  component: DocsTechnicalEditorRoute,
+});
+
 const docsFeaturesRoute = createRoute({
   getParentRoute: () => docsRoute,
   path: "/features",
   component: DocsFeaturesRoute,
 });
 
+const docsEditorRoute = createRoute({
+  getParentRoute: () => docsRoute,
+  path: "/editor",
+  component: DocsEditorRoute,
+});
+
 const routeTree = rootRoute.addChildren([
   indexRoute,
   editorRoute,
@@ -67,7 +81,9 @@ const routeTree = rootRoute.addChildren([
     docsIndexRoute,
     docsArchitectureRoute,
     docsTargetArchitectureRoute,
+    docsTechnicalEditorRoute,
     docsFeaturesRoute,
+    docsEditorRoute,
   ]),
 ]);