app/routes/about.tsx

Functions

Imports

It imports app/components/page-shell.tsx, app/db/pages.ts, app/lib/access.server.ts, app/lib/context.ts, app/lib/json-ld.mjs, app/lib/pages/route.ts, app/lib/seo.ts. No module of this repo imports it.

Source

1import { data } from "react-router";
2
3import { PageShell } from "~/components/page-shell";
4import { getPageByPath } from "~/db/pages";
5import { isAdminViewer } from "~/lib/access.server";
6import { getEnv } from "~/lib/context";
7import { jsonLd as serializeJsonLd } from "~/lib/json-ld.mjs";
8import { CONTENT_PAGE_HTML_TAGS } from "~/lib/pages/route";
9import { OWNER_PHOTO, SITE, SITE_ORIGIN, pageMeta, profilePageJsonLd, publicHtmlHeaders } from "~/lib/seo";
10
11import type { Route } from "./+types/about";
12
13// prose.css is route-scoped: a page using `.prose` without importing it renders unstyled.
14import "~/styles/prose.css";
15import "~/styles/about.css";
16
17const PHOTO_SRC = `/media/${OWNER_PHOTO.key}`;
18
19/**
20 * The prose is the page's D1 row (docs/PAGES.md): content/pages/about.md, compiled by the one page
21 * compile and rendered by the site's pipeline, so the Worker carries no markdown renderer and an edit
22 * saved through Carrel is live at the next request with no deploy. The layout and the JSON-LD stay here:
23 * only the front matter and the body moved. The JSON-LD is a ProfilePage whose mainEntity is the home
24 * page's Person, by the same `@id`.
25 */
26export function headers() {
27  // The content pages' tag, so a page save purges it (app/lib/cache-purge.server.ts).
28  return new Headers(publicHtmlHeaders(CONTENT_PAGE_HTML_TAGS));
29}
30
31export async function loader({ request, context }: Route.LoaderArgs) {
32  const env = getEnv(context);
33  const row = await getPageByPath(env, "/about");
34  // No row: the content sync has not written it yet. A draft is the signed-in admin's alone, like any page.
35  if (!row) throw data(null, { status: 404 });
36  if (row.status === "draft" && !(await isAdminViewer(env, request))) throw data(null, { status: 404 });
37  const { title, seoTitle, description, html } = row.record;
38  return { title, seoTitle, description, html, draft: row.status === "draft" };
39}
40
41export function meta({ loaderData }: Route.MetaArgs) {
42  if (!loaderData) return [];
43  return [
44    ...pageMeta({ title: loaderData.seoTitle, description: loaderData.description, path: "/about" }),
45    ...(loaderData.draft ? [{ name: "robots", content: "noindex" }] : []),
46  ];
47}
48
49export default function About({ loaderData }: Route.ComponentProps) {
50  const { title, description, html, draft } = loaderData;
51  return (
52    <PageShell
53      trail={
54        <script
55          type="application/ld+json"
56          dangerouslySetInnerHTML={{
57            __html: serializeJsonLd(profilePageJsonLd(SITE_ORIGIN, { path: "/about", description })),
58          }}
59        />
60      }
61    >
62      <header className="page-head">
63        <h1>{title}</h1>
64      </header>
65      {draft ? <p>Draft: only you can see this page.</p> : null}
66
67      {/* The same photo the Person record names; the 320 and 640 widths are the thumbnail set /media serves. */}
68      <img
69        className="about-photo"
70        src={`${PHOTO_SRC}?w=640`}
71        srcSet={`${PHOTO_SRC}?w=320 320w, ${PHOTO_SRC}?w=640 640w`}
72        sizes="(min-width: 46rem) 14rem, 11rem"
73        width={OWNER_PHOTO.width}
74        height={OWNER_PHOTO.height}
75        alt={SITE.name}
76        fetchPriority="high"
77      />
78
79      {/* The row's HTML: the site's pipeline with the URL allowlist already applied, no third-party input. */}
80      <div className="prose" dangerouslySetInnerHTML={{ __html: html }} />
81    </PageShell>
82  );
83}