From 502cecc005512431f607072fc62174847f45273b Mon Sep 17 00:00:00 2001
From: prototypa <prototypearea.dev@gmail.com>
Date: Tue, 7 May 2024 23:45:50 -0400
Subject: [PATCH] Better links in Post Items

---
 src/components/blog/GridItem.astro | 43 +++++++++++++++++++-----------
 src/components/blog/ListItem.astro | 30 +++++++++++++++++----
 2 files changed, 53 insertions(+), 20 deletions(-)

diff --git a/src/components/blog/GridItem.astro b/src/components/blog/GridItem.astro
index e1e99b1..cf7ed14 100644
--- a/src/components/blog/GridItem.astro
+++ b/src/components/blog/GridItem.astro
@@ -13,13 +13,30 @@ export interface Props {
 
 const { post } = Astro.props;
 const image = await findImage(post.image);
+
+const link = APP_BLOG?.post?.isEnabled ? getPermalink(post.permalink, 'post') : '';
 ---
 
 <article class="mb-6 transition">
   <div class="relative md:h-64 bg-gray-400 dark:bg-slate-700 rounded shadow-lg mb-6">
     {
-      image && (
-        <a href={getPermalink(post.permalink, 'post')}>
+      image &&
+        (link ? (
+          <a href={link}>
+            <Image
+              src={image}
+              class="w-full md:h-full rounded shadow-lg bg-gray-400 dark:bg-slate-700"
+              widths={[400, 900]}
+              width={400}
+              sizes="(max-width: 900px) 400px, 900px"
+              alt={post.title}
+              aspectRatio="16:9"
+              layout="cover"
+              loading="lazy"
+              decoding="async"
+            />
+          </a>
+        ) : (
           <Image
             src={image}
             class="w-full md:h-full rounded shadow-lg bg-gray-400 dark:bg-slate-700"
@@ -32,25 +49,21 @@ const image = await findImage(post.image);
             loading="lazy"
             decoding="async"
           />
-        </a>
-      )
+        ))
     }
   </div>
-  
+
+  <h3 class="text-xl sm:text-2xl font-bold leading-tight mb-2 font-heading dark:text-slate-300">
     {
-      !APP_BLOG?.post?.isEnabled ? (
-        post.title
-      ) : (
-        <a
-          href={getPermalink(post.permalink, 'post')}
-          class="inline-block hover:text-primary dark:hover:text-blue-700  transition ease-in duration-200"
-        >
-        <h3 class="mb-2 text-xl font-bold leading-tight sm:text-2xl font-heading">
+      link ? (
+        <a class="inline-block hover:text-primary dark:hover:text-blue-700 transition ease-in duration-200" href={link}>
           {post.title}
-        </h3> 
         </a>
+      ) : (
+        post.title
       )
     }
-  
+  </h3>
+
   <p class="text-muted dark:text-slate-400 text-lg">{post.excerpt}</p>
 </article>
diff --git a/src/components/blog/ListItem.astro b/src/components/blog/ListItem.astro
index db4dac5..3fef240 100644
--- a/src/components/blog/ListItem.astro
+++ b/src/components/blog/ListItem.astro
@@ -23,8 +23,26 @@ const link = APP_BLOG?.post?.isEnabled ? getPermalink(post.permalink, 'post') :
 
 <article class={`max-w-md mx-auto md:max-w-none grid gap-6 md:gap-8 ${image ? 'md:grid-cols-2' : ''}`}>
   {
-    image && (
-      <a class="relative block group" href={link ?? 'javascript:void(0)'}>
+    image &&
+      (link ? (
+        <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 && (
+              <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"
+                loading="lazy"
+                decoding="async"
+              />
+            )}
+          </div>
+        </a>
+      ) : (
         <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 && (
             <Image
@@ -40,8 +58,7 @@ const link = APP_BLOG?.post?.isEnabled ? getPermalink(post.permalink, 'post') :
             />
           )}
         </div>
-      </a>
-    )
+      ))
   }
   <div class="mt-2">
     <header>
@@ -74,7 +91,10 @@ const link = APP_BLOG?.post?.isEnabled ? getPermalink(post.permalink, 'post') :
       <h2 class="text-xl sm:text-2xl font-bold leading-tight mb-2 font-heading dark:text-slate-300">
         {
           link ? (
-            <a class="hover:text-primary dark:hover:text-blue-700 transition ease-in duration-200" href={link}>
+            <a
+              class="inline-block hover:text-primary dark:hover:text-blue-700 transition ease-in duration-200"
+              href={link}
+            >
               {post.title}
             </a>
           ) : (