docs: add custom 404 page (#486)

apps/documentation/src/components/EditPage/EditPage.tsx

@@ -8,15 +8,16 @@ const GITHUB_URL =
 
 export default function EditPage(): JSX.Element {
   const { pathname } = useRouter()
+
   return (
     <Button
       p={0}
-      mt={60}
+      mt={30}
       component="a"
       variant="transparent"
       leftSection={<IconEdit />}
       target="_blank"
-      href={GITHUB_URL.concat(pathname).concat('.mdx')}
+      href={`${GITHUB_URL}${pathname}.mdx`}
     >
       Edit page
     </Button>

apps/documentation/src/components/MdxWrapper/index.ts

@@ -1,3 +0,0 @@
-import { MdxWrapper } from './MdxWrapper'
-
-export default MdxWrapper

apps/documentation/src/components/PageWithTOC/PageWithTOC.tsx

@@ -3,16 +3,13 @@ import { Box, Container } from '@mantine/core'
 
 import TableOfContents from '@/components/TableOfContents'
 
-import EditPage from '../EditPage'
-import MdxProvider from '../MdxProvider'
+import classes from './PageWithTOC.module.css'
 
-import classes from './MdxWrapper.module.css'
-
-interface MdxWrapperProps {
+interface PageWithTOCProps {
   children: ReactNode
 }
 
-export function MdxWrapper({ children }: MdxWrapperProps): JSX.Element {
+export function PageWithTOC({ children }: PageWithTOCProps): JSX.Element {
   return (
     <Container
       size={1000}
@@ -27,12 +24,10 @@ export function MdxWrapper({ children }: MdxWrapperProps): JSX.Element {
         py={36}
         className={classes.wrapper}
       >
-        <MdxProvider>{children}</MdxProvider>
-        <EditPage />
-      </Box>
-      <Box>
-        <TableOfContents />
+        {children}
       </Box>
+
+      <TableOfContents />
     </Container>
   )
 }

apps/documentation/src/components/PageWithTOC/index.ts

@@ -0,0 +1,3 @@
+import { PageWithTOC } from './PageWithTOC'
+
+export default PageWithTOC

apps/documentation/src/components/TableOfContents/TableOfContents.tsx

@@ -1,9 +1,11 @@
-import type { JSX, MouseEvent } from 'react'
+import type { JSX, MouseEventHandler } from 'react'
 import { useRef, useState, useEffect } from 'react'
 import { useRouter } from 'tuono'
 import { Box, Text } from '@mantine/core'
 
-import { getHeadings, type Heading } from './getHeadings'
+import { getHeadings } from './getHeadings'
+import type { Heading } from './getHeadings'
+
 import classes from './TableOfContents.module.css'
 
 export function TableOfContents(): JSX.Element | null {
@@ -65,24 +67,22 @@ export function TableOfContents(): JSX.Element | null {
     }
   }, [router.pathname])
 
-  const handleHeadingClick = (
-    event: MouseEvent<HTMLAnchorElement>,
-    id: string,
+  const handleHeadingClick: MouseEventHandler<HTMLAnchorElement> = (
+    event,
   ): void => {
     event.preventDefault()
-    const element = document.getElementById(id)
-    if (element) {
-      history.pushState(null, '', `#${element.id} `)
+    const target = event.target as HTMLAnchorElement
+    const href = target.getAttribute('href') as string
+    const targetHeading = document.querySelector(href)
 
-      element.scrollIntoView({
-        behavior: 'instant',
-        block: 'start',
-      })
-    }
+    if (!targetHeading) return
+
+    history.pushState(null, '', href)
+    targetHeading.scrollIntoView({ behavior: 'instant', block: 'start' })
   }
 
-  // Avoid to show it in case of a TODO page
-  if (headings.length === 1) {
+  // Table of contents will not be displayed if the page has one or fewer headings.
+  if (headings.length <= 1) {
     return null
   }
 
@@ -104,9 +104,7 @@ export function TableOfContents(): JSX.Element | null {
                 className={classes.link}
                 mod={{ active: activeHeadingIndex === index + 1 }}
                 href={`#${heading.id}`}
-                onClick={(e) => {
-                  handleHeadingClick(e, heading.id)
-                }}
+                onClick={handleHeadingClick}
                 style={{
                   paddingLeft: `calc(${heading.order - 1} * var(--mantine-spacing-md))`,
                 }}

apps/documentation/src/routes/404.tsx

@@ -0,0 +1,19 @@
+import type { JSX } from 'react'
+import { Title, Text } from '@mantine/core'
+import { Link } from 'tuono'
+
+export default function NotFound(): JSX.Element {
+  return (
+    <>
+      <Title order={1} mb={10}>
+        404 - Not found
+      </Title>
+
+      <Text component="p" mb={10}>
+        Sorry, we can’t find the page you’re looking for
+      </Text>
+
+      <Link href="/">Back to home</Link>
+    </>
+  )
+}

apps/documentation/src/routes/__layout.tsx

@@ -11,9 +11,10 @@ import {
 } from '@mantine/core'
 import { useDisclosure } from '@mantine/hooks'
 
-import MdxWrapper from '@/components/MdxWrapper'
+import PageWithTOC from '@/components/PageWithTOC'
 import Navbar from '@/components/Navbar'
 import Sidebar from '@/components/Sidebar'
+import MdxProvider from '@/components/MdxProvider'
 
 import '@mantine/core/styles.css'
 import '@mantine/code-highlight/styles.css'
@@ -124,7 +125,9 @@ export default function RootRoute({ children }: RootRouteProps): JSX.Element {
             <Navbar toggle={toggle} />
             <Sidebar close={toggle} />
             <AppShell.Main pt={0} px="auto">
-              <MdxWrapper>{children}</MdxWrapper>
+              <MdxProvider>
+                <PageWithTOC>{children}</PageWithTOC>
+              </MdxProvider>
             </AppShell.Main>
           </AppShell>
         </MantineProvider>

apps/documentation/src/routes/documentation/__layout.tsx

@@ -0,0 +1,22 @@
+import type { JSX, ReactNode } from 'react'
+import { Divider } from '@mantine/core'
+
+import EditPage from '@/components/EditPage'
+
+interface DocumentationLayoutProps {
+  children: ReactNode
+}
+
+export default function DocumentationLayout({
+  children,
+}: DocumentationLayoutProps): JSX.Element {
+  return (
+    <>
+      {children}
+
+      <Divider />
+
+      <EditPage />
+    </>
+  )
+}