app/lib/cover-image.mjs

Functions

Imports

It imports app/lib/media/classify.mjs, app/lib/media/widths.mjs. Imported by app/routes/blog.$slug.tsx.

Source

1import { dimensionsFromKey } from "./media/classify.mjs";
2import { CONTENT_SIZES, contentSrcSet } from "./media/widths.mjs";
3
4/**
5 * Uses the body images' ladder, since a width the page advertises and the transform route refuses
6 * is a broken image. A static `public/` cover has only one size, so it gets a plain `src`.
7 *
8 * @param {string} src
9 * @returns {{ srcSet?: string, sizes?: string }}
10 */
11export function coverResponsive(src) {
12  if (!src.startsWith("/media/")) return {};
13  return { srcSet: contentSrcSet(src.slice("/media/".length)), sizes: CONTENT_SIZES };
14}
15
16/**
17 * An uploaded key encodes its own dimensions, so no schema change is needed. A static cover has no
18 * key and returns `{}`: an invented size would distort the image, which is worse than no size.
19 *
20 * @param {string} src
21 * @returns {{ width?: number, height?: number }}
22 */
23export function coverDimensions(src) {
24  const dimensions = dimensionsFromKey(src);
25  return dimensions ? { width: dimensions.width, height: dimensions.height } : {};
26}