Update blog post metadata and styles

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

@@ -2,11 +2,14 @@
 import { type CollectionEntry, getCollection } from "astro:content";
 import Comments from "../../components/Comments.astro";
 import Layout from "../../layouts/BaseLayout.astro";
+import dayjs from "dayjs";
 
 type Props = CollectionEntry<"blog">;
 
 export async function getStaticPaths() {
-	const posts = await getCollection("blog");
+	const posts = await getCollection("blog", ({ data }) => {
+		return data.draft !== true;
+	});
 
 	return posts.map((post) => ({
 		params: { slug: post.slug },
@@ -15,33 +18,30 @@ export async function getStaticPaths() {
 }
 
 const post = Astro.props;
-const { Content, remarkPluginFrontmatter } = await post.render();
+const { Content } = await post.render();
+const formattedDate = dayjs(post.data.pubDate.toString()).format("MMMM DD, YYYY");
 ---
 
-<style>
-	.header {
-		text-align: center;
-	}
-</style>
-
 <Layout description={post.data.description} title={post.data.title}>
 	<article>
-		<section class="header">
+		<section>
 			<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>
+			<p>
+				<small>
+					Posted
+					<time datetime={post.data.pubDate.toISOString()}>{formattedDate}</time>
+					by&nbsp;{post.data.author}
+				</small>
+			</p>
+		</section>
+
 		<section>
 			<Comments />
 		</section>