Add video headers

src/lib/site.ts

@@ -102,6 +102,21 @@ export async function getProjects(): Promise<CollectionEntry<'projects'>[]> {
   );
 }
 
+type PostMediaItem = CollectionEntry<'posts'>['data']['media'][number];
+export type HeaderVideo = Extract<PostMediaItem, { type: 'video' }>;
+
+// A post has a "header video" when one of its media items is a video whose
+// poster is the same image as the post thumbnail. That video can stand in for
+// the static banner: the header shows the poster, then plays inline on click.
+// Posts without such a video keep the plain image header.
+export function getHeaderVideo(post: CollectionEntry<'posts'>): HeaderVideo | undefined {
+  const thumbnailSrc = post.data.thumbnail.src.src;
+  return post.data.media.find(
+    (item): item is HeaderVideo =>
+      item.type === 'video' && item.poster?.src === thumbnailSrc
+  );
+}
+
 export function adjacentPosts(
   posts: CollectionEntry<'posts'>[],
   current: CollectionEntry<'posts'>
@@ -163,7 +178,7 @@ export const ARTICLE_THUMBNAIL = {
 export const PROJECT_THUMBNAIL = {
   widths: [320, 480, 640, 800, 960, 1200, 1280],
   sizes:
-    '(max-width: 700px) calc(100vw - 40px), (max-width: 960px) calc((100vw - 64px - 1rem) / 2), calc((min(100vw - 64px, 72rem) - 2rem) / 3)',
+    '(max-width: 700px) calc((100vw - 40px - 0.75rem) / 2), (max-width: 960px) calc((100vw - 64px - 1rem) / 2), calc((min(100vw - 64px, 72rem) - 2rem) / 3)',
 };
 
 // Wraps `getImage` with the standard OG dimensions (1200x630 JPEG). Used by