LatestBlogPostItem: Make hero image clickable

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>

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>
 

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%;
   }