app/routes/content-page.tsx

Functions

Imports

It imports app/components/breadcrumb.tsx, app/components/dictionary-entry.tsx, app/components/page-shell.tsx, app/components/phage-roster.tsx, app/components/phage-tool.tsx, app/db/dictionary.ts, app/db/pages.ts, app/db/roster.ts, app/lib/access.server.ts, app/lib/content-pages.mjs, app/lib/context.ts, app/lib/json-ld.mjs, app/lib/long-date.mjs, app/lib/pages/compile.mjs, app/lib/pages/page-json-ld.ts, app/lib/pages/route.ts, app/lib/phage-tools.mjs, app/lib/roster/compile.mjs, app/lib/seo.ts. Imported by app/routes/accessibility.tsx, app/routes/privacy.tsx, app/routes/software.tsx, app/routes/teaching.tsx, app/routes/terms.tsx.

Source

1import { data } from "react-router";
2
3import { Breadcrumb } from "~/components/breadcrumb";
4import { DictionaryEntry } from "~/components/dictionary-entry";
5import { PageShell } from "~/components/page-shell";
6import { PhageRoster } from "~/components/phage-roster";
7import { PhageTools } from "~/components/phage-tool";
8import { getPublishedEntryByPath } from "~/db/dictionary";
9import { getPageByPath, getPublishedPageTitles } from "~/db/pages";
10import { listRoster } from "~/db/roster";
11import { isAdminViewer } from "~/lib/access.server";
12import { getEnv } from "~/lib/context";
13import { longDateUTC } from "~/lib/long-date.mjs";
14import {
15  contentPageCardPath,
16  contentPageMarkdownPath,
17  contentPageTrail,
18} from "~/lib/content-pages.mjs";
19import type { PageRecord } from "~/lib/pages/compile.mjs";
20import { contentPageJsonLd } from "~/lib/pages/page-json-ld";
21import { jsonLd as serializeJsonLd } from "~/lib/json-ld.mjs";
22import { CONTENT_PAGE_HTML_TAGS } from "~/lib/pages/route";
23import { toolsOnPage } from "~/lib/phage-tools.mjs";
24import { ROSTER_PAGE_PATH } from "~/lib/roster/compile.mjs";
25import { SITE_ORIGIN, pageMeta, publicHtmlHeaders } from "~/lib/seo";
26
27import type { Route } from "./+types/content-page";
28
29// prose.css is route-scoped: a page using `.prose` without importing it renders unstyled.
30import "~/styles/enarratio.css";
31import "~/styles/prose.css";
32
33/**
34 * Every Research, Teaching and Software page (app/lib/content-pages.mjs): the research/* splat, and
35 * /teaching and /software through their own modules. Drawn from the page's D1 row at request time
36 * (docs/PAGES.md), so an edit saved through the operator API is live without a deploy; the HTML in the
37 * row was rendered by the site's pipeline with the URL allowlist already applied, so the Worker carries
38 * no markdown renderer and nothing third-party reaches the page. A draft is served only to the signed-in
39 * admin; that request carries a cookie, and the Worker never stores a cookie-bearing response.
40 * The markdown twin is the sibling route in content-page[.md].ts.
41 */
42export function headers() {
43  return new Headers(publicHtmlHeaders(CONTENT_PAGE_HTML_TAGS));
44}
45
46export async function loader({ request, context }: Route.LoaderArgs) {
47  const env = getEnv(context);
48  const url = new URL(request.url);
49  const pathname = url.pathname.replace(/\/+$/, "") || "/";
50  const row = await getPageByPath(env, pathname);
51  // A path with no row: not a page, or a page the content sync has not written yet.
52  if (!row) throw data(null, { status: 404 });
53  if (row.status === "draft" && !(await isAdminViewer(env, request))) throw data(null, { status: 404 });
54  const page = row.record;
55  // The page it sits under, by title, for the trail above it (the course above its FAQ).
56  const parent = page.path.slice(0, page.path.lastIndexOf("/"));
57  const titles = await getPublishedPageTitles(env, parent ? [parent] : []);
58  // The lead a named Software page opens with, drawn from D1 beside the page (docs/DICTIONARY.md): an entry
59  // edit is live at the next request, and a page with no published entry has none.
60  const entry = await getPublishedEntryByPath(env, page.path);
61  const trail = contentPageTrail(page, (path) => titles.get(path));
62  // The program page carries the roster, drawn from D1 beside the page (docs/ROSTER.md); no other page reads it.
63  const roster = page.path === ROSTER_PAGE_PATH ? await listRoster(env) : null;
64  // A calculator page computes from its query string, so Calculate works as a plain GET with script off.
65  return { page, trail, entry, roster, draft: row.status === "draft", search: toolsOnPage(page.path).length > 0 ? url.search : "" };
66}
67
68/** The page's own social card where build:og draws one (CARDED_PAGE_ROOTS), else the site card. */
69function cardUrl(page: PageRecord) {
70  const path = contentPageCardPath(page);
71  return path ? `${SITE_ORIGIN}${path}` : undefined;
72}
73
74export function meta({ loaderData }: Route.MetaArgs) {
75  if (!loaderData) return [];
76  const { page, draft } = loaderData;
77  return [
78    ...pageMeta({ title: page.seoTitle, description: page.description, path: page.path, image: cardUrl(page) }),
79    {
80      tagName: "link",
81      rel: "alternate",
82      type: "text/markdown",
83      href: `${SITE_ORIGIN}${contentPageMarkdownPath(page.path)}`,
84    },
85    ...(draft ? [{ name: "robots", content: "noindex" }] : []),
86  ];
87}
88
89export default function ContentPageRoute({ loaderData }: Route.ComponentProps) {
90  const { page, trail, entry, roster, draft, search } = loaderData;
91  return (
92    <PageShell
93      trail={
94        <>
95          {contentPageJsonLd(page, trail, entry).map((block, i) => (
96            <script
97              key={i}
98              type="application/ld+json"
99              dangerouslySetInnerHTML={{ __html: serializeJsonLd(block) }}
100            />
101          ))}
102        </>
103      }
104    >
105      <Breadcrumb trail={trail} />
106      <h1 className="page-title">{page.title}</h1>
107      {draft ? <p>Draft: only you can see this page.</p> : null}
108      {page.banner || page.lastUpdated ? (
109        <div className="legal-status">
110          {page.banner ? <p className="legal-banner">{page.banner}</p> : null}
111          {page.lastUpdated ? (
112            <p className="legal-updated">
113              Last updated <time dateTime={page.lastUpdated}>{longDateUTC(page.lastUpdated)}</time>
114            </p>
115          ) : null}
116        </div>
117      ) : null}
118      {entry ? <DictionaryEntry entry={entry} /> : null}
119      <PhageTools path={page.path} search={search} />
120      <div className="prose" dangerouslySetInnerHTML={{ __html: page.html }} />
121      {roster ? (
122        <div className="prose">
123          <PhageRoster cohorts={roster} />
124        </div>
125      ) : null}
126    </PageShell>
127  );
128}