Show post OG thumbnails in post list (left image + right text on desktop)

src/components/PostList.astro

@@ -11,27 +11,34 @@ const shown = limit ? posts.slice(0, limit) : posts;
 
 const fmt = (d: Date) =>
   d.toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' });
+
+const og = (post: CollectionEntry<'posts'>) => post.data.ogImage || '/og-default.png';
 ---
 
 <ul class="post-list">
   {shown.map((post) => (
-    <li>
-      <a href={`/posts/${post.slug}/`}><h2>{post.data.title}</h2></a>
-      <div class="meta">
-        <time datetime={post.data.pubDate.toISOString()}>{fmt(post.data.pubDate)}</time>
-        {post.data.updatedDate && (
-          <>
-            <span class="sep">·</span>
-            <span class="updated" title={`Updated ${fmt(post.data.updatedDate)}`}>
-              Updated {fmt(post.data.updatedDate)}
-            </span>
-          </>
-        )}
-        <span class="sep">·</span>
-        <a class="tag" href={`/categories/${post.data.category}/`}>{post.data.category}</a>
-        {post.data.tags.map((t) => <span class="tag">{t}</span>)}
+    <li class="post-row">
+      <a class="thumb" href={`/posts/${post.slug}/`} aria-hidden="true" tabindex="-1">
+        <img src={og(post)} alt="" loading="lazy" width="1200" height="630" />
+      </a>
+      <div class="body">
+        <a href={`/posts/${post.slug}/`}><h2>{post.data.title}</h2></a>
+        <div class="meta">
+          <time datetime={post.data.pubDate.toISOString()}>{fmt(post.data.pubDate)}</time>
+          {post.data.updatedDate && (
+            <>
+              <span class="sep">·</span>
+              <span class="updated" title={`Updated ${fmt(post.data.updatedDate)}`}>
+                Updated {fmt(post.data.updatedDate)}
+              </span>
+            </>
+          )}
+          <span class="sep">·</span>
+          <a class="tag" href={`/categories/${post.data.category}/`}>{post.data.category}</a>
+          {post.data.tags.map((t) => <span class="tag">{t}</span>)}
+        </div>
+        <p>{post.data.description}</p>
       </div>
-      <p>{post.data.description}</p>
     </li>
   ))}
-</ul>
+</ul>

src/styles/global.css

@@ -303,6 +303,42 @@ pre code {
 .post-list .updated { color: var(--brand); font-weight: 500; }
 .post-list p { color: var(--muted); margin: 0.4rem 0 0; }
 
+/* Post list card: thumbnail (left) + text (right) on desktop */
+.post-list .post-row {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 1rem;
+  align-items: start;
+}
+.post-list .thumb {
+  display: block;
+  border-radius: var(--radius);
+  overflow: hidden;
+  line-height: 0;
+  border: 1px solid var(--border);
+  background: var(--surface);
+}
+.post-list .thumb img {
+  width: 100%;
+  height: auto;
+  display: block;
+  aspect-ratio: 1200 / 630;
+  object-fit: cover;
+}
+
+@media (min-width: 768px) {
+  .post-list .post-row {
+    grid-template-columns: 220px 1fr;
+    gap: 1.5rem;
+    align-items: center;
+  }
+}
+@media (min-width: 1024px) {
+  .post-list .post-row {
+    grid-template-columns: 260px 1fr;
+  }
+}
+
 /* ---------- Callouts (correct / wrong in tutorials) ---------- */
 .callout {
   border-left: 3px solid var(--brand);