Files
gerbeur/api/lib/static.ts
khannurien 16b510764c
All checks were successful
Build and Publish Docker Image / build-and-push (push) Successful in 45s
v3: the frontend ships compressed, caches for good, and stops reaching for other people's servers — a review of the bundle's size found the server was the biggest cost. Oak's send() compressed nothing and sent every hashed chunk with max-age=0, so a first visit to the home page moved about 710 KB of JS and CSS where 200 KB would do, and every later one revalidated some thirty files. The build now writes .br and .gz next to every JS, CSS, JSON and SVG file (a precompress plugin, brotli 11), which send() already serves when the browser accepts them; /assets and /emojibase are cached for a year as immutable, index.html is no-cache, and static responses carry Vary: Accept-Encoding. A missing file under either prefix is a 404 rather than index.html with a 200, which an open tab after a deploy used to try to run as a script; the app now reloads on vite:preloadError, at most once a minute. manualChunks sent everything in node_modules to one vendor chunk, so react-hook-form and frimousse loaded with every page though only the lazy form and editor chunks use them, and its markdown rule missed hast, vfile, unified and property-information while every feed loads Markdown through DumpCard anyway; only react, react-dom, scheduler and react-router get a chunk of their own now, the rest is left to the bundler. Up-front JS goes from 133 to 96 KB gzip, the home page from 178 to 160. Fonts: index.html blocked rendering on a Google Fonts stylesheet, opening two more hosts and handing each visitor's IP to Google; they come from @fontsource now, with src/fonts.css declaring only the latin and latin-ext faces (the packages' own CSS declares every subset, which added 6 KB gzip to the stylesheet), so Vite hashes the woff2 files into /assets and a browser still only downloads its theme's font. The families are the variable builds ("Saira Variable" and so on); Fraunces keeps its opsz, SOFT and WONK axes. Emoji: frimousse fetched emojibase-data@latest from jsDelivr, unpinned and third-party; emojibase-data 17.0.0 is a dependency now, its data and messages for each lingui locale are emitted under /emojibase/17.0.0 (served from node_modules in dev), and the picker is pointed there.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-09-27 11:44:08 +00:00

68 lines
2.3 KiB
TypeScript

import { Context, Next, send } from "@oak/oak";
import { BANDCAMP_PLAYER, OG_SITE_NAME, SITE_EMOJI } from "../config.ts";
import { emojiToCodepoint } from "./site-icons.ts";
const ICON_VERSION = emojiToCodepoint(SITE_EMOJI);
async function serveIndexHtml(
context: Context<Record<string, object>>,
root: string,
) {
const filePath = `${root}/index.html`;
const raw = await Deno.readTextFile(filePath);
const html = raw
.replaceAll("__SITE_NAME__", OG_SITE_NAME)
.replaceAll("__SITE_EMOJI__", SITE_EMOJI)
.replaceAll("__ICON_VERSION__", ICON_VERSION)
.replaceAll("__BANDCAMP_PLAYER__", BANDCAMP_PLAYER);
context.response.type = "text/html";
// Always revalidated: it names the hashed chunks of the current build.
context.response.headers.set("Cache-Control", "no-cache");
context.response.body = html;
}
// Build output whose URL changes whenever its content does: Vite's hashed
// chunks, and the emoji data under its package version (see vite.config.ts).
const IMMUTABLE_PREFIXES = ["/assets/", "/emojibase/"];
const ONE_YEAR_MS = 365 * 24 * 60 * 60 * 1000;
export function routeStaticFilesFrom(staticPaths: string[]) {
return async (context: Context<Record<string, object>>, next: Next) => {
const pathname = context.request.url.pathname;
// Serve index.html with runtime placeholder replacement
if (pathname === "/" || pathname === "/index.html") {
await serveIndexHtml(context, staticPaths[0]);
return;
}
const immutable = IMMUTABLE_PREFIXES.some((prefix) =>
pathname.startsWith(prefix)
);
for (const path of staticPaths) {
try {
// send() picks a prebuilt .br or .gz sibling when the browser accepts it.
await send(context, pathname, {
root: path,
...(immutable && { maxage: ONE_YEAR_MS, immutable: true }),
});
context.response.headers.append("Vary", "Accept-Encoding");
return;
} catch {
continue;
}
}
// A chunk from an older build (an open tab after a deploy) must fail as a
// 404, not load index.html as a script; the app reloads on that failure.
if (immutable) {
context.response.status = 404;
return;
}
// SPA fallback: serve index.html so client-side routes work on direct navigation
await serveIndexHtml(context, staticPaths[0]);
await next();
};
}