app/routes/lab.tsx

Functions

Imports

It imports app/components/breadcrumb.tsx, app/components/enhance.tsx, app/components/lab.tsx, app/components/page-shell.tsx, app/db/phages.ts, app/db/registry.ts, app/kb/registry/catalog.mjs, app/kb/registry/route.ts, app/lib/context.ts, app/lib/json-ld.mjs, app/lib/seo.ts. No module of this repo imports it.

Source

1import { catalogRedirect, parseCatalogParams, queryCatalog } from "capsomer/behaviour/catalog";
2import { redirect } from "react-router";
3
4import { Breadcrumb } from "~/components/breadcrumb";
5import { Enhance } from "~/components/enhance";
6import { LabInventory } from "~/components/lab";
7import { PageShell } from "~/components/page-shell";
8import { listPhages } from "~/db/phages";
9import { listRegistry } from "~/db/registry";
10import { getEnv } from "~/lib/context";
11import { jsonLd as serializeJsonLd } from "~/lib/json-ld.mjs";
12import { INVENTORY, LAB_PATH, inventoryRows, kindLabel } from "~/kb/registry/catalog.mjs";
13import { LAB_CACHE_TAGS } from "~/kb/registry/route";
14import { SITE_ORIGIN, breadcrumbJsonLd, pageMeta, publicHtmlHeaders } from "~/lib/seo";
15
16import type { Route } from "./+types/lab";
17
18// Route-scoped: the catalog's tokens and components are Capsomer's, and only the registry pages use them.
19import "capsomer/tokens.css";
20import "capsomer/field.css";
21import "capsomer/button.css";
22import "capsomer/table.css";
23import "capsomer/chips.css";
24import "capsomer/empty.css";
25import "capsomer/pagination.css";
26import "capsomer/catalog.css";
27import "~/styles/prose.css";
28import "~/styles/site-catalog.css";
29import "~/styles/library.css";
30import "~/styles/registry.css";
31
32/**
33 * The lab registry's master inventory at /research/lab (docs/REGISTRY.md): every published item of every kind, and the
34 * phages read from their own table, in one catalog filtered by kind. The rows are D1's, so an item saved through
35 * Carrel appears at the next request with no deploy. A GET form, so with script off every control works and every
36 * state is an address.
37 */
38export function headers() {
39  return new Headers(publicHtmlHeaders(LAB_CACHE_TAGS));
40}
41
42const TITLE = "Lab registry";
43
44export async function loader({ request, context }: Route.LoaderArgs) {
45  const env = getEnv(context);
46  const url = new URL(request.url);
47  // A state written in another order, or with a default spelled out, goes to its one address.
48  const canonical = catalogRedirect(INVENTORY, url);
49  if (canonical) throw redirect(canonical, 301);
50  const [items, phages] = await Promise.all([listRegistry(env, { published: true }), listPhages(env)]);
51  return { rows: inventoryRows(items, phages), search: url.search };
52}
53
54export function meta({ loaderData }: Route.MetaArgs) {
55  if (!loaderData) return [];
56  const kinds = [...new Set(loaderData.rows.map((row) => row.kind))].map((kind) => `${kindLabel(kind).toLowerCase()}s`);
57  return pageMeta({
58    title: `${TITLE}: ${kinds.join(", ")}`,
59    description: `The lab's reference catalog: ${kinds.join(" and ")}, each with its own facts.`,
60    path: LAB_PATH,
61  });
62}
63
64export default function LabRoute({ loaderData }: Route.ComponentProps) {
65  const { rows, search } = loaderData;
66  const trail: Array<[string, string]> = [
67    ["Research", "/research"],
68    [TITLE, LAB_PATH],
69  ];
70  const result = queryCatalog(INVENTORY, rows, parseCatalogParams(INVENTORY, search));
71  return (
72    <PageShell
73      trail={<script type="application/ld+json" dangerouslySetInnerHTML={{ __html: serializeJsonLd(breadcrumbJsonLd(SITE_ORIGIN, trail)) }} />}
74    >
75      <Breadcrumb trail={trail} />
76      <h1 className="page-title" id="registry-title">
77        {TITLE}
78      </h1>
79      <LabInventory rows={rows} result={result} />
80      <Enhance module="catalog" />
81    </PageShell>
82  );
83}