docs: use PascalCase for file name (#350)

2026-07-25 21:02:45 -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