Update dependencies, remove Picture

package.json

@@ -14,8 +14,8 @@
     "subfont": "subfont -ir --no-fallbacks --silent --root dist"
   },
   "devDependencies": {
-    "@astrojs/image": "^0.10.0",
+    "@astrojs/image": "^0.11.6",
-    "@astrojs/mdx": "^0.11.5",
+    "@astrojs/mdx": "^0.11.6",
     "@astrojs/partytown": "^1.0.1",
     "@astrojs/rss": "^1.0.3",
     "@astrojs/sitemap": "^1.0.0",
@@ -24,22 +24,22 @@
     "@astrolib/seo": "^0.2.1",
     "@fontsource/inter": "^4.5.14",
     "@tailwindcss/typography": "^0.5.8",
-    "@typescript-eslint/eslint-plugin": "^5.42.1",
+    "@typescript-eslint/eslint-plugin": "^5.44.0",
-    "@typescript-eslint/parser": "^5.42.1",
+    "@typescript-eslint/parser": "^5.44.0",
-    "astro": "^1.6.8",
+    "astro": "^1.6.10",
     "astro-icon": "^0.8.0",
-    "eslint": "^8.27.0",
+    "eslint": "^8.28.0",
     "eslint-plugin-astro": "^0.21.0",
     "eslint-plugin-jsx-a11y": "^6.6.1",
-    "limax": "^v2.1.0",
+    "limax": "^2.1.0",
     "mdast-util-to-string": "^3.1.0",
-    "prettier": "^2.7.1",
+    "prettier": "^2.8.0",
     "prettier-plugin-astro": "^0.7.0",
     "reading-time": "^1.5.0",
     "sharp": "^0.31.2",
     "subfont": "^6.12.2",
-    "tailwindcss": "^3.2.3",
+    "tailwindcss": "^3.2.4",
-    "typescript": "^4.8.4"
+    "typescript": "^4.9.3"
   },
   "engines": {
     "node": "^14.15.0 || >=16.0.0"

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}
+			image && (
-			class="object-cover w-full lg:h-64 rounded shadow-lg bg-gray-400 dark:bg-slate-700"
+				<Picture
-			widths={[400, 900]}
+					src={image}
-			sizes="(max-width: 900px) 400px, 900px"
+					class="object-cover w-full lg:h-64 rounded shadow-lg bg-gray-400 dark:bg-slate-700"
-			alt={post.title}
+					widths={[400, 900]}
-			aspectRatio="16:9"
+					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
+					{image && (
-						src={image}
+						<Picture
-						class="absolute inset-0 object-cover w-full h-full mb-6 rounded shadow-lg bg-gray-400 dark:bg-slate-700"
+							src={image}
-						widths={[400, 900]}
+							class="absolute inset-0 object-cover w-full h-full mb-6 rounded shadow-lg bg-gray-400 dark:bg-slate-700"
-						sizes="(max-width: 900px) 400px, 900px"
+							widths={[400, 900]}
-						alt={post.title}
+							sizes="(max-width: 900px) 400px, 900px"
-						aspectRatio="16:9"
+							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">