app/routes/blog.tags.$tag.tsx

Functions

Imports

It imports app/components/taxonomy-listing.tsx, app/db/index.ts, app/lib/blog-listing.mjs, app/lib/context.ts, app/lib/seo.ts, app/lib/tag-path.mjs. No module of this repo imports it.

Source

1import { data } from "react-router";
2
3import {
4  TaxonomyListing,
5  listingHref,
6  redirectPastLastPage,
7} from "~/components/taxonomy-listing";
8import { getBlogTag, listBlogPosts, nextScheduledPublishAt } from "~/db";
9import { POSTS_PER_PAGE, readPage } from "~/lib/blog-listing.mjs";
10import { getEnv } from "~/lib/context";
11import {
12  EDGE_CACHE_HEADER,
13  SITE,
14  pageMeta,
15  cacheTags,
16  publicHtmlHeaders,
17  scheduledEdgeCacheControl,
18} from "~/lib/seo";
19import { tagPath } from "~/lib/tag-path.mjs";
20import type { Route } from "./+types/blog.tags.$tag";
21
22import "~/styles/evidence-row.css";
23import "~/styles/listing.css";
24import "~/styles/entry-list.css";
25
26/** 404 rather than an empty page, which would be a soft 404 and leak a tag only drafts carry. */
27export async function loader({ params, request, context }: Route.LoaderArgs) {
28  const env = getEnv(context);
29  const url = new URL(request.url);
30  const page = readPage(url.searchParams.get("page"));
31
32  /* Resolved before the list: an empty list cannot tell "no such tag" from "every post unpublished". */
33  const tag = await getBlogTag(env, params.tag);
34  if (!tag) throw data("Not found", { status: 404 });
35
36  const [listing, nextPublishAt] = await Promise.all([
37    listBlogPosts(env, { tag: tag.slug, page, perPage: POSTS_PER_PAGE }),
38    nextScheduledPublishAt(env),
39  ]);
40
41  redirectPastLastPage(page, listing.pageCount, tagPath(tag.slug));
42
43  return data(
44    { ...listing, tag },
45    { headers: { [EDGE_CACHE_HEADER]: scheduledEdgeCacheControl(new Date(), nextPublishAt) } },
46  );
47}
48
49export function headers({ loaderHeaders }: Route.HeadersArgs) {
50  /* Not `HTML_VARY_ACCEPT`: this page negotiates no twin representation on `Accept`. */
51  return new Headers(
52    publicHtmlHeaders(cacheTags(), loaderHeaders.get(EDGE_CACHE_HEADER) ?? undefined),
53  );
54}
55
56export function meta({ loaderData }: Route.MetaArgs) {
57  if (!loaderData) {
58    return [{ title: `Not found | ${SITE.name}` }];
59  }
60  const { tag, page } = loaderData;
61  const path = listingHref(tagPath(tag.slug), page);
62  return pageMeta({
63    title: `Posts tagged ${tag.name} | ${SITE.name}`,
64    description: `Every post on ${SITE.name}'s blog tagged ${tag.name}.`,
65    path,
66  });
67}
68
69export default function BlogTag({ loaderData }: Route.ComponentProps) {
70  const { tag, ...listing } = loaderData;
71  return (
72    <TaxonomyListing
73      {...listing}
74      base={tagPath(tag.slug)}
75      name={tag.name}
76      heading={`Tagged ${tag.name}`}
77      dek={`Every post on this blog tagged ${tag.name}.`}
78    />
79  );
80}