app/routes/cv.charts[.json].ts

Functions

Imports

It imports app/db/cv.ts, app/lib/context.ts, app/lib/cv/entries.mjs, app/lib/cv/render-charts.ts, app/lib/cv/route.ts, app/lib/cv/view.mjs, app/lib/seo.ts. No module of this repo imports it.

Source

1import { readCv } from "~/db/cv";
2import { getEnv } from "~/lib/context";
3import { cvFacts } from "~/lib/cv/entries.mjs";
4import { renderCvCharts } from "~/lib/cv/render-charts";
5import { CV_CACHE_TAG } from "~/lib/cv/route";
6import { parseState } from "~/lib/cv/view.mjs";
7import { SHARED_CACHE_CONTROL } from "~/lib/seo";
8
9import type { Route } from "./+types/cv.charts[.json]";
10
11/*
12 * The CV's charts for one filter state, as the markup /cv renders them, for app/enhance/cv.ts to swap
13 * in when a filter changes. Drawn here rather than in the browser so the page does not download a
14 * chart renderer: Enarratio draws with Observable Plot and linkedom, about 480 KB of script, and its
15 * browser layer (enarratio/enhance) needs only the markup. A function of the query string and the CV
16 * alone, so it is shared-cached like the page, and carries the CV's tag so a CV save purges it.
17 */
18
19/** Widths come in 40px steps between a phone and a wide screen, so the cache sees a few dozen keys. */
20function widthParam(raw: string | null) {
21  const n = Number(raw);
22  if (!Number.isFinite(n) || n <= 0) return undefined;
23  return Math.min(1600, Math.max(280, Math.round(n / 40) * 40));
24}
25
26export async function loader({ request, context }: Route.LoaderArgs) {
27  const facts = cvFacts((await readCv(getEnv(context))).entries);
28  const url = new URL(request.url);
29  const charts = renderCvCharts(facts, parseState(url.searchParams), { width: widthParam(url.searchParams.get("w")) });
30  return new Response(JSON.stringify(charts), {
31    headers: {
32      "content-type": "application/json; charset=utf-8",
33      "cache-control": SHARED_CACHE_CONTROL,
34      "cache-tag": CV_CACHE_TAG,
35      "x-robots-tag": "noindex",
36    },
37  });
38}