From 33432a7015542aed924dffaba1983ab28423b85b Mon Sep 17 00:00:00 2001 From: Yannick Date: Mon, 19 Feb 2024 23:36:18 +0100 Subject: [PATCH] Revamp routing for documentation --- docs/src/Router.tsx | 51 +++- docs/src/app/Changelog.tsx | 226 ------------------ docs/src/app/Docs.tsx | 15 +- docs/src/app/Docs/Navigation.tsx | 18 +- docs/src/app/Docs/pages/Beat.tsx | 6 +- docs/src/app/Docs/pages/Changelog.tsx | 217 +++++++++++++++++ docs/src/app/Docs/pages/Fade.tsx | 6 +- docs/src/app/Docs/pages/Flip.tsx | 4 +- docs/src/app/Docs/pages/Installation.tsx | 4 +- docs/src/app/Docs/pages/Rotate.tsx | 6 +- docs/src/app/Docs/pages/Spin.tsx | 6 +- .../{Release.tsx => Docs/pages/_Release.tsx} | 2 +- docs/src/app/Icons.tsx | 2 +- 13 files changed, 292 insertions(+), 271 deletions(-) delete mode 100644 docs/src/app/Changelog.tsx create mode 100644 docs/src/app/Docs/pages/Changelog.tsx rename docs/src/app/{Release.tsx => Docs/pages/_Release.tsx} (99%) diff --git a/docs/src/Router.tsx b/docs/src/Router.tsx index 02bb2708..69542be7 100644 --- 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: - }, - { - path: '/docs/changelog', - element: + element: , + errorElement: , + children: [ + { + index: true, + element: + }, + { + path: 'installation', + element: + }, + { + path: 'spin', + element: + }, + { + path: 'rotate', + element: + }, + { + path: 'flip', + element: + }, + { + path: 'beat', + element: + }, + { + path: 'fade', + element: + }, + { + path: 'changelog', + element: + } + ] } ] } diff --git a/docs/src/app/Changelog.tsx b/docs/src/app/Changelog.tsx deleted file mode 100644 index 5408eca0..00000000 --- a/docs/src/app/Changelog.tsx +++ /dev/null @@ -1,226 +0,0 @@ -import { Container, Stack, Typography } from '@mui/joy'; - -import Code from '@/design/components/Code'; -import Header from '@/design/layout/LayoutElements/Header'; - -import Release from './Release'; - -export default function Changelog() { - return ( - <> -
- - Changelog - -
- - - Introduces a brand new documentation website with improved component documentation with playground, this changelog, and much more., - <> - The AmaranthIcon component has been renamed to Amicon. - , - <> - The Amicon component now supports the beat and fade property. - - ]} - changed={[ - <> - We're updating our branding from Amaranth to Amicons, with a brand new logo and mascot to boot. While the Amaranth and{' '} - Amicons icons have existed at the same time in the previous version, we consider the removal of the Amaranth icon a - rename. - , - <> - The default values for all properties of our Amicon component are now being set to Undefined rather than a default - truthy value. - , - <> - The various CSS variables have been renamed to be more consistent with new variables introduced in this update. See the documentation for more - info. - , - <> - You can now pass properties to the Amicon component. - , - <>Various updates to the categorization of icons in the documentation. - ]} - fixed={[ - <> - Fixed the expand icon including excessive shapes. - , - <> - Fixed the misalignment in the heading-2 icon to better map the icon to a pixel grid. - , - <> - Fixes various issues with the CSS variables in the Amicon component. - - ]} - newIcons={[ - '0', - '1', - '2', - '3', - '4', - '5', - '6', - '7', - '8', - '9', - 'a', - 'arrow-up-right-from-square', - 'b', - 'battery-charging', - 'battery-empty', - 'battery-exclamation', - 'battery-full', - 'battery-half', - 'battery-low', - 'battery-quarter', - 'battery-slash', - 'battery-three-quarter', - 'broom', - 'c', - 'calculator', - 'camera', - 'car-side', - 'clipboard', - 'command', - 'computer-mouse-scroll-wheel', - 'computer-mouse', - 'crop', - 'cursor', - 'd', - 'dice-five', - 'dice-four', - 'dice-one', - 'dice-six', - 'dice-three', - 'dice-two', - 'dice', - 'e', - 'ellipsis-h', - 'envelope-open', - 'export', - 'f', - 'flask', - 'folder-min', - 'folder-open', - 'folder-plus', - 'frame', - 'g', - 'h', - 'i', - 'icons', - 'j', - 'k', - 'keyboard-brightness-high', - 'keyboard-brightness-low', - 'keyboard', - 'l', - 'loader', - 'm', - 'n', - 'o', - 'option', - 'p', - 'q', - 'r', - 'road', - 's', - 'share-nodes', - 'spinner', - 'square-dashed', - 'square', - 'studio-384', - 't', - 'threads', - 'toast', - 'train-track', - 'triangle-dashed', - 'triangle', - 'truck-pickup', - 'truck-tow', - 'u', - 'v', - 'w', - 'x', - 'y', - 'z' - ]} - updatedIcons={[ - 'a-gum', - 'envelope', - 'facebook', - 'heading-1', - 'heading-2', - 'heading-3', - 'heading-4', - 'heading-5', - 'heading-6', - 'patreon', - 'safari', - 'shuffle', - 'translate', - 'triangle-exclamation', - 'volume-0', - 'volume-1', - 'volume-2', - 'volume-3', - 'volume-slash' - ]} - renamedIcons={[ - { old: 'amaranth', new: 'amicons' }, - { old: 'ellipsis', new: 'ellipsis-h' } - ]} - removedIcons={['amaranth', 'bootstrap', 'font-awesome']} - /> - - - - The repository no longer provides font files or CSS files.]} - newIcons={[ - 'table-cell-merge', - 'table-column-insert-left', - 'table-column-insert-right', - 'table-column-min', - 'table-header-cell', - 'table-min', - 'table-row-insert-bottom', - 'table-row-insert-top', - 'table-row-min' - ]} - updatedIcons={['chart-pie', 'circle-dashed', 'table-clcok', 'table-header-column', 'table-header-row', 'table', 'tag-geear', 'tag-plus', 'tag']} - /> - Migrations from ChangeWindows to Studio 384]} /> - - - - ); -} diff --git a/docs/src/app/Docs.tsx b/docs/src/app/Docs.tsx index 13366c3b..525888e1 100644 --- 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() { - - - - - - + diff --git a/docs/src/app/Docs/Navigation.tsx b/docs/src/app/Docs/Navigation.tsx index f95b5b7e..eeb4338e 100644 --- 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() { {category.pages.map((page) => ( - + {page.title} diff --git a/docs/src/app/Docs/pages/Beat.tsx b/docs/src/app/Docs/pages/Beat.tsx index 7308af6c..b14c5640 100644 --- a/docs/src/app/Docs/pages/Beat.tsx +++ b/docs/src/app/Docs/pages/Beat.tsx @@ -44,15 +44,15 @@ export default function PageBeat() { }; return ( - - Beat + + Beat With the beat property gives you a basic beat animation. - API + API diff --git a/docs/src/app/Docs/pages/Changelog.tsx b/docs/src/app/Docs/pages/Changelog.tsx new file mode 100644 index 00000000..7767c3f5 --- /dev/null +++ b/docs/src/app/Docs/pages/Changelog.tsx @@ -0,0 +1,217 @@ +import { Stack } from '@mui/joy'; + +import Code from '@/design/components/Code'; + +import Release from './_Release'; + +export default function Changelog() { + return ( + + + Introduces a brand new documentation website with improved icon previews, component documentation with interactive playground, this changelog, and + much more. And best of all; it's now available online instead of needing to be compiled by you. + , + <> + The AmaranthIcon component has been renamed to Amicon. + , + <> + The Amicon component now supports the beat and fade property. + + ]} + changed={[ + <> + We're updating our branding from Amaranth to Amicons, with a brand new logo and mascot to boot. While the Amaranth and{' '} + Amicons icons have existed at the same time in the previous version, we consider the removal of the Amaranth icon arename. + , + <> + The default values for all properties of our Amicon component are now being set to Undefined rather than a default + truthyvalue. + , + <> + The various CSS variables have been renamed to be more consistent with new variables introduced in this update. See the documentation for more info. + , + <> + You can now pass properties to the Amicon component. + , + <>Various updates to the categorization of icons in the documentation. + ]} + fixed={[ + <> + Fixed the expand icon including excessive shapes. + , + <> + Fixed the misalignment in the heading-2 icon to better map the icon to a pixel grid. + , + <> + Fixes various issues with the CSS variables in the Amicon component. + + ]} + newIcons={[ + '0', + '1', + '2', + '3', + '4', + '5', + '6', + '7', + '8', + '9', + 'a', + 'arrow-up-right-from-square', + 'b', + 'battery-charging', + 'battery-empty', + 'battery-exclamation', + 'battery-full', + 'battery-half', + 'battery-low', + 'battery-quarter', + 'battery-slash', + 'battery-three-quarter', + 'broom', + 'c', + 'calculator', + 'camera', + 'car-side', + 'clipboard', + 'command', + 'computer-mouse-scroll-wheel', + 'computer-mouse', + 'crop', + 'cursor', + 'd', + 'dice-five', + 'dice-four', + 'dice-one', + 'dice-six', + 'dice-three', + 'dice-two', + 'dice', + 'e', + 'ellipsis-h', + 'envelope-open', + 'export', + 'f', + 'flask', + 'folder-min', + 'folder-open', + 'folder-plus', + 'frame', + 'g', + 'h', + 'i', + 'icons', + 'j', + 'k', + 'keyboard-brightness-high', + 'keyboard-brightness-low', + 'keyboard', + 'l', + 'loader', + 'm', + 'n', + 'o', + 'option', + 'p', + 'q', + 'r', + 'road', + 's', + 'share-nodes', + 'spinner', + 'square-dashed', + 'square', + 'studio-384', + 't', + 'threads', + 'toast', + 'train-track', + 'triangle-dashed', + 'triangle', + 'truck-pickup', + 'truck-tow', + 'u', + 'v', + 'w', + 'x', + 'y', + 'z' + ]} + updatedIcons={[ + 'a-gum', + 'envelope', + 'facebook', + 'heading-1', + 'heading-2', + 'heading-3', + 'heading-4', + 'heading-5', + 'heading-6', + 'patreon', + 'safari', + 'shuffle', + 'translate', + 'triangle-exclamation', + 'volume-0', + 'volume-1', + 'volume-2', + 'volume-3', + 'volume-slash' + ]} + renamedIcons={[ + { old: 'amaranth', new: 'amicons' }, + { old: 'ellipsis', new: 'ellipsis-h' } + ]} + removedIcons={['amaranth', 'bootstrap', 'font-awesome']} + /> + + + + The repository no longer provides font files or CSS files.]} + newIcons={[ + 'table-cell-merge', + 'table-column-insert-left', + 'table-column-insert-right', + 'table-column-min', + 'table-header-cell', + 'table-min', + 'table-row-insert-bottom', + 'table-row-insert-top', + 'table-row-min' + ]} + updatedIcons={['chart-pie', 'circle-dashed', 'table-clcok', 'table-header-column', 'table-header-row', 'table', 'tag-geear', 'tag-plus', 'tag']} + /> + Migrations from ChangeWindows to Studio 384]} /> + + ); +} diff --git a/docs/src/app/Docs/pages/Fade.tsx b/docs/src/app/Docs/pages/Fade.tsx index bc266a69..57b798db 100644 --- a/docs/src/app/Docs/pages/Fade.tsx +++ b/docs/src/app/Docs/pages/Fade.tsx @@ -44,15 +44,15 @@ export default function PageFade() { }; return ( - - Fade + + Fade With the fade property gives you a basic fade animation. - API + API diff --git a/docs/src/app/Docs/pages/Flip.tsx b/docs/src/app/Docs/pages/Flip.tsx index 8a019eb7..21806f10 100644 --- a/docs/src/app/Docs/pages/Flip.tsx +++ b/docs/src/app/Docs/pages/Flip.tsx @@ -21,8 +21,8 @@ export default function PageFlip() { }; return ( - - Flip + + Flip With the flip property you can mirror your icon on its x-axis, y-axis or both. diff --git a/docs/src/app/Docs/pages/Installation.tsx b/docs/src/app/Docs/pages/Installation.tsx index 280c0175..278a5f71 100644 --- a/docs/src/app/Docs/pages/Installation.tsx +++ b/docs/src/app/Docs/pages/Installation.tsx @@ -4,8 +4,8 @@ import Codeblock from '@/design/components/Codeblock'; export default function PageInstallation() { return ( - - Install Amicons + + Install Amicons Get started with Amicons by running the following command in your project. npm install @studio384/amaranth diff --git a/docs/src/app/Docs/pages/Rotate.tsx b/docs/src/app/Docs/pages/Rotate.tsx index dff940db..c08bf55f 100644 --- a/docs/src/app/Docs/pages/Rotate.tsx +++ b/docs/src/app/Docs/pages/Rotate.tsx @@ -34,15 +34,15 @@ export default function PageRotate() { }; return ( - - Rotate + + Rotate With the rotate property you can change the default rotation of your icon. - API + API diff --git a/docs/src/app/Docs/pages/Spin.tsx b/docs/src/app/Docs/pages/Spin.tsx index fcb634e1..35dd2ce4 100644 --- a/docs/src/app/Docs/pages/Spin.tsx +++ b/docs/src/app/Docs/pages/Spin.tsx @@ -52,15 +52,15 @@ export default function PageSpin() { }; return ( - - Spin + + Spin With the spin property you can make your icons play a rotation animation. - API + API When setting the property to pulse, some additional variables are available while some defaults are changed. diff --git a/docs/src/app/Release.tsx b/docs/src/app/Docs/pages/_Release.tsx similarity index 99% rename from docs/src/app/Release.tsx rename to docs/src/app/Docs/pages/_Release.tsx index 25583bc2..b7343f0f 100644 --- a/docs/src/app/Release.tsx +++ b/docs/src/app/Docs/pages/_Release.tsx @@ -8,7 +8,7 @@ import { ILibraryIcon } from '@/types'; import Amicon, { aiArrowRight, aiBoxOpenFull, aiBug, aiPen, aiPlus, aiTrashCan } from '@studio384/amaranth'; -import IconCard from './Components/IconCard'; +import IconCard from '../../Components/IconCard'; export default function Release({ name, diff --git a/docs/src/app/Icons.tsx b/docs/src/app/Icons.tsx index 5c7c4d75..b7d7c009 100644 --- a/docs/src/app/Icons.tsx +++ b/docs/src/app/Icons.tsx @@ -132,7 +132,7 @@ export default function Icons() { setSearchQuery('c', _category.slug)} - variant={searchCategories.includes(_category.slug) ? 'soft' : 'plain'} + selected={searchCategories.includes(_category.slug)} color="primary" >