From 1724b6f49e673aefcf8d8db654ac6224ea1e6ded Mon Sep 17 00:00:00 2001
From: Thuan Bui <9248622+10h30@users.noreply.github.com>
Date: Fri, 2 Jan 2026 14:37:49 +0700
Subject: [PATCH] Add BlogPost component and update blog and tag pages to
 display posts dynamically

---
 src/layouts/BlogPost.astro |  8 ++++++++
 src/pages/blog.astro       | 13 +++++++++----
 src/pages/posts/post-4.md  | 12 ++++++++++++
 src/pages/tags/[tag].astro | 37 +++++++++++++++++++++++++++++++++++++
 4 files changed, 66 insertions(+), 4 deletions(-)
 create mode 100644 src/layouts/BlogPost.astro
 create mode 100644 src/pages/posts/post-4.md
 create mode 100644 src/pages/tags/[tag].astro

diff --git a/src/layouts/BlogPost.astro b/src/layouts/BlogPost.astro
new file mode 100644
index 0000000..c7e9a1e
--- /dev/null
+++ b/src/layouts/BlogPost.astro
@@ -0,0 +1,8 @@
+---
+const { url } = Astro.props;
+const { title } = Astro.props;
+---
+
+<li>
+  <a href={url}>{title}</a>
+</li>
diff --git a/src/pages/blog.astro b/src/pages/blog.astro
index 1225d17..b9a8e7e 100644
--- a/src/pages/blog.astro
+++ b/src/pages/blog.astro
@@ -1,14 +1,19 @@
 ---
 import BaseLayout from "../layouts/BaseLayout.astro";
-import "../styles/global.css";
+import BlogPost from "../layouts/BlogPost.astro";
+const allPosts = Object.values(
+  import.meta.glob("./posts/*.md", { eager: true })
+);
 const pageTitle = "Blog";
 ---
 
 <BaseLayout pageTitle={pageTitle}>
   <p>This is where I will post about my journey learning Astro.</p>
   <ul>
-    <li><a href='/posts/post-1/'>Post 1</a></li>
-    <li><a href='/posts/post-2/'>Post 2</a></li>
-    <li><a href='/posts/post-3/'>Post 3</a></li>
+    {
+      allPosts.map((post: any) => (
+        <BlogPost url={post.url} title={post.frontmatter.title} />
+      ))
+    }
   </ul>
 </BaseLayout>
diff --git a/src/pages/posts/post-4.md b/src/pages/posts/post-4.md
new file mode 100644
index 0000000..f295152
--- /dev/null
+++ b/src/pages/posts/post-4.md
@@ -0,0 +1,12 @@
+---
+layout: ../../layouts/MarkdownPostLayout.astro
+title: My Fourth Blog Post
+author: Astro Learner
+description: "This post will show up on its own!"
+image:
+    url: "https://docs.astro.build/default-og-image.png"
+    alt: "The word astro against an illustration of planets and stars."
+pubDate: 2022-08-08
+tags: ["astro", "successes"]
+---
+This post should show up with my other blog posts, because `import.meta.glob()` is returning a list of all my posts in order to create my list.
diff --git a/src/pages/tags/[tag].astro b/src/pages/tags/[tag].astro
new file mode 100644
index 0000000..85cd33f
--- /dev/null
+++ b/src/pages/tags/[tag].astro
@@ -0,0 +1,37 @@
+---
+import BaseLayout from "../../layouts/BaseLayout.astro";
+import BlogPost from "../../layouts/BlogPost.astro";
+
+export async function getStaticPaths() {
+  const allPosts = Object.values(
+    import.meta.glob("../posts/*.md", { eager: true })
+  );
+  const uniqueTags = [
+    ...new Set(allPosts.map((post: any) => post.frontmatter.tags).flat()),
+  ];
+
+  return uniqueTags.map((tag) => {
+    const filteredPosts = allPosts.filter((post: any) =>
+      post.frontmatter.tags.includes(tag)
+    );
+    return {
+      params: { tag },
+      props: { posts: filteredPosts },
+    };
+  });
+}
+
+const { tag } = Astro.params;
+const { posts } = Astro.props;
+---
+
+<BaseLayout pageTitle={tag}>
+  <p>Posts tagged with {tag}</p>
+  <ul>
+    {
+      posts.map((post: any) => (
+        <BlogPost url={post.url} title={post.frontmatter.title} />
+      ))
+    }
+  </ul>
+</BaseLayout>