app/routes/phages.tsx

Functions

Imports

It imports app/components/breadcrumb.tsx, app/components/enhance.tsx, app/components/page-shell.tsx, app/db/pages.ts, app/db/phages.ts, app/lib/access.server.ts, app/lib/content-pages.mjs, app/lib/context.ts, app/lib/json-ld.mjs, app/lib/pages/page-json-ld.ts, app/lib/pages/route.ts, app/lib/phage-table.mjs, app/lib/phages/catalog.mjs, app/lib/phages/compile.mjs, app/lib/seo.ts. No module of this repo imports it.

Source

1import { Catalog } from "capsomer/react/catalog";
2import { data } from "react-router";
3import type { ReactNode } from "react";
4
5import { Breadcrumb } from "~/components/breadcrumb";
6import { Enhance } from "~/components/enhance";
7import { PageShell } from "~/components/page-shell";
8import { getPageByPath, getPublishedPageTitles } from "~/db/pages";
9import { listPhages } from "~/db/phages";
10import { isAdminViewer } from "~/lib/access.server";
11import { getEnv } from "~/lib/context";
12import { contentPageMarkdownPath, contentPageTrail } from "~/lib/content-pages.mjs";
13import { jsonLd as serializeJsonLd } from "~/lib/json-ld.mjs";
14import { contentPageJsonLd } from "~/lib/pages/page-json-ld";
15import { CONTENT_PAGE_HTML_TAGS } from "~/lib/pages/route";
16import { phagesDbUrl } from "~/lib/phage-table.mjs";
17import { HOSTS, PHAGES_PAGE_PATH, phageSlug, type Phage } from "~/lib/phages/compile.mjs";
18import { PHAGES, phageListing } from "~/lib/phages/catalog.mjs";
19import { SITE_ORIGIN, pageMeta, publicHtmlHeaders } from "~/lib/seo";
20
21import type { Route } from "./+types/phages";
22
23// Route-scoped: the catalog's tokens and components are Capsomer's, and only the pages that draw one load them.
24import "capsomer/tokens.css";
25import "capsomer/field.css";
26import "capsomer/button.css";
27import "capsomer/table.css";
28import "capsomer/chips.css";
29import "capsomer/empty.css";
30import "capsomer/pagination.css";
31import "capsomer/catalog.css";
32import "~/styles/prose.css";
33import "~/styles/site-catalog.css";
34import "~/styles/phages.css";
35
36/**
37 * /research/phages (docs/PHAGES.md): the page's own prose and its phage-by-phage sections, as the page row holds them,
38 * with the table between them drawn as Capsomer's catalog over the phage rows: search, facets with counts, sort and
39 * the count, working with no script. The page row still holds the markdown table, so the markdown twin, the search
40 * records and the page's invariants are the same as ever; only the HTML table is swapped for the catalog.
41 */
42export function headers() {
43  return new Headers(publicHtmlHeaders(CONTENT_PAGE_HTML_TAGS));
44}
45
46/** The page's table, as the markdown renderer wrote it: the one scroll wrapper around the one table. */
47const TABLE = /<div class="table-scroll"[^>]*><table>[\s\S]*?<\/table><\/div>/g;
48
49/** The page's HTML in two halves around its table, or an error that says why it could not be cut. */
50function aroundTable(html: string): [string, string] {
51  const found = [...html.matchAll(TABLE)];
52  if (found.length !== 1 || found[0] === undefined || found[0].index === undefined) {
53    throw new Error(
54      `${PHAGES_PAGE_PATH}: expected exactly one table in the page's HTML, found ${found.length}. ` +
55        "The catalog replaces it, so the page compile and this route disagree about the page's shape.",
56    );
57  }
58  const at = found[0].index;
59  return [html.slice(0, at), html.slice(at + found[0][0].length)];
60}
61
62export async function loader({ request, context }: Route.LoaderArgs) {
63  const env = getEnv(context);
64  const url = new URL(request.url);
65  const row = await getPageByPath(env, PHAGES_PAGE_PATH);
66  if (!row) throw data(null, { status: 404 });
67  if (row.status === "draft" && !(await isAdminViewer(env, request))) throw data(null, { status: 404 });
68  const page = row.record;
69  const [before, after] = aroundTable(page.html);
70  const titles = await getPublishedPageTitles(env, ["/research"]);
71  const trail = contentPageTrail(page, (path) => titles.get(path));
72  return { page, before, after, trail, phages: await listPhages(env), search: url.search, draft: row.status === "draft" };
73}
74
75export function meta({ loaderData }: Route.MetaArgs) {
76  if (!loaderData) return [];
77  const { page, draft } = loaderData;
78  return [
79    ...pageMeta({ title: page.seoTitle, description: page.description, path: page.path }),
80    { tagName: "link", rel: "alternate", type: "text/markdown", href: `${SITE_ORIGIN}${contentPageMarkdownPath(page.path)}` },
81    ...(draft ? [{ name: "robots", content: "noindex" }] : []),
82  ];
83}
84
85/** `*M. smegmatis* mc²155` as the table has always drawn it: the organism in italics. */
86function hostCell(key: string): ReactNode {
87  const host = (HOSTS as Record<string, { short: string }>)[key];
88  if (!host) return key;
89  return host.short.split("*").map((part, i) => (i % 2 === 1 ? <em key={i}>{part}</em> : part));
90}
91
92const cells = {
93  host: (p: Phage) => (p.host ? hostCell(p.host) : ""),
94  phagesdb: (p: Phage) => (p.phagesdb ? <a href={phagesDbUrl(p.phagesdb)}>PhagesDB</a> : ""),
95  paper: (p: Phage) => (p.paper ? <a href={`/research/publications/${p.paper}/`}>Paper</a> : ""),
96};
97
98export default function PhagesRoute({ loaderData }: Route.ComponentProps) {
99  const { page, before, after, trail, phages, search, draft } = loaderData;
100  const result = phageListing(search, phages);
101  return (
102    <PageShell
103      trail={
104        <>
105          {contentPageJsonLd(page, trail, null).map((block, i) => (
106            <script key={i} type="application/ld+json" dangerouslySetInnerHTML={{ __html: serializeJsonLd(block) }} />
107          ))}
108        </>
109      }
110    >
111      <Breadcrumb trail={trail} />
112      <h1 className="page-title" id="phages-title">
113        {page.title}
114      </h1>
115      {draft ? <p>Draft: only you can see this page.</p> : null}
116      <div className="prose" dangerouslySetInnerHTML={{ __html: before }} />
117      <div className="phage-catalog site-catalog site-catalog-wide">
118        <Catalog
119          definition={PHAGES}
120          result={result}
121          labelledBy="phages-title"
122          title={(p) => <a href={`#${phageSlug(p.name)}`}>{p.name}</a>}
123          cells={cells}
124          emptyText={{ noMatch: "No phages match this search." }}
125        />
126      </div>
127      <div className="prose" dangerouslySetInnerHTML={{ __html: after }} />
128      <Enhance module="catalog" />
129    </PageShell>
130  );
131}