Add header images for blog posts

Author: cloudlena

package-lock.json

@@ -1,23 +1,26 @@
 ---
+import type { ImageMetadata } from "astro";
 import { formatDate } from "../lib/formatters";
 import { useI18n } from "../i18n/utils";
 
 interface Props {
+  id: string;
   title: string;
   excerpt: string;
   author: string;
   date: Date;
   tags: string[];
-  slug: string;
+  image?: ImageMetadata | undefined;
 }
-const { title, excerpt, author, date, tags, slug } = Astro.props;
+const { id, title, excerpt, author, date, tags, image } = Astro.props;
 
-const formattedDate = formatDate(date);
 const { translatePath } = useI18n(Astro.url);
+
+const formattedDate = formatDate(date);
 ---
 
-<a href={translatePath(`/blog/${slug}`)}>
-  <article class="blog-card card-hover-effect">
+<a href={translatePath(`/blog/${id}`)}>
+  <article class={`blog-card card-hover-effect ${image ? "has-image" : ""}`}>
     <div class="blog-card-content">
       <h3>{title}</h3>
       <p class="excerpt">{excerpt}</p>

src/assets/blog/external-engineers.png

@@ -5,12 +5,13 @@ import cloudLarge from "../assets/cloud-large.svg";
 import cloudDarkMedium from "../assets/cloud-dark-medium.svg";
 import { useI18n } from "../i18n/utils";
 
-const { t, translatePath } = useI18n(Astro.url);
-
 interface Props {
   service: string;
 }
+
 const { service } = Astro.props;
+
+const { t, translatePath } = useI18n(Astro.url);
 ---
 
 <section id="container">

src/assets/blog/kubevirt.png

@@ -3,19 +3,19 @@ import { Image } from "astro:assets";
 import { useI18n } from "../i18n/utils";
 
 interface Props {
+  id: string;
   title: string;
-  slug: string;
   company: string;
   logo: ImageMetadata;
   quote: string;
   authorName: string;
   authorTitle: string;
-  authorImage?: ImageMetadata;
+  authorImage?: ImageMetadata | undefined;
 }
 
 const {
+  id,
   title,
-  slug,
   company,
   logo,
   quote,
@@ -27,7 +27,7 @@ const {
 const { translatePath } = useI18n(Astro.url);
 ---
 
-<a href={translatePath(`/customers/${slug}`)}>
+<a href={translatePath(`/customers/${id}`)}>
   <article class="card-hover-effect">
     <div class="image-container">
       <Image src={logo} alt={company} class="company-logo" />