app/components/home-intro.tsx

Functions

Imports

It imports app/lib/seo.ts. Imported by app/routes/home.tsx.

Source

1import { Fragment } from "react";
2
3import { SITE } from "~/lib/seo";
4
5/**
6 * The home page's name and identity line. It states the whole organization, university and system, as
7 * the CV does (`SITE.org`); structured data keeps the short form (`SITE.affiliation` in worksFor). Its own
8 * component so test/home-intro.test.mjs renders exactly what the page does.
9 *
10 * The hero sets that line on two lines, the university and then its system, split at the first comma of
11 * `SITE.org` so no name is typed twice. Only the hero does this: the About panel, structured data and the
12 * page title keep their own forms. Both lines sit in one `p-org` element, so the h-card has one organization, and a visually hidden comma between them keeps its text equal to `SITE.org`.
13 */
14function orgLines(org: string): string[] {
15  const at = org.indexOf(",");
16  if (at < 0) return [org];
17  return [org.slice(0, at).trim(), org.slice(at + 1).trim()].filter(Boolean);
18}
19
20export function HomeIntro() {
21  return (
22    <section className="home-intro h-card" aria-labelledby="intro-h">
23      <h1 className="intro-name p-name" id="intro-h">
24        {SITE.name}
25      </h1>
26      <p className="intro-affil">
27        <span className="p-job-title">{SITE.role}</span>
28        <span>{SITE.department}</span>
29        <span className="p-org">
30          {orgLines(SITE.org).map((line, i) => (
31            <Fragment key={line}>
32              {i > 0 ? <span className="sr-only">, </span> : null}
33              <span className="org-line">{line}</span>
34            </Fragment>
35          ))}
36        </span>
37      </p>
38      <a className="u-url" href="/" hidden>
39        {SITE.name}
40      </a>
41    </section>
42  );
43}