diff options
| author |   NtskwK <natsukawa247@outlook.com> | 2026-01-21 11:03:03 +0800 |
|---|---|---|
| committer | NtskwK <natsukawa247@outlook.com> | 2026-01-21 11:03:03 +0800 |
| commit | c792c62c86e4d9f4de8402610bb63000cd79bc3a (patch) | |
| tree | c9efcc2e994d4242cd883317c4f8737d8a821600 /packages/docs/app/root.tsx | |
| parent | c281777d65c4207d2fc3805a52fbc6e1939f4909 (diff) | |
| download | DropOut-c792c62c86e4d9f4de8402610bb63000cd79bc3a.tar.gz DropOut-c792c62c86e4d9f4de8402610bb63000cd79bc3a.zip | |
feat(docs): add React Router docs with Fumadocs
Diffstat (limited to 'packages/docs/app/root.tsx')
| -rw-r--r-- | packages/docs/app/root.tsx | 73 |
1 files changed, 73 insertions, 0 deletions
diff --git a/packages/docs/app/root.tsx b/packages/docs/app/root.tsx new file mode 100644 index 0000000..08b8aa8 --- /dev/null +++ b/packages/docs/app/root.tsx @@ -0,0 +1,73 @@ +import { + isRouteErrorResponse, + Links, + Meta, + Outlet, + Scripts, + ScrollRestoration, +} from 'react-router'; +import { RootProvider } from 'fumadocs-ui/provider/react-router'; +import type { Route } from './+types/root'; +import './app.css'; + +export const links: Route.LinksFunction = () => [ + { rel: 'preconnect', href: 'https://fonts.googleapis.com' }, + { + rel: 'preconnect', + href: 'https://fonts.gstatic.com', + crossOrigin: 'anonymous', + }, + { + rel: 'stylesheet', + href: 'https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap', + }, +]; + +export function Layout({ children }: { children: React.ReactNode }) { + return ( + <html lang="en" suppressHydrationWarning> + <head> + <meta charSet="utf-8" /> + <meta name="viewport" content="width=device-width, initial-scale=1" /> + <Meta /> + <Links /> + </head> + <body className="flex flex-col min-h-screen"> + <RootProvider>{children}</RootProvider> + <ScrollRestoration /> + <Scripts /> + </body> + </html> + ); +} + +export default function App() { + return <Outlet />; +} + +export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) { + let message = 'Oops!'; + let details = 'An unexpected error occurred.'; + let stack: string | undefined; + + if (isRouteErrorResponse(error)) { + message = error.status === 404 ? '404' : 'Error'; + details = + error.status === 404 ? 'The requested page could not be found.' : error.statusText || details; + } else if (import.meta.env.DEV && error && error instanceof Error) { + details = error.message; + stack = error.stack; + } + + return ( + <main className="pt-16 p-4 w-full max-w-[1400px] mx-auto"> + <h1>{message}</h1> + <p>{details}</p> + {stack && ( + <pre className="w-full p-4 overflow-x-auto"> + <code>{stack}</code> + </pre> + )} + </main> + ); +} |