app/routes/home.tsx

Functions

Imports

It imports app/components/enhance.tsx, app/components/home-intro.tsx, app/components/home-podcast.tsx, app/components/plate-i.tsx, app/components/shell-footer.tsx, app/components/site-header.tsx, app/db/index.ts, app/db/publications.ts, app/db/roster.ts, app/lib/context.ts, app/lib/json-ld.mjs, app/lib/long-date.mjs, app/lib/nav.ts, app/lib/podcast/podcast.server.ts, app/lib/publications/entities.mjs, app/lib/publications/types.ts, app/lib/roster/compile.mjs, app/lib/seo.ts, app/lib/timing.ts. No module of this repo imports it.

Source

1import type { ReactNode } from "react";
2import { Link, data } from "react-router";
3
4import { ShellFooter } from "~/components/shell-footer";
5import { HomeIntro } from "~/components/home-intro";
6import { SiteHeader } from "~/components/site-header";
7import { listHomeStartHere, nextScheduledPublishAt } from "~/db";
8import { jsonLd as serializeJsonLd } from "~/lib/json-ld.mjs";
9import { getEnv } from "~/lib/context";
10import { longDateUTC } from "~/lib/long-date.mjs";
11import { timed, timingsContext } from "~/lib/timing";
12import {
13  cacheTags,
14  EDGE_CACHE_HEADER,
15  HOME_EDGE_FRESH_SECONDS,
16  publicHtmlHeaders,
17  scheduledEdgeCacheControl,
18  personJsonLd,
19  SITE,
20  SITE_ORIGIN,
21  webSiteJsonLd,
22  pageMeta,
23} from "~/lib/seo";
24import { PlateI, PlateKeyRow } from "~/components/plate-i";
25import { Enhance } from "~/components/enhance";
26import { HomePodcast } from "~/components/home-podcast";
27import { homePodcastEpisode } from "~/lib/podcast/podcast.server";
28import { listPublishedPublications } from "~/db/publications";
29import { listRoster } from "~/db/roster";
30import { decodeEntities } from "~/lib/publications/entities.mjs";
31import { rosterFacts } from "~/lib/roster/compile.mjs";
32import type { Publication } from "~/lib/publications/types";
33import { RESEARCH_AREAS, SOFTWARE_PRODUCTS } from "~/lib/nav";
34import type { Route } from "./+types/home";
35
36import "~/styles/home.css";
37
38/** Publicly cacheable; the theme is a cache-key dimension, not a Vary. The short edge policy is for the Germomics episode. */
39export function headers({ loaderHeaders }: Route.HeadersArgs) {
40  return publicHtmlHeaders(cacheTags(), loaderHeaders.get(EDGE_CACHE_HEADER) ?? undefined);
41}
42
43export function meta() {
44  return pageMeta({ title: `${SITE.name}, ${SITE.role} at ${SITE.affiliation}`, description: SITE.description, path: "/" });
45}
46
47/** How many papers the Publications section shows. */
48const HOME_PAPERS = 3;
49
50/**
51 * The papers marked `selected` in their files (content/publications/), newest first; with none marked, the newest.
52 * Chosen in the loader and not the component, so the publication records (abstracts, author lists)
53 * stay out of the page's script.
54 */
55function homePapers(papers: Publication[]) {
56  const newest = [...papers].sort(
57    (a, b) => b.year - a.year || (b.publishedDate ?? "").localeCompare(a.publishedDate ?? ""),
58  );
59  const selected = newest.filter((p) => p.selected);
60  /* Titles and journals go through `decodeEntities`: the deposited records carry HTML entities React would print literally. */
61  return (selected.length > 0 ? selected : newest).slice(0, HOME_PAPERS).map((p) => ({
62    id: p.id,
63    year: p.year,
64    title: decodeEntities(p.title),
65    journal: p.journal ? decodeEntities(p.journal) : null,
66    href: `/research/publications/${p.slug}/`,
67  }));
68}
69
70export async function loader({ context }: Route.LoaderArgs) {
71  const env = getEnv(context);
72  const timings = context.get(timingsContext).timings;
73
74  const [start, podcast, nextPublishAt, papers, cohorts] = await Promise.all([
75    timed(timings, "home_posts", () => listHomeStartHere(env, { timings })),
76    timed(timings, "home_podcast", () => homePodcastEpisode(context)),
77    timed(timings, "home_next_scheduled", () => nextScheduledPublishAt(env)),
78    timed(timings, "home_papers", () => listPublishedPublications(env)),
79    timed(timings, "home_roster", () => listRoster(env)),
80  ]);
81
82  return data(
83    {
84      posts: start.total,
85      featured: start.featured,
86      recent: start.recent,
87      papers: homePapers(papers),
88      paperCount: papers.length,
89      // Counted from the roster table, never typed: a typed number drifts when a cohort lands. The names stay out of the payload.
90      discovery: rosterFacts(cohorts),
91      podcast,
92    },
93    {
94      headers: {
95        [EDGE_CACHE_HEADER]: scheduledEdgeCacheControl(
96          new Date(),
97          nextPublishAt,
98          HOME_EDGE_FRESH_SECONDS,
99        ),
100      },
101    },
102  );
103}
104
105/** The current retrovirus work, named beside the three areas. Title as the page titles itself. */
106const AVIAN = {
107  to: "/research/retroviruses/avian",
108  label: "REV and LPDV in wild turkeys in Texas",
109  description: "Two bird retroviruses, and why they matter for wild turkeys and prairie chickens",
110};
111
112/** The lab's own pages. Each line is cut from that page's description. */
113const LAB_RESOURCES = [
114  {
115    rail: "Protocol",
116    to: "/research/protocols/phage-isolation",
117    label: "Phage isolation and purification",
118    description:
119      "Where the Tarleton SEA-PHAGES lab runs a step differently from the Phage Discovery Guide",
120  },
121  {
122    rail: "Calculations",
123    to: "/teaching/virus-isolation/faq",
124    label: "Lab calculations and common questions",
125    description: "Titers in pfu/ml, spot titer dilutions, webbed plate volumes and lysate yields",
126  },
127  {
128    rail: "Calculators",
129    to: "/research/tools",
130    label: "Phage lab calculators",
131    description:
132      "Titer from plaque counts and spot titers, serial dilution plans and webbed plate volumes, with the arithmetic shown",
133  },
134  {
135    rail: "Protocol",
136    to: "/research/protocols/coi-primers",
137    label: "COI primers: LCO1490 and HCO2198",
138    description: "Primer sequences and PCR conditions for COI barcoding of invertebrates",
139  },
140];
141
142/** One section of the home page: a heading, a short list, and the link to the rest. */
143function Section({
144  id,
145  title,
146  more,
147  children,
148}: {
149  id: string;
150  title: string;
151  more: ReactNode;
152  children: ReactNode;
153}) {
154  return (
155    <section className="home-section" aria-labelledby={`${id}-heading`}>
156      <h2 id={`${id}-heading`} className="home-section-heading">
157        {title}
158      </h2>
159      {children}
160      <p className="home-more">{more}</p>
161    </section>
162  );
163}
164
165/** A short mono label in the rail, a title that links, and one line under it. */
166function Row({
167  rail,
168  to,
169  title,
170  summary,
171}: {
172  rail: ReactNode;
173  to: string;
174  title: ReactNode;
175  summary?: ReactNode;
176}) {
177  return (
178    <li className="home-row">
179      <span className="home-row-date">{rail}</span>
180      <span className="home-row-body">
181        <span className="home-row-title">
182          <Link to={to}>{title}</Link>
183        </span>
184        {summary ? <span className="home-row-summary">{summary}</span> : null}
185      </span>
186    </li>
187  );
188}
189
190export default function Home({ loaderData }: Route.ComponentProps) {
191  const jsonLd = [personJsonLd(SITE_ORIGIN), webSiteJsonLd(SITE_ORIGIN)];
192  const { posts, featured, recent, papers, paperCount, discovery, podcast } = loaderData;
193
194  return (
195    <>
196      <SiteHeader />
197      <main className="tracks home-tracks" id="main" tabIndex={-1}>
198        {/* `rel="me"` links live in the footer; only `u-url` needed a home here. No `u-photo`: the site publishes none. */}
199        <div className="home-hero u-wide">
200          <HomeIntro />
201
202          <figure className="home-plate">
203            <PlateI />
204            <figcaption className="home-plate-caption">
205              <span className="home-plate-num">Plate I</span>
206              <span className="home-plate-cap">Plaque morphology, drawn.</span>
207            </figcaption>
208          </figure>
209        </div>
210
211        <PlateKeyRow />
212        <Enhance module="plate" />
213
214        <Section id="research" title="Research" more={<Link to="/research">All research</Link>}>
215          <p className="home-research-line">I study viral genomics.</p>
216          <ul className="home-rows">
217            {RESEARCH_AREAS.map((area) => (
218              <Row
219                key={area.to}
220                rail="Area"
221                to={area.to}
222                title={area.label}
223                summary={area.description}
224              />
225            ))}
226            <Row rail="Current" to={AVIAN.to} title={AVIAN.label} summary={AVIAN.description} />
227          </ul>
228        </Section>
229
230        <Section
231          id="publications"
232          title="Publications"
233          more={<Link to="/research/publications">All {paperCount} papers</Link>}
234        >
235          <ol className="home-rows">
236            {papers.map((paper) => (
237              <Row
238                key={paper.id}
239                rail={paper.year}
240                to={paper.href}
241                title={paper.title}
242                summary={paper.journal}
243              />
244            ))}
245          </ol>
246        </Section>
247
248        <Section
249          id="lab"
250          title="Lab resources"
251          more={<Link to="/research/protocols">All protocols</Link>}
252        >
253          <ul className="home-rows">
254            {LAB_RESOURCES.map((item) => (
255              <Row
256                key={item.to}
257                rail={item.rail}
258                to={item.to}
259                title={item.label}
260                summary={item.description}
261              />
262            ))}
263          </ul>
264        </Section>
265
266        <Section id="teaching" title="Teaching" more={<Link to="/teaching">All teaching</Link>}>
267          <ul className="home-rows">
268            <Row
269              rail="SEA-PHAGES"
270              to="/teaching/phage-discovery"
271              title="Phage Discovery Program"
272              summary={
273                `The two-semester undergraduate research program in HHMI SEA-PHAGES: ` +
274                `${discovery.researchers} student researchers in ${discovery.cohorts} cohorts ` +
275                `since ${discovery.since}.`
276              }
277            />
278          </ul>
279        </Section>
280
281        {featured ? (
282          <Section id="writing" title="Writing" more={<Link to="/writing">All {posts} posts</Link>}>
283            {/* The same four properties as `PostCard`; `check:machine-readable` reads both. No h-feed: a hand-picked three is not the feed. */}
284            <ol className="home-rows">
285              {[featured, ...recent.filter((post) => post.slug !== featured.slug)].map((post) => (
286                <li key={post.slug} className="home-row h-entry">
287                  <span className="home-row-date">
288                    {post.publishAt ? (
289                      <time
290                        className="dt-published"
291                        dateTime={new Date(post.publishAt).toISOString()}
292                      >
293                        {longDateUTC(post.publishAt)}
294                      </time>
295                    ) : null}
296                  </span>
297                  <span className="home-row-body">
298                    <span className="home-row-title p-name">
299                      <Link className="u-url" to={`/writing/${post.slug}`}>
300                        {post.title}
301                      </Link>
302                    </span>
303                    {post.description ? (
304                      <span className="home-row-summary home-row-clamp p-summary">
305                        {post.description}
306                      </span>
307                    ) : null}
308                  </span>
309                </li>
310              ))}
311            </ol>
312          </Section>
313        ) : null}
314
315        <Section id="software" title="Software" more={<Link to="/software">All software</Link>}>
316          <ul className="home-rows">
317            {SOFTWARE_PRODUCTS.map((product) => (
318              <Row
319                key={product.to}
320                rail="Product"
321                to={product.to}
322                title={product.label}
323                summary={product.description}
324              />
325            ))}
326          </ul>
327        </Section>
328
329        <HomePodcast episode={podcast} />
330
331        {jsonLd.map((data, i) => (
332          <script
333            key={i}
334            type="application/ld+json"
335            dangerouslySetInnerHTML={{ __html: serializeJsonLd(data) }}
336          />
337        ))}
338      </main>
339      <ShellFooter />
340    </>
341  );
342}