Revamp routing for documentation

Studio384 · Feb 19, 2024 · 33432a7 · 33432a7
1 parent f238afb
commit 33432a7
Show file tree

Hide file tree

Showing 13 changed files with 292 additions and 271 deletions.
diff --git a/docs/src/Router.tsx b/docs/src/Router.tsx
@@ -1,7 +1,13 @@
-import { createHashRouter } from 'react-router-dom';
+import { Navigate, createHashRouter, redirect } from 'react-router-dom';
 
-import Changelog from './app/Changelog';
 import Docs from './app/Docs';
+import PageBeat from './app/Docs/pages/Beat';
+import Changelog from './app/Docs/pages/Changelog';
+import PageFade from './app/Docs/pages/Fade';
+import PageFlip from './app/Docs/pages/Flip';
+import PageInstallation from './app/Docs/pages/Installation';
+import PageRotate from './app/Docs/pages/Rotate';
+import PageSpin from './app/Docs/pages/Spin';
 import Error from './app/Error';
 import Home from './app/Home';
 import Icon from './app/Icon';
@@ -27,11 +33,42 @@ const router = createHashRouter([
       },
       {
         path: '/docs',
-        element: <Docs />
-      },
-      {
-        path: '/docs/changelog',
-        element: <Changelog />
+        element: <Docs />,
+        errorElement: <Error />,
+        children: [
+          {
+            index: true,
+            element: <Navigate to="installation" replace />
+          },
+          {
+            path: 'installation',
+            element: <PageInstallation />
+          },
+          {
+            path: 'spin',
+            element: <PageSpin />
+          },
+          {
+            path: 'rotate',
+            element: <PageRotate />
+          },
+          {
+            path: 'flip',
+            element: <PageFlip />
+          },
+          {
+            path: 'beat',
+            element: <PageBeat />
+          },
+          {
+            path: 'fade',
+            element: <PageFade />
+          },
+          {
+            path: 'changelog',
+            element: <Changelog />
+          }
+        ]
       }
     ]
   }

diff --git a/docs/src/app/Changelog.tsx b/docs/src/app/Changelog.tsx
diff --git a/docs/src/app/Docs.tsx b/docs/src/app/Docs.tsx
@@ -1,14 +1,10 @@
+import { Outlet } from 'react-router-dom';
+
 import { Box, Container, Stack, Typography } from '@mui/joy';
 
 import Header from '@/design/layout/LayoutElements/Header';
 
 import DocsNavigation from './Docs/Navigation';
-import PageBeat from './Docs/pages/Beat';
-import PageFade from './Docs/pages/Fade';
-import PageFlip from './Docs/pages/Flip';
-import PageInstallation from './Docs/pages/Installation';
-import PageRotate from './Docs/pages/Rotate';
-import PageSpin from './Docs/pages/Spin';
 
 export default function Docs() {
   return (
@@ -30,12 +26,7 @@ export default function Docs() {
             <DocsNavigation />
           </Box>
           <Stack gap={4}>
-            <PageInstallation />
-            <PageSpin />
-            <PageRotate />
-            <PageFlip />
-            <PageBeat />
-            <PageFade />
+            <Outlet />
           </Stack>
         </Box>
       </Container>

diff --git a/docs/src/app/Docs/Navigation.tsx b/docs/src/app/Docs/Navigation.tsx
@@ -1,5 +1,5 @@
 import { Fragment } from 'react';
-import { NavLink } from 'react-router-dom';
+import { NavLink, useLocation } from 'react-router-dom';
 
 import { List, ListItem, ListItemButton, ListItemContent, ListSubheader, Typography } from '@mui/joy';
 
@@ -15,6 +15,8 @@ import Amicon, {
 } from '@studio384/amaranth';
 
 export default function DocsNavigation() {
+  const location = useLocation();
+
   const pages = [
     {
       title: 'Get started',
@@ -23,7 +25,7 @@ export default function DocsNavigation() {
         {
           title: 'Installation',
           icon: aiAmicons,
-          link: '#installation'
+          link: '/docs/installation'
         }
       ]
     },
@@ -34,27 +36,27 @@ export default function DocsNavigation() {
         {
           title: 'Spin',
           icon: aiSpinner,
-          link: '#spin'
+          link: '/docs/spin'
         },
         {
           title: 'Rotate',
           icon: aiArrowRotateRight,
-          link: '#rotate'
+          link: '/docs/rotate'
         },
         {
           title: 'Flip',
           icon: aiArrowsDownLeftRightUpCenter,
-          link: '#flip'
+          link: '/docs/flip'
         },
         {
           title: 'Beat',
           icon: aiHeart,
-          link: '#beat'
+          link: '/docs/beat'
         },
         {
           title: 'Fade',
           icon: aiCircleHalfInner,
-          link: '#fade'
+          link: '/docs/fade'
         }
       ]
     },
@@ -92,7 +94,7 @@ export default function DocsNavigation() {
           </ListSubheader>
           {category.pages.map((page) => (
             <ListItem key={page.link}>
-              <ListItemButton component={NavLink} to={page.link} color="primary">
+              <ListItemButton component={NavLink} to={page.link} color="primary" selected={location.pathname.includes(page.link)}>
                 <ListItemContent>
                   <Typography noWrap>{page.title}</Typography>
                 </ListItemContent>