Media / foldkit-media

Sixty seconds

ts
import { Option, Schema } from 'effect'
import { ImageAsset, Layout, Picture, Provider } from 'foldkit-media'

const hero = Schema.decodeUnknownSync(ImageAsset)({
  key: 'photos/hero.jpg',
  width: 2400,
  height: 1600,
  alpha: false,
  hash: null,
  placeholder: null,
})

const picture = Picture.derive({
  asset: hero,
  provider: Provider.cdnCgi(),
  layout: Layout.Constrained({ width: 720 }),
})

Option.map(picture, ({ img }) => img.srcset)
// "/cdn-cgi/image/width=320,format=auto,fit=scale-down/photos/hero.jpg 320w, …"
  • ImageAsset is a Schema: decode stored facts with it. Its optional fields (hash, placeholder) are null when stored and Option in code.
  • Provider.cdnCgi() writes Cloudflare's /cdn-cgi/image/ URLs: the zone resizes the original itself, and no code of yours runs. It only writes URLs.
  • Picture.derive returns Option.none() when the provider has no URL for any candidate; otherwise every attribute: sources, img, and the ratio.