docs: use PascalCase for file name (#350)

2026-07-25 12:52:47 -07:00 · 2025-01-15 16:59:36 +01:00
parent 875d12f514
commit af8a43c93a
91 changed files with 193 additions and 187 deletions
@@ -1,49 +1,54 @@
-import type { JSX } from 'react'
-import { Breadcrumbs, Button } from '@mantine/core'
+import { useMemo, type JSX } from 'react'
+import { Breadcrumbs as MantineBreadcrumbs, Button } from '@mantine/core'
 import { Link, Head } from 'tuono'

 import { IconChevronRight, IconBolt } from '@tabler/icons-react'

-interface Breadcrumb {
+interface BreadcrumbData {
  href?: string
  label: string
 }
 interface BreadcrumbsProps {
-  breadcrumbs: Array<Breadcrumb>
+  breadcrumbs: Array<BreadcrumbData>
 }

-export default function TuonoBreadcrumbs({
+export default function Breadcrumbs({
  breadcrumbs = [],
 }: BreadcrumbsProps): JSX.Element {
+  const ldJson = useMemo(() => {
+    const _ldJson = {
+      '@context': 'https://schema.org',
+      '@type': 'BreadcrumbList',
+      itemListElement: [
+        {
+          '@type': 'ListItem',
+          position: 1,
+          name: 'Tuono - The React/Rust fullstack framework',
+          item: 'https://tuono.dev' as string | undefined,
+        },
+      ],
+    }
+
+    _ldJson.itemListElement.push(
+      ...breadcrumbs.map((br, i) => ({
+        '@type': 'ListItem' as const,
+        position: i + 3,
+        name: br.label,
+        item: br.href ? `https://tuono.dev${br.href}` : undefined,
+      })),
+    )
+
+    return _ldJson
+  }, [breadcrumbs])
+
  return (
    <>
      <Head>
        <script type="application/ld+json">
-          {`{
-              "@context": "https://schema.org",
-              "@type": "BreadcrumbList",
-              "itemListElement": [
-				{
-                  "@type": "ListItem",
-                  "position": 1,
-                  "name": "Tuono - The React/Rust fullstack framework",
-                  "item": "https://tuono.dev"
-                }${breadcrumbs.length > 0 ? ',' : ''}
-                ${breadcrumbs
-                  .map((br, i) =>
-                    JSON.stringify({
-                      '@type': 'ListItem',
-                      position: i + 3,
-                      name: br.label,
-                      item: br.href ? `https://tuono.dev${br.href}` : undefined,
-                    }),
-                  )
-                  .join(',')}]
-            }
-          `}
+          {JSON.stringify(ldJson, null, 2)}
        </script>
      </Head>
-      <Breadcrumbs
+      <MantineBreadcrumbs
        separator={<IconChevronRight size="1.1rem" stroke={1.5} />}
        mb="md"
        mt="md"
@@ -54,7 +59,7 @@ export default function TuonoBreadcrumbs({
        {breadcrumbs.map((br) => (
          <BreadcrumbElement href={br.href} label={br.label} key={br.label} />
        ))}
-      </Breadcrumbs>
+      </MantineBreadcrumbs>
    </>
  )
 }
@@ -0,0 +1,3 @@
+import Breadcrumbs from './Breadcrumbs'
+
+export default Breadcrumbs
@@ -0,0 +1,3 @@
+import EditPage from './EditPage'
+
+export default EditPage
@@ -0,0 +1,3 @@
+import Hero from './Hero'
+
+export default Hero
@@ -0,0 +1,3 @@
+import MdxBold from './MdxBold'
+
+export default MdxBold
@@ -0,0 +1,3 @@
+import MdxCode from './MdxCode'
+
+export default MdxCode
@@ -0,0 +1,3 @@
+import MdxLink from './MdxLink'
+
+export default MdxLink
@@ -1,7 +1,7 @@
 import type { JSX } from 'react'
 import { CodeHighlight } from '@mantine/code-highlight'

-import styles from './mdx-pre.module.css'
+import styles from './MdxPre.module.css'

 interface PreProps {
  children: {
@@ -0,0 +1,3 @@
+import MdxPre from './MdxPre'
+
+export default MdxPre
@@ -1,12 +1,12 @@
 import type { JSX, ReactNode } from 'react'
 import { MDXProvider } from '@mdx-js/react'

-import MdxLink from './mdx-link'
-import MdxPre from './mdx-pre'
-import MdxQuote from './mdx-quote'
-import MdxCode from './mdx-code'
-import { h } from './mdx-title'
-import MdxBold from './mdx-bold/mdx-bold'
+import MdxLink from './MdxLink'
+import MdxPre from './MdxPre'
+import MdxQuote from './MdxQuote'
+import MdxCode from './MdxCode'
+import { h } from './MdxTitle'
+import MdxBold from './MdxBold'

 interface MdxProviderProps {
  children: ReactNode
@@ -0,0 +1,3 @@
+import MdxQuote from './MdxQuote'
+
+export default MdxQuote
@@ -0,0 +1,5 @@
+import MdxTitle, { h } from './MdxTitle'
+
+export default MdxTitle
+
+export { h }
@@ -0,0 +1,3 @@
+import MdxProvider from './MdxProvider'
+
+export default MdxProvider
@@ -0,0 +1,3 @@
+import MetaTags from './MetaTags'
+
+export default MetaTags
@@ -2,7 +2,7 @@ import type { JSX } from 'react'
 import { AppShell, Box, Burger, Button, Flex } from '@mantine/core'
 import { Link } from 'tuono'

-import Actions from './actions'
+import NavbarActions from './NavbarActions'

 interface NavbarProps {
  toggle: () => void
@@ -24,7 +24,7 @@ export default function Navbar({ toggle }: NavbarProps): JSX.Element {
        </Button>
        <Box />
        <Flex align="center" gap={8}>
-          <Actions />
+          <NavbarActions />
          <Burger onClick={toggle} hiddenFrom="sm" size="sm" />
        </Flex>
      </Flex>
@@ -2,9 +2,9 @@ import type { JSX } from 'react'
 import { Flex, ActionIcon, Group } from '@mantine/core'
 import { IconBrandGithub, IconBrandDiscord } from '@tabler/icons-react'

-import ThemeBtn from '../theme-btn'
+import ThemeBtn from '../ThemeBtn'

-export default function Actions(): JSX.Element {
+export default function NavbarActions(): JSX.Element {
  return (
    <Flex gap={8}>
      <Group gap={8}>
@@ -0,0 +1,3 @@
+import Navbar from './Navbar'
+
+export default Navbar
@@ -0,0 +1,3 @@
+import NavigationButtons from './NavigationButtons'
+
+export default NavigationButtons
@@ -14,8 +14,8 @@ import {
 import { IconX } from '@tabler/icons-react'
 import { useMediaQuery } from '@mantine/hooks'

-import { sidebarElements } from './config'
-import SidebarLink from './sidebar-link'
+import { sidebarElements } from './sidebarElements'
+import SidebarLink from './SidebarLink'

 interface SidebarProps {
  close: () => void
@@ -4,7 +4,7 @@ import clsx from 'clsx'
 import { Link, useRouter } from 'tuono'
 import { IconChevronRight } from '@tabler/icons-react'

-import styles from './sidebar-link.module.css'
+import styles from './SidebarLink.module.css'

 interface SidebarLinkProps {
  label: string
@@ -0,0 +1,3 @@
+import Sidebar from './Sidebar'
+
+export default Sidebar
@@ -7,12 +7,8 @@ import { useRouter, Link } from 'tuono'
 import { IconList } from '@tabler/icons-react'
 import { Box, rem, ScrollArea, Text } from '@mantine/core'

-import { getHeadings, type Heading } from './get-headings'
-import classes from './table-of-content.module.css'
-
-interface TableOfContentsProps {
-  withTabs: boolean
-}
+import { getHeadings, type Heading } from './getHeadings'
+import classes from './TableOfContents.module.css'

 function getActiveElement(rects: Array<DOMRect>): number {
  if (rects.length === 0) {
@@ -36,6 +32,10 @@ function getActiveElement(rects: Array<DOMRect>): number {
  return closest.index
 }

+interface TableOfContentsProps {
+  withTabs: boolean
+}
+
 export function TableOfContents({
  withTabs,
 }: TableOfContentsProps): JSX.Element | null {
@@ -1,6 +1,6 @@
 /*
 * Component inspired by: https://github.com/mantinedev/mantine/tree/master/apps/mantine.dev/src/components/TableOfContents
 */
-import { TableOfContents } from './table-of-content'
+import { TableOfContents } from './TableOfContents'

 export default TableOfContents
@@ -7,7 +7,7 @@ import {
 import { IconSun, IconMoon } from '@tabler/icons-react'
 import cx from 'clsx'

-import classes from './theme-btn.module.css'
+import classes from './ThemeBtn.module.css'

 export default function ThemeBtn(): JSX.Element {
  const { setColorScheme } = useMantineColorScheme()
@@ -0,0 +1,3 @@
+import ThemeBtn from './ThemeBtn'
+
+export default ThemeBtn
@@ -1,5 +0,0 @@
-import Breadcrumbs, { BreadcrumbElement } from './breadcrumbs'
-
-export default Breadcrumbs
-
-export { BreadcrumbElement as Element }
@@ -1,3 +0,0 @@
-import EditPage from './edit-page'
-
-export default EditPage
@@ -1,3 +0,0 @@
-import Hero from './hero'
-
-export default Hero
@@ -1,3 +0,0 @@
-import MdxProvider from './mdx-provider'
-
-export default MdxProvider
@@ -1,3 +0,0 @@
-import MdxCode from './mdx-code'
-
-export default MdxCode
@@ -1,3 +0,0 @@
-import MdxLink from './mdx-link'
-
-export default MdxLink
@@ -1,3 +0,0 @@
-import MdxPre from './mdx-pre'
-
-export default MdxPre
@@ -1,3 +0,0 @@
-import MdxQuote from './mdx-quote'
-
-export default MdxQuote
@@ -1,5 +0,0 @@
-import MdxTitle, { h } from './mdx-title'
-
-export default MdxTitle
-
-export { h }
@@ -1,3 +0,0 @@
-import MetaTags from './meta-tags'
-
-export default MetaTags
@@ -1,3 +0,0 @@
-import Navbar from './navbar'
-
-export default Navbar
@@ -1,3 +0,0 @@
-import NavigationButtons from './navigation-buttons'
-
-export default NavigationButtons
@@ -1,3 +0,0 @@
-import Sidebar from './sidebar'
-
-export default Sidebar
@@ -1,3 +0,0 @@
-import ThemeBtn from './theme-btn'
-
-export default ThemeBtn
@@ -11,10 +11,10 @@ import type { CSSVariablesResolver } from '@mantine/core'
 import { useDisclosure } from '@mantine/hooks'
 import { Head } from 'tuono'

-import EditPage from '@/components/edit-page'
-import MdxProvider from '@/components/mdx-provider'
-import Navbar from '@/components/navbar'
-import Sidebar from '@/components/sidebar'
+import EditPage from '@/components/EditPage'
+import MdxProvider from '@/components/MdxProvider'
+import Navbar from '@/components/Navbar'
+import Sidebar from '@/components/Sidebar'

 import '@mantine/core/styles.css'
 import '@mantine/code-highlight/styles.css'
@@ -1,4 +1,4 @@
-import MetaTags from '@/components/meta-tags'
+import MetaTags from '@/components/MetaTags'

 <MetaTags
  title="Tuono - Application state"
@@ -6,7 +6,7 @@ import MetaTags from '@/components/meta-tags'
  description="Learn how to add features to your Tuono application"
 />

-import Breadcrumbs, { Element } from '@/components/breadcrumbs'
+import Breadcrumbs from '@/components/Breadcrumbs'

 <Breadcrumbs breadcrumbs={[{ label: 'Application state' }]} />

@@ -1,4 +1,4 @@
-import MetaTags from '@/components/meta-tags'
+import MetaTags from '@/components/MetaTags'

 <MetaTags
  title="Tuono - CLI"
@@ -6,7 +6,7 @@ import MetaTags from '@/components/meta-tags'
  description="Tuono is the CLI that provides all the needed commands to handle the full-stack project."
 />

-import Breadcrumbs, { Element } from '@/components/breadcrumbs'
+import Breadcrumbs from '@/components/Breadcrumbs'

 <Breadcrumbs breadcrumbs={[{ label: 'CLI' }]} />

@@ -1,11 +1,11 @@
-import MetaTags from '@/components/meta-tags'
+import MetaTags from '@/components/MetaTags'

 <MetaTags
  title="Tuono - Head"
  canonical="https://tuono.dev/documentation/components/head"
 />

-import Breadcrumbs, { Element } from '@/components/breadcrumbs'
+import Breadcrumbs from '@/components/Breadcrumbs'

 <Breadcrumbs breadcrumbs={[{ label: 'Components' }]} />

@@ -1,11 +1,11 @@
-import MetaTags from '@/components/meta-tags'
+import MetaTags from '@/components/MetaTags'

 <MetaTags
  title="Tuono - Link"
  canonical="https://tuono.dev/documentation/components/link"
 />

-import Breadcrumbs, { Element } from '@/components/breadcrumbs'
+import Breadcrumbs from '@/components/Breadcrumbs'

 <Breadcrumbs breadcrumbs={[{ label: 'Components' }]} />

@@ -1,11 +1,11 @@
-import MetaTags from '@/components/meta-tags'
+import MetaTags from '@/components/MetaTags'

 <MetaTags
  title="Tuono - tuono.config.ts"
  canonical="https://tuono.dev/documentation/configuration"
 />

-import Breadcrumbs, { Element } from '@/components/breadcrumbs'
+import Breadcrumbs from '@/components/Breadcrumbs'

 <Breadcrumbs breadcrumbs={[{ label: 'Configuration' }]} />

@@ -1,4 +1,4 @@
-import MetaTags from '@/components/meta-tags'
+import MetaTags from '@/components/MetaTags'

 <MetaTags
  title="Tuono - Contributing"
@@ -6,7 +6,7 @@ import MetaTags from '@/components/meta-tags'
  description="The project is massive - if you like it, do consider contributing!"
 />

-import Breadcrumbs, { Element } from '@/components/breadcrumbs'
+import Breadcrumbs from '@/components/Breadcrumbs'

 <Breadcrumbs breadcrumbs={[{ label: '✨ Contributing' }]} />

@@ -1,4 +1,4 @@
-import MetaTags from '@/components/meta-tags'
+import MetaTags from '@/components/MetaTags'

 <MetaTags
  title="Tuono - Contributing"
@@ -6,7 +6,7 @@ import MetaTags from '@/components/meta-tags'
  description="The project is massive - if you like it, do consider contributing!"
 />

-import Breadcrumbs, { Element } from '@/components/breadcrumbs'
+import Breadcrumbs from '@/components/Breadcrumbs'

 <Breadcrumbs breadcrumbs={[{ label: '✨ Contributing' }]} />

@@ -46,7 +46,7 @@ Without taking into account specific cases, we can mostly split the domain requi
 - The documentation website needs just `React` & `Typescript` (or even less, since most of the
  code is markdown).

-import NavigationButtons from '../../../components/navigation-buttons'
+import NavigationButtons from '../../../components/NavigationButtons'

 <NavigationButtons
  next={{
@@ -1,4 +1,4 @@
-import MetaTags from '@/components/meta-tags'
+import MetaTags from '@/components/MetaTags'

 <MetaTags
  title="Tuono - Contributing - Local development"
@@ -6,7 +6,7 @@ import MetaTags from '@/components/meta-tags'
  description="Contribute to Tuono. Learn here how to setup the repository for local development"
 />

-import Breadcrumbs, { Element } from '@/components/breadcrumbs'
+import Breadcrumbs from '@/components/Breadcrumbs'

 <Breadcrumbs
  breadcrumbs={[
@@ -158,7 +158,7 @@ docker exec -it tuono-source-container /bin/bash
 > On the documentation remember that `tuono` `npm` package is installed from the registry and
 > it is not linked to the repository.

-import NavigationButtons from '../../../components/navigation-buttons'
+import NavigationButtons from '../../../components/NavigationButtons'

 <NavigationButtons
  prev={{
@@ -1,4 +1,4 @@
-import MetaTags from '@/components/meta-tags'
+import MetaTags from '@/components/MetaTags'

 <MetaTags
  title="Tuono - Opening a pull request"
@@ -6,7 +6,7 @@ import MetaTags from '@/components/meta-tags'
  description="Contribute to Tuono. Learn here how to open a pull request."
 />

-import Breadcrumbs, { Element } from '@/components/breadcrumbs'
+import Breadcrumbs from '@/components/Breadcrumbs'

 <Breadcrumbs
  breadcrumbs={[
@@ -76,7 +76,7 @@ E.g.: `fix(crates/tuono): remove cargo warnings`
 A succinct title for the PR.
 (The title max length is set to 100 characters)

-import NavigationButtons from '../../../components/navigation-buttons'
+import NavigationButtons from '../../../components/NavigationButtons'

 <NavigationButtons
  prev={{
@@ -1,11 +1,11 @@
-import MetaTags from '@/components/meta-tags'
+import MetaTags from '@/components/MetaTags'

 <MetaTags
  title="Tuono - Multithreading"
  canonical="https://tuono.dev/documentation/core-concepts/multithreading"
 />

-import Breadcrumbs, { Element } from '@/components/breadcrumbs'
+import Breadcrumbs from '@/components/Breadcrumbs'

 <Breadcrumbs breadcrumbs={[{ label: 'Core concepts' }]} />

@@ -1,11 +1,11 @@
-import MetaTags from '@/components/meta-tags'
+import MetaTags from '@/components/MetaTags'

 <MetaTags
  title="Tuono - useRouter"
  canonical="https://tuono.dev/documentation/hooks/use-router"
 />

-import Breadcrumbs, { Element } from '@/components/breadcrumbs'
+import Breadcrumbs from '@/components/Breadcrumbs'

 <Breadcrumbs breadcrumbs={[{ label: 'Hooks' }]} />

@@ -1,11 +1,11 @@
-import MetaTags from '@/components/meta-tags'
+import MetaTags from '@/components/MetaTags'

 <MetaTags
  title="Tuono - tuono.config.ts"
  canonical="https://tuono.dev/documentation/how-is-tuono-different"
 />

-import Breadcrumbs, { Element } from '@/components/breadcrumbs'
+import Breadcrumbs from '@/components/Breadcrumbs'

 <Breadcrumbs breadcrumbs={[{ label: 'How is tuono different?' }]} />

@@ -1,6 +1,4 @@
-import Breadcrumbs, { Element } from '@/components/breadcrumbs'
-
-import MetaTags from '@/components/meta-tags'
+import MetaTags from '@/components/MetaTags'

 <MetaTags
  title="Tuono - Installation"
@@ -8,6 +6,8 @@ import MetaTags from '@/components/meta-tags'
  description="Tuono is a development environment built in rust and typescript that outputs a website written in both the languages"
 />

+import Breadcrumbs from '@/components/Breadcrumbs'
+
 <Breadcrumbs breadcrumbs={[{ label: 'Installation' }]} />

 # Installation
@@ -1,11 +1,11 @@
-import MetaTags from '@/components/meta-tags'
+import MetaTags from '@/components/MetaTags'

 <MetaTags
  title="Tuono - MDX"
  canonical="https://tuono.dev/documentation/integrations/mdx"
 />

-import Breadcrumbs, { Element } from '@/components/breadcrumbs'
+import Breadcrumbs from '@/components/Breadcrumbs'

 <Breadcrumbs breadcrumbs={[{ label: 'Integrations' }]} />

@@ -1,11 +1,11 @@
-import MetaTags from '@/components/meta-tags'
+import MetaTags from '@/components/MetaTags'

 <MetaTags
  title="Tuono - Server side rendering"
  canonical="https://tuono.dev/documentation/rendering/server-side-rendering"
 />

-import Breadcrumbs, { Element } from '@/components/breadcrumbs'
+import Breadcrumbs from '@/components/Breadcrumbs'

 <Breadcrumbs breadcrumbs={[{ label: 'Rendering' }]} />

@@ -1,11 +1,11 @@
-import MetaTags from '@/components/meta-tags'
+import MetaTags from '@/components/MetaTags'

 <MetaTags
  title="Tuono - Static site rendering"
  canonical="https://tuono.dev/documentation/rendering/static-site-rendering"
 />

-import Breadcrumbs, { Element } from '@/components/breadcrumbs'
+import Breadcrumbs from '@/components/Breadcrumbs'

 <Breadcrumbs breadcrumbs={[{ label: 'Rendering' }]} />

@@ -1,11 +1,11 @@
-import MetaTags from '@/components/meta-tags'
+import MetaTags from '@/components/MetaTags'

 <MetaTags
  title="Tuono - Routing"
  canonical="https://tuono.dev/documentation/routing/defining-routes"
 />

-import Breadcrumbs, { Element } from '@/components/breadcrumbs'
+import Breadcrumbs from '@/components/Breadcrumbs'

 <Breadcrumbs breadcrumbs={[{ label: 'Defining routes' }]} />

@@ -1,11 +1,11 @@
-import MetaTags from '@/components/meta-tags'
+import MetaTags from '@/components/MetaTags'

 <MetaTags
  title="Tuono - Routing"
  canonical="https://tuono.dev/documentation/routing/dynamic-routes"
 />

-import Breadcrumbs, { Element } from '@/components/breadcrumbs'
+import Breadcrumbs from '@/components/Breadcrumbs'

 <Breadcrumbs breadcrumbs={[{ label: 'Dynamic routes' }]} />

@@ -1,11 +1,11 @@
-import MetaTags from '@/components/meta-tags'
+import MetaTags from '@/components/MetaTags'

 <MetaTags
  title="Tuono - Routing"
  canonical="https://tuono.dev/documentation/routing/intro"
 />

-import Breadcrumbs, { Element } from '@/components/breadcrumbs'
+import Breadcrumbs from '@/components/Breadcrumbs'

 <Breadcrumbs breadcrumbs={[{ label: 'Routing' }]} />

@@ -1,11 +1,11 @@
-import MetaTags from '@/components/meta-tags'
+import MetaTags from '@/components/MetaTags'

 <MetaTags
  title="Tuono - Routing"
  canonical="https://tuono.dev/documentation/routing/layouts"
 />

-import Breadcrumbs, { Element } from '@/components/breadcrumbs'
+import Breadcrumbs from '@/components/Breadcrumbs'

 <Breadcrumbs breadcrumbs={[{ label: 'Layouts' }]} />

@@ -1,11 +1,11 @@
-import MetaTags from '@/components/meta-tags'
+import MetaTags from '@/components/MetaTags'

 <MetaTags
  title="Tuono - Routing"
  canonical="https://tuono.dev/documentation/routing/link-and-navigation"
 />

-import Breadcrumbs, { Element } from '@/components/breadcrumbs'
+import Breadcrumbs from '@/components/Breadcrumbs'

 <Breadcrumbs breadcrumbs={[{ label: 'Link and navigation' }]} />

@@ -1,11 +1,11 @@
-import MetaTags from '@/components/meta-tags'
+import MetaTags from '@/components/MetaTags'

 <MetaTags
  title="Tuono - Routing"
  canonical="https://tuono.dev/documentation/routing/loading-state"
 />

-import Breadcrumbs, { Element } from '@/components/breadcrumbs'
+import Breadcrumbs from '@/components/Breadcrumbs'

 <Breadcrumbs breadcrumbs={[{ label: 'Loading state' }]} />

@@ -1,11 +1,11 @@
-import MetaTags from '@/components/meta-tags'
+import MetaTags from '@/components/MetaTags'

 <MetaTags
  title="Tuono - Routing"
  canonical="https://tuono.dev/documentation/routing/pages"
 />

-import Breadcrumbs, { Element } from '@/components/breadcrumbs'
+import Breadcrumbs from '@/components/Breadcrumbs'

 <Breadcrumbs breadcrumbs={[{ label: 'Pages' }]} />

@@ -1,11 +1,11 @@
-import MetaTags from '@/components/meta-tags'
+import MetaTags from '@/components/MetaTags'

 <MetaTags
  title="Tuono - Routing"
  canonical="https://tuono.dev/documentation/routing/redirecting"
 />

-import Breadcrumbs, { Element } from '@/components/breadcrumbs'
+import Breadcrumbs from '@/components/Breadcrumbs'

 <Breadcrumbs breadcrumbs={[{ label: 'Redirecting' }]} />

@@ -1,11 +1,11 @@
-import MetaTags from '@/components/meta-tags'
+import MetaTags from '@/components/MetaTags'

 <MetaTags
  title="Tuono - CSS Modules"
  canonical="https://tuono.dev/documentation/styles/css-modules"
 />

-import Breadcrumbs, { Element } from '@/components/breadcrumbs'
+import Breadcrumbs from '@/components/Breadcrumbs'

 <Breadcrumbs breadcrumbs={[{ label: 'Styles' }]} />

@@ -1,4 +1,4 @@
-import MetaTags from '@/components/meta-tags'
+import MetaTags from '@/components/MetaTags'

 <MetaTags
  title="Tuono - API fetching"
@@ -6,7 +6,7 @@ import MetaTags from '@/components/meta-tags'
  description="Learn how to fetch remote APIs on the backend"
 />

-import Breadcrumbs, { Element } from '@/components/breadcrumbs'
+import Breadcrumbs from '@/components/Breadcrumbs'

 <Breadcrumbs
  breadcrumbs={[
@@ -178,7 +178,7 @@ export default function IndexPage({

 Refresh the browser now! A bit ugly, but all the Pokémon are finally printed on screen!

-import NavigationButtons from '../../../components/navigation-buttons'
+import NavigationButtons from '../../../components/NavigationButtons'

 <NavigationButtons
  prev={{
@@ -1,4 +1,4 @@
-import MetaTags from '@/components/meta-tags'
+import MetaTags from '@/components/MetaTags'

 <MetaTags
  title="Tuono - Components"
@@ -6,7 +6,7 @@ import MetaTags from '@/components/meta-tags'
  description="Learn how to manage the components in a Tuono codebase"
 />

-import Breadcrumbs, { Element } from '@/components/breadcrumbs'
+import Breadcrumbs from '@/components/Breadcrumbs'

 <Breadcrumbs
  breadcrumbs={[
@@ -134,7 +134,7 @@ export default function PokemonLink({
 }
 ```

-import NavigationButtons from '../../../components/navigation-buttons'
+import NavigationButtons from '../../../components/NavigationButtons'

 <NavigationButtons
  prev={{ title: 'API fetching', href: '/documentation/tutorial/api-fetching' }}
@@ -1,4 +1,4 @@
-import MetaTags from '@/components/meta-tags'
+import MetaTags from '@/components/MetaTags'

 <MetaTags
  title="Tuono - Conclusion"
@@ -6,7 +6,7 @@ import MetaTags from '@/components/meta-tags'
  description="You just created a multi thread full stack application with Rust and React"
 />

-import Breadcrumbs, { Element } from '@/components/breadcrumbs'
+import Breadcrumbs from '@/components/Breadcrumbs'

 <Breadcrumbs
  breadcrumbs={[
@@ -27,7 +27,7 @@ at [valerioageno@yahoo.it](mailto:valerioageno@yahoo.it) or in Twitter (X) DMs [

 Ciao

-import NavigationButtons from '../../../components/navigation-buttons'
+import NavigationButtons from '../../../components/NavigationButtons'

 <NavigationButtons
  prev={{
@@ -1,4 +1,4 @@
-import MetaTags from '@/components/meta-tags'
+import MetaTags from '@/components/MetaTags'

 <MetaTags
  title="Tuono - Development setup"
@@ -6,7 +6,7 @@ import MetaTags from '@/components/meta-tags'
  description="Learn how to setup a new Tuono project"
 />

-import Breadcrumbs, { Element } from '@/components/breadcrumbs'
+import Breadcrumbs from '@/components/Breadcrumbs'

 <Breadcrumbs
  breadcrumbs={[
@@ -69,7 +69,7 @@ The first time might take a little bit because it will install all the Rust’s

 Then open [http://localhost:3000/](http://localhost:3000) on the browser.

-import NavigationButtons from '../../../components/navigation-buttons'
+import NavigationButtons from '../../../components/NavigationButtons'

 <NavigationButtons
  prev={{ title: 'Tutorial', href: '/documentation/tutorial' }}
@@ -1,4 +1,4 @@
-import MetaTags from '@/components/meta-tags'
+import MetaTags from '@/components/MetaTags'

 <MetaTags
  title="Tuono - Dynamic routes"
@@ -6,7 +6,7 @@ import MetaTags from '@/components/meta-tags'
  description="Learn how to catch more endpoint with the same route loading dynamic data"
 />

-import Breadcrumbs, { Element } from '@/components/breadcrumbs'
+import Breadcrumbs from '@/components/Breadcrumbs'

 <Breadcrumbs
  breadcrumbs={[
@@ -163,7 +163,7 @@ export default function PokemonView({
 }
 ```

-import NavigationButtons from '../../../components/navigation-buttons'
+import NavigationButtons from '../../../components/NavigationButtons'

 <NavigationButtons
  prev={{ title: 'Components', href: '/documentation/tutorial/components' }}
@@ -1,4 +1,4 @@
-import MetaTags from '@/components/meta-tags'
+import MetaTags from '@/components/MetaTags'

 <MetaTags
  title="Tuono - Error handling"
@@ -6,7 +6,7 @@ import MetaTags from '@/components/meta-tags'
  description="Learn how to handle the server side error on your Tuono project"
 />

-import Breadcrumbs, { Element } from '@/components/breadcrumbs'
+import Breadcrumbs from '@/components/Breadcrumbs'

 <Breadcrumbs
  breadcrumbs={[
@@ -105,7 +105,7 @@ async fn get_all_pokemons(_req: Request, fetch: Client) -> Response {
 If you now try to load a not-existing Pokémon (`http://localhost:3000/pokemons/tuono-pokemon`) you will
 correctly receive a 404 status code in the console.

-import NavigationButtons from '../../../components/navigation-buttons'
+import NavigationButtons from '../../../components/NavigationButtons'

 <NavigationButtons
  prev={{
@@ -1,4 +1,4 @@
-import MetaTags from '@/components/meta-tags'
+import MetaTags from '@/components/MetaTags'

 <MetaTags
  title="Tuono - Tutorial"
@@ -6,7 +6,7 @@ import MetaTags from '@/components/meta-tags'
  description="This tutorial is meant to give you a sneak peek at the framework and is intended to evolve during the development - be sure to have installed the latest version"
 />

-import Breadcrumbs, { Element } from '@/components/breadcrumbs'
+import Breadcrumbs from '@/components/Breadcrumbs'

 <Breadcrumbs breadcrumbs={[{ label: 'Tutorial' }]} />

@@ -27,7 +27,7 @@ $ tuono new tutorial --template tuono-tutorial
 > I'd love to hear your thoughts about the framework and the tutorial - feel free to reach me at [valerioageno@yahoo.it](mailto:valerioageno@ahoo.it)
 > or on Twitter (X) DM [@valerioageno](https://twitter.com/valerioageno)

-import NavigationButtons from '../../../components/navigation-buttons'
+import NavigationButtons from '../../../components/NavigationButtons'

 <NavigationButtons
  next={{
@@ -1,4 +1,4 @@
-import MetaTags from '@/components/meta-tags'
+import MetaTags from '@/components/MetaTags'

 <MetaTags
  title="Tuono - Building for production"
@@ -6,7 +6,7 @@ import MetaTags from '@/components/meta-tags'
  description="Learn how to build the production project and run the optimize version"
 />

-import Breadcrumbs, { Element } from '@/components/breadcrumbs'
+import Breadcrumbs from '@/components/Breadcrumbs'

 <Breadcrumbs
  breadcrumbs={[
@@ -36,7 +36,7 @@ optimizations ready to unleash the power of a rust server that seamlessly render

 > Note: The `out` directory is not standalone. You can't rely just on it to run the production server.

-import NavigationButtons from '../../../components/navigation-buttons'
+import NavigationButtons from '../../../components/NavigationButtons'

 <NavigationButtons
  prev={{
@@ -1,4 +1,4 @@
-import MetaTags from '@/components/meta-tags'
+import MetaTags from '@/components/MetaTags'

 <MetaTags
  title="Tuono - Redirection"
@@ -6,7 +6,7 @@ import MetaTags from '@/components/meta-tags'
  description="Learn how to redirect to different route from the server"
 />

-import Breadcrumbs, { Element } from '@/components/breadcrumbs'
+import Breadcrumbs from '@/components/Breadcrumbs'

 <Breadcrumbs
  breadcrumbs={[
@@ -50,7 +50,7 @@ Now let's create the button in the home page to actually point to it!
 Now at [http://localhost:3000/](http:/localhost:3000/) You will find a new link at the beginning of the list.
 Click on it and see the application automatically redirecting you to your favourite pokemon's route!

-import NavigationButtons from '../../../components/navigation-buttons'
+import NavigationButtons from '../../../components/NavigationButtons'

 <NavigationButtons
  prev={{ title: 'SEO and meta tags', href: '/documentation/tutorial/seo' }}
@@ -1,4 +1,4 @@
-import MetaTags from '@/components/meta-tags'
+import MetaTags from '@/components/MetaTags'

 <MetaTags
  title="Tuono - SEO and meta tags"
@@ -6,7 +6,7 @@ import MetaTags from '@/components/meta-tags'
  description="Learn how to handle meaningful meta tags for your Tuono project"
 />

-import Breadcrumbs, { Element } from '@/components/breadcrumbs'
+import Breadcrumbs from '@/components/Breadcrumbs'

 <Breadcrumbs
  breadcrumbs={[
@@ -95,7 +95,7 @@ export default function Pokemon({ data }: TuonoProps): JSX.Element {
 }
 ```

-import NavigationButtons from '../../../components/navigation-buttons'
+import NavigationButtons from '../../../components/NavigationButtons'

 <NavigationButtons
  prev={{
@@ -1,4 +1,4 @@
-import MetaTags from '@/components/meta-tags'
+import MetaTags from '@/components/MetaTags'

 <MetaTags
  title="Tuono - Documentation"
@@ -6,7 +6,7 @@ import MetaTags from '@/components/meta-tags'
  description="Tuono is a full-stack framework for building React applications using Rust as the backend."
 />

-import Breadcrumbs from '@/components/breadcrumbs'
+import Breadcrumbs from '@/components/Breadcrumbs'

 <Breadcrumbs />