use cards in directory listings

src/components/DirectoryListing.astro

@@ -0,0 +1,38 @@
+---
+import type { NavDirectory, NavEntry } from "@/lib/nav";
+
+interface Props {
+	dir: NavDirectory;
+}
+
+const { dir } = Astro.props;
+
+function getEntrySubtitle(entry: NavEntry): string | undefined {
+	if (entry.type === "file") {
+		return entry.collectionEntry.data.subtitle;
+	}
+	return undefined;
+}
+---
+
+<ul class="grid grid-cols-2 gap-4">
+	{
+		dir.entries.map((entry) => {
+			return (
+				<li>
+					<a
+						href={entry.href}
+						class="block group rounded-md border bg-stone-950 px-4 py-3 shadow border-stone-800 hover:border-stone-700 transition-colors"
+					>
+						<div class="text-lg font-semibold text-stone-300 group-hover:text-stone-50 transition-colors">
+							{entry.title}
+						</div>
+						<div class="text-ellipsis whitespace-nowrap overflow-hidden text-stone-400 text-sm">
+							{getEntrySubtitle(entry)}
+						</div>
+					</a>
+				</li>
+			);
+		})
+	}
+</ul>

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

@@ -1,8 +1,14 @@
 ---
 // Docs page
 
+import DirectoryListing from "@/components/DirectoryListing.astro";
 import DocsArticle from "../layouts/DocsArticle.astro";
-import { getRootNav, flattenNav, type NavEntry } from "../lib/nav";
+import {
+	getRootNav,
+	flattenNav,
+	type NavEntry,
+	type NavDirectory,
+} from "../lib/nav";
 
 export async function getStaticPaths() {
 	const entries = flattenNav(await getRootNav());
@@ -35,18 +41,9 @@ const rendered = await collectionEntry?.render();
 		rendered ? (
 			<rendered.Content />
 		) : (
-			/* Directory listing */
-			navEntry.type === "directory" && (
-				<ul>
-					{navEntry.entries.map((child) => {
-						return (
-							<li>
-								<a href={child.href}>{child.title}</a>
-							</li>
-						);
-					})}
-				</ul>
-			)
+			<div class="not-prose mt-4">
+				<DirectoryListing dir={navEntry as NavDirectory} />
+			</div>
 		)
 	}
 </DocsArticle>