From 0683c326c2b7be27866d36605ce87cdd5e044b62 Mon Sep 17 00:00:00 2001
From: Marc Wolf <wolf@interactive-developer.de>
Date: Mon, 13 Mar 2023 20:35:43 +0100
Subject: [PATCH] Wrap blog grid item image in a tag

To also get to the post via the image of one of the blog posts.
---
 src/components/blog/GridItem.astro | 26 ++++++++++++++------------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/components/blog/GridItem.astro b/src/components/blog/GridItem.astro
index 13339ad..470fcad 100644
--- a/src/components/blog/GridItem.astro
+++ b/src/components/blog/GridItem.astro
@@ -19,18 +19,20 @@ const image = await findImage(post.image);
   <div class="relative md:h-64 bg-gray-400 dark:bg-slate-700 rounded shadow-lg mb-6">
     {
       image && (
-        <Picture
-          src={image}
-          class="md:object-cover w-full md:w-auto 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"
-          loading="lazy"
-          decoding="async"
-        />
+        <a href={getPermalink(post.permalink, 'post')}>
+          <Picture
+            src={image}
+            class="md:object-cover w-full md:w-auto 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"
+            loading="lazy"
+            decoding="async"
+          />
+        </a>
       )
     }
   </div>