refactor: add a generic listing page component

website/src/components/ListingPage.astro

@@ -0,0 +1,24 @@
+---
+import PageLayout from "~/layouts/PageLayout.astro";
+import ListingPageItem from "./ListingPageItem.astro";
+
+interface Item {
+  description: string;
+  title: string;
+}
+
+interface Props {
+  items: Array<Item>;
+  title: string;
+}
+
+const { items, title } = Astro.props as Props;
+---
+
+<PageLayout title={title}>
+  <slot name="intro" />
+
+  <div class="mt-6 space-y-6">
+    {items.map((item) => <ListingPageItem item={item} />)}
+  </div>
+</PageLayout>

website/src/components/ListingPageItem.astro

@@ -0,0 +1,31 @@
+---
+interface ItemProps {
+  date: string;
+  description?: string;
+  excerpt?: string;
+  title: string;
+}
+
+const { date, description, excerpt, title } = Astro.props.item.item
+  .frontmatter as ItemProps;
+const { slug } = Astro.props.item;
+---
+
+<article>
+  <a href={slug} class="mb-2"><h2>{title}</h2></a>
+
+  {
+    date && (
+      <time class="mt-0 mb-2 block text-base" datetime={date}>
+        {new Date(date).toLocaleDateString("en-GB", {
+          day: "numeric",
+          month: "long",
+          year: "numeric",
+        })}
+      </time>
+    )
+  }
+
+  {description && <p>{description}</p>}
+  {excerpt && <p>{excerpt}</p>}
+</article>