feat: display image

Author: tonyaellie

src/components/NewsletterLayout.astro

@@ -1,5 +1,6 @@
 ---
 import Layout from './Layout.astro';
+import { Image } from '@astrojs/image/components';
 
 import type { MarkdownLayoutProps } from 'astro';
 
@@ -16,9 +17,16 @@ const { frontmatter, headings } = Astro.props;
 
 <Layout title={frontmatter.title}>
   <div class="mx-auto max-w-2xl">
-    <div class="pb-4">
+    <div class="pb-8">
       <h1 class="text-2xl font-bold">{frontmatter.title}</h1>
       <p class="text-gray-500">{frontmatter.date}</p>
+      <Image
+        class="rounded-lg w-full my-4"
+        src={`/assets/newsletter/${frontmatter.date}.png`}
+        alt={frontmatter.title}
+        width={512}
+        height={288}
+      />
       <p>{frontmatter.description}</p>
       <div>
         <h2 class="text-lg font-semibold">Table of Contents</h2>