app/components/taxonomy-listing.tsx

Functions

Imports

It imports app/components/evidence-row.tsx, app/components/post-row.tsx, app/components/shell-footer.tsx, app/components/site-header.tsx, app/lib/blog-listing.mjs, app/lib/json-ld.mjs, app/lib/seo.ts. Imported by app/routes/blog.series.$series.tsx, app/routes/blog.tags.$tag.tsx.

Source

1import { Link, redirect } from "react-router";
2
3import { EvidenceRow } from "~/components/evidence-row";
4import { PostRow, Pager } from "~/components/post-row";
5import { ShellFooter } from "~/components/shell-footer";
6import { SiteHeader } from "~/components/site-header";
7import { listingFacts } from "~/lib/blog-listing.mjs";
8import { jsonLd } from "~/lib/json-ld.mjs";
9import { SITE_ORIGIN, breadcrumbJsonLd } from "~/lib/seo";
10
11/** A taxonomy page's URL for page `n`: the bare path for the first page, `?page=n` after it. */
12export function listingHref(base: string, n: number) {
13  return n > 1 ? `${base}?page=${n}` : base;
14}
15
16/** Out of range redirects to the last real page, so the URL never claims a page that does not exist. */
17export function redirectPastLastPage(page: number, pageCount: number, base: string) {
18  if (page > pageCount) throw redirect(listingHref(base, pageCount));
19}
20
21type ListingPost = Parameters<typeof PostRow>[0]["post"];
22
23/** The tag and series pages: one listing of posts under a name, with a pager and its own feeds. */
24export function TaxonomyListing({
25  base,
26  name,
27  heading,
28  dek,
29  posts,
30  page,
31  pageCount,
32  total,
33  span,
34}: {
35  /** The page's path, which its feeds hang off. */
36  base: string;
37  /** The breadcrumb's last step. */
38  name: string;
39  heading: string;
40  /** The sentence under the heading; an "All posts" link follows it. */
41  dek: React.ReactNode;
42  posts: ListingPost[];
43  page: number;
44  pageCount: number;
45  total: number;
46  span: Parameters<typeof listingFacts>[1];
47}) {
48  return (
49    <>
50      <SiteHeader />
51      <main className="tracks list-tracks" id="main" tabIndex={-1}>
52        <script
53          type="application/ld+json"
54          dangerouslySetInnerHTML={{
55            __html: jsonLd(
56              breadcrumbJsonLd(SITE_ORIGIN, [
57                ["Home", "/"],
58                ["Writing", "/writing"],
59                [name, base],
60              ]),
61            ),
62          }}
63        />
64
65        <header className="list-head">
66          <h1 className="list-label">{heading}</h1>
67          <p className="list-dek">
68            {dek} <Link to="/writing">All posts</Link>
69          </p>
70          <EvidenceRow facts={listingFacts(total, span)} />
71        </header>
72
73        {posts.length === 0 ? (
74          <p className="list-empty">No posts here yet.</p>
75        ) : (
76          <ul className="entry-list">
77            {posts.map((post) => (
78              <PostRow key={post.slug} post={post} />
79            ))}
80          </ul>
81        )}
82
83        <Pager page={page} pageCount={pageCount} hrefFor={(n) => listingHref(base, n)} />
84
85        <p className="list-feeds">
86          Subscribe: <a href={`${base}/rss.xml`}>RSS</a> <a href={`${base}/feed.json`}>JSON</a>
87        </p>
88      </main>
89      <ShellFooter />
90    </>
91  );
92}