Fix pathing and linking

Studio384 · Feb 14, 2024 · 4e8e5e7 · 4e8e5e7
1 parent 72fa62a
commit 4e8e5e7
Show file tree

Hide file tree

Showing 10 changed files with 17,925 additions and 5,361 deletions.
diff --git a/docs/src/Router.tsx b/docs/src/Router.tsx
@@ -8,38 +8,33 @@ import Icon from './app/Icon';
 import Icons from './app/Icons';
 import Layout from './design/layout/Layout';
 
-const router = createHashRouter(
-  [
-    {
-      element: <Layout />,
-      errorElement: <Error />,
-      children: [
-        {
-          path: '/',
-          element: <Home />
-        },
-        {
-          path: '/icons',
-          element: <Icons />
-        },
-        {
-          path: '/icons/:slug',
-          element: <Icon />
-        },
-        {
-          path: '/docs',
-          element: <Docs />
-        },
-        {
-          path: '/docs/changelog',
-          element: <Changelog />
-        }
-      ]
-    }
-  ],
+const router = createHashRouter([
   {
-    basename: '/Amaranth'
+    element: <Layout />,
+    errorElement: <Error />,
+    children: [
+      {
+        path: '/',
+        element: <Home />
+      },
+      {
+        path: '/icons',
+        element: <Icons />
+      },
+      {
+        path: '/icons/:slug',
+        element: <Icon />
+      },
+      {
+        path: '/docs',
+        element: <Docs />
+      },
+      {
+        path: '/docs/changelog',
+        element: <Changelog />
+      }
+    ]
   }
-);
+]);
 
 export default router;
diff --git a/docs/src/app/Components/IconCard.tsx b/docs/src/app/Components/IconCard.tsx
@@ -1,3 +1,5 @@
+import { NavLink } from 'react-router-dom';
+
 import { Box, Link, Sheet, Stack, Typography } from '@mui/joy';
 
 import { ILibraryIcon } from '@/types';
@@ -25,7 +27,8 @@ export default function IconCard({ icon }: { icon: ILibraryIcon }) {
         </Box>
         <Link
           overlay
-          href={`/icons/${icon.slug}`}
+          component={NavLink}
+          to={`/icons/${icon.slug}`}
           underline="none"
           color="neutral"
           sx={{

diff --git a/docs/src/app/Docs.tsx b/docs/src/app/Docs.tsx
@@ -4,11 +4,11 @@ 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';
-import PageFade from './Docs/pages/Fade';
 
 export default function Docs() {
   return (

diff --git a/docs/src/app/Docs/Navigation.tsx b/docs/src/app/Docs/Navigation.tsx
@@ -1,8 +1,18 @@
 import { Fragment } from 'react';
+import { NavLink } from 'react-router-dom';
 
 import { List, ListItem, ListItemButton, ListItemContent, ListSubheader, Typography } from '@mui/joy';
 
-import Amicon, { aiAmicons, aiArrowRotateRight, aiArrowsDownLeftRightUpCenter, aiCircleHalfInner, aiHeart, aiReact, aiSpinner, aiStar } from '@studio384/amaranth';
+import Amicon, {
+  aiAmicons,
+  aiArrowRotateRight,
+  aiArrowsDownLeftRightUpCenter,
+  aiCircleHalfInner,
+  aiHeart,
+  aiReact,
+  aiSpinner,
+  aiStar
+} from '@studio384/amaranth';
 
 export default function DocsNavigation() {
   const pages = [
@@ -82,7 +92,7 @@ export default function DocsNavigation() {
           </ListSubheader>
           {category.pages.map((page) => (
             <ListItem key={page.link}>
-              <ListItemButton component="a" href={page.link} color="primary">
+              <ListItemButton component={NavLink} to={page.link} color="primary">
                 <ListItemContent>
                   <Typography noWrap>{page.title}</Typography>
                 </ListItemContent>

diff --git a/docs/src/app/Docs/pages/Beat.tsx b/docs/src/app/Docs/pages/Beat.tsx
@@ -4,8 +4,8 @@ import Code from '@/design/components/Code';
 
 import { aiExpand, aiHeart, aiPlay } from '@studio384/amaranth';
 
-import Playground, { IIconCssVariables, IPlaygroundConfig } from '../playground/Playground';
 import ApiTable from '../playground/ApiTable';
+import Playground, { IIconCssVariables, IPlaygroundConfig } from '../playground/Playground';
 
 export default function PageBeat() {
   const playgroundConfig: IPlaygroundConfig = {

diff --git a/docs/src/app/Docs/pages/Rotate.tsx b/docs/src/app/Docs/pages/Rotate.tsx
@@ -4,8 +4,8 @@ import Code from '@/design/components/Code';
 
 import { aiAmicons, aiArrowUp, aiMessageSmile } from '@studio384/amaranth';
 
-import Playground, { IIconCssVariables, IPlaygroundConfig } from '../playground/Playground';
 import ApiTable from '../playground/ApiTable';
+import Playground, { IIconCssVariables, IPlaygroundConfig } from '../playground/Playground';
 
 export default function PageRotate() {
   const playgroundConfig: IPlaygroundConfig = {

diff --git a/docs/src/app/Docs/playground/ApiTable.tsx b/docs/src/app/Docs/playground/ApiTable.tsx
@@ -1,6 +1,7 @@
 import { Sheet, Table } from '@mui/joy';
 
 import Code from '@/design/components/Code';
+
 import { IIconCssVariables } from './Playground';
 
 interface IApiTableProps {