app/routes/admin.tsx

Functions

Imports

It imports app/components/admin/shell-parts.tsx, app/db/index.ts, app/lib/access.server.ts, app/lib/admin-actor.server.ts, app/lib/context.ts, app/lib/editor/publish-policy.mjs, app/lib/origin.mjs, app/lib/search/ask-guard.server.ts, app/lib/search/ask.server.ts, app/lib/seo.ts, app/lib/smoke.server.ts, app/lib/timing.ts, app/root.tsx. No module of this repo imports it.

Source

1import { useEffect } from "react";
2import { Form, Outlet, data, isRouteErrorResponse, useLocation, useRouteLoaderData } from "react-router";
3import { Empty } from "capsomer/react/empty";
4import { MessageProvider } from "capsomer/react/message";
5import { AdminShell, FIRST_PAGE, type AdminEntry } from "capsomer/react/admin-shell";
6
7import { Icon, THEME_SCRIPT, shellLink } from "~/components/admin/shell-parts";
8import { SITE, SITE_ORIGIN } from "~/lib/seo";
9import { adminNavCounts } from "~/db";
10import { accessIdentity } from "~/lib/access.server";
11import { adminActorContext, adminSessionContext } from "~/lib/admin-actor.server";
12import { authenticateSmoke } from "~/lib/smoke.server";
13import { SMOKE_READ_ONLY_POLICY } from "~/lib/editor/publish-policy.mjs";
14import { getEnv, getExecutionContext } from "~/lib/context";
15import { DRIFT_CACHE_TTL_SECONDS } from "~/lib/search/ask-guard.server";
16import { ORIGIN_REFUSAL, originVerdict } from "~/lib/origin.mjs";
17import { timed, timedLoader, timingsContext } from "~/lib/timing";
18import {
19  askAvailable,
20  askDriftCount,
21  askStatusContext,
22  askStatusReader,
23} from "~/lib/search/ask.server";
24import type { Route } from "./+types/admin";
25import type { loader as rootLoader } from "~/root";
26
27/*
28 * This import keeps admin CSS off the public plane: every /admin/* child nests under this layout.
29 * Sign-in is Cloudflare Access, in front of this layout, so no public route needs it.
30 */
31import "@fontsource/schibsted-grotesk/400.css";
32import "@fontsource/schibsted-grotesk/500.css";
33import "@fontsource/schibsted-grotesk/600.css";
34import "@fontsource/schibsted-grotesk/800.css";
35import "@fontsource/martian-mono/400.css";
36import "@fontsource-variable/source-serif-4/index.css";
37import "@fontsource-variable/source-serif-4/wght-italic.css";
38import "~/admin.css";
39
40export function meta() {
41  return [{ title: "Admin" }, { name: "robots", content: "noindex" }];
42}
43
44/** Root renders `<Scripts>` only when a match carries this flag. */
45export const handle = { hydrate: true };
46
47/**
48 * Two ways in, only the first may write: a person Cloudflare Access admitted (a verified signed
49 * token, never the mere presence of a header), or the read-only smoke bearer, which gets GET and HEAD
50 * and is refused every other method before any child runs.
51 */
52export const middleware: Route.MiddlewareFunction[] = [
53  async ({ request, context }, next) => {
54    const env = getEnv(context);
55
56    /*
57     * Covers resource routes, which the framework's document check never sees. Before the session
58     * lookup, cheapest first. An absent Origin is allowed.
59     */
60    if (request.method !== "GET" && request.method !== "HEAD") {
61      const verdict = originVerdict(request.headers.get("origin"), request.url);
62      if (!verdict.ok) {
63        return new Response(ORIGIN_REFUSAL, {
64          status: 403,
65          headers: { "cache-control": "no-store" },
66        });
67      }
68    }
69
70    /* Read, not created: root's middleware made one first, and a second would discard its marks. */
71    const timings = context.get(timingsContext).timings;
72    const access = await timed(timings, "auth_access", () => accessIdentity(env, request));
73    if (access.kind === "refused") {
74      /* A presented token that fails is an answer, like a refused smoke bearer: it is not a login page. */
75      throw new Response(`Refused: the Cloudflare Access token did not verify (${access.reason}).`, {
76        status: 401,
77        headers: {
78          "content-type": "text/plain; charset=utf-8",
79          "cache-control": "private, no-store",
80          "x-robots-tag": "noindex, nofollow",
81        },
82      });
83    }
84    if (access.kind === "human") {
85      context.set(adminSessionContext, { user: { email: access.email } });
86      context.set(adminActorContext, { kind: "admin", email: access.email });
87    } else {
88      /* A browser sends no `Authorization` header, so `authenticateSmoke` returns `absent` untouched. */
89      const smoke = await authenticateSmoke(env, request);
90      if (smoke.kind === "refused") {
91        /* A presented credential gets an answer, not a login page: each failure needs a different repair. */
92        throw new Response(smoke.error, {
93          status: smoke.status,
94          headers: {
95            "content-type": "text/plain; charset=utf-8",
96            "cache-control": "private, no-store",
97            "x-robots-tag": "noindex, nofollow",
98            ...(smoke.retryAfter ? { "retry-after": String(smoke.retryAfter) } : {}),
99          },
100        });
101      }
102      if (smoke.kind !== "ok") {
103        /* Access vouches for a person only on the apex's /admin; a request that reached here without it
104           (workers.dev, a preview, or Access misconfigured) is told where the door is, never signed in. */
105        throw new Response(`Admin signs in at ${SITE_ORIGIN}/admin, through Cloudflare Access.`, {
106          status: 403,
107          headers: {
108            "content-type": "text/plain; charset=utf-8",
109            "cache-control": "private, no-store",
110            "x-robots-tag": "noindex, nofollow",
111          },
112        });
113      }
114
115      /* An allowlist, not a denylist: a route answering PUT tomorrow is refused the day it is written. */
116      if (request.method !== "GET" && request.method !== "HEAD") {
117        throw new Response(
118          `Refused (${SMOKE_READ_ONLY_POLICY}): the smoke credential is READ ONLY. ` +
119            `${request.method} is not available to it on any admin route. ` +
120            `It may render pages and it may not change anything.`,
121          {
122            status: 403,
123            headers: {
124              "content-type": "text/plain; charset=utf-8",
125              "cache-control": "private, no-store",
126              "x-robots-tag": "noindex, nofollow",
127            },
128          },
129        );
130      }
131
132      /* The real email, not a placeholder: it is the topbar's binding width constraint, which this measures. */
133      context.set(adminActorContext, { kind: "smoke", id: smoke.id, email: smoke.email });
134    }
135    // Lazy and memoized: one listing per request, and a route that never asks never pays.
136    context.set(askStatusContext, askStatusReader(env, timings));
137    return next();
138  },
139];
140
141export async function loader({ context }: Route.LoaderArgs) {
142  return timedLoader(context, async (timings) => {
143    /*
144     * The badge reads a cached count from KV, never AI Search. /admin/posts calls the reader uncached,
145     * because the page that fixes drift must not act on a stale number.
146     */
147    const [drift, counts] = await Promise.all([
148      /* The ExecutionContext travels because the miss path finishes its cache write on `waitUntil`. */
149      timed(timings, "layout_ask_drift", () =>
150        askDriftCount(getEnv(context), getExecutionContext(context), timings),
151      ),
152      timed(timings, "layout_nav_counts", () => adminNavCounts(getEnv(context))),
153    ]);
154    const payload = {
155      email: context.get(adminActorContext).email,
156      counts,
157      /* Null only when Ask is on and the count failed or ran out of time: unknown, never a clean 0. */
158      askDrift: askAvailable(getEnv(context)) ? drift : 0,
159      askDriftMaxAgeSeconds: DRIFT_CACHE_TTL_SECONDS,
160    };
161
162    return data(payload);
163    // The layout's own total: its marks run in parallel and one nests, so summing them overcounts.
164  }, "layout_total");
165}
166
167const ICONS = {
168  overview: <Icon d="M4 11l8-7 8 7v9h-5v-6H9v6H4z" />,
169  posts: <Icon d="M6 3h8l5 5v13H6zM14 3v5h5M9 13h6M9 17h6" />,
170  mentions: <Icon d="M4 5h16v11H11l-5 4v-4H4z" />,
171  media: <Icon d="M3 5h18v14H3zM3 17l6-6 4 4 3-3 5 5M16.5 9.5h.01" />,
172  kb: <Icon d="M4 5h6a2 2 0 0 1 2 2v12a2 2 0 0 0-2-2H4zM20 5h-6a2 2 0 0 0-2 2v12a2 2 0 0 1 2-2h6z" />,
173  tools: <Icon d="M4 7h10M18 7h2M4 12h3M11 12h9M4 17h10M18 17h2M16 5v4M9 10v4M16 15v4" />,
174};
175
176/** Count included as words: a bare numeral announces "Posts 3", which names no unit. */
177function countNote(count: number | null, drift: number | null, maxAgeSeconds: number) {
178  const size = count === null ? "" : count === 1 ? "item" : "items";
179  if (drift === null) {
180    return `${size}, Ask index drift unknown: the check failed or ran out of time. Open Posts to check it.`;
181  }
182  if (drift <= 0) return size;
183  const minutes = Math.round(maxAgeSeconds / 60);
184  const age = minutes >= 1 ? `${minutes} minute${minutes === 1 ? "" : "s"}` : `${maxAgeSeconds} seconds`;
185  return (
186    `${size}, ${drift} Ask index item${drift === 1 ? "" : "s"} drifted. ` +
187    `This count is up to ${age} old; open Posts for the current figure and the repair.`
188  );
189}
190
191
192const RouterLink = shellLink("/admin");
193
194const SIGN_OUT_FORM = "admin-signout-form";
195
196/** "Dustin Edwards" -> "DE": the avatar's letters, from the site's own name. */
197const INITIALS = SITE.name
198  .split(/\s+/)
199  .map((word) => word[0])
200  .filter(Boolean)
201  .slice(0, 2)
202  .join("")
203  .toUpperCase();
204
205export default function AdminLayout({ loaderData }: Route.ComponentProps) {
206  /* Optional: on the error boundary path the root loader never ran, and a made-up nonce is worse than none. */
207  const rootData = useRouteLoaderData<typeof rootLoader>("root");
208  const { pathname } = useLocation();
209  const at = (prefix: string) => pathname === prefix || pathname.startsWith(`${prefix}/`);
210
211  const { counts, askDrift, askDriftMaxAgeSeconds } = loaderData;
212  const nav: AdminEntry[] = [
213    { id: "overview", label: FIRST_PAGE, href: "/admin", icon: ICONS.overview, current: pathname === "/admin" },
214    {
215      id: "posts",
216      label: "Posts",
217      href: "/admin/posts",
218      group: "Content",
219      icon: ICONS.posts,
220      current: at("/admin/posts"),
221      count: counts.posts ?? undefined,
222      countNote: countNote(counts.posts, askDrift, askDriftMaxAgeSeconds),
223      tone: askDrift === null || askDrift > 0 ? "warn" : undefined,
224    },
225    {
226      id: "media",
227      label: "Media",
228      href: "/admin/media",
229      group: "Content",
230      icon: ICONS.media,
231      current: at("/admin/media"),
232      count: counts.media ?? undefined,
233      countNote: countNote(counts.media, 0, askDriftMaxAgeSeconds),
234    },
235    // No count: a pending mention is not worth a third query on every admin page.
236    {
237      id: "mentions",
238      label: "Mentions",
239      href: "/admin/mentions",
240      group: "Content",
241      icon: ICONS.mentions,
242      current: at("/admin/mentions"),
243    },
244    // No count: the tabs on the page count each base, and the rail needs no second read of the table.
245    {
246      id: "kb",
247      label: "Knowledge Base",
248      href: "/admin/kb",
249      group: "Content",
250      icon: ICONS.kb,
251      current: at("/admin/kb"),
252    },
253    { id: "tools", label: "Tools", href: "/admin/tools", group: "Site", icon: ICONS.tools, current: at("/admin/tools") },
254  ];
255  /* The tab title is "<page> · dustinedwards.info": the menu entry the reader is in names the page. */
256  const page = nav.find((entry) => entry.current)?.label;
257
258  /* The shell names `[` in the collapse control's tip and leaves binding it to the app. It presses that
259     control, so the choice is remembered by the shell's own preference. Never while someone types. */
260  useEffect(() => {
261    const onKey = (event: KeyboardEvent) => {
262      if (event.key !== "[" || event.ctrlKey || event.metaKey || event.altKey) return;
263      const target = event.target;
264      if (target instanceof HTMLElement && target.closest("input, textarea, select, [contenteditable], .cm-editor")) return;
265      document.querySelector<HTMLButtonElement>('[data-cap-part="menu-toggle"]')?.click();
266    };
267    document.addEventListener("keydown", onKey);
268    return () => document.removeEventListener("keydown", onKey);
269  }, []);
270
271  return (
272    <>
273      <script nonce={rootData?.nonce} dangerouslySetInnerHTML={{ __html: THEME_SCRIPT }} />
274      <AdminShell
275        app="info"
276        page={page}
277        nav={nav}
278        tabs={nav.slice(0, 5)}
279        renderLink={RouterLink}
280        viewSite="/"
281        account={{
282          name: SITE.name,
283          initials: INITIALS,
284          role: "Admin",
285          email: loaderData.email,
286          // Access owns the session: the logout route sends the browser to Access's own endpoint, which a
287          // fetch cannot follow into a navigation, so a real form post (reloadDocument) does it.
288          onSignOut: () => (document.getElementById(SIGN_OUT_FORM) as HTMLFormElement | null)?.requestSubmit(),
289        }}
290        status={<span className="cap-muted">Signed in as {loaderData.email}</span>}
291        prefKey="admin-rail"
292      >
293        <MessageProvider>
294          {/* The shell leaves the page frame to the app: padding, width and the gap between blocks are Capsomer's. */}
295          <div className="cap-admin-page">
296            <Outlet />
297          </div>
298        </MessageProvider>
299      </AdminShell>
300      <Form id={SIGN_OUT_FORM} method="post" action="/admin/logout" reloadDocument hidden />
301    </>
302  );
303}
304
305/*
306 * The admin's own error page, in Capsomer: root's error page is the public site's and, with the public CSS
307 * no longer loaded here, would show unstyled. It keeps the admin's link back to the Overview.
308 */
309export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
310  const known = isRouteErrorResponse(error);
311  const title = known ? `${error.status} ${error.statusText}` : "Something went wrong";
312  return (
313    <main className="app-page">
314      <Empty
315        kind="failed"
316        title={title}
317        action={
318          <a className="cap-btn" href="/admin">
319            Go to the Overview
320          </a>
321        }
322      >
323        {known && typeof error.data === "string" ? error.data : "Nothing you wrote is lost."}
324      </Empty>
325    </main>
326  );
327}