Claude improvements

src/components/PostMedia.astro

@@ -0,0 +1,45 @@
+---
+import type { CollectionEntry } from 'astro:content';
+import { Picture } from 'astro:assets';
+
+type MediaItem = CollectionEntry<'posts'>['data']['media'][number];
+
+interface Props {
+  items: MediaItem[];
+}
+
+const { items } = Astro.props;
+---
+
+{
+  items.map((item) => (
+    <figure class:list={['post-media', item.role === 'inline' && 'figure-inline']}>
+      {item.type === 'video' ? (
+        <video
+          controls
+          preload="metadata"
+          poster={item.poster?.src}
+          aria-label={item.decorative ? undefined : item.alt}
+        >
+          {item.webm && <source src={item.webm} type="video/webm" />}
+          {item.mp4 && <source src={item.mp4} type="video/mp4" />}
+        </video>
+      ) : (
+        item.src && (
+          <Picture
+            src={item.src}
+            alt={item.decorative ? '' : (item.alt ?? '')}
+            formats={['avif', 'webp']}
+            fallbackFormat="jpg"
+            widths={[480, 720, 960, 1280, 1600, 1920]}
+            sizes="(max-width: 700px) calc(100vw - 3rem), (max-width: 1100px) calc(100vw - 4rem), 56rem"
+            loading="lazy"
+            decoding="async"
+          />
+        )
+      )}
+      {item.caption && <figcaption>{item.caption}</figcaption>}
+      {item.transcript && <p class="media-transcript">{item.transcript}</p>}
+    </figure>
+  ))
+}