app/routes/preview.$token.tsx

Functions

Imports

It imports app/db/index.ts, app/lib/blog-view.ts, app/lib/client-ip.ts, app/lib/context.ts, app/lib/preview-links.server.ts, app/lib/preview-token.mjs, app/lib/seo.ts, app/routes/blog.$slug.tsx. No module of this repo imports it.

Source

1import { data } from "react-router";
2
3import { getDraftPostForPreview, listSeriesParts } from "~/db";
4import { blogPostView } from "~/lib/blog-view";
5import { clientIp } from "~/lib/client-ip";
6import { getEnv } from "~/lib/context";
7import {
8  PREVIEW_RATE_LIMIT,
9  PREVIEW_RATE_WINDOW_SECONDS,
10  checkPreviewRate,
11  readPreviewRecord,
12} from "~/lib/preview-links.server";
13import { resolvePreview } from "~/lib/preview-token.mjs";
14import { SITE } from "~/lib/seo";
15import type { Route } from "./+types/preview.$token";
16
17/**
18 * Top level for security: the cache key ignores cookies, and a reviewer holding a preview link
19 * carries none, so under the public post route one preview fetch would be stored publicly. The slug
20 * comes from the KV record, never the URL. Every failure is the same 404, byte for byte.
21 */
22
23/** Literals, not the shared constant: importing that is the mistake a copy from `blog.$slug.tsx` would make. */
24const PREVIEW_HEADERS = {
25  "Cache-Control": "private, no-store",
26  "X-Robots-Tag": "noindex, nofollow",
27  Vary: "Cookie",
28};
29
30/**
31 * Not a throw, which would reach the ErrorBoundary and lose the headers. Runs before any lookup, so
32 * a refusal reveals nothing about the token.
33 */
34export const middleware: Route.MiddlewareFunction[] = [
35  async ({ request, context }, next) => {
36    const ip = clientIp(request);
37    const rate = await checkPreviewRate(getEnv(context), ip);
38    if (rate.ok) return next();
39
40    return new Response(
41      `Too many preview requests. The limit is ${PREVIEW_RATE_LIMIT} per ` +
42        `${PREVIEW_RATE_WINDOW_SECONDS} seconds.`,
43      {
44        status: 429,
45        headers: {
46          ...PREVIEW_HEADERS,
47          "Content-Type": "text/plain; charset=utf-8",
48          "Retry-After": String(rate.retryAfter),
49        },
50      },
51    );
52  },
53];
54
55export async function loader({ params, context }: Route.LoaderArgs) {
56  const env = getEnv(context);
57
58  // One refusal, identical to `blog.$slug.tsx`'s 404, so no branch can answer differently.
59  const notFound = () => data("Not found", { status: 404 });
60
61  const record = await readPreviewRecord(env, params.token);
62
63  // The slug is the record's, never the URL's.
64  const post = record ? await getDraftPostForPreview(env, record.slug) : null;
65
66  const verdict = resolvePreview({ token: params.token, record, post });
67  if (!verdict.ok || !post) throw notFound();
68
69  const seriesParts = post.series ? await listSeriesParts(env, post.series) : [];
70
71  /* `mentions: []`: the component reads `mentions.length`, and `blogPostView` omits the field. */
72  return { ...blogPostView(post, seriesParts), mentions: [] };
73}
74
75export function headers() {
76  return new Headers(PREVIEW_HEADERS);
77}
78
79export function meta({ loaderData: loaded }: Route.MetaArgs) {
80  if (!loaded) {
81    return [{ title: `Not found | ${SITE.name}` }];
82  }
83
84  /*
85   * Noindex in the markup as well as the header. No canonical and no `og:` tags: an unfurled
86   * unpublished title is the leak this feature exists to control.
87   */
88  return [
89    { title: `Preview: ${loaded.post.title} | ${SITE.name}` },
90    { name: "robots", content: "noindex, nofollow" },
91  ];
92}
93
94/** Re-exported, not wrapped, so exactly one function renders a post page. */
95export { default } from "./blog.$slug";