diff --git a/apps/documentation/src/components/navbar/navbar.tsx b/apps/documentation/src/components/navbar/navbar.tsx index d0a60f05..2f1e880b 100644 --- a/apps/documentation/src/components/navbar/navbar.tsx +++ b/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 ( - + - + diff --git a/apps/documentation/src/components/sidebar/config.ts b/apps/documentation/src/components/sidebar/config.ts new file mode 100644 index 00000000..7ea112fb --- /dev/null +++ b/apps/documentation/src/components/sidebar/config.ts @@ -0,0 +1,266 @@ +import type { ReactNode } from 'react' + +interface SidebarElementType { + 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', + }, + ], + }, +] diff --git a/apps/documentation/src/components/sidebar/sidebar-link.module.css b/apps/documentation/src/components/sidebar/sidebar-link.module.css index b90273f4..bd2edea7 100644 --- a/apps/documentation/src/components/sidebar/sidebar-link.module.css +++ b/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); } diff --git a/apps/documentation/src/components/sidebar/sidebar-link.tsx b/apps/documentation/src/components/sidebar/sidebar-link.tsx index 15323c34..80cc7376 100644 --- a/apps/documentation/src/components/sidebar/sidebar-link.tsx +++ b/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(!!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 && ( { - e.preventDefault() - e.stopPropagation() - setIsOpen((state) => !state) - }} /> ), - opened: isOpen, autoContrast: true, ...props, } diff --git a/apps/documentation/src/components/sidebar/sidebar.tsx b/apps/documentation/src/components/sidebar/sidebar.tsx index 84f6c027..ad89569c 100644 --- a/apps/documentation/src/components/sidebar/sidebar.tsx +++ b/apps/documentation/src/components/sidebar/sidebar.tsx @@ -1,104 +1,106 @@ import type { JSX } from 'react' -import { AppShell } from '@mantine/core' +import { + AppShell, + Badge, + Flex, + Divider, + Title, + Button, + ScrollArea, + Text, +} from '@mantine/core' + +import { IconX } from '@tabler/icons-react' +import { useMediaQuery } from '@mantine/hooks' + +import { sidebarElements } from './config' import SidebarLink from './sidebar-link' interface SidebarProps { close: () => void } -export default function Sidebar({ close }: SidebarProps): JSX.Element { +function SidebarHeader(): JSX.Element { + const isSm = useMediaQuery('(min-width: 48em)') return ( - - - - - - - - - - - - - - - - + + + + Tuono + + Docs + + + + + + ) +} - - - +function SidebarElements({ close }: SidebarProps): JSX.Element { + return ( + + {sidebarElements.map((el, i) => { + if (el.type === 'divider') { + return + } + if (el.type === 'title') { + return ( + + ) + } + if (el.children?.length) { + return ( + + {el.children.map((child, index) => ( + + ))} + + ) + } + return ( + + ) + })} + + ) +} - - - +export default function Sidebar({ close }: SidebarProps): JSX.Element { + return ( + + + ) } diff --git a/apps/documentation/src/routes/__root.tsx b/apps/documentation/src/routes/__root.tsx index e539d319..bdd0bd4f 100644 --- a/apps/documentation/src/routes/__root.tsx +++ b/apps/documentation/src/routes/__root.tsx @@ -7,6 +7,7 @@ import { AppShell, Container, } from '@mantine/core' +import type { CSSVariablesResolver } from '@mantine/core' import { useDisclosure } from '@mantine/hooks' import { Head } from 'tuono' @@ -25,7 +26,7 @@ interface RootRouteProps { const theme = createTheme({ primaryColor: 'violet', primaryShade: { light: 6, dark: 9 }, - fontFamily: 'Roboto', + fontFamily: 'Inter', respectReducedMotion: true, radius: { xs: '8px', @@ -60,6 +61,26 @@ const theme = createTheme({ }, }, }, + other: { + sidebarGrayLight: '#495057', + sidebarGrayDark: '#adb5bd', + sidebarTextHoverLight: '#212529', + sidebarTextHoverDark: '#f8f9fa', + }, +}) + +const resolver: CSSVariablesResolver = (th) => ({ + variables: {}, + light: { + '--mantine-color-sidebar-gray': th.other.sidebarGrayLight as string, + '--mantine-color-sidebar-text-hover': th.other + .sidebarTextHoverLight as string, + }, + dark: { + '--mantine-color-sidebar-gray': th.other.sidebarGrayDark as string, + '--mantine-color-sidebar-text-hover': th.other + .sidebarTextHoverDark as string, + }, }) export default function RootRoute({ children }: RootRouteProps): JSX.Element { @@ -77,8 +98,9 @@ export default function RootRoute({ children }: RootRouteProps): JSX.Element { - + - + diff --git a/apps/documentation/src/routes/documentation/components/head.mdx b/apps/documentation/src/routes/documentation/components/head.mdx new file mode 100644 index 00000000..51d57d00 --- /dev/null +++ b/apps/documentation/src/routes/documentation/components/head.mdx @@ -0,0 +1,14 @@ +import MetaTags from '@/components/meta-tags' + + + +import Breadcrumbs, { Element } from '@/components/breadcrumbs' + + + +# Head + +TODO diff --git a/apps/documentation/src/routes/documentation/components/link.mdx b/apps/documentation/src/routes/documentation/components/link.mdx new file mode 100644 index 00000000..370ed7c7 --- /dev/null +++ b/apps/documentation/src/routes/documentation/components/link.mdx @@ -0,0 +1,14 @@ +import MetaTags from '@/components/meta-tags' + + + +import Breadcrumbs, { Element } from '@/components/breadcrumbs' + + + +# Link + +TODO diff --git a/apps/documentation/src/routes/documentation/configuration.mdx b/apps/documentation/src/routes/documentation/configuration.mdx new file mode 100644 index 00000000..dbb33a34 --- /dev/null +++ b/apps/documentation/src/routes/documentation/configuration.mdx @@ -0,0 +1,14 @@ +import MetaTags from '@/components/meta-tags' + + + +import Breadcrumbs, { Element } from '@/components/breadcrumbs' + + + +# Configuration + +TODO diff --git a/apps/documentation/src/routes/documentation/core-concepts/multithreading.mdx b/apps/documentation/src/routes/documentation/core-concepts/multithreading.mdx new file mode 100644 index 00000000..577b39f7 --- /dev/null +++ b/apps/documentation/src/routes/documentation/core-concepts/multithreading.mdx @@ -0,0 +1,14 @@ +import MetaTags from '@/components/meta-tags' + + + +import Breadcrumbs, { Element } from '@/components/breadcrumbs' + + + +# Multithreading + +TODO diff --git a/apps/documentation/src/routes/documentation/hooks/use-router.mdx b/apps/documentation/src/routes/documentation/hooks/use-router.mdx new file mode 100644 index 00000000..134cd5cf --- /dev/null +++ b/apps/documentation/src/routes/documentation/hooks/use-router.mdx @@ -0,0 +1,14 @@ +import MetaTags from '@/components/meta-tags' + + + +import Breadcrumbs, { Element } from '@/components/breadcrumbs' + + + +# useRouter + +TODO diff --git a/apps/documentation/src/routes/documentation/how-is-tuono-different.mdx b/apps/documentation/src/routes/documentation/how-is-tuono-different.mdx new file mode 100644 index 00000000..30921b87 --- /dev/null +++ b/apps/documentation/src/routes/documentation/how-is-tuono-different.mdx @@ -0,0 +1,14 @@ +import MetaTags from '@/components/meta-tags' + + + +import Breadcrumbs, { Element } from '@/components/breadcrumbs' + + + +# How is tuono different? + +TODO diff --git a/apps/documentation/src/routes/documentation/integrations/mdx.mdx b/apps/documentation/src/routes/documentation/integrations/mdx.mdx new file mode 100644 index 00000000..e840e99f --- /dev/null +++ b/apps/documentation/src/routes/documentation/integrations/mdx.mdx @@ -0,0 +1,14 @@ +import MetaTags from '@/components/meta-tags' + + + +import Breadcrumbs, { Element } from '@/components/breadcrumbs' + + + +# MDX + +TODO diff --git a/apps/documentation/src/routes/documentation/rendering/server-side-rendering.mdx b/apps/documentation/src/routes/documentation/rendering/server-side-rendering.mdx new file mode 100644 index 00000000..b43e56b2 --- /dev/null +++ b/apps/documentation/src/routes/documentation/rendering/server-side-rendering.mdx @@ -0,0 +1,14 @@ +import MetaTags from '@/components/meta-tags' + + + +import Breadcrumbs, { Element } from '@/components/breadcrumbs' + + + +# SSR + +TODO diff --git a/apps/documentation/src/routes/documentation/rendering/static-site-rendering.mdx b/apps/documentation/src/routes/documentation/rendering/static-site-rendering.mdx new file mode 100644 index 00000000..13d94d57 --- /dev/null +++ b/apps/documentation/src/routes/documentation/rendering/static-site-rendering.mdx @@ -0,0 +1,14 @@ +import MetaTags from '@/components/meta-tags' + + + +import Breadcrumbs, { Element } from '@/components/breadcrumbs' + + + +# Static Site Rendering + +TODO diff --git a/apps/documentation/src/routes/documentation/routing/defining-routes.mdx b/apps/documentation/src/routes/documentation/routing/defining-routes.mdx new file mode 100644 index 00000000..4000519f --- /dev/null +++ b/apps/documentation/src/routes/documentation/routing/defining-routes.mdx @@ -0,0 +1,14 @@ +import MetaTags from '@/components/meta-tags' + + + +import Breadcrumbs, { Element } from '@/components/breadcrumbs' + + + +# Defining routes + +Todo diff --git a/apps/documentation/src/routes/documentation/routing/dynamic-routes.mdx b/apps/documentation/src/routes/documentation/routing/dynamic-routes.mdx new file mode 100644 index 00000000..0450543d --- /dev/null +++ b/apps/documentation/src/routes/documentation/routing/dynamic-routes.mdx @@ -0,0 +1,14 @@ +import MetaTags from '@/components/meta-tags' + + + +import Breadcrumbs, { Element } from '@/components/breadcrumbs' + + + +# Loading state + +Todo diff --git a/apps/documentation/src/routes/documentation/routing/intro.mdx b/apps/documentation/src/routes/documentation/routing/intro.mdx deleted file mode 100644 index 63eb27df..00000000 --- a/apps/documentation/src/routes/documentation/routing/intro.mdx +++ /dev/null @@ -1,19 +0,0 @@ -import MetaTags from '@/components/meta-tags' - - - -import Breadcrumbs, { Element } from '@/components/breadcrumbs' - - - -# Project structure - -Todo diff --git a/apps/documentation/src/routes/documentation/routing/layouts.mdx b/apps/documentation/src/routes/documentation/routing/layouts.mdx new file mode 100644 index 00000000..2c4b7b4f --- /dev/null +++ b/apps/documentation/src/routes/documentation/routing/layouts.mdx @@ -0,0 +1,14 @@ +import MetaTags from '@/components/meta-tags' + + + +import Breadcrumbs, { Element } from '@/components/breadcrumbs' + + + +# Layouts + +Todo diff --git a/apps/documentation/src/routes/documentation/routing/link-and-navigation.mdx b/apps/documentation/src/routes/documentation/routing/link-and-navigation.mdx new file mode 100644 index 00000000..35c07f1c --- /dev/null +++ b/apps/documentation/src/routes/documentation/routing/link-and-navigation.mdx @@ -0,0 +1,14 @@ +import MetaTags from '@/components/meta-tags' + + + +import Breadcrumbs, { Element } from '@/components/breadcrumbs' + + + +# Link and navigation + +Todo diff --git a/apps/documentation/src/routes/documentation/routing/loading-state.mdx b/apps/documentation/src/routes/documentation/routing/loading-state.mdx new file mode 100644 index 00000000..dfad9651 --- /dev/null +++ b/apps/documentation/src/routes/documentation/routing/loading-state.mdx @@ -0,0 +1,14 @@ +import MetaTags from '@/components/meta-tags' + + + +import Breadcrumbs, { Element } from '@/components/breadcrumbs' + + + +# Loading state + +Todo diff --git a/apps/documentation/src/routes/documentation/routing/pages.mdx b/apps/documentation/src/routes/documentation/routing/pages.mdx new file mode 100644 index 00000000..b3e81c2d --- /dev/null +++ b/apps/documentation/src/routes/documentation/routing/pages.mdx @@ -0,0 +1,14 @@ +import MetaTags from '@/components/meta-tags' + + + +import Breadcrumbs, { Element } from '@/components/breadcrumbs' + + + +# Pages + +Todo diff --git a/apps/documentation/src/routes/documentation/routing/redirecting.mdx b/apps/documentation/src/routes/documentation/routing/redirecting.mdx new file mode 100644 index 00000000..0e1da4c5 --- /dev/null +++ b/apps/documentation/src/routes/documentation/routing/redirecting.mdx @@ -0,0 +1,14 @@ +import MetaTags from '@/components/meta-tags' + + + +import Breadcrumbs, { Element } from '@/components/breadcrumbs' + + + +# Redirecting + +Todo diff --git a/apps/documentation/src/routes/documentation/styles/css-modules.mdx b/apps/documentation/src/routes/documentation/styles/css-modules.mdx new file mode 100644 index 00000000..dc95633c --- /dev/null +++ b/apps/documentation/src/routes/documentation/styles/css-modules.mdx @@ -0,0 +1,14 @@ +import MetaTags from '@/components/meta-tags' + + + +import Breadcrumbs, { Element } from '@/components/breadcrumbs' + + + +# CSS Modules + +TODO diff --git a/apps/documentation/src/styles/global.css b/apps/documentation/src/styles/global.css index 9483fd6a..9764c4bc 100644 --- a/apps/documentation/src/styles/global.css +++ b/apps/documentation/src/styles/global.css @@ -1 +1 @@ -@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');