app/root.tsx

Functions

Imports

It imports app/lib/context.ts. No module of this repo imports it.

Source

1import {
2  isRouteErrorResponse,
3  Links,
4  Meta,
5  Outlet,
6  Scripts,
7  ScrollRestoration,
8  useRouteLoaderData,
9} from "react-router";
10
11import { Empty } from "capsomer/react/empty";
12
13import { getNonce } from "~/lib/context";
14
15import type { Route } from "./+types/root";
16import "@fontsource/schibsted-grotesk/400.css";
17import "@fontsource/schibsted-grotesk/500.css";
18import "@fontsource/schibsted-grotesk/600.css";
19import "@fontsource/schibsted-grotesk/800.css";
20import "@fontsource/martian-mono/400.css";
21import "@fontsource-variable/source-serif-4/index.css";
22import "@fontsource-variable/source-serif-4/wght-italic.css";
23import "./app.css";
24
25// Run before first paint, so a remembered theme never flashes the other one. It is Capsomer's own
26// one-liner (theme-switch.md); the nonce is what lets the policy run it.
27const THEME_SCRIPT = 'try{var t=localStorage.getItem("cap-theme");if(t==="light"||t==="dark")document.documentElement.setAttribute("data-theme",t)}catch(e){}';
28
29export function meta(): Route.MetaDescriptors {
30  return [{ title: "Carrel" }, { name: "robots", content: "noindex, nofollow" }];
31}
32
33// Carried through the loader because Layout cannot reach the request context.
34export function loader({ context }: Route.LoaderArgs) {
35  return { nonce: getNonce(context) };
36}
37
38export function Layout({ children }: { children: React.ReactNode }) {
39  // Layout also renders the error boundary, where the loader may not have run. No fallback: a
40  // made-up nonce would satisfy the markup while matching nothing in the header.
41  const nonce = useRouteLoaderData<typeof loader>("root")?.nonce;
42  return (
43    <html lang="en">
44      <head>
45        <meta charSet="utf-8" />
46        <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
47        <Meta />
48        <Links />
49        {nonce ? <script nonce={nonce} dangerouslySetInnerHTML={{ __html: THEME_SCRIPT }} /> : null}
50      </head>
51      <body>
52        {children}
53        <ScrollRestoration nonce={nonce} />
54        <Scripts nonce={nonce} />
55      </body>
56    </html>
57  );
58}
59
60export default function App() {
61  return <Outlet />;
62}
63
64// The last resort, for an error the shell's own boundary could not hold (the layout itself failed).
65export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
66  const title = isRouteErrorResponse(error) ? `${error.status} ${error.statusText}` : "Something went wrong";
67  return (
68    <main className="app-page">
69      <Empty kind="failed" title={title} action={<a className="cap-btn" href="/">Go to Home</a>}>
70        Nothing you wrote is lost.
71      </Empty>
72    </main>
73  );
74}