Create a reusable PostList component

src/components/PostList.astro

@@ -0,0 +1,31 @@
+---
+import { CollectionEntry, getCollection } from 'astro:content';
+
+export interface Props {
+  filterFn?: (entry: CollectionEntry<'blog'>) => unknown;
+}
+
+const defaultFilterFn = (entry: CollectionEntry<'blog'>) => true;
+const { filterFn = defaultFilterFn } = Astro.props;
+
+const posts = (
+  await getCollection(
+    'blog',
+    (entry) => filterFn(entry) && (import.meta.env.DEV || !entry.data.draft)
+  )
+).sort((a, b) => a.data.pubDate.valueOf() - b.data.pubDate.valueOf());
+---
+
+<ul class="post-list">
+  {
+    posts.length === 0 ? (
+      <p>No posts were found</p>
+    ) : (
+      posts.map((post) => (
+        <li>
+          <a href={`/blog/${post.slug}`}>{post.data.title}</a>
+        </li>
+      ))
+    )
+  }
+</ul>

src/layouts/BlogPost.astro

@@ -6,21 +6,59 @@ import FormattedDate from '../components/FormattedDate.astro';
 
 type Props = CollectionEntry<'blog'>['data'];
 
-const { title, description, pubDate } = Astro.props;
+const { title, description, pubDate, draft, tags, categories } = Astro.props;
+const [category] = categories;
 ---
 
 <BaseLayout title={title} description={description}>
   <article>
     <h1 class="title">{title}</h1>
-    <FormattedDate date={pubDate} />
-    <slot />
+    <div id="metadata">
+      <p>date published: <FormattedDate date={pubDate} /></p>
+      <p>
+        category:
+        <span>
+          <a href={`/blog/categories/${encodeURIComponent(category)}`}
+            >{category}</a
+          >
+        </span>
+      </p>
+      <p>
+        <span
+          set:html={'tags: ' +
+            tags
+              .map((tag) => `<a href="/blog/tags/${tag}">${tag}</a>`)
+              .join(', ')}
+        />
+        {
+          draft && (
+            <div id="draft-warning">
+              <strong>
+                This is a draft! Its content is subject to change.
+              </strong>
+            </div>
+          )
+        }
+      </p>
+      <slot />
+    </div>
   </article>
-</BaseLayout>
 
-<style>
-  .title {
-    font-size: 2em;
-    margin: 0;
-    text-align: center;
-  }
-</style>
+  <style>
+    #metadata p {
+      margin-top: 0;
+      margin-bottom: 0.2rem;
+    }
+
+    .title {
+      font-size: 2em;
+      margin: 0;
+    }
+
+    #metadata p,
+    #draft-warning,
+    .title {
+      text-align: center;
+    }
+  </style>
+</BaseLayout>

src/pages/blog/index.astro

@@ -1,10 +1,6 @@
 ---
-import { getCollection } from 'astro:content';
 import BaseLayout from '../../layouts/BaseLayout.astro';
-
-const posts = (await getCollection('blog', (entry) => !entry.data.draft)).sort(
-  (a, b) => a.data.pubDate.valueOf() - b.data.pubDate.valueOf()
-);
+import PostList from '../../components/PostList.astro';
 ---
 
 <BaseLayout
@@ -13,15 +9,7 @@ const posts = (await getCollection('blog', (entry) => !entry.data.draft)).sort(
 >
   <section>
     <h2>My blog</h2>
-    <ul class="post-list">
-      {
-        posts.map((post) => (
-          <li>
-            <a href={`/blog/${post.slug}/`}>{post.data.title}</a>
-          </li>
-        ))
-      }
-    </ul>
+    <PostList />
   </section>
 </BaseLayout>