app/routes/procedure.version.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/cite.mjs, app/kb/procedures/json-ld.mjs, app/kb/procedures/lineage.server.ts, app/kb/procedures/route.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, VersionNotice } from "~/components/procedure";
7import { getFrozenVersion, listFrozenVersions } from "~/db/procedure-versions";
8import { getProcedureByPath } from "~/db/procedures";
9import { getEnv } from "~/lib/context";
10import { jsonLd as serializeJsonLd } from "~/lib/json-ld.mjs";
11import { versionPath } from "~/kb/procedures/cite.mjs";
12import { procedureJsonLd } from "~/kb/procedures/json-ld.mjs";
13import { lineageFor } from "~/kb/procedures/lineage.server";
14import { procedureTrail, PROCEDURES_CACHE_TAG, readScale } from "~/kb/procedures/route";
15import { SITE, SITE_ORIGIN, breadcrumbJsonLd, pageMeta, personId, publicHtmlHeaders } from "~/lib/seo";
16
17import type { Route } from "./+types/procedure.version";
18
19// prose.css is route-scoped: a page using `.prose` without importing it renders unstyled.
20import "~/styles/prose.css";
21import "~/styles/procedure.css";
22import "~/styles/run.css";
23
24/**
25 * A procedure as it was when a version was published, at `<page>/v/<version>` (drizzle/0027_procedure_versions.sql).
26 * The words are the frozen copy's and never change, so a printed sheet's QR code and a citation keep meaning what they
27 * did. The page says which version is current when this is not, links to it, and puts its canonical on the plain page.
28 * Only published versions are frozen, so there is no draft here to hide.
29 */
30export function headers() {
31  return new Headers(publicHtmlHeaders(PROCEDURES_CACHE_TAG));
32}
33
34export async function loader({ request, context }: Route.LoaderArgs) {
35  const env = getEnv(context);
36  const url = new URL(request.url);
37  const found = /^(.*)\/v\/([^/]+?)\/?$/.exec(url.pathname);
38  if (!found) throw data(null, { status: 404 });
39  const path = found[1] ?? "";
40  const version = decodeURIComponent(found[2] ?? "");
41  const frozen = await getFrozenVersion(env, path, version);
42  if (!frozen) throw data(null, { status: 404 });
43  // The live page tells this one what is current. A draft or a removed procedure has no current version.
44  const live = await getProcedureByPath(env, path);
45  const current = live && live.status === "published" ? { path, version: live.record.version } : null;
46  const { count, factor, units } = readScale(frozen.record, url);
47  return { record: frozen.record, current, count, factor, units, frozen: await listFrozenVersions(env, frozen.slug), lineage: await lineageFor(env, frozen.record) };
48}
49
50export function meta({ loaderData }: Route.MetaArgs) {
51  if (!loaderData) return [];
52  const { record } = loaderData;
53  return [
54    // The canonical is the plain page, so the copies are never competing results for the same words.
55    ...pageMeta({ title: `${record.seoTitle} (version ${record.version})`, description: record.description, path: record.path }),
56    { tagName: "link", rel: "alternate", type: "text/markdown", href: `${SITE_ORIGIN}${versionPath(record.path, String(record.version))}.md` },
57  ];
58}
59
60export default function ProcedureVersionRoute({ loaderData }: Route.ComponentProps) {
61  const { record, current, count, factor, units, frozen, lineage } = loaderData;
62  const trail = procedureTrail(record);
63  const person = { "@type": "Person", "@id": personId(SITE_ORIGIN), name: SITE.name, url: SITE_ORIGIN };
64  const blocks = [breadcrumbJsonLd(SITE_ORIGIN, trail), procedureJsonLd(record, SITE_ORIGIN, person, lineage)];
65  const basePath = versionPath(record.path, String(record.version));
66  return (
67    <PageShell
68      trail={
69        <>
70          {blocks.map((block, i) => (
71            <script key={i} type="application/ld+json" dangerouslySetInnerHTML={{ __html: serializeJsonLd(block) }} />
72          ))}
73        </>
74      }
75    >
76      <Breadcrumb trail={trail} />
77      <h1 className="page-title">{record.title}</h1>
78      <VersionNotice record={record} current={current} />
79      <ProcedureView record={record} count={count} factor={factor} units={units} basePath={basePath} sheetPath={`${basePath}/sheet`} frozen={frozen} lineage={lineage} />
80      <Enhance module="run" />
81      {/* Keep on this device (app/enhance/offline.ts): a copy that opens with no connection, only when the reader asks. */}
82      <Enhance module="offline" />
83    </PageShell>
84  );
85}