site: blog index as title/intro teasers

src/pages/blog.astro

@@ -1,7 +1,6 @@
 ---
+import { getCollection } from 'astro:content';
 import BaseLayout from '../layouts/BaseLayout.astro';
-import EntryList from '../components/EntryList.astro';
-import { getAllEntries } from '../lib/entries';
 import {
   buildOgImage,
   buildBreadcrumbs,
@@ -9,14 +8,23 @@ import {
   absoluteUrl,
 } from '../lib/seo';
 
-const posts = (await getAllEntries()).filter((e) => e.type === 'post');
-const lastUpdated = posts[0]?.date;
+const posts = (await getCollection('posts')).sort(
+  (a, b) => b.data.date.valueOf() - a.data.date.valueOf()
+);
+const lastUpdated = posts[0]?.data.date;
+
+const fmt = new Intl.DateTimeFormat('en-US', {
+  year: 'numeric',
+  month: 'short',
+  day: 'numeric',
+  timeZone: 'UTC',
+});
 
 const description = 'Longer-form notes from Unique — essays and meta about the project.';
 const ogImage = buildOgImage(undefined, 'posts', 'Unique blog');
 
 const itemList = buildItemList(
-  posts.map((p) => ({ url: p.href, name: p.primary })),
+  posts.map((p) => ({ url: `/posts/${p.id}/`, name: p.data.title })),
   'Posts on Unique'
 );
 
@@ -45,12 +53,72 @@ const breadcrumbs = buildBreadcrumbs([
   jsonLd={[blogSchema, itemList, breadcrumbs]}
 >
   {posts.length > 0 ? (
-    <EntryList entries={posts} />
+    <ul class="teasers">
+      {posts.map((post) => (
+        <li class="teaser">
+          <a href={`/posts/${post.id}/`} class="teaser-link">
+            <h2 class="teaser-title">{post.data.title}</h2>
+            {post.data.description && (
+              <p class="teaser-intro">{post.data.description}</p>
+            )}
+            <time class="teaser-date" datetime={post.data.date.toISOString()}>
+              {fmt.format(post.data.date)}
+            </time>
+          </a>
+        </li>
+      ))}
+    </ul>
   ) : (
     <p class="empty">Nothing yet — check back soon.</p>
   )}
 
   <style>
+    .teasers {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+    }
+    .teaser {
+      margin: 0 0 2.25rem;
+    }
+    .teaser:last-child {
+      margin-bottom: 0;
+    }
+    .teaser-link {
+      display: block;
+      color: inherit;
+    }
+    .teaser-link:hover {
+      text-decoration: none;
+    }
+    .teaser-link:hover .teaser-title {
+      color: var(--accent);
+    }
+    .teaser-title {
+      margin: 0 0 0.4rem;
+      font-family: ui-serif, Georgia, 'Iowan Old Style', 'Apple Garamond',
+        'Palatino Linotype', serif;
+      font-weight: 700;
+      font-size: 1.5rem;
+      line-height: 1.2;
+      letter-spacing: -0.015em;
+      color: var(--fg);
+    }
+    .teaser-intro {
+      margin: 0 0 0.45rem;
+      color: var(--fg);
+      line-height: 1.5;
+    }
+    .teaser-date {
+      display: block;
+      font-family: ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue',
+        sans-serif;
+      font-size: 0.72rem;
+      text-transform: uppercase;
+      letter-spacing: 0.08em;
+      color: var(--muted);
+      font-variant-numeric: tabular-nums;
+    }
     .empty {
       margin: 3rem 0;
       text-align: center;