app/routes/blog._index.tsx

Functions

Imports

It imports app/components/evidence-row.tsx, app/components/filter-link.tsx, app/components/post-row.tsx, app/components/shell-footer.tsx, app/components/site-header.tsx, app/db/index.ts, app/lib/blog-listing.mjs, app/lib/context.ts, app/lib/json-ld.mjs, app/lib/seo.ts, app/lib/tag-path.mjs, app/lib/timing.ts. No module of this repo imports it.

Source

1import { Form, data, redirect } from "react-router";
2
3import { EvidenceRow } from "~/components/evidence-row";
4import { FilterLink } from "~/components/filter-link";
5import { PostRow, Pager } from "~/components/post-row";
6import { ShellFooter } from "~/components/shell-footer";
7import { SiteHeader } from "~/components/site-header";
8import { listBlogPosts, listBlogTags, listBlogYears, nextScheduledPublishAt } from "~/db";
9import { POSTS_PER_PAGE, listingFacts, readPage, splitFeatured } from "~/lib/blog-listing.mjs";
10import { jsonLd } from "~/lib/json-ld.mjs";
11import { tagPath } from "~/lib/tag-path.mjs";
12import { getEnv } from "~/lib/context";
13import { timed, timedLoader } from "~/lib/timing";
14import {
15  cacheTags,
16  EDGE_CACHE_HEADER,
17  publicHtmlHeaders,
18  scheduledEdgeCacheControl,
19  SITE,
20  SITE_ORIGIN,
21  breadcrumbJsonLd,
22  pageMeta,
23} from "~/lib/seo";
24import type { Route } from "./+types/blog._index";
25
26/* evidence-row.css is imported here, not by the component: every sheet a page loads shows in its route's imports. */
27import "~/styles/evidence-row.css";
28import "~/styles/listing.css";
29import "~/styles/entry-list.css";
30
31export async function loader({ request, context }: Route.LoaderArgs) {
32  const url = new URL(request.url);
33  const env = getEnv(context);
34
35  const tag = url.searchParams.get("tag");
36  const year = url.searchParams.get("year");
37  const page = readPage(url.searchParams.get("page"));
38
39  return timedLoader(context, async (timings) => {
40    const [listing, tagList, yearList, nextPublishAt] = await timed(timings, "queries_all", () =>
41      Promise.all([
42        listBlogPosts(env, { tag, year, page, perPage: POSTS_PER_PAGE, timings }),
43        timed(timings, "d1_tag_list", () => listBlogTags(env)),
44        timed(timings, "d1_year_list", () => listBlogYears(env)),
45        timed(timings, "d1_next_scheduled", () => nextScheduledPublishAt(env)),
46      ]),
47    );
48
49    /*
50     * Filtered here so the reported count and the rendered items come from one decision.
51     * Known limit: the hero only appears when the featured post falls on page 1.
52     */
53    const { featured, posts } = splitFeatured(
54      listing.posts,
55      !tag && !year && page === 1,
56    );
57
58    /*
59     * Out of range redirects to the last real page: a 404 would be wrong once posts arrive, and
60     * clamping in place would make the URL lie. 302 because the bound moves.
61     */
62    if (page > listing.pageCount) {
63      const target = new URLSearchParams();
64      if (tag) target.set("tag", tag);
65      if (year) target.set("year", year);
66      if (listing.pageCount > 1) target.set("page", String(listing.pageCount));
67      const qs = target.toString();
68      throw redirect(qs ? `/writing?${qs}` : "/writing");
69    }
70
71    const payload = {
72      ...listing,
73      // After the spread, so the filtered array wins over `listing.posts`.
74      posts,
75      tags: tagList,
76      years: yearList,
77      activeTag: tag,
78      activeYear: year,
79      featured,
80    };
81
82    /* The transport writes the header from this array after the handler returns, when it is complete. */
83    return data(payload, {
84      headers: { [EDGE_CACHE_HEADER]: scheduledEdgeCacheControl(new Date(), nextPublishAt) },
85    });
86  });
87}
88
89export function headers({ loaderHeaders }: Route.HeadersArgs) {
90  // Tagged `posts`: a publish must be able to move this page.
91  const headers = new Headers(
92    publicHtmlHeaders(cacheTags(), loaderHeaders.get(EDGE_CACHE_HEADER) ?? undefined),
93  );
94  // `headers` does not inherit loader headers, so one not forwarded here never reaches the client.
95  const timing = loaderHeaders.get("Server-Timing");
96  if (timing) headers.set("Server-Timing", timing);
97  return headers;
98}
99
100export function meta({ loaderData }: Route.MetaArgs) {
101  const filterLabel = [loaderData?.activeTag, loaderData?.activeYear]
102    .filter(Boolean)
103    .join(", ");
104  const title = filterLabel ? `Writing: ${filterLabel} | ${SITE.name}` : `Writing | ${SITE.name}`;
105  const description = "Writing on building for the web, mostly on Cloudflare.";
106  /* Built from the same axes as `filterHref`, in order, so the canonical is byte-identical to the link. */
107  const canonicalParams = new URLSearchParams();
108  if (loaderData?.activeTag) canonicalParams.set("tag", loaderData.activeTag);
109  if (loaderData?.activeYear) canonicalParams.set("year", loaderData.activeYear);
110  if (loaderData?.page && loaderData.page > 1) {
111    canonicalParams.set("page", String(loaderData.page));
112  }
113  const canonicalQuery = canonicalParams.toString();
114
115  /* Only when the tag is the only filter: `?tag=x&year=2026` is a different list. */
116  const tagOnly = Boolean(loaderData?.activeTag) && !loaderData?.activeYear;
117  const path = tagOnly
118    ? `${tagPath(loaderData!.activeTag!)}${
119        loaderData?.page && loaderData.page > 1 ? `?page=${loaderData.page}` : ""
120      }`
121    : canonicalQuery
122      ? `/writing?${canonicalQuery}`
123      : "/writing";
124
125  return pageMeta({ title, description, path });
126}
127
128export default function BlogIndex({ loaderData }: Route.ComponentProps) {
129  const { posts, tags, years, activeTag, activeYear, featured, page, pageCount, total, span } =
130    loaderData;
131
132  /**
133   * Every link from one builder: tag and year AND together, so a chip that knew one axis destroyed
134   * the other. Page is dropped on any filter change.
135   */
136  const filterHref = (
137    override: { tag?: string | null; year?: string | null; page?: number } = {},
138  ) => {
139    const params = new URLSearchParams();
140    const tag = "tag" in override ? override.tag : activeTag;
141    const year = "year" in override ? override.year : activeYear;
142    if (tag) params.set("tag", tag);
143    if (year) params.set("year", year);
144    if (override.page && override.page > 1) params.set("page", String(override.page));
145    const qs = params.toString();
146    return qs ? `/writing?${qs}` : "/writing";
147  };
148
149  const pageHref = (n: number) => filterHref({ page: n });
150
151  return (
152    <>
153      <SiteHeader />
154      {/* The h-feed is `<main>` itself: head, filters and list are siblings. Not on archives: a filtered view is not this blog's feed. */}
155      <main className="tracks list-tracks h-feed" id="main" tabIndex={-1}>
156        <script
157          type="application/ld+json"
158          dangerouslySetInnerHTML={{
159            __html: jsonLd(
160              breadcrumbJsonLd(SITE_ORIGIN, [
161                ["Home", "/"],
162                ["Writing", "/writing"],
163              ]),
164            ),
165          }}
166        />
167
168        <header className="list-head">
169          {/* Implied properties are skipped for a root containing nested microformats, so this class supplies the only name. */}
170          <h1 className="list-label p-name">Writing</h1>
171          <p className="list-dek">Writing on building for the web, mostly on Cloudflare.</p>
172          <EvidenceRow facts={listingFacts(total, span)} />
173        </header>
174
175        <Form method="get" action="/search" role="search" className="list-search">
176          <label className="sr-only" htmlFor="blog-search-input">
177            Search the blog
178          </label>
179          <input
180            type="search"
181            id="blog-search-input"
182            name="q"
183            placeholder="Search the blog"
184            autoComplete="off"
185          />
186          <input type="hidden" name="type" value="post" />
187          <button type="submit">Search</button>
188        </Form>
189
190        {tags.length > 0 && (
191          <nav className="list-filter" aria-label="Filter posts by tag">
192            <span className="list-filter-label">Tags</span>
193            <FilterLink to={filterHref({ tag: null })} label="All" active={!activeTag} />
194            {tags.map((tag) => (
195              <FilterLink
196                key={tag.slug}
197                to={filterHref({ tag: tag.slug })}
198                label={tag.name}
199                count={tag.total}
200                active={activeTag === tag.slug}
201              />
202            ))}
203          </nav>
204        )}
205
206        {years.length > 1 && (
207          <nav className="list-filter" aria-label="Filter posts by year">
208            <span className="list-filter-label">Years</span>
209            <FilterLink to={filterHref({ year: null })} label="All" active={!activeYear} />
210            {years.map((entry) => (
211              <FilterLink
212                key={entry.year}
213                to={filterHref({ year: String(entry.year) })}
214                label={String(entry.year)}
215                count={entry.total}
216                active={activeYear === entry.year}
217              />
218            ))}
219          </nav>
220        )}
221
222        {posts.length === 0 && !featured ? (
223          <p className="list-empty">No posts here yet.</p>
224        ) : (
225          <ul className="entry-list">
226            {featured && <PostRow post={featured} mark="Featured" />}
227            {posts.map((post) => (
228              <PostRow key={post.slug} post={post} />
229            ))}
230          </ul>
231        )}
232
233        <Pager page={page} pageCount={pageCount} hrefFor={pageHref} />
234      </main>
235      <ShellFooter />
236      {/* No <Enhance module="blog" />: its enhancements target `.prose` markup, which this page has none of. */}
237    </>
238  );
239}