feat: add evidence-led project media layouts

src/components/ProjectCard.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { PublicProject } from '@/content/types';
-import ProjectMedia from './ProjectMedia.vue';
+import ProjectMediaGallery from './ProjectMediaGallery.vue';
 
 withDefaults(defineProps<{ project: Readonly<PublicProject>; allowAutomaticVideo?: boolean }>(), {
   allowAutomaticVideo: false,
@@ -8,13 +8,17 @@ withDefaults(defineProps<{ project: Readonly<PublicProject>; allowAutomaticVideo
 </script>
 
 <template>
-  <article class="project-card" :data-project-id="project.id" :data-maturity="project.maturity">
+  <article
+    class="project-card"
+    :data-project-id="project.id"
+    :data-maturity="project.maturity"
+    :data-media-layout="project.mediaLayout ?? 'none'"
+  >
     <h3>{{ project.title }}</h3>
     <p>{{ project.summary }}</p>
-    <ProjectMedia
-      v-for="media in project.media ?? []"
-      :key="`${media.kind}-${media.assetId}`"
-      :presentation="media"
+    <ProjectMediaGallery
+      :media="project.media ?? []"
+      :layout="project.mediaLayout ?? 'single'"
       :allow-automatic-video="allowAutomaticVideo"
     />
     <p>{{ project.contribution }}</p>

src/components/ProjectCaseStudy.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { PublicProject } from '@/content/types';
-import ProjectMedia from './ProjectMedia.vue';
+import ProjectMediaGallery from './ProjectMediaGallery.vue';
 
 withDefaults(defineProps<{
   project: Readonly<PublicProject>;
@@ -13,15 +13,19 @@ withDefaults(defineProps<{
 </script>
 
 <template>
-  <article class="project-case-study" :data-project-id="project.id" :data-project-priority="priority">
+  <article
+    class="project-case-study"
+    :data-project-id="project.id"
+    :data-project-priority="priority"
+    :data-media-layout="project.mediaLayout ?? 'none'"
+  >
     <header class="project-case-study__header">
       <h3>{{ project.title }}</h3>
       <p>{{ project.summary }}</p>
     </header>
-    <ProjectMedia
-      v-for="media in project.media ?? []"
-      :key="`${media.kind}-${media.assetId}`"
-      :presentation="media"
+    <ProjectMediaGallery
+      :media="project.media ?? []"
+      :layout="project.mediaLayout ?? 'single'"
       :allow-automatic-video="allowAutomaticVideo"
     />
     <dl class="project-evidence">

src/components/ProjectMediaGallery.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import ProjectMedia from './ProjectMedia.vue';
+import type { MediaPresentation, ProjectMediaLayout } from '@/content/types';
+
+withDefaults(defineProps<{
+  media: readonly MediaPresentation[];
+  layout?: ProjectMediaLayout;
+  allowAutomaticVideo?: boolean;
+}>(), { layout: 'single', allowAutomaticVideo: false });
+</script>
+
+<template>
+  <div v-if="media.length > 0" class="project-media-gallery" :data-media-layout="layout">
+    <ProjectMedia
+      v-for="presentation in media"
+      :key="`${presentation.kind}-${presentation.assetId}`"
+      :presentation="presentation"
+      :allow-automatic-video="allowAutomaticVideo"
+    />
+  </div>
+</template>