@gomani/assets

The framework-owned asset pipeline for Gomani: optimised images, subsetted fonts, and cacheable output — automatically.

Because images, fonts, and media usually dominate bytes, Gomani owns them (P6): the developer who simply references an asset inherits optimised, correctly-sized, cacheable output. The client-safe entry is the <Image> primitive + the registry; the Node-only processing (sharp, font subsetting) lives at @gomani/assets/build, so a client bundle never pulls in a native dependency.

Images

Drop source images in assets/ and reference them with <Image>:

import { Image } from '@gomani/assets';

<Image src="hero.jpg" alt="A woven banner" sizes="(max-width: 760px) 100vw, 720px" />;

gomani build transcodes each source to AVIF + WebP + a baseline raster at responsive widths, writes content-hashed files, and generates a blur placeholder. <Image> emits a <picture> with the modern formats, a responsive srcset, intrinsic width/height (no layout shift), loading="lazy", and the placeholder — and on the lean network tier it withholds the large variants. In dev (unprocessed) it degrades to a plain <img>.

_gomani/assets/hero-400.<hash>.avif   5.3 KB
_gomani/assets/hero-800.<hash>.avif  12.5 KB
_gomani/assets/hero-1200.<hash>.webp 20.4 KB   … + webp + jpeg at each width

Fonts

Drop fonts in assets/fonts/ and reference the family (by filename) in your CSS with a system-font fallback:

.title {
  font-family: 'Display', system-ui, sans-serif;
}

gomani build subsets each font per route, to exactly that page's glyphs — the multilingual↔subsetting tension resolved by subsetting on actual content, not the font's total capability — writes a content-hashed woff2, and injects the @font-face (with font-display: swap) into the page's head. A page ships only the glyphs its language and text require; scripts absent from a page cost it nothing.

License

MIT © Venancio Gomani / Kwacha Kulture.