website/components/Picture.tsx

import { unwrapSignalOrValue } from ':src/utils.ts'
import { Ensure } from ':types'
import { JSX } from 'preact'

export type PictureProps =
	& { formats: string[] }
	& Ensure<JSX.HTMLAttributes<HTMLImageElement>, 'src' | 'alt' | 'loading'>

export function Picture(
	{ formats, src, ...props }: PictureProps,
) {
	const groups = unwrapSignalOrValue(src)?.match(/(?<path>.*)(?<ext>\.\w+)/)
		?.groups
	if (groups === undefined) {
		throw new SyntaxError(`unable to parse path of "${src.valueOf()}"`)
	}

	const { path } = groups

	return (
		<picture>
			{formats.map((format) => (
				<source type={`image/${format}`} srcset={`${path}.${format}`} />
			))}
			<img src={src} {...props} />
		</picture>
	)
}