From 2289c0cf447baa6e67caab09265b8708e2b7a2a8 Mon Sep 17 00:00:00 2001
From: Thuan Bui <9248622+10h30@users.noreply.github.com>
Date: Fri, 2 Jan 2026 14:09:12 +0700
Subject: [PATCH] Add MarkdownPostLayout component and update post files to use
 it for consistent layout

---
 src/layouts/MarkdownPostLayout.astro | 12 ++++++++++++
 src/pages/posts/post-1.md            |  5 +----
 src/pages/posts/post-2.md            |  1 +
 src/pages/posts/post-3.md            |  1 +
 4 files changed, 15 insertions(+), 4 deletions(-)
 create mode 100644 src/layouts/MarkdownPostLayout.astro

diff --git a/src/layouts/MarkdownPostLayout.astro b/src/layouts/MarkdownPostLayout.astro
new file mode 100644
index 0000000..e21659b
--- /dev/null
+++ b/src/layouts/MarkdownPostLayout.astro
@@ -0,0 +1,12 @@
+---
+import BaseLayout from "./BaseLayout.astro";
+const { frontmatter } = Astro.props;
+---
+
+<BaseLayout pageTitle={frontmatter.title}>
+  <p>Published on: {frontmatter.pubDate.toString().slice(0, 10)}</p>
+  <p>Written by {frontmatter.author}</p>
+  <img src={frontmatter.image.url} width='300' alt={frontmatter.image.alt} />
+  <slot />
+</BaseLayout>
+<meta charset='utf-8' />
diff --git a/src/pages/posts/post-1.md b/src/pages/posts/post-1.md
index d5ab08b..01cb0b2 100644
--- a/src/pages/posts/post-1.md
+++ b/src/pages/posts/post-1.md
@@ -1,4 +1,5 @@
 ---
+layout: ../../layouts/MarkdownPostLayout.astro
 title: 'My First Blog Post'
 pubDate: 2022-07-01
 description: 'This is the first post of my new Astro blog.'
@@ -8,10 +9,6 @@ image:
     alt: 'The Astro logo on a dark background with a pink glow.'
 tags: ["astro", "blogging", "learning in public"]
 ---
-# My First Blog Post
-
-Published on: 2022-07-01
-
 Welcome to my _new blog_ about learning Astro! Here, I will share my learning journey as I build a new website.
 
 ## What I've accomplished
diff --git a/src/pages/posts/post-2.md b/src/pages/posts/post-2.md
index 2c06636..33ca6f5 100644
--- a/src/pages/posts/post-2.md
+++ b/src/pages/posts/post-2.md
@@ -1,4 +1,5 @@
 ---
+layout: ../../layouts/MarkdownPostLayout.astro
 title: My Second Blog Post
 author: Astro Learner
 description: "After learning some Astro, I couldn't stop!"
diff --git a/src/pages/posts/post-3.md b/src/pages/posts/post-3.md
index 4c8cc5d..c955e17 100644
--- a/src/pages/posts/post-3.md
+++ b/src/pages/posts/post-3.md
@@ -1,4 +1,5 @@
 ---
+layout: ../../layouts/MarkdownPostLayout.astro
 title: My Third Blog Post
 author: Astro Learner
 description: "I had some challenges, but asking in the community really helped!"