Updated the main page and page structures

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

@@ -23,17 +23,25 @@ const { Content, remarkPluginFrontmatter } = await post.render();
 </style>
 
 <Layout title={post.data.title} description={post.data.description}>
-	<div class="header">
-		<h1>{post.data.title}</h1>
-		<p>
-			<small>
-				Posted
-				<time datetime={post.data.pubDate.toISOString()}>{post.data.pubDate.toDateString()}</time>
-				&nbsp;by&nbsp;{post.data.author}&nbsp;‐
-				<strong>{remarkPluginFrontmatter.minutesRead}</strong>
-			</small>
-		</p>
-	</div>
-	<Content />
-	<Comments />
+	<article>
+		<section class="header">
+			<h1>{post.data.title}</h1>
+			<p>
+				<small>
+					Posted
+					<time datetime={post.data.pubDate.toISOString()}>{post.data.pubDate.toDateString()}</time>
+					&nbsp;by&nbsp;{post.data.author}&nbsp;‐
+					<strong>{remarkPluginFrontmatter.minutesRead}</strong>
+				</small>
+			</p>
+		</section>
+
+		<section>
+			<Content />
+		</section>
+
+		<section>
+			<Comments />
+		</section>
+	</article>
 </Layout>

src/pages/index.astro

@@ -1,18 +1,13 @@
 ---
 import { getCollection } from "astro:content";
+import Element from "../components/PostElement.astro";
 import Layout from "../layouts/PageLayout.astro";
 
 const posts = await getCollection("blog");
 ---
 
 <Layout>
-	<ul>
-		{
-			posts.map((post) => (
-				<li>
-					<a href={`/blog/${post.slug}`}>{post.data.title}</a>
-				</li>
-			))
-		}
-	</ul>
+	<section>
+		{posts.map((post) => <Element post={post} />)}
+	</section>
 </Layout>