fix draft notice in dark mode

posts/after.mdx

@@ -1,6 +1,7 @@
 ---
 title: Example after post
 date: 2026-02-28
+draft: true
 ---
 
 ## After

src/lib/content.ts

@@ -0,0 +1,10 @@
+import { getCollection } from 'astro:content';
+
+
+export async function listPosts() {
+    // all posts in dev, exlucde draft posts in prod
+    let entries = await getCollection('posts', ({ data }) => import.meta.env.DEV || !data.draft);
+    // sort by date descending
+    entries.sort((a, b) => b.data.date.getTime() - a.data.date.getTime());
+    return entries;
+}

src/pages/[slug].astro

@@ -1,18 +1,17 @@
 ---
-import { getCollection } from 'astro:content';
+import { listPosts } from '@lib/content.ts';
 import BaseLayout from '@layouts/BaseLayout.astro';
 import Post from '@components/Post.astro';
 
 export async function getStaticPaths() {
-    const entries = await getCollection('posts');
+    const entries = await listPosts();
-    // unlike `/index` and `/posts`, we want to sort ascending by date here
-    entries.sort((a, b) => a.data.date.getTime() - b.data.date.getTime());
 
     // for each route, the page gets passed the entry itself, plus the previous and next slugs
     // (if any), so that it can render links to them
     return entries.map((entry, idx) => {
-        const prevSlug = entries[idx - 1]?.id || null;
+        // entries are sorted in by date descending, so prev has a higher index and next has lower
-        const nextSlug = entries[idx + 1]?.id || null;
+        const prevSlug = entries[idx + 1]?.id || null;
+        const nextSlug = entries[idx - 1]?.id || null;
         return {
             params: { slug: entry.id },
             props: { entry, prevSlug, nextSlug },

src/pages/index.astro

@@ -1,10 +1,9 @@
 ---
-import { getCollection } from 'astro:content';
+import { listPosts } from '@lib/content.ts';
 import BaseLayout from '@layouts/BaseLayout.astro';
 import Post from '@components/Post.astro';
 
-const entries = await getCollection('posts');
+const entries = await listPosts();
-entries.sort((a, b) => b.data.date.getTime() - a.data.date.getTime());
 // there will always be at leaste one entry
 const entry = entries[0]!;
 const prevSlug = entries[1] ? entries[1]?.id : null;

src/pages/posts.astro

@@ -1,12 +1,12 @@
 ---
 import '@styles/prose.css';
 
-import { getCollection, render } from 'astro:content';
+import { render } from 'astro:content';
+import { listPosts } from '@lib/content.ts';
 import BaseLayout from '@layouts/BaseLayout.astro';
 
-// return all posts
+// return all posts in dev, only non-draft in prod
-let entries = await getCollection('posts', ({ data }) => !data.draft || import.meta.env.PROD );
+const entries = await listPosts();
-entries.sort((a, b) => b.data.date.getTime() - a.data.date.getTime());
 const posts = await Promise.all(entries.map(async entry => {
     const { remarkPluginFrontmatter } = await render(entry);
     return { ...entry, remarkPluginFrontmatter };
@@ -24,6 +24,7 @@ const posts = await Promise.all(entries.map(async entry => {
                         <a href={`/${p.id}`} data-astro-prefetch>
                             {p.data.title}
                         </a>
+                        {p.data.draft && <span class="draft-notice">Draft</span>}
                     </h2>
                     <p>
                         {p.remarkPluginFrontmatter.description}
@@ -55,6 +56,21 @@ const posts = await Promise.all(entries.map(async entry => {
         margin-left: 0;
     }
 
+    h2 {
+        display: flex;
+        gap: 01rem;
+        align-items: center;
+    }
+
+    .draft-notice {
+        font-size: 0.5em;
+        font-family: 'Figtree Variable', sans-serif;
+        color: var(--nav-link-color);
+        background-color: var(--accent-color);
+        padding: 0.05em 0.5em;
+        border-radius: 20% / 50%;
+    }
+
     hr {
         border: none;
         height: 1px;