app/routes/procedure.tsx

Functions

Imports

It imports app/components/breadcrumb.tsx, app/components/enhance.tsx, app/components/page-shell.tsx, app/components/procedure.tsx, app/db/procedure-versions.ts, app/db/procedures.ts, app/kb/procedures/json-ld.mjs, app/kb/procedures/library.mjs, app/kb/procedures/lineage.server.ts, app/kb/procedures/proof.server.ts, app/kb/procedures/route.ts, app/lib/access.server.ts, app/lib/context.ts, app/lib/json-ld.mjs, app/lib/seo.ts. No module of this repo imports it.

Source

1import { data } from "react-router";
2
3import { Breadcrumb } from "~/components/breadcrumb";
4import { Enhance } from "~/components/enhance";
5import { PageShell } from "~/components/page-shell";
6import { ProcedureView } from "~/components/procedure";
7import { listFrozenVersions } from "~/db/procedure-versions";
8import { getProcedureByPath, listPublishedLibraryRecords } from "~/db/procedures";
9import { isAdminViewer } from "~/lib/access.server";
10import { getEnv } from "~/lib/context";
11import { jsonLd as serializeJsonLd } from "~/lib/json-ld.mjs";
12import { procedureJsonLd } from "~/kb/procedures/json-ld.mjs";
13import { lineageFor } from "~/kb/procedures/lineage.server";
14import { libraryItems, workflowContext } from "~/kb/procedures/library.mjs";
15import { proofFor } from "~/kb/procedures/proof.server";
16import { procedureTrail, PROCEDURES_CACHE_TAG, readScale } from "~/kb/procedures/route";
17import { SITE, SITE_ORIGIN, breadcrumbJsonLd, pageMeta, personId, publicHtmlHeaders } from "~/lib/seo";
18
19import type { Route } from "./+types/procedure";
20
21// prose.css is route-scoped: a page using `.prose` without importing it renders unstyled.
22import "~/styles/prose.css";
23import "~/styles/procedure.css";
24import "~/styles/run.css";
25
26/**
27 * Every procedure page (docs/PROCEDURES.md): a protocol, a recipe or a computational procedure, drawn
28 * from its D1 row at request time, so an edit saved through the operator API is live without a deploy.
29 * A draft is served only to the signed-in admin; that request carries a cookie, and the Worker never
30 * stores a cookie-bearing response.
31 */
32export function headers() {
33  return new Headers(publicHtmlHeaders(PROCEDURES_CACHE_TAG));
34}
35
36export async function loader({ request, context }: Route.LoaderArgs) {
37  const env = getEnv(context);
38  const url = new URL(request.url);
39  const path = url.pathname.replace(/\/+$/, "");
40  const row = await getProcedureByPath(env, path);
41  if (!row) throw data(null, { status: 404 });
42  if (row.status === "draft" && !(await isAdminViewer(env, request))) throw data(null, { status: 404 });
43  const { count, factor, units } = readScale(row.record, url);
44  // Where a protocol sits in the phage workflow: its neighbours are the other published protocols, so they are read here.
45  const workflow =
46    row.record.profile === "protocol" ? workflowContext(libraryItems(await listPublishedLibraryRecords(env)), row.record.path) : null;
47  // Proof of use is slugs in the file; the papers' and phages' words and addresses are read from their rows.
48  const proof = await proofFor(env, row.record.proofOfUse);
49  // The versions with a frozen copy, which the history links.
50  const frozen = await listFrozenVersions(env, row.slug);
51  // A variant's parent: its title and the frozen copy it was taken from are the parent's own facts (P3).
52  const lineage = await lineageFor(env, row.record);
53  return { record: row.record, draft: row.status === "draft", count, factor, units, workflow, proof, frozen, lineage };
54}
55
56export function meta({ loaderData }: Route.MetaArgs) {
57  if (!loaderData) return [];
58  const { record, draft } = loaderData;
59  return [
60    ...pageMeta({ title: record.seoTitle, description: record.description, path: record.path }),
61    { tagName: "link", rel: "alternate", type: "text/markdown", href: `${SITE_ORIGIN}${record.path}.md` },
62    ...(draft ? [{ name: "robots", content: "noindex" }] : []),
63  ];
64}
65
66export default function ProcedureRoute({ loaderData }: Route.ComponentProps) {
67  const { record, draft, count, factor, units, workflow, proof, frozen, lineage } = loaderData;
68  const trail = procedureTrail(record);
69  const person = { "@type": "Person", "@id": personId(SITE_ORIGIN), name: SITE.name, url: SITE_ORIGIN };
70  const blocks = [breadcrumbJsonLd(SITE_ORIGIN, trail), procedureJsonLd(record, SITE_ORIGIN, person, lineage)];
71  return (
72    <PageShell
73      trail={
74        <>
75          {blocks.map((block, i) => (
76            <script key={i} type="application/ld+json" dangerouslySetInnerHTML={{ __html: serializeJsonLd(block) }} />
77          ))}
78        </>
79      }
80    >
81      <Breadcrumb trail={trail} />
82      <h1 className="page-title">{record.title}</h1>
83      {draft ? <p className="procedure-draft">Draft: only you can see this page.</p> : null}
84      <ProcedureView record={record} count={count} factor={factor} units={units} workflow={workflow} proof={proof} frozen={frozen} lineage={lineage} />
85      {/* Run mode (app/enhance/run.ts): the page is complete as served; this adds the bench checklist. */}
86      <Enhance module="run" />
87      {/* Keep on this device (app/enhance/offline.ts): a copy that opens with no connection, only when the reader asks. */}
88      <Enhance module="offline" />
89    </PageShell>
90  );
91}