app/routes/kb-library.tsx

Functions

Imports

It imports app/components/breadcrumb.tsx, app/components/enhance.tsx, app/components/library-cite.tsx, app/components/page-shell.tsx, app/db/procedures.ts, app/kb/libraries.mjs, app/kb/procedures/library.mjs, app/kb/procedures/route.ts, app/kb/procedures/taxonomy.mjs, 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 { Catalog } from "capsomer/react/catalog";
2import { parseCatalogParams, queryCatalog } from "capsomer/behaviour/catalog";
3import { data, redirect } from "react-router";
4
5import { Breadcrumb } from "~/components/breadcrumb";
6import { Enhance } from "~/components/enhance";
7import { LibraryCite } from "~/components/library-cite";
8import { PageShell } from "~/components/page-shell";
9import { listPublishedRecordsOfProfile } from "~/db/procedures";
10import { isAdminViewer } from "~/lib/access.server";
11import { getEnv } from "~/lib/context";
12import { jsonLd as serializeJsonLd } from "~/lib/json-ld.mjs";
13import { countOf } from "~/kb/procedures/library.mjs";
14import { methodLabel } from "~/kb/procedures/taxonomy.mjs";
15import { PROCEDURES_CACHE_TAG } from "~/kb/procedures/route";
16import {
17  baseAtLibrary,
18  baseCatalog,
19  baseCitation,
20  baseDownloads,
21  baseItems,
22  howtoTypeLabel,
23  baseRedirect,
24  libraryTrail,
25  nounOf,
26  type BaseItem,
27} from "~/kb/libraries.mjs";
28import {
29  SITE,
30  SITE_ORIGIN,
31  breadcrumbJsonLd,
32  pageMeta,
33  publicHtmlHeaders,
34} from "~/lib/seo";
35
36import type { Route } from "./+types/kb-library";
37
38// Route-scoped, as on the protocol library: the catalog's tokens and components are Capsomer's.
39import "capsomer/tokens.css";
40import "capsomer/field.css";
41import "capsomer/button.css";
42import "capsomer/table.css";
43import "capsomer/chips.css";
44import "capsomer/empty.css";
45import "capsomer/pagination.css";
46import "capsomer/catalog.css";
47import "~/styles/prose.css";
48import "~/styles/site-catalog.css";
49import "~/styles/library.css";
50
51/**
52 * A knowledge base's library (docs/KNOWLEDGE-BASE.md, step 8): Recipes at /recipes and Software how-tos at
53 * /software/how-tos, each every published entry of its base as a searchable, filterable catalog drawn from the
54 * procedure rows in D1, so an entry saved appears at the next request. A library with no published entry is not a page
55 * yet: the public gets a 404 and the signed-in admin sees it empty, until the first entry is published.
56 */
57export function headers() {
58  return new Headers(publicHtmlHeaders(PROCEDURES_CACHE_TAG));
59}
60
61export async function loader({ request, context }: Route.LoaderArgs) {
62  const env = getEnv(context);
63  const url = new URL(request.url);
64  const base = baseAtLibrary(url.pathname);
65  if (!base) throw data(null, { status: 404 });
66  const items = baseItems(
67    base,
68    await listPublishedRecordsOfProfile(env, base.profile),
69  );
70  const empty = items.length === 0;
71  if (empty && !(await isAdminViewer(env, request)))
72    throw data(null, { status: 404 });
73  const canonical = baseRedirect(base, url);
74  if (canonical) throw redirect(canonical, 301);
75  return { base, items, empty, search: url.search };
76}
77
78/** What the library is, in one line, from its base and its rows. */
79function lead(
80  base: NonNullable<ReturnType<typeof baseAtLibrary>>,
81  items: BaseItem[],
82) {
83  const noun = nounOf(base);
84  const dates = items
85    .map((p) => p.updated)
86    .filter(Boolean)
87    .sort();
88  return `${countOf(items.length, noun)} from the ${SITE.name} Lab${dates.length ? `, newest updated ${dates.at(-1)}` : ""}.`;
89}
90
91export function meta({ loaderData }: Route.MetaArgs) {
92  if (!loaderData) return [];
93  const { base, items, empty } = loaderData;
94  return [
95    ...pageMeta({
96      title: `${base.name} | ${SITE.name}`,
97      description: lead(base, items),
98      path: base.library,
99    }),
100    {
101      tagName: "link",
102      rel: "alternate",
103      type: "text/markdown",
104      href: `${SITE_ORIGIN}${base.library}.md`,
105    },
106    ...(empty ? [{ name: "robots", content: "noindex" }] : []),
107  ];
108}
109
110const cells = {
111  type: (item: BaseItem) => howtoTypeLabel(item.type),
112  method: (item: BaseItem) => item.methods.map(methodLabel).join(", "),
113  category: (item: BaseItem) => item.category,
114};
115
116export default function KbLibraryRoute({ loaderData }: Route.ComponentProps) {
117  const { base, items, empty, search } = loaderData;
118  const catalog = baseCatalog(base);
119  const trail = libraryTrail(base);
120  const result = queryCatalog(
121    catalog,
122    items,
123    parseCatalogParams(catalog, search),
124  );
125  const collection = {
126    "@context": "https://schema.org",
127    "@type": "CollectionPage",
128    "@id": `${SITE_ORIGIN}${base.library}#collectionpage`,
129    name: base.name,
130    description: lead(base, items),
131    url: `${SITE_ORIGIN}${base.library}`,
132    mainEntity: {
133      "@type": "ItemList",
134      numberOfItems: items.length,
135      itemListElement: items.map((item, i) => ({
136        "@type": "ListItem",
137        position: i + 1,
138        name: item.title,
139        url: `${SITE_ORIGIN}${item.path}`,
140      })),
141    },
142  };
143  return (
144    <PageShell
145      trail={
146        <>
147          {[breadcrumbJsonLd(SITE_ORIGIN, trail), collection].map(
148            (block, i) => (
149              <script
150                key={i}
151                type="application/ld+json"
152                dangerouslySetInnerHTML={{ __html: serializeJsonLd(block) }}
153              />
154            ),
155          )}
156        </>
157      }
158    >
159      <Breadcrumb trail={trail} />
160      <h1 className="page-title" id="library-title">
161        {base.name}
162      </h1>
163      {empty ? (
164        <p className="procedure-draft">
165          Only you can see this page: no {base.singular.toLowerCase()} is
166          published yet. It goes public with the first one.
167        </p>
168      ) : null}
169      <p className="library-counts">{lead(base, items)}</p>
170      <div className="library site-catalog site-catalog-wide">
171        <Catalog
172          definition={catalog}
173          result={result}
174          labelledBy="library-title"
175          title={(item) => (
176            <a className="cap-table-open" href={item.path}>
177              {item.title}
178            </a>
179          )}
180          cells={cells}
181        />
182      </div>
183      {/* An empty library's downloads are not there yet (its twin and downloads answer 404 too). */}
184      {empty ? null : (
185        <LibraryCite
186          count={result.count}
187          noun={nounOf(base)}
188          downloads={baseDownloads(base, result)}
189          citation={baseCitation(base, {
190            name: SITE.name,
191            affiliation: SITE.affiliation,
192            origin: SITE_ORIGIN,
193          })}
194        />
195      )}
196      <Enhance module="catalog" />
197    </PageShell>
198  );
199}