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>