Blog improvement with nested layout and component

Author: mTixier

tutorial/src/components/BlogPost.astro

@@ -0,0 +1,5 @@
+---
+const { url, title } = Astro.props;
+---
+
+<li><a href={url}>{title}</a></li>

tutorial/src/layouts/MDpostLayout.astro

@@ -0,0 +1,10 @@
+---
+import BaseLayout from './BaseLayout.astro';
+const { frontmatter } = Astro.props;
+---
+<BaseLayout pgTitle={frontmatter.title}>
+	<p>Written by {frontmatter.author}</p>
+	<p>Published on: {frontmatter.pubDate.toString().slice(0,10)}</p>
+	<img src={frontmatter.image.url} width="300" alt={frontmatter.image.alt} />
+	<slot />
+</BaseLayout>

tutorial/src/pages/blog.astro

@@ -1,16 +1,17 @@
 ---
 import '../styles/global.css';
 import BaseLayout from '../layouts/BaseLayout.astro';
+import BlogPost from '../components/BlogPost.astro';
+
+const allPosts = Object.values(import.meta.glob('./posts/*.md', { eager: true }));
 
 const pgTitle = "My Astro Learning Blog";
 ---
 
 <BaseLayout pgTitle={pgTitle}>
 	  <p>This is where I will post about my journey learning Astro.</p>	
 	  <ul>
-		<a href="/myAstroTest/posts/post-1">My first blog post</a>
-		<a href="/myAstroTest/posts/post-2">Post 2</a>
-		<a href="/myAstroTest/posts/post-3">Post 3</a>
+		{allPosts.map((post: any) => <BlogPost url={post.url} title={post.frontmatter.title} />)}
 	  </ul>
 
 </BaseLayout>

tutorial/src/pages/posts/post-1.md

@@ -1,4 +1,5 @@
 ---
+layout: ../../layouts/MDpostLayout.astro
 title: 'My First Blog Post'
 pubDate: 2026-04-16
 description: 'This is the first post of my new Astro blog.'
@@ -8,9 +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.
 

tutorial/src/pages/posts/post-2.md

@@ -1,4 +1,5 @@
 ---
+layout: ../../layouts/MDpostLayout.astro
 title: My Second Blog Post
 author: Astro Learner
 description: "After learning some Astro, I couldn't stop!"

tutorial/src/pages/posts/post-3.md

@@ -1,4 +1,5 @@
 ---
+layout: ../../layouts/MDpostLayout.astro
 title: My Third Blog Post
 author: Astro Learner
 description: "I had some challenges, but asking in the community really helped!"

tutorial/src/pages/posts/post-4.md

@@ -0,0 +1,13 @@
+---
+layout: ../../layouts/MDpostLayout.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: 2026-04-17
+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.