app/routes/protocols.tsx

Functions

Imports

It imports app/components/breadcrumb.tsx, app/components/enhance.tsx, app/components/library-cite.tsx, app/components/library-overview.tsx, app/components/page-shell.tsx, app/db/pages.ts, app/db/procedures.ts, app/db/registry.ts, app/kb/procedures/library.mjs, app/kb/procedures/route.ts, app/kb/procedures/taxonomy.mjs, app/kb/registry/catalog.mjs, app/kb/registry/route.ts, app/lib/access.server.ts, app/lib/content-pages.mjs, 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 { Catalog } from "capsomer/react/catalog";
2import { TabLink, TabsNav } from "capsomer/react/tabs";
3import { parseCatalogParams, queryCatalog } from "capsomer/behaviour/catalog";
4import { data, redirect } from "react-router";
5
6import { Breadcrumb } from "~/components/breadcrumb";
7import { Enhance } from "~/components/enhance";
8import { LibraryCite } from "~/components/library-cite";
9import { LibraryOverview } from "~/components/library-overview";
10import { PageShell } from "~/components/page-shell";
11import { getPageByPath } from "~/db/pages";
12import { listPublishedLibraryRecords } from "~/db/procedures";
13import { listRegistry } from "~/db/registry";
14import { isAdminViewer } from "~/lib/access.server";
15import { getEnv } from "~/lib/context";
16import { contentPageMarkdownPath } from "~/lib/content-pages.mjs";
17import { jsonLd as serializeJsonLd } from "~/lib/json-ld.mjs";
18import { CONTENT_PAGE_HTML_TAGS } from "~/lib/pages/route";
19import { LIBRARY, LIBRARY_PATH, libraryCitation, libraryDownloads, libraryItems, libraryOverview, libraryRedirect, libraryTabs, type LibraryItem } from "~/kb/procedures/library.mjs";
20import { methodLabel } from "~/kb/procedures/taxonomy.mjs";
21import { registryTabs } from "~/kb/registry/catalog.mjs";
22import { REGISTRY_CACHE_TAG } from "~/kb/registry/route";
23import { PROCEDURES_CACHE_TAG } from "~/kb/procedures/route";
24import { SITE, SITE_ORIGIN, breadcrumbJsonLd, pageMeta, publicHtmlHeaders } from "~/lib/seo";
25
26import type { Route } from "./+types/protocols";
27
28// Route-scoped: the catalog's tokens and components are Capsomer's, and only this page uses them.
29import "capsomer/tokens.css";
30import "capsomer/field.css";
31import "capsomer/button.css";
32import "capsomer/table.css";
33import "capsomer/chips.css";
34import "capsomer/empty.css";
35import "capsomer/pagination.css";
36import "capsomer/catalog.css";
37import "capsomer/tabs.css";
38import "~/styles/prose.css";
39import "~/styles/site-catalog.css";
40import "~/styles/library.css";
41
42/**
43 * The protocol library at /research/protocols (docs/PROCEDURES.md): the page's own introduction, then every
44 * published protocol as a searchable, filterable, sortable catalog. The rows are the procedure records in D1, so a
45 * protocol saved through the operator API appears here at the next request with no deploy and no second list to
46 * keep. The catalog is a GET form: with script off every control still works, and every state is an address.
47 */
48export function headers() {
49  return new Headers(publicHtmlHeaders(`${CONTENT_PAGE_HTML_TAGS},${PROCEDURES_CACHE_TAG},${REGISTRY_CACHE_TAG}`));
50}
51
52export async function loader({ request, context }: Route.LoaderArgs) {
53  const env = getEnv(context);
54  const url = new URL(request.url);
55  const row = await getPageByPath(env, LIBRARY_PATH);
56  if (!row) throw data(null, { status: 404 });
57  if (row.status === "draft" && !(await isAdminViewer(env, request))) throw data(null, { status: 404 });
58  // A state written in another order, or with a default spelled out, goes to its one address.
59  const canonical = libraryRedirect(url);
60  if (canonical) throw redirect(canonical, 301);
61  const items = libraryItems(await listPublishedLibraryRecords(env));
62  // The registry's kinds are tabs beside the calculators, counted from its rows (docs/REGISTRY.md).
63  const registry = registryTabs(await listRegistry(env, { published: true }));
64  return { page: row.record, draft: row.status === "draft", items, registry, search: url.search };
65}
66
67export function meta({ loaderData }: Route.MetaArgs) {
68  if (!loaderData) return [];
69  const { page, draft } = loaderData;
70  return [
71    ...pageMeta({ title: page.seoTitle, description: page.description, path: page.path }),
72    { tagName: "link", rel: "alternate", type: "text/markdown", href: `${SITE_ORIGIN}${contentPageMarkdownPath(page.path)}` },
73    ...(draft ? [{ name: "robots", content: "noindex" }] : []),
74  ];
75}
76
77/** The catalog's quick links, drawn from each protocol's own path: its printable bench sheet and its markdown twin. */
78const cells = {
79  method: (item: LibraryItem) => item.methods.map(methodLabel).join(", "),
80  links: (item: LibraryItem) => (
81    <span className="library-links">
82      <a href={`${item.path}/sheet`}>Bench sheet</a>
83      <a href={`${item.path}.md`}>Markdown</a>
84    </span>
85  ),
86};
87
88export default function ProtocolLibraryRoute({ loaderData }: Route.ComponentProps) {
89  const { page, draft, items, registry, search } = loaderData;
90  const trail: Array<[string, string]> = [
91    ["Research", "/research"],
92    ["Protocols", LIBRARY_PATH],
93  ];
94  // The introduction is the prose before the page's first heading; the sections follow the library.
95  const split = page.html.indexOf("<h2");
96  const intro = split === -1 ? page.html : page.html.slice(0, split);
97  const rest = split === -1 ? "" : page.html.slice(split);
98  const result = queryCatalog(LIBRARY, items, parseCatalogParams(LIBRARY, search));
99  const collection = {
100    "@context": "https://schema.org",
101    "@type": "CollectionPage",
102    "@id": `${SITE_ORIGIN}${LIBRARY_PATH}#collectionpage`,
103    name: page.title,
104    description: page.description,
105    url: `${SITE_ORIGIN}${LIBRARY_PATH}`,
106    mainEntity: {
107      "@type": "ItemList",
108      numberOfItems: items.length,
109      itemListElement: items.map((item, i) => ({
110        "@type": "ListItem",
111        position: i + 1,
112        name: item.title,
113        url: `${SITE_ORIGIN}${item.path}`,
114      })),
115    },
116  };
117  return (
118    <PageShell
119      trail={
120        <>
121          {[breadcrumbJsonLd(SITE_ORIGIN, trail), collection].map((block, i) => (
122            <script key={i} type="application/ld+json" dangerouslySetInnerHTML={{ __html: serializeJsonLd(block) }} />
123          ))}
124        </>
125      }
126    >
127      <Breadcrumb trail={trail} />
128      <h1 className="page-title" id="library-title">
129        {page.title}
130      </h1>
131      {draft ? <p>Draft: only you can see this page.</p> : null}
132      <div className="prose" dangerouslySetInnerHTML={{ __html: intro }} />
133      <LibraryOverview overview={libraryOverview(items)} />
134      <div className="library site-catalog site-catalog-wide">
135        <TabsNav aria-label="Protocols by kind of work" variant="line">
136          {libraryTabs(items, result.state.filters.method ?? [], registry).map((tab) => (
137            <TabLink key={tab.id} href={tab.href} current={tab.current} count={tab.count}>
138              {tab.label}
139            </TabLink>
140          ))}
141        </TabsNav>
142        <Catalog
143          definition={LIBRARY}
144          result={result}
145          labelledBy="library-title"
146          title={(item) => (
147            <a className="cap-table-open" href={item.path}>
148              {item.title}
149            </a>
150          )}
151          cells={cells}
152        />
153      </div>
154      <LibraryCite
155        count={result.count}
156        downloads={libraryDownloads(result)}
157        citation={libraryCitation({ name: SITE.name, affiliation: SITE.affiliation, origin: SITE_ORIGIN })}
158      />
159      {rest ? <div className="prose" dangerouslySetInnerHTML={{ __html: rest }} /> : null}
160      <Enhance module="catalog" />
161    </PageShell>
162  );
163}