app/components/shell-footer.tsx

Functions

Imports

It imports app/components/germomics-mark.tsx, app/components/private-tool-icons.tsx, app/components/site-logo.tsx, app/lib/footer.ts, app/lib/seo.ts. Imported by app/components/error-page.tsx, app/components/page-shell.tsx, app/components/taxonomy-listing.tsx, app/routes/blog.$slug.tsx, app/routes/blog._index.tsx, app/routes/home.tsx, app/routes/publications.$slug.tsx, app/routes/publications.tsx, app/routes/search.tsx.

Source

1import { Link } from "react-router";
2
3import { GermomicsMark } from "~/components/germomics-mark";
4import { CapsidIcon, FlaskIcon, GearIcon, LampIcon, LockIcon } from "~/components/private-tool-icons";
5import { SiteLogoHeader } from "~/components/site-logo";
6import {
7  BRAND_PROFILES,
8  type FooterLink,
9  PRIVATE_TOOLS,
10  type PrivateTool,
11  SITE_HEADING,
12  SITE_LINKS,
13  SOCIAL_LINKS,
14  TOOLS_HEADING,
15} from "~/lib/footer";
16import { SITE } from "~/lib/seo";
17
18const PRIVATE_ICONS: Record<PrivateTool["icon"], typeof LampIcon> = {
19  lamp: LampIcon,
20  gear: GearIcon,
21  capsid: CapsidIcon,
22  flask: FlaskIcon,
23};
24
25/** X's own logo path, unaltered, in the footer's ink. */
26function XMark() {
27  return (
28    <svg className="footer-social-mark" viewBox="0 0 1200 1227" width="27" height="28" aria-hidden="true" focusable="false">
29      <path
30        fill="currentColor"
31        d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z"
32      />
33    </svg>
34  );
35}
36
37/** A route through Link; a file, feed or other site as a plain anchor, which Link would try to route. */
38function FooterAnchor({ link }: { link: FooterLink }) {
39  const routed = !link.external && !/\.[a-z]+$/.test(link.to);
40  if (routed) return <Link to={link.to}>{link.label}</Link>;
41  return (
42    <a href={link.to} rel={link.me ? "me" : undefined}>
43      {link.label}
44    </a>
45  );
46}
47
48/**
49 * The links live in app/lib/footer.ts, where test/footer.test.mjs checks each one. The profile links carry
50 * rel="me", and `check:machine-readable` asserts that set equals `OWNER_PROFILES`. The bottom line is the
51 * copyright and nothing else (Dustin, 2026-10-11).
52 */
53export function ShellFooter() {
54  return (
55    <footer className="site-shell-footer">
56      <div className="tracks">
57        <div className="footer-grid">
58          {/* The brand block: logo, name, social marks, then the profile links and the feed. No title line: the hero carries it. */}
59          <div className="footer-identity">
60            <Link to="/" className="footer-home">
61              <SiteLogoHeader className="footer-logo" />
62              <span className="footer-name">{SITE.name}</span>
63            </Link>
64            <ul className="footer-social" aria-label="Social media">
65              {SOCIAL_LINKS.map((link) => (
66                <li key={link.to}>
67                  <a href={link.to} className="footer-social-link">
68                    {link.mark === "germomics" ? (
69                      <span className="footer-social-glyph">
70                        <GermomicsMark className="footer-social-mark" />
71                      </span>
72                    ) : (
73                      <span className="footer-social-glyph">
74                        <XMark />
75                      </span>
76                    )}
77                    <span className="footer-social-label">{link.label}</span>
78                  </a>
79                </li>
80              ))}
81            </ul>
82            <ul className="footer-links footer-profiles">
83              {BRAND_PROFILES.map((link) => (
84                <li key={link.to}>
85                  <FooterAnchor link={link} />
86                </li>
87              ))}
88            </ul>
89          </div>
90
91          {/* Beside the brand block: Workspace, then Site (Dustin, 2026-10-11). */}
92          <div className="footer-columns">
93            <nav className="footer-col" aria-labelledby="footer-workspace">
94              <h2 className="footer-heading" id="footer-workspace">
95                {TOOLS_HEADING}
96              </h2>
97              <ul className="footer-links">
98                {PRIVATE_TOOLS.map((tool) => {
99                  const Icon = PRIVATE_ICONS[tool.icon];
100                  const content = (
101                    <>
102                      <Icon className="footer-private-icon" />
103                      {tool.label}
104                      <LockIcon className="footer-private-lock" strokeWidth={2} />
105                    </>
106                  );
107                  return (
108                    <li key={tool.to}>
109                      {tool.external ? (
110                        <a href={tool.to} className="footer-private-link" aria-label={tool.name} title={tool.hover}>
111                          {content}
112                        </a>
113                      ) : (
114                        <Link to={tool.to} className="footer-private-link" aria-label={tool.name} title={tool.hover}>
115                          {content}
116                        </Link>
117                      )}
118                    </li>
119                  );
120                })}
121              </ul>
122            </nav>
123            <nav className="footer-col" aria-labelledby="footer-site">
124              <h2 className="footer-heading" id="footer-site">
125                {SITE_HEADING}
126              </h2>
127              <ul className="footer-links">
128                {SITE_LINKS.map((item) => (
129                  <li key={item.to}>
130                    <FooterAnchor link={item} />
131                  </li>
132                ))}
133              </ul>
134            </nav>
135          </div>
136        </div>
137        {/* The end year is computed at render: an edge-cached page can show last year's for a few days after
138            January 1, which Dustin accepted (2026-09-27) over a year that is edited by hand. */}
139        <p className="site-shell-footer-note">
140          &copy; 2006&ndash;{new Date().getFullYear()} {SITE.name}
141        </p>
142      </div>
143    </footer>
144  );
145}