Migrate from @astrojs/image to Astro Assets and Unpic

src/components/blog/GridItem.astro

@@ -1,19 +1,19 @@
 ---
-import { Picture } from '@astrojs/image/components';
-import type { ImageMetadata } from 'astro';
-
 import { APP_BLOG_CONFIG } from '~/utils/config';
 import type { Post } from '~/types';
 
+import Image from '~/components/common/Image.astro';
+
 import { findImage } from '~/utils/images';
 import { getPermalink } from '~/utils/permalinks';
 
+
 export interface Props {
   post: Post;
 }
 
 const { post } = Astro.props;
-const image = (await findImage(post.image)) as ImageMetadata | undefined;
+const image = (await findImage(post.image));
 ---
 
 <article class="mb-6 transition">
@@ -21,15 +21,15 @@ const image = (await findImage(post.image)) as ImageMetadata | undefined;
     {
       image && (
         <a href={getPermalink(post.permalink, 'post')}>
-          <Picture
+          <Image
             src={image}
-            class="md:object-cover w-full md:w-auto md:h-full rounded shadow-lg bg-gray-400 dark:bg-slate-700"
+            class="w-full md:h-full rounded shadow-lg bg-gray-400 dark:bg-slate-700"
             widths={[400, 900]}
             width={400}
-            height={224}
             sizes="(max-width: 900px) 400px, 900px"
             alt={post.title}
             aspectRatio="16:9"
+            layout="cover"
             loading="lazy"
             decoding="async"
           />

src/components/blog/ListItem.astro

@@ -1,7 +1,7 @@
 ---
-import { Picture } from '@astrojs/image/components';
 import type { ImageMetadata } from 'astro';
 import { Icon } from 'astro-icon/components';
+import Image from '~/components/common/Image.astro';
 import PostTags from '~/components/blog/Tags.astro';
 
 import { APP_BLOG_CONFIG } from '~/utils/config';
@@ -27,10 +27,11 @@ const link = APP_BLOG_CONFIG?.post?.isEnabled ? getPermalink(post.permalink, 'po
       <a class="relative block group" href={link ?? 'javascript:void(0)'}>
         <div class="relative h-0 pb-[56.25%] md:pb-[75%] md:h-72 lg:pb-[56.25%] overflow-hidden bg-gray-400 dark:bg-slate-700 rounded shadow-lg">
           {image && (
-            <Picture
+            <Image
               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]}
+              width={900}
               sizes="(max-width: 900px) 400px, 900px"
               alt={post.title}
               aspectRatio="16:9"

src/components/blog/SinglePost.astro

@@ -1,7 +1,7 @@
 ---
 import { Icon } from 'astro-icon/components';
-import { Picture } from '@astrojs/image/components';
 
+import Image from '~/components/common/Image.astro';
 import PostTags from '~/components/blog/Tags.astro';
 import SocialShare from '~/components/common/SocialShare.astro';
 
@@ -53,19 +53,17 @@ const Content = post?.Content || null;
 
       {
         post.image ? (
-          <Picture
+          <Image
             src={post.image}
-            class="max-w-full lg:max-w-6xl mx-auto mb-6 sm:rounded-md bg-gray-400 dark:bg-slate-700"
+            class="max-w-full lg:max-w-[900px] mx-auto mb-6 sm:rounded-md bg-gray-400 dark:bg-slate-700"
             widths={[400, 900]}
             sizes="(max-width: 900px) 400px, 900px"
             alt={post?.excerpt || ''}
             loading="eager"
-            aspectRatio={16 / 9}
             width={900}
             height={506}
             loading="eager"
             decoding="async"
-            background={undefined}
           />
         ) : (
           <div class="max-w-3xl mx-auto px-4 sm:px-6">