app/lib/media/widths.mjs

Functions

Imports

It imports no other module of this repo. Imported by app/lib/content/pipeline.mjs, app/lib/cover-image.mjs, app/routes/media.$.ts.

Source

1// Both sets are CLOSED: the Images binding bills per unique transformation, so an open set lets any
2// caller mint billed transforms. The pipeline and the route share them; a mismatch is a 400 mid-article.
3
4export const THUMB_WIDTHS = [160, 320, 640];
5
6// The 44rem prose column is about 704 CSS px, so 1408 physical px on a 2x display.
7const CONTENT_WIDTHS = [640, 1024, 1408];
8
9export const ALL_WIDTHS = [...new Set([...THUMB_WIDTHS, ...CONTENT_WIDTHS])];
10
11// CSS pixels, never physical: the browser multiplies by the device pixel ratio itself.
12export const CONTENT_SIZES = "(min-width: 46rem) 704px, calc(100vw - 2rem)";
13
14/**
15 * @param {string} key
16 */
17export function contentSrcSet(key) {
18  return CONTENT_WIDTHS.map((width) => `/media/${key}?w=${width} ${width}w`).join(", ");
19}