app/lib/nav.ts

Functions

Imports

It imports app/kb/bases.mjs, app/lib/content-pages.mjs, app/lib/cv/entries.mjs, app/lib/identity.generated.mjs, app/lib/long-date.mjs, app/lib/nav-data.generated.mjs, app/lib/publications/paths.mjs, app/lib/seo.ts, app/lib/series-path.mjs, app/lib/systems.mjs, app/lib/tag-path.mjs. Imported by app/components/not-found-help.tsx, app/components/site-header.tsx, app/components/site-nav-panel.tsx, app/routes/home.tsx.

Source

1// Relative, so test/nav.test.mjs can import this file under plain node.
2import { CONTENT_PAGE_PATHS, CONTENT_PAGE_SECTIONS } from "./content-pages.mjs";
3import { CV_PDF_PATH } from "./cv/entries.mjs";
4import { IDENTITY } from "./identity.generated.mjs";
5import { longDateUTC } from "./long-date.mjs";
6import { NAV_DATA } from "./nav-data.generated.mjs";
7import { OWNER_ORCID, OWNER_PUBMED, OWNER_SCHOLAR } from "./seo.ts";
8import { seriesPath, seriesSlug } from "./series-path.mjs";
9import { tagPath } from "./tag-path.mjs";
10import { BASES } from "../kb/bases.mjs";
11import { paperPath } from "./publications/paths.mjs";
12import { EXPLORER_ORIGIN } from "./systems.mjs";
13
14/*
15 * The header's five destinations and the panels that hang from them ("structured panels", decided
16 * 2026-10-11). Every panel has the same parts, top to bottom: a header band, a row of three tiles, a
17 * band of grouped rows beside one spotlight, and three quick links. A link whose page does not exist is
18 * left out (isLive), and so is a row or tile it empties, so no panel link answers 404.
19 *
20 * The facts a panel shows come from the repository, not from a request: the newest paper, the posts and
21 * the lab's town are in nav-data.generated.mjs (scripts/lib/nav-data.mjs, written at build).
22 */
23
24/** A line icon, drawn in site-nav-panel.tsx. */
25export type NavIcon =
26  | "retroviruses"
27  | "bacteriophages"
28  | "science-education"
29  | "recipes"
30  | "research"
31  | "teaching"
32  | "software"
33  | "writing"
34  | "about"
35  | "publications"
36  | "collections"
37  | "methods"
38  | "help"
39  | "chat"
40  | "tools"
41  | "series"
42  | "tag"
43  | "colophon"
44  | "arrow"
45  | "rss"
46  | "search"
47  | "mail"
48  | "external"
49  | "users"
50  | "map"
51  | "explorer"
52  | "card"
53  | "doc"
54  | "file";
55
56export type MenuLink = {
57  to: string;
58  label: string;
59  description?: string;
60  icon?: NavIcon;
61  /** A second, smaller link under a tile: the CV tile's PDF. */
62  also?: { to: string; label: string };
63};
64
65/**
66 * One grouped row of the left half. `title` is a link when `to` is set; `note` is plain text under it;
67 * `links` are links under it, shown on one line separated by middots.
68 */
69export type MenuRow = { icon: NavIcon; title: string; to?: string; note?: string; links?: MenuLink[] };
70
71/** The one block of the right half. */
72type Spotlight = {
73  kind: "text" | "map";
74  eyebrow: string;
75  /** An icon in a round well above the title (Join the lab). */
76  icon?: NavIcon;
77  title: string;
78  body?: string;
79  to: string;
80};
81
82export type Menu = {
83  /** Names the panel and its button: `site-nav-research`. */
84  id: string;
85  icon: NavIcon;
86  /** Initials in the band's well in place of the icon (About, which is the person). */
87  badge?: string;
88  /** The band's first line. */
89  heading: string;
90  /** The band's one-line description. */
91  blurb: string;
92  tiles: MenuLink[];
93  rows: MenuRow[];
94  spotlight?: Spotlight;
95  footer: MenuLink[];
96};
97
98export type NavItem = { to: string; label: string; menu: Menu };
99
100/** The three research areas, in the Research panel and on the home page. */
101export const RESEARCH_AREAS: MenuLink[] = [
102  {
103    to: "/research/retroviruses",
104    label: "Retroviruses",
105    description: "HTLV-1, REV and LPDV",
106    icon: "retroviruses",
107  },
108  {
109    to: "/research/bacteriophages",
110    label: "Bacteriophages",
111    description: "Genomics, structure and host biology",
112    icon: "bacteriophages",
113  },
114  {
115    to: "/research/science-education",
116    label: "Science education",
117    description: "SEA-PHAGES and course-based research",
118    icon: "science-education",
119  },
120];
121
122// The three products only. Germomics, TXASM, Capsid and this site stay off the tiles.
123export const SOFTWARE_PRODUCTS: MenuLink[] = [
124  { to: "/software/foxhound", label: "Foxhound", description: "Failed Stripe payment recovery", icon: "card" },
125  { to: "/software/foxing", label: "Foxing", description: "Public-domain reading", icon: "science-education" },
126  { to: "/software/foxing-edu", label: "Foxing Edu", description: "Foxing, sold to schools", icon: "teaching" },
127];
128
129/** The posts in the build snapshot a reader can see at `now`: past any scheduled time, newest first. Drafts never enter the snapshot. */
130export function visiblePosts(now: number = Date.now()) {
131  return NAV_DATA.posts.filter((post) => Date.parse(post.publishAt) <= now);
132}
133
134/** Tags and series of the visible posts, most used first (then A to Z), with their counts. */
135function counted(names: string[]) {
136  const counts = new Map<string, number>();
137  for (const name of names) counts.set(name, (counts.get(name) ?? 0) + 1);
138  return [...counts.entries()]
139    .map(([name, count]) => ({ name, count }))
140    .sort((a, b) => b.count - a.count || (a.name < b.name ? -1 : 1));
141}
142
143/** How many tags the Writing panel lists, and how many series. */
144const TAGS_SHOWN = 4;
145const SERIES_SHOWN = 4;
146
147function researchMenu(): Menu {
148  return {
149    id: "research",
150    icon: "research",
151    heading: "Research",
152    blurb: "Retroviruses, bacteriophages and science education",
153    tiles: RESEARCH_AREAS,
154    rows: [
155      { icon: "publications", title: "Publications", to: "/research/publications", note: "Every paper, with BibTeX and RIS" },
156      {
157        icon: "collections",
158        title: "Collections",
159        links: [
160          { to: "/research/phages", label: "Phages" },
161          { to: "/research/lab", label: "Lab registry" },
162        ],
163      },
164      {
165        icon: "methods",
166        title: "Lab methods",
167        links: [
168          { to: "/research/protocols", label: "Protocols" },
169          { to: "/research/tools", label: "Tools" },
170        ],
171      },
172    ],
173    // None when the build found no published paper: the panel then has no spotlight (test/nav.test.mjs says so).
174    spotlight: NAV_DATA.latestPaper
175      ? {
176          kind: "text",
177          eyebrow: "Latest paper",
178          title: NAV_DATA.latestPaper.title,
179          body: [NAV_DATA.latestPaper.journal, NAV_DATA.latestPaper.year].filter(Boolean).join(", "),
180          to: paperPath(NAV_DATA.latestPaper.slug),
181        }
182      : undefined,
183    footer: [
184      { to: "/research", label: "All research", icon: "arrow" },
185      { to: "/research/publications", label: "Publications", icon: "publications" },
186      { to: "/research/protocols", label: "Protocols", icon: "methods" },
187    ],
188  };
189}
190
191/** A course tile; its line is the course page's own front matter description, read at build (scripts/lib/nav-data.mjs). */
192function courseTile(to: string, label: string, icon: NavIcon): MenuLink {
193  const description = (NAV_DATA.courses as Record<string, string> | undefined)?.[to];
194  return description ? { to, label, icon, description } : { to, label, icon };
195}
196
197function teachingMenu(): Menu {
198  return {
199    id: "teaching",
200    icon: "teaching",
201    heading: "Teaching",
202    blurb: "Courses, study help and joining the lab",
203    tiles: [
204      courseTile("/teaching/phage-discovery", "Phage Discovery Program", "bacteriophages"),
205      courseTile("/teaching/virus-isolation", "Virus Isolation", "research"),
206      courseTile("/teaching/phage-bioinformatics", "Phage Bioinformatics", "software"),
207    ],
208    rows: [
209      {
210        icon: "publications",
211        title: "Study help",
212        links: [
213          { to: "/teaching/central-dogma", label: "Tutorials" },
214          { to: "/teaching/study-skills", label: "Study skills" },
215        ],
216      },
217      { icon: "mail", title: "Questions about a course", links: [{ to: "/contact", label: "Contact" }] },
218    ],
219    spotlight: {
220      kind: "text",
221      eyebrow: "Prospective students",
222      icon: "users",
223      title: "Join the lab",
224      body: "Undergraduate research beyond the courses",
225      to: "/teaching#join-the-lab",
226    },
227    footer: [
228      { to: "/teaching", label: "All teaching", icon: "arrow" },
229      { to: "/teaching#join-the-lab", label: "Join the lab", icon: "users" },
230      { to: "/contact", label: "Contact", icon: "mail" },
231    ],
232  };
233}
234
235function softwareMenu(): Menu {
236  return {
237    id: "software",
238    icon: "software",
239    heading: "Software",
240    blurb: "Products, the open tools behind them, and how it fits together",
241    tiles: SOFTWARE_PRODUCTS,
242    rows: [
243      {
244        icon: "tools",
245        title: "Open tools",
246        links: [
247          { to: "/software/capsid", label: "Capsid" },
248          { to: "/software/carrel", label: "Carrel" },
249          { to: "/software/capsomer", label: "Capsomer" },
250          { to: "/software/enarratio", label: "Enarratio" },
251        ],
252      },
253      { icon: "doc", title: "Software how-tos", to: "/software/how-tos", note: "Step-by-step guides" },
254    ],
255    spotlight: {
256      kind: "map",
257      eyebrow: "System map",
258      title: "How the systems fit together",
259      body: "Every system and what it connects to, with the Capsid explorer for the detail",
260      to: "/systems",
261    },
262    footer: [
263      { to: "/software", label: "All software", icon: "arrow" },
264      { to: "/systems", label: "System map", icon: "map" },
265      { to: `${EXPLORER_ORIGIN}/`, label: "Capsid explorer", icon: "search" },
266    ],
267  };
268}
269
270function writingMenu(now: number): Menu {
271  const posts = visiblePosts(now);
272  const newest = posts[0];
273  const tags = counted(posts.flatMap((post) => post.tags)).slice(0, TAGS_SHOWN);
274  const series = counted(posts.flatMap((post) => (post.series ? [post.series] : []))).slice(0, SERIES_SHOWN);
275  return {
276    id: "writing",
277    icon: "writing",
278    heading: "Writing",
279    blurb: "Articles, series and tags",
280    tiles: posts.slice(0, 3).map((post) => ({
281      to: `/writing/${post.slug}`,
282      label: post.title,
283      description: longDateUTC(post.publishAt) ?? undefined,
284    })),
285    rows: [
286      {
287        icon: "series",
288        title: "Series",
289        links: series.map(({ name }) => ({ to: seriesPath(name), label: name })),
290      },
291      {
292        icon: "tag",
293        title: "Tags",
294        links: tags.map(({ name }) => ({ to: tagPath(name), label: name })),
295      },
296    ],
297    spotlight: newest
298      ? { kind: "text", eyebrow: "Newest", title: newest.title, body: newest.firstLine, to: `/writing/${newest.slug}` }
299      : undefined,
300    footer: [
301      { to: "/writing", label: "All articles", icon: "arrow" },
302      { to: "/writing/rss.xml", label: "RSS feed", icon: "rss" },
303      { to: "/search", label: "Search", icon: "search" },
304    ],
305  };
306}
307
308/** "Dustin Edwards" to "DE": the first letter of each word. */
309function initials(name: string) {
310  return name
311    .split(/\s+/)
312    .filter(Boolean)
313    .map((word) => word.charAt(0).toUpperCase())
314    .join("");
315}
316
317function aboutMenu(): Menu {
318  return {
319    id: "about",
320    icon: "about",
321    badge: initials(IDENTITY.name),
322    // The band states the person and the whole identity line, university system included.
323    heading: IDENTITY.name,
324    blurb: `${IDENTITY.role}, ${IDENTITY.department}, ${IDENTITY.org}`,
325    tiles: [
326      { to: "/about", label: "About", icon: "about" },
327      { to: "/cv", label: "CV", icon: "publications", also: { to: CV_PDF_PATH, label: "Also as a PDF" } },
328      { to: "/contact", label: "Contact", icon: "mail" },
329    ],
330    rows: [
331      { icon: "recipes", title: "Interests", links: [{ to: "/recipes", label: "Recipes" }] },
332      { icon: "colophon", title: "Colophon", to: "/colophon", note: "How this site is built" },
333    ],
334    spotlight: {
335      kind: "text",
336      eyebrow: "The lab",
337      title: NAV_DATA.lab.department,
338      body: [NAV_DATA.lab.university, NAV_DATA.lab.place].filter(Boolean).join(", "),
339      to: "/research",
340    },
341    footer: [
342      { to: OWNER_SCHOLAR, label: "Google Scholar", icon: "publications" },
343      { to: OWNER_PUBMED, label: "PubMed", icon: "file" },
344      { to: OWNER_ORCID, label: "ORCID", icon: "about" },
345    ],
346  };
347}
348
349
350/**
351 * The pages outside the markdown set that a panel links to. test/nav.test.mjs holds each against
352 * app/routes.ts, so a route removed there cannot leave a panel link behind.
353 */
354export const ROUTED_PATHS: readonly string[] = [
355  "/research/publications",
356  "/research/lab",
357  "/systems",
358  "/search",
359  "/writing",
360  "/writing/rss.xml",
361  "/about",
362  "/contact",
363  "/colophon",
364  CV_PDF_PATH,
365];
366
367/** The prefixes whose pages are data: a post, a tag, a series, the newest paper. */
368const POST_PREFIX = "/writing/";
369const TAG_PREFIX = "/writing/tags/";
370const SERIES_PREFIX = "/writing/series/";
371const PAPER_PREFIX = "/research/publications/";
372
373/**
374 * The test for "does this link have a page", built once for a moment `now`: the visible posts, their tag
375 * set and series set are worked out here, not again for every link. A listed markdown page (for an anchor,
376 * a listed heading on it), one of ROUTED_PATHS, a library that has an entry, a post, tag or series the
377 * visible posts have, the newest paper, or another site is live. Anything else is a page not yet written,
378 * and its link stays out of the panel until it is.
379 */
380function makeLive(now: number = Date.now()): (to: string) => boolean {
381  const posts = visiblePosts(now);
382  const postPaths = new Set(posts.map((post) => `${POST_PREFIX}${post.slug}`));
383  const tags = new Set(posts.flatMap((post) => post.tags));
384  const series = new Set(posts.flatMap((post) => (post.series ? [seriesSlug(post.series)] : [])));
385  const paper = NAV_DATA.latestPaper ? paperPath(NAV_DATA.latestPaper.slug) : null;
386  return (to) => {
387    if (to.startsWith("https://")) return true;
388    const anchored = to.includes("#");
389    const path = anchored ? to.slice(0, to.indexOf("#")) : to;
390    if ((CONTENT_PAGE_PATHS as readonly string[]).includes(path)) {
391      return !anchored || CONTENT_PAGE_SECTIONS.includes(to);
392    }
393    if (anchored) return false;
394    if (ROUTED_PATHS.includes(path)) return true;
395    const library = BASES.find((base) => base.library === path && base.profile !== "protocol");
396    if (library) return (NAV_DATA.libraries[library.profile] ?? 0) > 0;
397    if (path.startsWith(TAG_PREFIX)) return tags.has(decodeURIComponent(path.slice(TAG_PREFIX.length)));
398    if (path.startsWith(SERIES_PREFIX)) return series.has(decodeURIComponent(path.slice(SERIES_PREFIX.length)));
399    if (path.startsWith(PAPER_PREFIX)) return path === paper;
400    if (path.startsWith(POST_PREFIX)) return postPaths.has(path);
401    return false;
402  };
403}
404
405/** One link, as of `now`. Builds the whole test each call, so a caller with many links uses `makeLive`. */
406export function isLive(to: string, now: number = Date.now()): boolean {
407  return makeLive(now)(to);
408}
409
410/**
411 * The menu with every link that has no page taken out, and the tile, row or spotlight that empties. Undefined
412 * only when nothing is left to show. A row whose title page is missing keeps its links as plain text above them.
413 */
414export function liveMenu(menu: Menu, live: (to: string) => boolean = makeLive()): Menu | undefined {
415  const tiles = menu.tiles
416    .filter((tile) => live(tile.to))
417    .map((tile) => (tile.also && !live(tile.also.to) ? { ...tile, also: undefined } : tile));
418  const rows = menu.rows
419    .map((row) => ({
420      ...row,
421      to: row.to && live(row.to) ? row.to : undefined,
422      links: row.links?.filter((link) => live(link.to)),
423    }))
424    .filter((row) => row.to || (row.links && row.links.length > 0));
425  const footer = menu.footer.filter((link) => live(link.to));
426  const spotlight = menu.spotlight && live(menu.spotlight.to) ? menu.spotlight : undefined;
427  if (tiles.length === 0 && rows.length === 0 && footer.length === 0) return undefined;
428  return { ...menu, tiles, rows, spotlight, footer };
429}
430
431/** Every address a panel renders, in page order: tiles (and their second links), rows, the spotlight, the quick links. */
432export function menuLinks(menu: Menu): string[] {
433  return [
434    ...menu.tiles.flatMap((tile) => (tile.also ? [tile.to, tile.also.to] : [tile.to])),
435    ...menu.rows.flatMap((row) => [...(row.to ? [row.to] : []), ...(row.links ?? []).map((link) => link.to)]),
436    ...(menu.spotlight ? [menu.spotlight.to] : []),
437    ...menu.footer.map((link) => link.to),
438  ];
439}
440
441/** The panels as written, before any link is taken out, for tests that bring a page into being. */
442export function menusAt(now: number = Date.now()) {
443  return {
444    research: researchMenu(),
445    teaching: teachingMenu(),
446    software: softwareMenu(),
447    writing: writingMenu(now),
448    about: aboutMenu(),
449  } as const;
450}
451
452/** The five sections, once: the panel id, the hub it lives under and the label on its button. */
453const SECTIONS = [
454  { id: "research", to: "/research", label: "Research" },
455  { id: "teaching", to: "/teaching", label: "Teaching" },
456  { id: "software", to: "/software", label: "Software" },
457  { id: "writing", to: "/writing", label: "Writing" },
458  { id: "about", to: "/about", label: "About" },
459] as const;
460
461/**
462 * The header's five items with their live panels, as of `now`. The posts, the newest paper and the lab's town
463 * are a snapshot taken at build (nav-data.generated.mjs), so a post published, withdrawn or deleted in the
464 * editor shows here after the next deploy (the editor's commit to main starts one), and an edge-cached page
465 * keeps the header it was rendered with for up to a day. A post scheduled for later is in the snapshot and
466 * left out until `now` passes its time, so it appears on the first uncached render after that, not on the dot.
467 */
468export function buildNav(now: number = Date.now()): readonly NavItem[] {
469  const menus = menusAt(now);
470  const live = makeLive(now);
471  const items: NavItem[] = [];
472  for (const { id, to, label } of SECTIONS) {
473    const resolved = liveMenu(menus[id], live);
474    if (resolved) items.push({ to, label, menu: resolved });
475  }
476  return items;
477}
478
479/** The names and hubs of the five, for lists that need no panel (the 404 page). */
480export const NAV: readonly Pick<NavItem, "to" | "label">[] = SECTIONS.map(({ to, label }) => ({ to, label }));