refactor: revamp documentation (#196)

Co-authored-by: Valerio Ageno <[email protected]>

apps/documentation/src/components/navbar/navbar.tsx

@@ -1,24 +1,31 @@
 import type { JSX } from 'react'
-import { AppShell, Burger, Button, Flex } from '@mantine/core'
+import { AppShell, Box, Burger, Button, Flex } from '@mantine/core'
 import { Link } from 'tuono'
 
 import Actions from './actions'
 
 interface NavbarProps {
-  opened: boolean
   toggle: () => void
 }
 
-export default function Navbar({ opened, toggle }: NavbarProps): JSX.Element {
+export default function Navbar({ toggle }: NavbarProps): JSX.Element {
   return (
     <AppShell.Header p="sm">
       <Flex justify="space-between">
-        <Button component={Link} href="/" variant="transparent" p={0} fz={28}>
+        <Button
+          component={Link}
+          href="/"
+          variant="transparent"
+          p={0}
+          fz={28}
+          hiddenFrom="sm"
+        >
           Tuono
         </Button>
+        <Box />
         <Flex align="center" gap={8}>
           <Actions />
-          <Burger opened={opened} onClick={toggle} hiddenFrom="sm" size="sm" />
+          <Burger onClick={toggle} hiddenFrom="sm" size="sm" />
         </Flex>
       </Flex>
     </AppShell.Header>

apps/documentation/src/components/sidebar/config.ts

@@ -0,0 +1,266 @@
+import type { ReactNode } from 'react'
+
+interface SidebarElementType<T> {
+  type: T
+}
+
+interface SidebarLink extends SidebarElementType<'element'> {
+  label: string
+  href: string
+  children?: SidebarLink[]
+  leftIcon?: ReactNode
+}
+
+interface SidebarTitle extends SidebarElementType<'title'> {
+  label: string
+}
+
+type SidebarElements =
+  | SidebarElementType<'divider'>
+  | SidebarLink
+  | SidebarTitle
+
+export const sidebarElements: SidebarElements[] = [
+  {
+    type: 'element',
+    label: 'Home',
+    href: '/',
+  },
+  {
+    type: 'element',
+    label: 'Getting started',
+    href: '#focus',
+    children: [
+      {
+        type: 'element',
+        label: 'Installation',
+        href: '/documentation/installation',
+      },
+      {
+        type: 'element',
+        label: 'How is tuono different?',
+        href: '/documentation/how-is-tuono-different',
+      },
+    ],
+  },
+  {
+    type: 'element',
+    label: 'Tutorial',
+    href: '#focus',
+    children: [
+      {
+        type: 'element',
+        href: '/documentation/tutorial',
+        label: 'Intro',
+      },
+      {
+        type: 'element',
+        href: '/documentation/tutorial/development-setup',
+        label: 'Development setup',
+      },
+      {
+        type: 'element',
+        href: '/documentation/tutorial/api-fetching',
+        label: 'API fetching',
+      },
+      {
+        type: 'element',
+        href: '/documentation/tutorial/components',
+        label: 'Components',
+      },
+      {
+        type: 'element',
+        href: '/documentation/tutorial/dynamic-routes',
+        label: 'Dynamic routes',
+      },
+      {
+        type: 'element',
+        href: '/documentation/tutorial/error-handling',
+        label: 'Error handling',
+      },
+      {
+        type: 'element',
+        href: '/documentation/tutorial/seo',
+        label: 'SEO and meta tags',
+      },
+      {
+        type: 'element',
+        href: '/documentation/tutorial/redirections',
+        label: 'Redirections',
+      },
+      {
+        type: 'element',
+        href: '/documentation/tutorial/production',
+        label: 'Production build',
+      },
+      {
+        type: 'element',
+        href: '/documentation/tutorial/conclusion',
+        label: 'Conclusion',
+      },
+    ],
+  },
+  { type: 'divider' },
+  { type: 'title', label: 'Overview' },
+  {
+    type: 'element',
+    label: 'Routing',
+    href: '#focus',
+    children: [
+      {
+        type: 'element',
+        label: 'Defining routes',
+        href: '/documentation/routing/defining-routes',
+      },
+      {
+        type: 'element',
+        label: 'Pages',
+        href: '/documentation/routing/pages',
+      },
+      {
+        type: 'element',
+        label: 'Loading state',
+        href: '/documentation/routing/loading-state',
+      },
+      {
+        type: 'element',
+        label: 'Dynamic routes',
+        href: '/documentation/routing/dynamic-routes',
+      },
+      {
+        type: 'element',
+        label: 'Layouts',
+        href: '/documentation/routing/layouts',
+      },
+      {
+        type: 'element',
+        label: 'Link and navigation',
+        href: '/documentation/routing/link-and-navigation',
+      },
+      {
+        type: 'element',
+        label: 'Redirecting',
+        href: '/documentation/routing/redirecting',
+      },
+    ],
+  },
+  {
+    type: 'element',
+    label: 'Rendering',
+    href: '#focus',
+    children: [
+      {
+        type: 'element',
+        label: 'Server side rendering',
+        href: '/documentation/rendering/server-side-rendering',
+      },
+      {
+        type: 'element',
+        label: 'Static site rendering',
+        href: '/documentation/rendering/static-site-rendering',
+      },
+    ],
+  },
+  {
+    type: 'element',
+    label: 'Styles',
+    href: '#focus',
+    children: [
+      {
+        type: 'element',
+        label: 'CSS modules',
+        href: '/documentation/styles/css-modules',
+      },
+    ],
+  },
+  {
+    type: 'element',
+    label: 'Integrations',
+    href: '#focus',
+    children: [
+      {
+        type: 'element',
+        label: 'MDX',
+        href: '/documentation/integrations/mdx',
+      },
+    ],
+  },
+  {
+    type: 'element',
+    label: 'Core concepts',
+    href: '#focus',
+    children: [
+      {
+        type: 'element',
+        label: 'Multithreading',
+        href: '/documentation/core-concepts/multithreading',
+      },
+    ],
+  },
+  { type: 'divider' },
+  { type: 'title', label: 'API reference' },
+  {
+    type: 'element',
+    label: 'Components',
+    href: '#focus',
+    children: [
+      {
+        type: 'element',
+        label: 'Head',
+        href: '/documentation/components/head',
+      },
+      {
+        type: 'element',
+        label: 'Link',
+        href: '/documentation/components/link',
+      },
+    ],
+  },
+  {
+    type: 'element',
+    label: 'Hooks',
+    href: '#focus',
+    children: [
+      {
+        type: 'element',
+        label: 'useRouter',
+        href: '/documentation/hooks/use-router',
+      },
+    ],
+  },
+  {
+    type: 'element',
+    label: 'CLI',
+    href: '/documentation/cli',
+  },
+  {
+    type: 'element',
+    label: 'Application state',
+    href: '/documentation/application-state',
+  },
+  {
+    type: 'element',
+    label: 'tuono.config.ts',
+    href: '/documentation/configuration',
+  },
+
+  { type: 'divider' },
+  {
+    type: 'element',
+    label: 'Contributing',
+    href: '#focus',
+    leftIcon: '✨',
+    children: [
+      {
+        type: 'element',
+        label: 'Guildelines',
+        href: '/documentation/contributing',
+      },
+      {
+        type: 'element',
+        label: 'Local development',
+        href: '/documentation/contributing/local-development',
+      },
+    ],
+  },
+]

apps/documentation/src/components/sidebar/sidebar-link.module.css

@@ -1,6 +1,17 @@
 .link {
   border-radius: 8px;
   margin-top: 0.25rem;
-  line-height: 1.25rem;
+  line-height: 1rem;
   font-weight: 500;
+  transition: 0.3s;
+}
+
+.link span {
+  font-size: 14px !important;
+  color: var(--mantine-color-sidebar-gray);
+}
+
+.link:hover span,
+.active span {
+  color: var(--mantine-color-sidebar-text-hover);
 }

apps/documentation/src/components/sidebar/sidebar-link.tsx

@@ -1,6 +1,6 @@
 import type { JSX, ReactNode } from 'react'
-import { useState } from 'react'
 import { NavLink, type NavLinkProps } from '@mantine/core'
+import clsx from 'clsx'
 import { Link, useRouter } from 'tuono'
 import { IconChevronRight } from '@tabler/icons-react'
 
@@ -17,24 +17,19 @@ export default function SidebarLink(
   props: SidebarLinkProps & NavLinkProps,
 ): JSX.Element {
   const { pathname } = useRouter()
-  const [isOpen, setIsOpen] = useState<boolean>(!!props.defaultOpened)
+
+  const isActive = pathname === props.href
 
   const internalProps = {
-    active: pathname === props.href,
-    className: styles.link,
+    active: isActive,
+    className: clsx(styles.link, isActive && styles.active),
     rightSection: props.children && (
       <IconChevronRight
         size="1.2rem"
         stroke={1.5}
         className="mantine-rotate-rtl"
-        onClick={(e) => {
-          e.preventDefault()
-          e.stopPropagation()
-          setIsOpen((state) => !state)
-        }}
       />
     ),
-    opened: isOpen,
     autoContrast: true,
     ...props,
   }