refactor: extract a Markdown component

website/src/components/Markdown.astro

@@ -0,0 +1,3 @@
+<div class="markdown">
+  <slot />
+</div>

website/src/layouts/DailyEmailLayout.astro

@@ -1,15 +1,16 @@
 ---
 import BaseLayout from './PageLayout.astro'
 import DailyEmailForm from '../components/DailyEmailForm.astro'
+import Markdown from '../components/Markdown.astro'
 
 const { title } = Astro.props.frontmatter || Astro.props;
 ---
 
 <BaseLayout title={title}>
   <div class="space-y-16">
-    <div class="markdown">
+    <Markdown>
       <slot />
-    </div>
+    </Markdown>
 
     <DailyEmailForm />
   </div>

website/src/layouts/PageLayout.astro

@@ -1,11 +1,12 @@
 ---
 import BaseLayout from './Layout.astro'
+import Markdown from '../components/Markdown.astro'
 
 const { title } = Astro.props.frontmatter || Astro.props;
 ---
 
 <BaseLayout title={title}>
-  <div class="markdown">
+  <Markdown>
     <slot/>
-  </div>
+  </Markdown>
 </BaseLayout>

website/src/pages/blog/[slug].astro

@@ -1,5 +1,6 @@
 ---
 import Layout from '../../layouts/Layout.astro'
+import Markdown from '../../components/Markdown.astro'
 
 export async function getStaticPaths() {
   const posts = await Astro.glob('../../posts/*.md')
@@ -22,8 +23,8 @@ const { title } = Astro.props.post.frontmatter
 
 <Layout title={title}>
   <div class="space-y-6">
-    <div class="markdown">
+    <Markdown>
       <Content />
-    </div>
+    </Markdown>
   </div>
 </Layout>

website/src/pages/talks/[slug].astro

@@ -1,5 +1,6 @@
 ---
 import Layout from '../../layouts/Layout.astro'
+import Markdown from '../../components/Markdown.astro'
 
 export async function getStaticPaths() {
   const talks = await Astro.glob('../../talks/*.md')
@@ -21,9 +22,9 @@ const { title, speakerdeck, video } = Astro.props.talk.frontmatter
 
 <Layout title={title}>
   <div class="space-y-6">
-    <div class="markdown">
+    <Markdown>
       <Content />
-    </div>
+    </Markdown>
 
     {speakerdeck && speakerdeck.id && (
       <div>