app/root.tsx

Functions

Imports

It imports app/components/error-page.tsx, app/lib/context.ts, app/lib/enhance-loader.mjs, app/lib/seo.ts, app/lib/theme.ts, app/lib/timing.ts. Imported by app/routes/admin.tsx, app/routes/workspace.tsx.

Source

1import {
2  isRouteErrorResponse,
3  Links,
4  Meta,
5  Outlet,
6  Scripts,
7  ScrollRestoration,
8  useMatches,
9  useRouteLoaderData,
10} from "react-router";
11
12import { ErrorPage } from "~/components/error-page";
13import { getNonce } from "~/lib/context";
14import { ENHANCE_LOADER } from "~/lib/enhance-loader.mjs";
15import { SITE, SITE_ORIGIN } from "~/lib/seo";
16import { colorSchemeMeta, themeAttribute, themeFromRequest } from "~/lib/theme";
17import { timingsContext, wantsTiming, type Timings } from "~/lib/timing";
18
19import type { Route } from "./+types/root";
20
21import interCoreUrl from "./fonts/inter-latin-core-normal.woff2?url";
22// `?url`, not a bare import, which would fold the math bytes into the stylesheet every page links.
23import katexCssUrl from "./styles/katex.generated.css?url";
24
25// Middleware, not the loader: loaders run alongside each other, so a collector made in one is
26// invisible to another.
27export const middleware: Route.MiddlewareFunction[] = [
28  async ({ request, context }, next) => {
29    const timings: Timings | undefined = wantsTiming(new URL(request.url)) ? [] : undefined;
30    context.set(timingsContext, { timings });
31    return next();
32  },
33];
34
35export function loader({ request, context }: Route.LoaderArgs) {
36  // The nonce is carried through the loader because `Layout` cannot reach the request context.
37  // Admin only: undefined on every public page, which is edge-cached and trusted by hash instead.
38  return { theme: themeFromRequest(request), nonce: getNonce(context) };
39}
40
41/**
42 * Only on the error path: an unmatched URL matches no route but this one, so without it the 404 page
43 * has no title (WCAG 2.4.2). A matched route's own `meta` wins, so its not-found title stands.
44 */
45export function meta({ error }: Route.MetaArgs) {
46  if (!error) return [];
47  const notFound = isRouteErrorResponse(error) && error.status === 404;
48  return [{ title: `${notFound ? "Page not found" : "Error"} | ${SITE.name}` }];
49}
50
51export const links: Route.LinksFunction = () => [
52  // `links` from every matched route are merged and `meta` is NOT, so these ride on every page.
53  { rel: "icon", href: "/favicon.ico", sizes: "48x48" },
54  { rel: "icon", href: "/dustin-edwards-favicon.svg", type: "image/svg+xml" },
55  { rel: "apple-touch-icon", href: "/dustin-edwards-apple-touch-icon.png" },
56  { rel: "manifest", href: "/site.webmanifest" },
57  // feed+json although served as application/json: readers scan autodiscovery for the feed types.
58  {
59    tagName: "link",
60    rel: "alternate",
61    type: "application/rss+xml",
62    title: `${SITE.name} blog`,
63    href: `${SITE_ORIGIN}/writing/rss.xml`,
64  },
65  {
66    tagName: "link",
67    rel: "alternate",
68    type: "application/feed+json",
69    title: `${SITE.name} blog`,
70    href: `${SITE_ORIGIN}/writing/feed.json`,
71  },
72  // `crossorigin` is mandatory: fonts are fetched in anonymous CORS mode whatever their origin, so a
73  // preload without it is a different request and the file is fetched twice. The core, which every
74  // page draws; the rest of the latin range loads only where a page needs it (app.css).
75  {
76    rel: "preload",
77    href: interCoreUrl,
78    as: "font",
79    type: "font/woff2",
80    crossOrigin: "anonymous",
81  },
82];
83
84export function Layout({ children }: { children: React.ReactNode }) {
85  // Layout also renders the error boundary, where the root loader may not have run.
86  const data = useRouteLoaderData<typeof loader>("root");
87  const theme = data ? themeAttribute(data.theme) : undefined;
88  // No fallback: a made-up nonce would satisfy the markup while matching nothing in the header.
89  const nonce = data?.nonce;
90
91  // Hydration is opt-in by route (`handle = { hydrate: true }`).
92  const matches = useMatches();
93  const hydrates = matches.some(
94    (match) => (match.handle as { hydrate?: boolean } | undefined)?.hydrate === true,
95  );
96  // The admin and lab planes are Capsomer's shell, which brings its own skip link and none of the public CSS.
97  const adminPlane = matches.some((match) => match.id === "routes/admin" || match.id === "routes/workspace");
98
99  // Not React's `precedence` hoisting: it lifts the sheet above the color-scheme meta, which must
100  // arrive before the first stylesheet request.
101  const postData = useRouteLoaderData("routes/blog.$slug") as { hasMath?: boolean } | undefined;
102  const previewData = useRouteLoaderData("routes/preview.$token") as
103    | { hasMath?: boolean }
104    | undefined;
105  // Unconditional in the editor: hasMath describes what was SAVED, not what the author is typing.
106  const editorWantsMath = matches.some(
107    (match) => (match.handle as { math?: boolean } | undefined)?.math === true,
108  );
109  const linksMath =
110    postData?.hasMath === true || previewData?.hasMath === true || editorWantsMath;
111
112  return (
113    <html lang="en" data-theme={theme} data-cap-site="dustinedwards">
114      <head>
115        <meta charSet="utf-8" />
116        {/* Before any stylesheet: data-theme means nothing to the browser until the CSS is parsed. */}
117        <meta name="color-scheme" content={colorSchemeMeta(data?.theme ?? "system")} />
118        <meta name="viewport" content="width=device-width, initial-scale=1" />
119        {/* Literal hexes: browser chrome does not resolve a custom property. check:contrast
120            asserts they match the palette. */}
121        <meta name="theme-color" media="(prefers-color-scheme: light)" content="#f4efe6" />
122        <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#1c1916" />
123        <Meta />
124        {/* <Links> takes a nonce from the framework context and has no opt-out. */}
125        <Links />
126        {/* After <Links /> so a site rule wins over the upstream katex rule. No `precedence`: React
127            would lift the element above the color-scheme meta. */}
128        {linksMath ? <link rel="stylesheet" href={katexCssUrl} /> : null}
129      </head>
130      <body>
131        {adminPlane ? null : (
132          <a className="skip-link" href="#main">
133            Skip to content
134          </a>
135        )}
136        {children}
137        {/* JSON-LD blocks carry no nonce: `script-src` does not gate application/ld+json. */}
138        {hydrates ? (
139          <>
140            <ScrollRestoration nonce={nonce} />
141            <Scripts nonce={nonce} />
142          </>
143        ) : null}
144        {/* Last, so every <Enhance> marker is parsed before it runs. Allowed by its sha256 in the
145            policy; raw HTML, because the hash is of these exact bytes. The nonce is admin's. */}
146        <script nonce={nonce} dangerouslySetInnerHTML={{ __html: ENHANCE_LOADER }} />
147      </body>
148    </html>
149  );
150}
151
152export default function App() {
153  return <Outlet />;
154}
155
156export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
157  return <ErrorPage error={error} />;
158}