Blog: add drafts listing

src/components/ArticleList.astro

@@ -2,6 +2,12 @@
 // © 2024 Vlad-Stefan Harbuz <vlad@vlad.website>
 // SPDX-License-Identifier: Apache-2.0
 
+interface Props {
+  showDrafts?: string;
+}
+
+const { showDrafts } = Astro.props;
+
 import dayjs from 'dayjs';
 import utc from 'dayjs/plugin/utc';
 dayjs.extend(utc);
@@ -19,7 +25,13 @@ const ARTICLES_QUERY = `*[_type == "article"]|order(publishDateTime desc){
 }`;
 
 const articles = (await sanityClient.fetch<SanityDocument[]>(ARTICLES_QUERY))
-  .filter((a) => dayjs(a.publishDateTime).isBefore(dayjs().utc()));
+  .filter((a) => {
+    if (showDrafts) {
+      return !dayjs(a.publishDateTime).isBefore(dayjs().utc());
+    } else {
+      return dayjs(a.publishDateTime).isBefore(dayjs().utc());
+    }
+  });
 ---
 
 <div>

src/pages/blog/drafts.astro

@@ -0,0 +1,31 @@
+---
+// © 2025 Functional Software, Inc. dba Sentry
+// SPDX-License-Identifier: Apache-2.0
+
+import ArticleList from "../../components/ArticleList.astro";
+import Blob from "../../components/Blob.astro";
+import Button from "../../components/Button.astro";
+import Layout from "../../layouts/Layout.astro";
+---
+
+<Layout title="Blog">
+  <div class="edge-blobs">
+    <Blob kind="grad-dots-01" top="8%" right="-2rem"></Blob>
+    <Blob kind="solid-fill-03" top="65%" left="-10rem"></Blob>
+  </div>
+  <div class="container">
+    <Blob kind="solid-fill-04" top="-15%" left="-16rem"></Blob>
+    <Blob kind="solid-fill-02" top="2%" right="-22rem"></Blob>
+    <Blob kind="grad-dots-02" top="30%" left="-20rem"></Blob>
+    <Blob kind="grad-dots-03" top="60%" right="-20rem"></Blob>
+
+    <main id="main-content">
+      <section>
+        <div class="text-center">
+          <h1>Drafts</h1>
+        </div>
+        <ArticleList showDrafts={true} />
+      </section>
+    </main>
+  </div>
+</Layout>