app/components/library-cite.tsx

Functions

Imports

It imports app/kb/procedures/library.mjs. Imported by app/routes/kb-library.tsx, app/routes/protocols.tsx.

Source

1import { countOf, type libraryCitation, type libraryDownloads } from "~/kb/procedures/library.mjs";
2
3/**
4 * Download and cite (docs/PROCEDURES.md): the CSV and JSON of the view shown, the markdown of the whole library, and how
5 * to cite it, all from the same functions the markdown twin uses, so a person and a machine read the same address and
6 * the same citation. Plain links and text: it works with no script.
7 */
8export function LibraryCite({
9  count,
10  downloads,
11  citation,
12  noun = ["protocol", "protocols"],
13}: {
14  count: number;
15  /** What the library's entries are called: ["recipe", "recipes"]. */
16  noun?: [string, string];
17  downloads: ReturnType<typeof libraryDownloads>;
18  citation: ReturnType<typeof libraryCitation>;
19}) {
20  return (
21    <section className="library-cite" aria-labelledby="library-cite-title">
22      <h2 id="library-cite-title" className="library-overview-title">
23        Download and cite
24      </h2>
25      <p>
26        Download the {countOf(count, noun)} shown as <a href={downloads.csv}>CSV</a> or{" "}
27        <a href={downloads.json}>JSON</a>, with every fact the table shows, or the whole library as{" "}
28        <a href={downloads.markdown}>markdown</a>.
29      </p>
30      <h3 className="library-subtitle">Cite the library</h3>
31      <p className="library-cite-text">{citation.library}</p>
32      <p>{citation.access}</p>
33      <p>{citation.protocol}</p>
34    </section>
35  );
36}