Fix unthemed index pages.

brixen · brixen · commit 95d1243b79e2 · 2025-11-09T16:04:18.000-08:00
diff --git a/src/layouts/SiteLayout.astro b/src/layouts/SiteLayout.astro
@@ -21,12 +21,12 @@ const {
     <ThemeBoot />
   </head>
 
-  <body class="min-h-screen antialiased bg-[--color-bg] text-[--color-fg]">
+  <body class="min-h-dvh flex flex-col antialiased">
     <!-- Single outer box for consistent width across header/main/footer -->
-    <div class="mx-auto max-w-7xl px-4">
+    <div class="mx-auto w-full max-w-7xl px-4 flex flex-1 flex-col">
       <Header />
 
-      <main class="py-10">
+      <main class="flex-1 py-10">
         <slot />
       </main>
 
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
@@ -1,21 +1,19 @@
 ---
-import { getCollection } from 'astro:content';
-import { compareByDateThenOrder } from '@/lib/dates';
-
-const posts = await getCollection('blog', ({ data }) => data.published !== false);
-const sorted = posts.sort((a, b) => compareByDateThenOrder(a.data, b.data));
+import SiteLayout from '@/layouts/SiteLayout.astro';
+import BlogList from "@/components/BlogList.astro";
 ---
 
-<html lang="en">
-  <head><title>Blog</title></head>
-  <body class="prose prose-invert max-w-3xl mx-auto p-6">
-    <h1>Blog</h1>
-    <ul class="not-prose space-y-4">
-      {sorted.map((post) => (
-        <li>
-          <a href={`/blog/${post.slug}/`}>{post.data.title}</a>
-        </li>
-      ))}
-    </ul>
-  </body>
-</html>
+<SiteLayout title="Vivarium - Blog">
+  <main
+    class="grid grid-cols-[1fr_3fr] gap-4 [&>*]:min-w-0 [&>*]:[overflow-wrap:anywhere]"
+  >
+    <aside class="hidden lg:block">
+      <div class="sticky top-20 shrink-0 min-w-0 overflow-wrap:anywhere pe-2">
+        <BlogList activeId="" />
+      </div>
+    </aside>
+    <section>
+
+    </section>
+  </main>
+</SiteLayout>
diff --git a/src/pages/docs/index.astro b/src/pages/docs/index.astro
@@ -1,4 +1,6 @@
 ---
+import SiteLayout from '@/layouts/SiteLayout.astro';
+
 import { getCollection } from "astro:content";
 const docs = await getCollection("docs");
 const byKind = {
@@ -18,9 +20,7 @@ for (const kind of Object.keys(byKind)) {
 }
 ---
 
-<html lang="en">
-  <head><title>Docs</title></head>
-  <body class="prose mx-auto p-6">
+<SiteLayout title="Vivarium - Blog">
     <h1>Documentation</h1>
 
     <section>
@@ -59,5 +59,4 @@ for (const kind of Object.keys(byKind)) {
         ))}
       </ul>
     </section>
-  </body>
-</html>
+</SiteLayout>
