From ccd22a110d7aa99b9c48b4a4a69ff8ff00c43e43 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ren=C3=A9=20Dudfield?= <renedudfield@microsoft.com>
Date: Tue, 13 Aug 2024 09:32:02 +0200
Subject: [PATCH] LatestBlogPostItem: Make hero image clickable
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

I couldn't figure out how to click on the latest blog post.
Before this there was only the "Read more" link at the end
of the Latest content.

Making the big image clickable would make it easier to
navigate to the latest blog post.

Signed-off-by: René Dudfield <renedudfield@microsoft.com>
---
 .../LatestBlogPostItem/LatestBlogPostItem.tsx        | 12 +++++++-----
 .../LatestBlogPostItem/styles.module.css             | 11 +++++++----
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/theme/BlogPostItems/LatestBlogPostItem/LatestBlogPostItem.tsx b/src/theme/BlogPostItems/LatestBlogPostItem/LatestBlogPostItem.tsx
index 4945ef5..f19d36c 100644
--- a/src/theme/BlogPostItems/LatestBlogPostItem/LatestBlogPostItem.tsx
+++ b/src/theme/BlogPostItems/LatestBlogPostItem/LatestBlogPostItem.tsx
@@ -11,11 +11,13 @@ export function LatestBlogPostItem({ children }) {
 
   return (
     <div className={styles.container}>
-      <img
-        src={useBaseUrl(post.assets.image)}
-        className={styles.image}
-        alt=""
-      />
+      <Link to={post.metadata.permalink} className={styles.heroImage}>
+        <img
+          src={useBaseUrl(post.assets.image)}
+          className={styles.image}
+          alt={post.metadata.title}
+        />
+      </Link>
       <div className={styles.metaContainer}>
         <h2 className={styles.title}>{post.metadata.title}</h2>
 
diff --git a/src/theme/BlogPostItems/LatestBlogPostItem/styles.module.css b/src/theme/BlogPostItems/LatestBlogPostItem/styles.module.css
index c2fae70..54dacab 100644
--- a/src/theme/BlogPostItems/LatestBlogPostItem/styles.module.css
+++ b/src/theme/BlogPostItems/LatestBlogPostItem/styles.module.css
@@ -14,12 +14,15 @@
   gap: 2rem;
 }
 
-.image {
-  width: 50%;
+a.heroImage {
+  flex-shrink: 0;
   object-fit: cover;
+  width: 50%;
+}
+.image {
   border-radius: var(--ifm-card-border-radius);
   border: 1px solid #ffd500;
-  flex-shrink: 0;
+  object-fit: cover;
 }
 
 .title {
@@ -35,7 +38,7 @@
   .container {
     flex-direction: column;
   }
-  .image {
+  a.heroImage, a.heroImage img {
     height: 250px;
     width: 100%;
   }