adding images to blog posts

src/components/Article.astro

@@ -1,22 +1,28 @@
 ---
+import { Image } from "astro:assets";
 import { Card, CardTitle, CardContent, CardFooter } from "./ui/card";
 const { slug, data } = Astro.props;
 ---
 <Card
   className="relative flex flex-col items-start p-4 bg-white dark:bg-zinc-800 shadow-lg border border-zinc-200 dark:border-zinc-700 rounded-lg"
 >
-  <CardTitle className="text-base font-semibold tracking-tight text-zinc-800 dark:text-zinc-100 mb-5 p-6 pt-1">
+  <CardTitle className="text-base font-semibold tracking-tight text-zinc-800 dark:text-zinc-100 px-2 pt-2 pb-4">
     <a href={`/blog/${slug}/`}>
-      {data.title}
+      <Image src={data.heroImage} width="512" alt={data.title} />
     </a>
   </CardTitle>
   <CardContent>
+    <div class="flex flex-col">
+    <a href={`/blog/${slug}/`}>
+      {data.title}
+    </a>
     <time class="text-sm text-zinc-400 dark:text-zinc-500" datetime={data.date}>
       {new Date(data.date).toLocaleDateString("en-US", { year: "numeric", month: "long", day: "numeric" })}
     </time>
+    </div>
     <p class="mt-2 text-sm text-zinc-600 dark:text-zinc-400">{data.description}</p>
   </CardContent>
-  <CardFooter className="mt-4 flex items-center text-sm font-medium text-teal-500 dark:text-teal-400">
+  <CardFooter className="flex items-center text-sm font-medium text-teal-500 dark:text-teal-400">
     <a href={`/blog/${slug}/`} class="flex items-center gap-1">
       Read article
       <svg viewBox="0 0 16 16" fill="none" aria-hidden="true" class="h-4 w-4 stroke-current">

src/components/Content.astro

@@ -9,7 +9,7 @@ const allPosts = await getCollection("blog");
 const posts = allPosts
   .filter((a) => a.data.draft != true)
   .sort((a, b) => Date.parse(b.data.date) - Date.parse(a.data.date))
-  .slice(0, 3);
+  .slice(0, 2);
 
 const workExperiences = [
   { logo: "pdl.jpg", company: "People Data Labs", role: "Senior Software Engineer", start: "2023-05" },
@@ -18,17 +18,18 @@ const workExperiences = [
   {
     logo: "trackmaven.jpg",
     company: "TrackMaven",
-    role: "Software Engineer -> Senior Software Engineer",
+    role: "Software Engineer to Senior Software Engineer",
     start: "2014-03",
     end: "2019-08",
   },
   { logo: "koansys.jpg", company: "Koansys", role: "Application Developer", start: "2012-02", end: "2014-03" },
+  { logo: "aetna.png", company: "Aetna", role: "Trainer", start: "2011-06", end: "2012-01" },
 ];
 ---
 
 <div class="mx-auto grid max-w-xl grid-cols-1 gap-y-10 lg:max-w-none lg:grid-cols-2">
   <div class="flex flex-col gap-5">
-    <h2 class="flex text-sm font-semibold text-zinc-900 dark:text-zinc-100">Recent Blog Posts</h2>
+    <h2 class="flex text-sm font-semibold text-zinc-900 dark:text-zinc-100">Last 2 Blog Posts</h2>
     {posts.map((article) => <Article {...article} />)}
   </div>
   <div class="space-y-10 lg:pl-16">

src/components/WorkExperience.astro

@@ -1,4 +1,5 @@
 ---
+import { parseISO, format } from "date-fns";
 import type { ImageMetadata } from 'astro';
 import { Image } from 'astro:assets';
 
@@ -15,6 +16,14 @@ const { company, role, startDate, endDate, logo } = Astro.props;
 
 const images = import.meta.glob<{ default: ImageMetadata }>('/src/assets/companies/*.{jpeg,jpg,png,gif}');
 if (!images[`/src/assets/companies/${logo}`]) throw new Error(`"${imagePath}" does not exist in glob: "src/assets/*.{jpeg,jpg,png,gif}"`);
+
+const formatDate = (datestr) => {
+  if ( datestr == undefined) {
+    return "Present"
+  } else {
+    return format(parseISO(datestr), "LLLL yyyy")
+    }
+}
 ---
 
 <Card
@@ -31,13 +40,9 @@ if (!images[`/src/assets/companies/${logo}`]) throw new Error(`"${imagePath}" do
       <p class="text-xs text-zinc-500 dark:text-zinc-400">{role}</p>
     </div>
   </div>
-  <CardFooter className="text-xs text-zinc-400 dark:text-zinc-500">
-    <time datetime={startDate}>
-      {new Date(startDate).toLocaleDateString("en-US", { year: "numeric", month: "long" })}
-    </time>{" "}
-    -{" "}
-    <time datetime={endDate}>
-      {new Date(endDate).toLocaleDateString("en-US", { year: "numeric", month: "long" })}
-    </time>{" "}
+  <CardFooter className="p-0 text-xs text-zinc-400 dark:text-zinc-500">
+    { formatDate(startDate) }
+    through
+    { formatDate(endDate) }
   </CardFooter>
 </Card>