refactor: convert Picture component to use AstroImageTools

src/components/Picture.astro

@@ -1,13 +1,12 @@
 ---
 import cx from 'classnames';
 
-import { Picture } from '@astrojs/image/components';
+import { Picture } from 'astro-imagetools/components';
-import type { PictureComponentLocalImageProps } from '@astrojs/image/components';
+import type { PictureConfigOptions } from 'astro-imagetools';
 
-interface Props extends PictureComponentLocalImageProps {
+interface Props extends PictureConfigOptions {
 	class?: string;
 	noMargin?: boolean;
-	slot?: string;
 }
 
 const { class: className, noMargin, ...props } = Astro.props;

src/components/ProjectImage.astro

@@ -18,9 +18,9 @@ const { project } = Astro.props;
 		) : (
 			<Picture
 				alt={project.data.title}
-				aspectRatio={project.data.image.aspectRatio as number | `${number}:${number}`}
+				aspect={project.data.image.aspectRatio}
-				formats={['webp', 'avif']}
+				breakpoints={[300, 500, 700, 1000, 1200, 1500]}
-				widths={[300, 500, 700, 1000, 1200, 1500]}
+				format={['webp', 'avif']}
 				src={project.data.image.src}
 			/>
 		))

src/content/config.ts

@@ -17,7 +17,7 @@ const projectCollection = defineCollection({
 				src: z.string(),
 				height: z.number().optional(),
 				width: z.number().optional(),
-				aspectRatio: z.union([z.number(), z.string().regex(/^\d+:\d+$/)]),
+				aspectRatio: z.number().optional(),
 			})
 			.optional(),
 		sort: z.number().optional(),

src/layouts/AboutLayout.astro

@@ -16,10 +16,10 @@ const { frontmatter } = Astro.props;
 	>
 		<Picture
 			alt="Stefan Imhoff"
-			aspectRatio="1:1"
+			aspect={1}
+			breakpoints={[300, 512]}
 			class="[&_img]:xl:-scale-x-100"
 			src="/assets/images/ai-portrait-stefan-imhoff.png"
-			widths={[300, 512]}
 		/>
 	</div>
 	<slot />