app/routes/blog.$slug.tsx

Functions

Imports

It imports app/components/enhance.tsx, app/components/evidence-row.tsx, app/components/post-backlinks.tsx, app/components/post-head-blocks.tsx, app/components/post-history.tsx, app/components/post-mentions.tsx, app/components/post-rail.tsx, app/components/post-series-nav.tsx, app/components/shell-footer.tsx, app/components/site-header.tsx, app/db/index.ts, app/lib/blog-view.ts, app/lib/context.ts, app/lib/cover-image.mjs, app/lib/json-ld.mjs, app/lib/long-date.mjs, app/lib/markdown-twin.ts, app/lib/seo.ts, app/lib/webmention/advertise.ts. Imported by app/routes/preview.$token.tsx.

Source

1import { Link, data } from "react-router";
2import { PostHeadBlocks, type WritingStatus } from "~/components/post-head-blocks";
3import { PostBacklinks } from "~/components/post-backlinks";
4import { PostHistory } from "~/components/post-history";
5import { PostMentions } from "~/components/post-mentions";
6import { PostRail, ymd } from "~/components/post-rail";
7import { SeriesNav } from "~/components/post-series-nav";
8import { EvidenceRow } from "~/components/evidence-row";
9import { ENHANCE_GZIP_BYTES } from "virtual:enhance";
10
11import { Enhance } from "~/components/enhance";
12import { ShellFooter } from "~/components/shell-footer";
13import { SiteHeader } from "~/components/site-header";
14import {
15  approvedMentionsFor,
16  getBlogPost,
17  getBlogPostMarkdown,
18  listSeriesParts,
19  nextScheduledPublishAt,
20  publiclyVisibleSlugs,
21} from "~/db";
22import { WEBMENTION_URL, linkToWebmention } from "~/lib/webmention/advertise";
23import { blogPostView } from "~/lib/blog-view";
24import { jsonLd } from "~/lib/json-ld.mjs";
25import { getEnv, postPreviewContext } from "~/lib/context";
26import { longDateUTC } from "~/lib/long-date.mjs";
27import { coverDimensions, coverResponsive } from "~/lib/cover-image.mjs";
28import { linkToMarkdown, markdownResponse, prefersMarkdown } from "~/lib/markdown-twin";
29import {
30  HTML_VARY_ACCEPT,
31  NO_STORE_CACHE_CONTROL,
32  cacheTags,
33  EDGE_CACHE_HEADER,
34  scheduledEdgeCacheControl,
35  SHARED_CACHE_CONTROL,
36  SITE,
37  SITE_ORIGIN,
38  articleJsonLd,
39  articleOpenGraph,
40  breadcrumbJsonLd,
41  postSocial,
42} from "~/lib/seo";
43import type { Route } from "./+types/blog.$slug";
44
45import "~/styles/post-rail.css";
46import "~/styles/evidence-row.css";
47import "~/styles/enarratio.css";
48import "~/styles/post-shell.css";
49import "~/styles/prose.css";
50import "~/styles/post-enhancements.css";
51import "~/styles/post-head-blocks.css";
52import "~/styles/post-disclosures.css";
53
54/** Middleware, not the loader: a document route's loader cannot return a raw Response. */
55export const middleware: Route.MiddlewareFunction[] = [
56  async ({ request, params, context }, next) => {
57    if (!prefersMarkdown(request)) return next();
58
59    const post = await getBlogPostMarkdown(getEnv(context), params.slug);
60    if (!post) return next();
61    /* Never stored: this shares a cache key with the HTML document, so a stored copy collapses the Cookie dimension for both. */
62    return markdownResponse(params.slug, post.body, NO_STORE_CACHE_CONTROL);
63  },
64];
65
66export async function loader({ params, context }: Route.LoaderArgs) {
67  // A Carrel preview renders its own row through this same loader, so it matches the published page.
68  const preview = context.get(postPreviewContext);
69  const post =
70    preview?.slug === params.slug ? preview : await getBlogPost(getEnv(context), params.slug);
71  if (!post) {
72    throw data("Not found", { status: 404 });
73  }
74
75  const seriesParts = post.series
76    ? await listSeriesParts(getEnv(context), post.series)
77    : [];
78
79  const view = blogPostView(post, seriesParts);
80
81  /* Re-checked against live rows: a stored list can name a post unpublished since it was written. */
82  const stillPublic = await publiclyVisibleSlugs(
83    getEnv(context),
84    [...view.post.related, ...view.post.backlinks].map((item) => item.slug),
85  );
86
87  /* Here, not in `blogPostView`: `/preview/:token` shares that projection, and a draft preview must not grow mentions. */
88  const [mentions, nextPublishAt] = await Promise.all([
89    approvedMentionsFor(getEnv(context), post.slug),
90    /* The previous and next links, the series parts and the related list can each name it once live. */
91    nextScheduledPublishAt(getEnv(context)),
92  ]);
93
94  return data(
95    {
96      ...view,
97      mentions,
98      post: {
99        ...view.post,
100        related: view.post.related.filter((item) => stillPublic.has(item.slug)),
101        backlinks: view.post.backlinks.filter((item) => stillPublic.has(item.slug)),
102      },
103    },
104    {
105      /* Comma-joined: RFC 8288's spelling for more than one relation in one `Link`. */
106      headers: {
107        Link: [linkToMarkdown(post.slug), linkToWebmention()].join(", "),
108        /* Set in the loader: `HeadersArgs` carries no `params`, so the slug is not in scope there. */
109        "Cache-Tag": cacheTags(post.slug),
110        [EDGE_CACHE_HEADER]: scheduledEdgeCacheControl(new Date(), nextPublishAt),
111      },
112    },
113  );
114}
115
116export function headers({ loaderHeaders }: Route.HeadersArgs) {
117  const headers = new Headers({
118    // The theme is a cache-key dimension, not a `Vary`. `Accept` stays: this URL also serves markdown.
119    "Cache-Control": SHARED_CACHE_CONTROL,
120    Vary: HTML_VARY_ACCEPT,
121  });
122  // `headers` does not inherit loader headers, so one not forwarded here never reaches the client.
123  const link = loaderHeaders.get("Link");
124  if (link) headers.set("Link", link);
125  const tag = loaderHeaders.get("Cache-Tag");
126  if (tag) headers.set("Cache-Tag", tag);
127  const edge = loaderHeaders.get(EDGE_CACHE_HEADER);
128  if (edge) headers.set(EDGE_CACHE_HEADER, edge);
129  return headers;
130}
131
132export function meta({ loaderData }: Route.MetaArgs) {
133  if (!loaderData) {
134    return [{ title: `Not found | ${SITE.name}` }];
135  }
136  const { post } = loaderData;
137  const { canonical, pageTitle, description, socialTitle, socialDescription, image } =
138    postSocial(post);
139
140  return [
141    { title: pageTitle },
142    { name: "description", content: description },
143    { tagName: "link", rel: "canonical", href: canonical },
144    { property: "og:title", content: socialTitle },
145    { property: "og:description", content: socialDescription },
146    { property: "og:type", content: "article" },
147    { property: "og:url", content: canonical },
148    { property: "og:image", content: image },
149    { name: "twitter:card", content: "summary_large_image" },
150    { name: "twitter:title", content: socialTitle },
151    { name: "twitter:description", content: socialDescription },
152    { name: "twitter:image", content: image },
153    ...articleOpenGraph(SITE_ORIGIN, toArticleSeo(post)),
154    {
155      tagName: "link",
156      rel: "alternate",
157      type: "text/markdown",
158      href: `${canonical}.md`,
159    },
160    /* A sender looks in two places and stops at the first, so both are emitted. */
161    { tagName: "link", rel: "webmention", href: WEBMENTION_URL },
162  ];
163}
164
165type LoadedPost = Route.ComponentProps["loaderData"]["post"];
166
167/** The post as the Open Graph and JSON-LD builders read it, so the head and the body describe one article. */
168function toArticleSeo(post: LoadedPost): Parameters<typeof articleJsonLd>[1] {
169  return {
170    slug: post.slug,
171    title: post.title,
172    description: post.description,
173    publishAt: post.publishAt ? new Date(post.publishAt) : null,
174    updatedAt: post.updatedAt ? new Date(post.updatedAt) : null,
175    coverImage: post.coverImage,
176    ogImage: post.ogImage,
177    tags: post.tags,
178  };
179}
180
181/** One day: a post synced the day it was published has been deployed, not revised. */
182const REVISED_THRESHOLD_MS = 24 * 60 * 60 * 1000;
183
184export default function BlogPost({ loaderData }: Route.ComponentProps) {
185  const { post, toc, seriesParts, mentions } = loaderData;
186
187  const { canonical, description: dek } = postSocial(post);
188
189  const published = post.publishAt ? new Date(post.publishAt).getTime() : null;
190  const revised = post.updatedAt ? new Date(post.updatedAt).getTime() : null;
191  const revisedLabel =
192    published !== null && revised !== null && revised - published > REVISED_THRESHOLD_MS
193      ? longDateUTC(post.updatedAt)
194      : null;
195
196  const sections = toc.filter((entry) => entry.depth === 2);
197
198  const gzipBytes = ENHANCE_GZIP_BYTES.blog;
199  const evidence = [
200    post.wordCount > 0 ? `${post.wordCount.toLocaleString("en-US")} words` : null,
201    gzipBytes ? `${(gzipBytes / 1000).toFixed(2)} kB gzipped` : null,
202    post.sourceBlobSha ? `source hash ${post.sourceBlobSha.slice(0, 7)}` : null,
203  ];
204
205  return (
206    <>
207      <SiteHeader />
208      {/*
209       * The h-entry is on `main`: the title and the article are siblings in the track grid, so an
210       * article-scoped h-entry would have no p-name and no dt-published.
211       */}
212      <main className="tracks post-tracks h-entry" id="main" tabIndex={-1}>
213        <script
214          type="application/ld+json"
215          dangerouslySetInnerHTML={{
216            __html: jsonLd([
217              articleJsonLd(SITE_ORIGIN, toArticleSeo(post)),
218              breadcrumbJsonLd(SITE_ORIGIN, [
219                ["Home", "/"],
220                ["Writing", "/writing"],
221                [post.title, `/writing/${post.slug}`],
222              ]),
223            ]),
224          }}
225        />
226
227        <header className="post-head">
228          <h1 className="p-name">{post.title}</h1>
229          {/* The meta tag's string: `postSocial` falls back to the site description, so the raw column would differ from the head. */}
230          <p className="post-dek">{dek}</p>
231          <EvidenceRow facts={evidence} />
232          {/* `hidden`, not `.sr-only`, which is still announced. mf2 parsers read markup, not computed style. */}
233          <p className="p-author h-card" hidden>
234            <a className="p-name u-url" href="/">
235              {SITE.name}
236            </a>
237          </p>
238        </header>
239
240        <PostRail post={post} revisedLabel={revisedLabel} sections={sections} />
241
242        <article className="post post-body">
243          <PostHeadBlocks
244            writingStatus={(post.writingStatus as WritingStatus | null) ?? null}
245            assumedAudience={post.assumedAudience ?? null}
246            keyTakeaways={post.keyTakeaways ?? null}
247          />
248
249          {/* Eager and high priority: this is the LCP element when present. */}
250          {post.coverImage && (
251            <figure className="post-cover">
252              <img
253                src={post.coverImage}
254                alt={post.coverAlt ?? ""}
255                loading="eager"
256                fetchPriority="high"
257                decoding="async"
258                {...coverDimensions(post.coverImage)}
259                {...coverResponsive(post.coverImage)}
260              />
261            </figure>
262          )}
263
264          {post.series && seriesParts.length > 1 && (
265            <SeriesNav post={post} series={post.series} seriesParts={seriesParts} />
266          )}
267
268          {/* Build-time HTML from markdown we author; no third-party input, so it can be injected. */}
269          <div
270            className="prose e-content"
271            dangerouslySetInnerHTML={{ __html: post.html }}
272          />
273
274          {post.furtherReading.length > 0 && (
275            <section className="further-reading" aria-labelledby="further-heading">
276              <h2 id="further-heading">Further reading</h2>
277              <ul>
278                {post.furtherReading.map((item) => (
279                  <li key={item.url}>
280                    <a href={item.url} rel="noopener noreferrer">
281                      {item.title}
282                    </a>
283                  </li>
284                ))}
285              </ul>
286            </section>
287          )}
288
289          <nav className="post-actions" aria-label="Use this post elsewhere">
290            <a
291              className="post-action"
292              href={`/writing/${post.slug}.md`}
293              data-copy-markdown={`${SITE_ORIGIN}/writing/${post.slug}.md`}
294            >
295              Copy as Markdown
296            </a>
297            <a
298              className="post-action"
299              href={`https://claude.ai/new?q=${encodeURIComponent(
300                `Read ${SITE_ORIGIN}/writing/${post.slug}.md and summarize it.`,
301              )}`}
302              rel="noopener noreferrer"
303            >
304              Open in Claude
305            </a>
306            <a
307              className="post-action"
308              href={`https://chatgpt.com/?q=${encodeURIComponent(
309                `Read ${SITE_ORIGIN}/writing/${post.slug}.md and summarize it.`,
310              )}`}
311              rel="noopener noreferrer"
312            >
313              Open in ChatGPT
314            </a>
315          </nav>
316
317          {/* `.post-share .u-url` is the enhancement's hook for copy-link-to-selection; keep the class if the row moves. */}
318          <nav className="post-actions post-share" aria-label="This post's address">
319            <a className="post-action u-url" href={canonical}>
320              Permalink
321            </a>
322          </nav>
323
324          {mentions.length > 0 && <PostMentions mentions={mentions} />}
325
326          <p className="post-colophon-note">
327            Built on the stack described at <Link to="/colophon">/colophon</Link>.
328          </p>
329
330          {revisedLabel && post.changelog && (
331            <PostHistory
332              entries={post.changelog}
333              publishedAt={post.publishAt ? ymd(post.publishAt) : null}
334              sourceHash={post.sourceBlobSha}
335            />
336          )}
337
338          {post.backlinks.length > 0 && <PostBacklinks backlinks={post.backlinks} />}
339
340          <nav className="post-nav" aria-label="More posts">
341            {post.previous && (
342              <Link className="post-nav-target" to={`/writing/${post.previous.slug}`} rel="prev">
343                <span className="post-nav-label">Previous</span>
344                <span className="post-nav-title">{post.previous.title}</span>
345              </Link>
346            )}
347            {post.next && (
348              <Link className="post-nav-target" to={`/writing/${post.next.slug}`} rel="next">
349                <span className="post-nav-label">Next</span>
350                <span className="post-nav-title">{post.next.title}</span>
351              </Link>
352            )}
353          </nav>
354        </article>
355      </main>
356      <ShellFooter />
357      <Enhance module="blog" />
358    </>
359  );
360}