feat: create overview and getting started pages

apps/documentation/src/components/breadcrumbs/breadcrumbs.tsx

@@ -15,7 +15,13 @@ export default function TuonoBreadcrumbs({
       mb="md"
       mt="md"
     >
-      <Button href="/" component={Link} variant="subtle" radius="xl" p={5}>
+      <Button
+        href="/documentation"
+        component={Link}
+        variant="subtle"
+        radius="xl"
+        p={5}
+      >
         <IconBolt />
       </Button>
       {children}

apps/documentation/src/components/hero/hero.tsx

@@ -25,7 +25,7 @@ export default function Hero(): JSX.Element {
       </Center>
       <Center mt={50}>
         <Group>
-          <Button component={Link} href="/documentation/installation" size="lg">
+          <Button component={Link} href="/documentation" size="lg">
             Get Started
           </Button>
           <CopyButton value="cargo install tuono">

apps/documentation/src/components/mdx-provider/mdx-bold/mdx-bold.tsx

@@ -0,0 +1,5 @@
+import { Text, type TextProps } from '@mantine/core'
+
+export default function MdxBold(props: TextProps): JSX.Element {
+  return <Text fw={700} {...props} />
+}

apps/documentation/src/components/mdx-provider/mdx-link/mdx-link.tsx

@@ -27,7 +27,6 @@ export default function MdxLink(
       component={Link}
       {...props}
       target="_blank"
-      rightSection={<IconExternalLink size="16px" style={{ marginLeft: -5 }} />}
       variant="transparent"
       style={{ height: '20px' }}
       mt={-2}

apps/documentation/src/components/mdx-provider/mdx-provider.tsx

@@ -6,6 +6,7 @@ import MdxPre from './mdx-pre'
 import MdxQuote from './mdx-quote'
 import MdxCode from './mdx-code'
 import MdxTitle from './mdx-title'
+import MdxBold from './mdx-bold/mdx-bold'
 import MdxH2 from './mdx-h2/mdx-h2'
 
 interface MdxProviderProps {
@@ -25,6 +26,7 @@ export default function MdxProvider({
         code: MdxCode,
         h1: MdxTitle,
         h2: MdxH2,
+        strong: MdxBold,
       }}
     >
       {children}

apps/documentation/src/components/mdx-provider/mdx-quote/mdx-quote.tsx

@@ -8,7 +8,7 @@ export default function MdxQuote(
     <>
       <Blockquote
         color="violet"
-        p={8}
+        py={1}
         px={20}
         mt={30}
         iconSize={30}

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

@@ -7,7 +7,7 @@ export default function Actions(): JSX.Element {
   return (
     <Flex gap={8}>
       <Button
-        href="/documentation/installation"
+        href="/documentation"
         component={Link}
         size="compact-lg"
         rightSection={<IconBook />}

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

@@ -11,11 +11,17 @@ export default function Sidebar({ close }: { close: () => void }): JSX.Element {
         onClick={close}
       />
       <h3>Documentation</h3>
+      <SidebarLink href="/documentation" label="Overview" onClick={close} />
       <SidebarLink
         href="/documentation/installation"
         label="Installation"
         onClick={close}
       />
+      <SidebarLink
+        href="/documentation/getting-started"
+        label="Getting started"
+        onClick={close}
+      />
       <SidebarLink label="Routing" href="/documentation/routing" defaultOpened>
         <SidebarLink
           href="/documentation/routing/intro"