From cb6aef7faef7123c55827fac8d1817e1b9bcb290 Mon Sep 17 00:00:00 2001
From: prototypa <prototypearea.dev@gmail.com>
Date: Sat, 10 Sep 2022 01:08:51 -0400
Subject: [PATCH] Optimize images consumption

---
 src/components/blog/HighlightedPosts.astro |  9 ++++-----
 src/components/blog/ListItem.astro         | 12 +++++-------
 src/components/blog/SinglePost.astro       |  2 +-
 3 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/src/components/blog/HighlightedPosts.astro b/src/components/blog/HighlightedPosts.astro
index 2bf4e7b..833be3d 100644
--- a/src/components/blog/HighlightedPosts.astro
+++ b/src/components/blog/HighlightedPosts.astro
@@ -1,5 +1,5 @@
 ---
-import Picture from "~/components/core/Picture.astro";
+import { Image } from "@astrojs/image/components";
 
 import { findPostsByIds } from "~/utils/posts";
 import { findImage } from "~/utils/images";
@@ -36,12 +36,11 @@ const items = await Promise.all(
     {
       items.map((post) => (
         <article class="mb-6 transition">
-          <Picture
+          <Image
             src={post.image}
             class="object-cover w-full h-64 mb-6 rounded shadow-lg bg-gray-400 dark:bg-slate-700"
-            widths={[400]}
-            alt="Post 2 Image"
-            aspectRatio="16:9"
+            width={400}
+            alt={post.title}
           />
           <h3 class="mb-2 text-xl font-bold leading-snug sm:text-2xl font-heading">
             <a
diff --git a/src/components/blog/ListItem.astro b/src/components/blog/ListItem.astro
index 347b7bb..afcba37 100644
--- a/src/components/blog/ListItem.astro
+++ b/src/components/blog/ListItem.astro
@@ -1,5 +1,5 @@
 ---
-import Picture from "~/components/core/Picture.astro";
+import { Image } from "@astrojs/image/components";
 import PostTags from "~/components/atoms/Tags.astro";
 
 import { getPermalink } from "~/utils/permalinks";
@@ -16,13 +16,11 @@ const image = await findImage(post.image);
     <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}
-        class="absolute inset-0 w-full h-full object-cover mb-6 rounded shadow-lg"
-        widths={[400, 768]}
-        sizes="(max-width: 767px) 400px, 768px"
-        alt={post.description}
-        aspectRatio={1}
+        class="absolute inset-0 object-cover w-full h-full mb-6 rounded shadow-lg bg-gray-400 dark:bg-slate-700"
+        width={400}
+        alt={post.title}
       />
     </div>
   </a>
diff --git a/src/components/blog/SinglePost.astro b/src/components/blog/SinglePost.astro
index 315232b..3e78b99 100644
--- a/src/components/blog/SinglePost.astro
+++ b/src/components/blog/SinglePost.astro
@@ -32,7 +32,7 @@ const { post } = Astro.props;
       }
     </header>
     <div
-      class="container mx-auto px-8 sm:px-6 max-w-3xl prose prose-lg lg:prose-xl dark:prose-invert dark:prose-headings:text-slate-300 prose-md prose-headings:font-heading prose-headings:leading-tighter prose-headings:tracking-tighter prose-headings:font-bold prose-a:text-primary-600 dark:prose-a:text-primary-400 prose-img:rounded-md prose-img:shadow-lg mt-8"
+      class="container mx-auto px-6 sm:px-6 max-w-3xl prose prose-lg lg:prose-xl dark:prose-invert dark:prose-headings:text-slate-300 prose-md prose-headings:font-heading prose-headings:leading-tighter prose-headings:tracking-tighter prose-headings:font-bold prose-a:text-primary-600 dark:prose-a:text-primary-400 prose-img:rounded-md prose-img:shadow-lg mt-8"
     >
       <Fragment set:html={post.body} />
     </div>