app/routes/site-map.tsx

Functions

Imports

It imports app/components/page-shell.tsx, app/lib/context.ts, app/lib/seo.ts, app/lib/site-map.mjs, app/lib/site-urls.server.ts. No module of this repo imports it.

Source

1import { Link, data } from "react-router";
2
3import { PageShell } from "~/components/page-shell";
4import { getEnv } from "~/lib/context";
5import { EDGE_CACHE_HEADER, SITE, pageMeta, publicHtmlHeaders, scheduledEdgeCacheControl } from "~/lib/seo";
6import { SITE_MAP_PATH, lineText, siteMapSections } from "~/lib/site-map.mjs";
7import { SITE_URLS_CACHE_TAGS, gatherSiteUrls } from "~/lib/site-urls.server";
8
9import type { Route } from "./+types/site-map";
10
11import "~/styles/site-map.css";
12
13/**
14 * The site map for people: every public page by its title, grouped by the header's sections, drawn from the
15 * one URL list sitemap.xml is drawn from (app/lib/site-urls.server.ts), so a page listed in one is listed in the
16 * other. At /site-map because /sitemap.xml is the machines' document.
17 */
18export async function loader({ context }: Route.LoaderArgs) {
19  const { urls, nextPublishAt } = await gatherSiteUrls(getEnv(context));
20  return data(
21    { sections: siteMapSections(urls) },
22    { headers: { [EDGE_CACHE_HEADER]: scheduledEdgeCacheControl(new Date(), nextPublishAt) } },
23  );
24}
25
26export function headers({ loaderHeaders }: Route.HeadersArgs) {
27  // Every save that changes the list must reach this page, so it carries the sitemap's tags.
28  return new Headers(publicHtmlHeaders(SITE_URLS_CACHE_TAGS, loaderHeaders.get(EDGE_CACHE_HEADER) ?? undefined));
29}
30
31export function meta() {
32  return pageMeta({
33    title: `Site map | ${SITE.name}`,
34    description: "Every page on this site by its title, grouped as the header menu groups them.",
35    path: SITE_MAP_PATH,
36  });
37}
38
39export default function SiteMap({ loaderData }: Route.ComponentProps) {
40  return (
41    <PageShell>
42      <h1 className="page-title">Site map</h1>
43      <div className="site-map">
44        {loaderData.sections.map((section) => (
45          <section key={section.id} className="site-map-section" aria-labelledby={`site-map-${section.id}`}>
46            <h2 className="site-map-heading" id={`site-map-${section.id}`}>
47              {section.heading}
48            </h2>
49            <ul className="site-map-list">
50              {section.lines.map((line) => (
51                <li key={`${line.to} ${line.label}`}>
52                  {line.plain ? <span className="site-map-plain">{lineText(line)}</span> : <Link to={line.to}>{lineText(line)}</Link>}
53                </li>
54              ))}
55            </ul>
56          </section>
57        ))}
58      </div>
59    </PageShell>
60  );
61}