p5.js-website
p5.js-website copied to clipboard
Change content schemas to require alt text with an image
In our content schemas, it is possible to provide an featured image but no alt text for it. Our schemas hold them separately as in:
featuredImage: image().optional(),
featuredImageAlt: z.string().optional(),
a schema like this would prevent authors from adding an image without also including alt text:
featuredImage: z.object({
src: image(),
alt: z.string()
}).optional(),
which also makes it possible to provide a default with accurate alt text, as in:
featuredImage: z.object({
src: image(),
alt: z.string()
}).optional().default({
src: PlaceholderImage
alt: 'the p5 logo in a grey box'
}),
This makes sense. I am the one that originally switched it from this and when I read this I was like "yeah that's a great idea. I have no idea why I changed it to begin with" but then I just tried switching to this approach and it isn't possible.
The return of "image" is much more complex than a single src string. It includes file information related to the optimization and static build and it isn't transformed into that more complex object until build time. I may be missing something but I just tried for a while and there wasn't a way to package the image()
into anything other than a base property of the schema. This would explain why the Astro documentation doesn't put the image()
in a property of an object.
Edit: Still trying to figure out an elegant way to do this. Could by another mistake that I am making. Will update if I find a way