@itoshinji/media-astro

An Astro image component for responsive delivery through media.hamazaki.me.

Installation

pnpm add @itoshinji/media-astro

Usage

---
import Image from "@itoshinji/media-astro";
---

<Image
  hash="0123456789abcdef0123456789abcdef0123456789abcdef0123456789abcdef"
  width={4032}
  height={3024}
  alt="A street scene seen during an afternoon walk"
  sizes="(min-width: 40rem) 640px, 100vw"
/>

Image renders AVIF first and uses WebP as a fallback. It generates responsive srcset values for w384, w640, w960, and w1280, allowing the browser to choose an appropriate image for the rendered size and device pixel ratio. URLs include the current image version automatically.

Pass the original image dimensions to width and height. They preserve the aspect ratio and reserve layout space while the image is loading; the rendered size is controlled by CSS.

Pass baseUrl to target a local or staging media Worker, and pass version to request a retained older image version.

<Image
  hash="0123456789abcdef0123456789abcdef0123456789abcdef0123456789abcdef"
  width={4032}
  height={3024}
  alt="A local fixture"
  baseUrl="http://localhost:8787"
  version={1}
/>

Low-level API

This package only exports the Astro component. Install @itoshinji/media-core directly when you need to construct image paths, validate hashes, or inspect presets and formats outside the component.

Development

The package publishes its Astro component source directly. Astro compiles the component as part of the consuming application. Its framework-independent runtime dependency, @itoshinji/media-core, is published as compiled ESM.

Run the static checks and unit tests from the monorepo:

pnpm --filter @itoshinji/media-astro check
pnpm --filter @itoshinji/media-astro test:fixture
pnpm --filter @itoshinji/media-astro test:package

The Astro demo imports the package through its public entry point. Before publishing, a separate smoke test packs both npm packages, installs their actual tarballs into a temporary Astro project, and runs astro check and astro build.

The package uses TypeScript 6 as a local development dependency because astro check currently relies on the programmatic compiler API that is not yet available from TypeScript 7. The rest of the monorepo can continue to use TypeScript 7.