app/routes/cv.tsx

Functions

Imports

It imports app/components/enhance.tsx, app/components/page-shell.tsx, app/db/cv.ts, app/lib/content-pages.mjs, app/lib/context.ts, app/lib/cv/entries.mjs, app/lib/cv/render-charts.ts, app/lib/cv/route.ts, app/lib/cv/view.mjs, app/lib/json-ld.mjs, app/lib/scientific-names.tsx, app/lib/seo.ts. No module of this repo imports it.

Source

1import { Fragment, type ReactNode } from "react";
2
3import { Enhance } from "~/components/enhance";
4import { PageShell } from "~/components/page-shell";
5import { readCv } from "~/db/cv";
6import { contentPageCardPath, contentPageMarkdownPath } from "~/lib/content-pages.mjs";
7import { getEnv } from "~/lib/context";
8import { CV_PAGE, CV_PDF_PATH, cvFacts, formatDollars, type Cv, type CvEntry } from "~/lib/cv/entries.mjs";
9import { CV_HTML_TAGS } from "~/lib/cv/route";
10import { renderCvCharts } from "~/lib/cv/render-charts";
11import {
12  AREAS,
13  ROLES,
14  SORTS,
15  TYPES,
16  areaLabel,
17  facetCounts,
18  groupEntries,
19  headline,
20  activeCount,
21  isFiltered,
22  matches,
23  parseState,
24  roleLabel,
25  summaryText,
26  yearOptions,
27} from "~/lib/cv/view.mjs";
28import { jsonLd as serializeJsonLd } from "~/lib/json-ld.mjs";
29import { italicizeOrganisms } from "~/lib/scientific-names";
30import {
31  SITE_ORIGIN,
32  isSiteOwner,
33  pageMeta,
34  personId,
35  publicHtmlHeaders,
36  publicationsJsonLd,
37} from "~/lib/seo";
38
39import type { Route } from "./+types/cv";
40
41import "~/styles/enarratio.css";
42import "~/styles/cv.css";
43
44/*
45 * THE CV (content/cv/, drawn from D1 at request time and resolved by app/lib/cv/entries.mjs, docs/CV.md). A CV
46 * edit saved through Carrel is live on the next request, with no build or deploy. The whole CV is in the HTML: the query
47 * string only decides which entries carry `hidden`, how they are grouped and what the counts and charts
48 * say, so a shared filter URL renders the same page with script off, and the form is a plain GET.
49 * app/enhance/cv.ts runs the same functions (app/lib/cv/view.mjs) on every input.
50 */
51
52const PATH = CV_PAGE.path;
53/** The CV's own social card (CARDED_PAGE_ROOTS), which build:og draws from the same title and description. */
54const CARD_PATH = contentPageCardPath(CV_PAGE);
55const CARD = CARD_PATH ? `${SITE_ORIGIN}${CARD_PATH}` : undefined;
56
57// headers() is written out here because check:headers reads each public route's own source.
58export function headers() {
59  return new Headers(publicHtmlHeaders(CV_HTML_TAGS));
60}
61
62/*
63 * The CV is drawn per request, and the page's script reads it back out of the DOM (data attributes on each
64 * entry), so the server and the browser never hold two copies. The route does not hydrate, so none of this
65 * reaches the browser as data: the loader hands the component the resolved CV to render and nothing more.
66 */
67export async function loader({ request, context }: Route.LoaderArgs) {
68  const cv = await readCv(getEnv(context));
69  const facts = cvFacts(cv.entries);
70  const url = new URL(request.url);
71  const state = parseState(url.searchParams);
72  const shown = facts.filter((f) => matches(f, state));
73  return {
74    cv,
75    facts,
76    jsonLd: serializeJsonLd(cvJsonLd(cv)),
77    state,
78    shownIds: shown.map((f) => f.id),
79    groups: groupEntries(facts, state.sort),
80    counts: headline(shown),
81    facets: facetCounts(facts, state),
82    charts: renderCvCharts(facts, state),
83  };
84}
85
86export function meta() {
87  return [
88    ...pageMeta({ title: CV_PAGE.seoTitle, description: CV_PAGE.description, path: PATH, image: CARD }),
89    {
90      tagName: "link",
91      rel: "alternate",
92      type: "text/markdown",
93      href: `${SITE_ORIGIN}${contentPageMarkdownPath(PATH)}`,
94    },
95    { tagName: "link", rel: "alternate", type: "application/pdf", href: `${SITE_ORIGIN}${CV_PDF_PATH}` },
96  ];
97}
98
99/**
100 * The page about the Person, and a ScholarlyArticle per paper the site holds, joined by the Person's @id.
101 * No BreadcrumbList: the page shows no trail, and a one-step list is one Google reads as invalid.
102 */
103function cvJsonLd(cv: Cv) {
104  const records = cv.entries.flatMap((e) => (e.paper?.record ? [e.paper.record] : []));
105  return [
106    {
107      "@context": "https://schema.org",
108      "@type": "WebPage",
109      "@id": `${SITE_ORIGIN}${PATH}`,
110      url: `${SITE_ORIGIN}${PATH}`,
111      name: `${CV_PAGE.title}, ${cv.person.name}`,
112      description: CV_PAGE.description,
113      about: { "@id": personId(SITE_ORIGIN) },
114    },
115    ...publicationsJsonLd(SITE_ORIGIN, records),
116  ];
117}
118
119const isOwner = (name: string) => isSiteOwner(name) || name === "D. Edwards";
120
121function Names({ names }: { names: string[] }) {
122  return (
123    <>
124      {names.map((name, i) => (
125        <Fragment key={`${name}-${i}`}>
126          {i > 0 ? ", " : ""}
127          {isOwner(name) ? <strong className="cv-me">{name}</strong> : name}
128        </Fragment>
129      ))}
130    </>
131  );
132}
133
134/** The first three authors, and Dustin where he falls later; the full list is in the details below. */
135function ShortAuthors({ authors }: { authors: string[] }) {
136  if (authors.length <= 4) return <Names names={authors} />;
137  const at = authors.findIndex(isOwner);
138  const lead = authors.slice(0, 3);
139  const owner = at >= 3 ? authors[at] : undefined;
140  const rest = authors.length - lead.length - (owner ? 1 : 0);
141  return (
142    <>
143      <Names names={lead} />
144      {owner ? (
145        <>
146          , ... <strong className="cv-me">{owner}</strong>
147        </>
148      ) : null}{" "}
149      and {rest} more
150    </>
151  );
152}
153
154function Tags({ entry }: { entry: CvEntry }) {
155  const parts: string[] = [];
156  if (entry.role) parts.push(roleLabel(entry.role));
157  for (const area of entry.areas) parts.push(areaLabel(area));
158  if (parts.length === 0) return null;
159  return <p className="cv-tags">{parts.join(" · ")}</p>;
160}
161
162function CopyButton({ kind, label, entry }: { kind: "plain" | "bibtex" | "ris"; label: string; entry: CvEntry }) {
163  const paper = entry.paper;
164  if (!paper) return null;
165  const src = kind === "bibtex" ? paper.bibtexPath : kind === "ris" ? paper.risPath : null;
166  return (
167    <button
168      type="button"
169      className="cv-copy"
170      data-cv-copy={kind}
171      data-cv-src={src ?? undefined}
172      data-cv-for={entry.id}
173      hidden
174    >
175      {label}
176    </button>
177  );
178}
179
180function PaperDetails({ entry }: { entry: CvEntry }) {
181  const paper = entry.paper;
182  if (!paper) return null;
183  const n = paper.authors.length;
184  return (
185    <details className="cv-paper-more">
186      <summary>
187        {paper.hasAbstract ? "Abstract, citation" : "Citation"} and {n === 1 ? "author" : `all ${n} authors`}
188      </summary>
189      <div className="cv-paper-panel">
190        <ul className="cv-links">
191          {paper.pagePath ? (
192            <li>
193              <a href={paper.pagePath}>{paper.hasAbstract ? "Abstract" : "Paper page"}</a>
194            </li>
195          ) : null}
196          {entry.links.map((link) => (
197            <li key={link.href}>
198              <a href={link.href}>{link.label}</a>
199            </li>
200          ))}
201          {paper.pdfPath ? (
202            <li>
203              <a href={paper.pdfPath}>PDF</a>
204            </li>
205          ) : null}
206        </ul>
207        <p className="cv-panel-label">Citation</p>
208        <p className="cv-cite" id={`${entry.id}-cite`}>
209          {paper.citation}
210        </p>
211        {paper.bibtex ? (
212          <template id={`${entry.id}-bibtex`}>{paper.bibtex}</template>
213        ) : null}
214        {paper.ris ? <template id={`${entry.id}-ris`}>{paper.ris}</template> : null}
215        <p className="cv-cite-actions">
216          <CopyButton kind="plain" label="Copy citation" entry={entry} />
217          <CopyButton kind="bibtex" label="Copy BibTeX" entry={entry} />
218          <CopyButton kind="ris" label="Copy RIS" entry={entry} />
219          {paper.bibtexPath ? <a href={paper.bibtexPath}>BibTeX file</a> : null}
220          {paper.risPath ? <a href={paper.risPath}>RIS file</a> : null}
221        </p>
222        <p className="cv-panel-label">Authors</p>
223        <p className="cv-authors-full">
224          <Names names={paper.authors} />
225        </p>
226      </div>
227    </details>
228  );
229}
230
231function EntryBody({ entry }: { entry: CvEntry }) {
232  if (entry.type === "publication" && entry.paper) {
233    const paper = entry.paper;
234    return (
235      <>
236        <p className="cv-title">
237          {paper.pagePath ? (
238            <a href={paper.pagePath}>{italicizeOrganisms(entry.title)}</a>
239          ) : (
240            italicizeOrganisms(entry.title)
241          )}
242        </p>
243        <p className="cv-authors">
244          <ShortAuthors authors={paper.authors} />
245        </p>
246        <p className="cv-meta cv-venue">{paper.venue}</p>
247        <Tags entry={entry} />
248        <PaperDetails entry={entry} />
249      </>
250    );
251  }
252  return (
253    <>
254      <p className="cv-title">
255        {entry.type === "grant" && entry.amount !== null ? (
256          <span className="cv-amount">{formatDollars(entry.amount)}</span>
257        ) : null}
258        {entry.title}
259      </p>
260      {entry.meta.map((line, i) => (
261        <p className="cv-meta" key={i}>
262          {line}
263        </p>
264      ))}
265      {entry.note ? <p className="cv-meta cv-note">{entry.note}</p> : null}
266      {entry.duties.length > 0 ? (
267        <details className="cv-duties">
268          <summary>Responsibilities</summary>
269          {entry.duties.map((duty) => (
270            <div key={duty.heading} className="cv-duty">
271              <p className="cv-panel-label">{duty.heading}</p>
272              <ul>
273                {duty.items.map((item) => (
274                  <li key={item}>{item}</li>
275                ))}
276              </ul>
277            </div>
278          ))}
279        </details>
280      ) : null}
281      <Tags entry={entry} />
282    </>
283  );
284}
285
286/** One or two lines each: the long lists read as a list, and the papers keep the room. */
287const COMPACT = new Set(["grant", "award", "course", "service", "development"]);
288
289function Entry({ entry, hidden, order }: { entry: CvEntry; hidden: boolean; order: number }) {
290  return (
291    <li
292      className={`cv-entry cv-entry-${entry.type}${COMPACT.has(entry.type) ? " cv-compact" : ""}`}
293      id={entry.id}
294      data-cv-entry=""
295      data-order={order}
296      data-type={entry.type}
297      data-section={entry.section ?? undefined}
298      data-areas={entry.areas.join(" ")}
299      data-role={entry.role ?? undefined}
300      data-year={entry.year ?? undefined}
301      data-end={entry.endYear ?? undefined}
302      data-students={entry.students ?? undefined}
303      data-cohort={entry.cohort ? "" : undefined}
304      data-amount={entry.amount ?? undefined}
305      hidden={hidden}
306    >
307      <span className="cv-when">{entry.when}</span>
308      <div className="cv-body">
309        <EntryBody entry={entry} />
310      </div>
311    </li>
312  );
313}
314
315function Stat({
316  label,
317  value,
318  sub,
319  spark,
320  name,
321}: {
322  label: string;
323  value: string;
324  sub?: ReactNode;
325  spark: string;
326  name: string;
327}) {
328  return (
329    <div className="cv-stat">
330      <dt>{label}</dt>
331      <dd>
332        <span className="cv-stat-value" data-cv-count={name}>
333          {value}
334        </span>
335        <span className="cv-spark" data-cv-spark={name} dangerouslySetInnerHTML={{ __html: spark }} />
336        {sub ? <span className="cv-stat-sub">{sub}</span> : null}
337      </dd>
338    </div>
339  );
340}
341
342export default function CvRoute({ loaderData }: Route.ComponentProps) {
343  const { cv: CV, facts: FACTS, jsonLd, state, shownIds, groups, counts, facets, charts } = loaderData;
344  const shown = new Set(shownIds);
345  const BY_ID = new Map(CV.entries.map((e) => [e.id, e]));
346  const ORDER = new Map(CV.entries.map((e, i) => [e.id, i]));
347  const YEARS = yearOptions(FACTS);
348  return (
349    <PageShell trail={<script type="application/ld+json" dangerouslySetInnerHTML={{ __html: jsonLd }} />}>
350      <div className="cv" data-cv="">
351        <header className="cv-head">
352          <p className="cv-eyebrow">
353            {CV_PAGE.title} · {CV.edition}
354          </p>
355          <h1 className="cv-name">
356            {CV.person.name}, {CV.person.degree}
357          </h1>
358          <p className="cv-lede">
359            {CV.person.title}, {CV.person.department}, {CV.person.org}.
360          </p>
361          <p className="cv-actions">
362            <a href={CV_PDF_PATH} className="cv-action">
363              Download PDF
364            </a>
365            <button type="button" className="cv-action" data-cv-print="" hidden>
366              Print
367            </button>
368            <a href={contentPageMarkdownPath(PATH)} className="cv-action">
369              Markdown
370            </a>
371            <a href="/research/publications" className="cv-action">
372              All publications
373            </a>
374          </p>
375        </header>
376
377        <section className="cv-overview" aria-labelledby="cv-overview-title">
378          <h2 id="cv-overview-title" className="sr-only">
379            At a glance
380          </h2>
381          <dl className="cv-stats">
382            <Stat label="Publications" value={String(counts.papers)} spark={charts.papers} name="papers" />
383            <Stat
384              label="Grants"
385              value={String(counts.grants)}
386              sub={<span data-cv-count="dollars">{formatDollars(counts.dollars)} awarded</span>}
387              spark={charts.grants}
388              name="grants"
389            />
390            <Stat
391              label="Students mentored"
392              value={String(counts.students)}
393              sub="summed across listings"
394              spark={charts.students}
395              name="students"
396            />
397          </dl>
398          <div className="cv-timeline">
399            <p className="cv-timeline-title">Output by year</p>
400            <div className="cv-timeline-plot" data-cv-timeline="" dangerouslySetInnerHTML={{ __html: charts.timeline }} />
401            <p className="cv-timeline-hint" data-cv-hint="" hidden>
402              Select a year&rsquo;s bar to show only that year, and select it again for every year. The key filters by type.
403            </p>
404          </div>
405        </section>
406
407        <form className="cv-filters" method="get" action={PATH} aria-label="Filter the CV" data-cv-form="">
408          <div className="cv-filter-row cv-filter-top">
409            <label className="cv-field cv-search">
410              <span className="cv-label">Search</span>
411              <input
412                type="search"
413                name="q"
414                defaultValue={state.q}
415                placeholder="Title, author, place, course"
416                autoComplete="off"
417                spellCheck={false}
418              />
419            </label>
420          </div>
421          <details className="cv-more" open data-cv-more="">
422            <summary className="cv-more-summary">
423              Filters and sort <span data-cv-active="">{activeCount(state) > 0 ? `(${activeCount(state)} on)` : ""}</span>
424            </summary>
425          <div className="cv-more-body">
426          <fieldset className="cv-facet">
427            <legend className="cv-label">Type</legend>
428            <div className="cv-chips">
429              {TYPES.map(([id, , plural]) => (
430                <label key={id} className="cv-chip">
431                  <input type="checkbox" name="type" value={id} defaultChecked={state.types.includes(id)} />
432                  <span className="cv-chip-text">
433                    {plural}
434                    <span className="cv-chip-count" data-cv-facet={`type:${id}`}>
435                      {facets.types[id] ?? 0}
436                    </span>
437                  </span>
438                </label>
439              ))}
440            </div>
441          </fieldset>
442          <div className="cv-filter-row">
443            <fieldset className="cv-facet">
444              <legend className="cv-label">Research area</legend>
445              <div className="cv-chips">
446                {AREAS.filter(([id]) => FACTS.some((f) => f.areas.includes(id))).map(([id, label]) => (
447                  <label key={id} className="cv-chip">
448                    <input type="checkbox" name="area" value={id} defaultChecked={state.areas.includes(id)} />
449                    <span className="cv-chip-text">
450                      {label}
451                      <span className="cv-chip-count" data-cv-facet={`area:${id}`}>
452                        {facets.areas[id] ?? 0}
453                      </span>
454                    </span>
455                  </label>
456                ))}
457              </div>
458            </fieldset>
459            <fieldset className="cv-facet cv-years">
460              <legend className="cv-label">Years</legend>
461              <div className="cv-years-row">
462                <select name="from" defaultValue={state.from === null ? "" : String(state.from)} aria-label="From year">
463                  <option value="">Earliest</option>
464                  {YEARS.map((y) => (
465                    <option key={y} value={y}>
466                      {y}
467                    </option>
468                  ))}
469                </select>
470                <span aria-hidden="true">to</span>
471                <select name="to" defaultValue={state.to === null ? "" : String(state.to)} aria-label="To year">
472                  <option value="">Latest</option>
473                  {[...YEARS].reverse().map((y) => (
474                    <option key={y} value={y}>
475                      {y}
476                    </option>
477                  ))}
478                </select>
479              </div>
480            </fieldset>
481            <label className="cv-field">
482              <span className="cv-label">Role</span>
483              <select name="role" defaultValue={state.role ?? ""}>
484                <option value="">Any role</option>
485                {ROLES.filter(([id]) => FACTS.some((f) => f.role === id)).map(([id, label]) => (
486                  <option key={id} value={id} data-cv-facet={`role:${id}`} data-label={label}>
487                    {label} ({facets.roles[id] ?? 0})
488                  </option>
489                ))}
490              </select>
491            </label>
492            <label className="cv-field">
493              <span className="cv-label">Sort</span>
494              <select name="sort" defaultValue={state.sort}>
495                {SORTS.map(([id, label]) => (
496                  <option key={id} value={id}>
497                    {label}
498                  </option>
499                ))}
500              </select>
501            </label>
502          </div>
503          </div>
504          </details>
505          <div className="cv-filter-actions">
506            <button type="submit" className="cv-apply" data-cv-apply="">
507              Apply filters
508            </button>
509            <a href={PATH} className="cv-clear" data-cv-clear="" hidden={!isFiltered(state)}>
510              Clear filters
511            </a>
512          </div>
513        </form>
514
515        <p className="cv-summary" role="status" data-cv-summary="">
516          {summaryText(shownIds.length, FACTS.length)}
517        </p>
518        <p className="sr-only" role="status" data-cv-copied="" />
519
520        <div className="cv-results" data-cv-results="">
521          {groups.map((group) => {
522            const visible = group.parts.reduce((n, part) => n + part.ids.filter((id) => shown.has(id)).length, 0);
523            return (
524              <section key={group.key} className="cv-group" data-cv-group={group.key} hidden={visible === 0}>
525                <h2 className="cv-group-title">
526                  {group.heading}{" "}
527                  <span className="cv-group-count" data-cv-group-count="">
528                    {visible}
529                  </span>
530                </h2>
531                {group.key === "type-talk" ? (
532                  <p className="cv-group-note">
533                    The CV lists {CV.presentations.international} international and {CV.presentations.national} national
534                    and regional presentations, {CV.presentations.from}-{CV.presentations.to}, most of them posters and
535                    talks given by students with Dustin as senior author. Listed here: the invited talks, seminars and
536                    roundtables he leads.
537                  </p>
538                ) : null}
539                {group.key === "type-mentoring" ? (
540                  <p className="cv-group-note">Counts only: the CV names each student, and this page never does.</p>
541                ) : null}
542                {group.parts.map((part) => (
543                  <div
544                    key={part.key}
545                    className="cv-part"
546                    data-cv-part={part.key}
547                    hidden={!part.ids.some((id) => shown.has(id))}
548                  >
549                    {part.heading ? <h3 className="cv-part-title">{part.heading}</h3> : null}
550                    <ol className="cv-list">
551                      {part.ids.map((id) => {
552                        const entry = BY_ID.get(id);
553                        if (!entry) throw new Error(`cv: grouping named an unknown entry ${id}`);
554                        return <Entry key={id} entry={entry} hidden={!shown.has(id)} order={ORDER.get(id) ?? 0} />;
555                      })}
556                    </ol>
557                  </div>
558                ))}
559              </section>
560            );
561          })}
562        </div>
563        <p className="cv-foot">
564          {FACTS.length} entries from the {CV.edition} CV. Each paper follows its journal record at Crossref and has its
565          own page under <a href="/research/publications">Publications</a>.
566        </p>
567      </div>
568      <Enhance module="cv" />
569    </PageShell>
570  );
571}