Update dependencies, remove Picture

src/components/blog/GridItem.astro

@@ -1,5 +1,5 @@
 ---
-import Picture from '~/components/core/Picture.astro';
+import { Picture } from '@astrojs/image/components'
 
 import { findImage } from '~/utils/images';
 import { getPermalink } from '~/utils/permalinks';
@@ -11,14 +11,18 @@ const image = await findImage(post.image);
 
 <article class="mb-6 transition">
 	<div class="relative h-0 pb-[56.25%] lg:h-64 overflow-hidden bg-gray-400 dark:bg-slate-700 rounded shadow-lg mb-6">
-		<Picture
-			src={image}
-			class="object-cover w-full lg:h-64 rounded shadow-lg bg-gray-400 dark:bg-slate-700"
-			widths={[400, 900]}
-			sizes="(max-width: 900px) 400px, 900px"
-			alt={post.title}
-			aspectRatio="16:9"
-		/>
+		{
+			image && (
+				<Picture
+					src={image}
+					class="object-cover w-full lg:h-64 rounded shadow-lg bg-gray-400 dark:bg-slate-700"
+					widths={[400, 900]}
+					sizes="(max-width: 900px) 400px, 900px"
+					alt={post.title}
+					aspectRatio="16:9"
+				/>
+			)
+		}
 	</div>
 	<h3 class="mb-2 text-xl font-bold leading-snug sm:text-2xl font-heading">
 		<a

src/components/blog/ListItem.astro

@@ -1,5 +1,5 @@
 ---
-import Picture from '~/components/core/Picture.astro';
+import { Picture } from '@astrojs/image/components';
 import PostTags from '~/components/atoms/Tags.astro';
 
 import { getPermalink } from '~/utils/permalinks';
@@ -16,14 +16,16 @@ const image = await findImage(post.image);
 		image && (
 			<a class="relative block group" href={getPermalink(post.slug, 'post')}>
 				<div class="relative h-0 pb-[56.25%] md:pb-[75%] md:h-80 lg:pb-[56.25%] overflow-hidden bg-gray-400 dark:bg-slate-700 rounded shadow-lg">
-					<Picture
-						src={image}
-						class="absolute inset-0 object-cover w-full h-full mb-6 rounded shadow-lg bg-gray-400 dark:bg-slate-700"
-						widths={[400, 900]}
-						sizes="(max-width: 900px) 400px, 900px"
-						alt={post.title}
-						aspectRatio="16:9"
-					/>
+					{image && (
+						<Picture
+							src={image}
+							class="absolute inset-0 object-cover w-full h-full mb-6 rounded shadow-lg bg-gray-400 dark:bg-slate-700"
+							widths={[400, 900]}
+							sizes="(max-width: 900px) 400px, 900px"
+							alt={post.title}
+							aspectRatio="16:9"
+						/>
+					)}
 				</div>
 			</a>
 		)

src/components/blog/SinglePost.astro

@@ -1,5 +1,5 @@
 ---
-import Picture from '~/components/core/Picture.astro';
+import { Picture } from '@astrojs/image/components'
 import PostTags from '~/components/atoms/Tags.astro';
 import SocialShare from '~/components/atoms/SocialShare.astro';
 

src/components/core/Picture.astro

@@ -1,43 +0,0 @@
----
-import { getPicture } from '@astrojs/image';
-
-const {
-	src,
-	alt,
-	sizes,
-	widths,
-	aspectRatio = 1,
-	formats = ['avif', 'webp'],
-	loading = 'lazy',
-	decoding = 'async',
-	class: className = '',
-	...attrs
-} = Astro.props;
-
-let picture = null;
-try {
-	picture =
-		src &&
-		(await getPicture({
-			src,
-			widths,
-			formats,
-			aspectRatio,
-		}));
-} catch (e) {
-	// continue regardless of error
-}
-
-const { image = {}, sources = [] } = picture || {};
----
-
-{
-	src && image?.src && (
-		<picture {...attrs}>
-			{sources.map((attrs) => (
-				<source {...attrs} sizes={sizes} />
-			))}
-			<img {...image} {loading} {decoding} {alt} class={className} />
-		</picture>
-	)
-}

src/components/widgets/Hero.astro

@@ -1,6 +1,6 @@
 ---
 import { Icon } from 'astro-icon';
-import Picture from '~/components/core/Picture.astro';
+import { Picture } from '@astrojs/image/components'
 ---
 
 <section>

src/components/widgets/Steps.astro

@@ -1,6 +1,6 @@
 ---
 import { Icon } from 'astro-icon';
-import Picture from '~/components/core/Picture.astro';
+import { Picture } from '@astrojs/image/components'
 ---
 
 <section class="px-4 py-16 sm:px-6 mx-auto lg:px-8 lg:py-20 max-w-6xl">