From 02dff219dc1affc8ea01ee4f569f289b72df9cf8 Mon Sep 17 00:00:00 2001
From: Surjith S M <surjithctly@gmail.com>
Date: Sat, 12 Nov 2022 19:15:38 +0530
Subject: [PATCH] image to picture, bug fix

---
 src/layouts/BlogLayout.astro |  6 +++---
 src/pages/blog.astro         | 20 +++++++++-----------
 2 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/src/layouts/BlogLayout.astro b/src/layouts/BlogLayout.astro
index 848135e..cd0f7bf 100644
--- a/src/layouts/BlogLayout.astro
+++ b/src/layouts/BlogLayout.astro
@@ -17,7 +17,7 @@ const { frontmatter } = Astro.props;
         class="text-4xl lg:text-5xl font-bold lg:tracking-tight mt-1 lg:leading-tight">
         {frontmatter.title}
       </h1>
-      <div class="flex gap-2 mt-3 items-center">
+      <div class="flex gap-2 mt-3 items-center flex-wrap md:flex-nowrap">
         <span class="text-gray-400">
           {frontmatter.author}
         </span>
@@ -25,8 +25,8 @@ const { frontmatter } = Astro.props;
         <time class="text-gray-400" datetime={frontmatter.publishDate}>
           {getFormattedDate(frontmatter.publishDate)}
         </time>
-        <span class="text-gray-400">•</span>
-        <div class="flex gap-3">
+        <span class="text-gray-400 hidden md:block">•</span>
+        <div class="w-full md:w-auto flex flex-wrap gap-3">
           {
             frontmatter.tags.map((tag) => (
               <span class="text-sm text-gray-500">#{tag}</span>
diff --git a/src/pages/blog.astro b/src/pages/blog.astro
index 33983a4..1c28e49 100644
--- a/src/pages/blog.astro
+++ b/src/pages/blog.astro
@@ -1,5 +1,5 @@
 ---
-import { Image } from "@astrojs/image/components";
+import { Picture } from "@astrojs/image/components";
 import Container from "@components/container.astro";
 import Sectionhead from "@components/sectionhead.astro";
 import Layout from "@layouts/Layout.astro";
@@ -30,16 +30,14 @@ console.log(posts[0].frontmatter.image);
             <li>
               <a href={post.url}>
                 <div class="grid md:grid-cols-2 gap-5 md:gap-10 items-center">
-                  <div>
-                    <Image
-                      src={post.frontmatter.image}
-                      alt="Thumbnail"
-                      width={600}
-                      format="avif"
-                      aspectRatio="16:9"
-                      class="w-full rounded-md"
-                    />
-                  </div>
+                  <Picture
+                    src={post.frontmatter.image}
+                    widths={[400, 800]}
+                    aspectRatio="16:9"
+                    sizes="(max-width: 800px) 100vw, 800px"
+                    alt="descriptive text"
+                    class="w-full rounded-md"
+                  />
                   <div>
                     <span class="text-blue-400 uppercase tracking-wider text-sm font-medium">
                       {post.frontmatter.category}