Update call sites after refactor to new collection schema regarding cover images

Author: webstackdev

src/components/Carousel/client/__fixtures__/collection.fixture.ts

@@ -1,39 +1,55 @@
+import type { ImageMetadata } from 'astro'
+
+const createCover = (src: string, format: ImageMetadata['format'] = 'jpeg'): ImageMetadata => ({
+  src,
+  width: 1200,
+  height: 675,
+  format,
+})
+
 const sampleCollection = [
   {
     id: 'article-one',
     data: {
       title: 'Article One',
       description: 'First test entry',
-      publishDate: '2024-01-01',
+      publishDate: new Date('2024-01-01'),
       featured: true,
-      icon: '/icons/one.svg',
+      cover: createCover('/_astro/article-one.jpg'),
+      coverAlt: 'Cover image for Article One',
     },
   },
   {
     id: 'article-two',
     data: {
       title: 'Article Two',
       description: 'Second test entry',
-      publishDate: '2024-02-01',
+      publishDate: new Date('2024-02-01'),
       featured: true,
+      cover: createCover('/_astro/article-two.jpg'),
+      coverAlt: 'Cover image for Article Two',
     },
   },
   {
     id: 'article-three',
     data: {
       title: 'Article Three',
       description: 'Third test entry',
-      publishDate: '2024-03-01',
+      publishDate: new Date('2024-03-01'),
       featured: false,
+      cover: createCover('/_astro/article-three.jpg'),
+      coverAlt: 'Cover image for Article Three',
     },
   },
   {
     id: 'article-four',
     data: {
       title: 'Article Four',
       description: 'Fourth test entry',
-      publishDate: '2024-04-01',
+      publishDate: new Date('2024-04-01'),
       featured: false,
+      cover: createCover('/_astro/article-four.jpg'),
+      coverAlt: 'Cover image for Article Four',
     },
   },
 ]

src/components/Carousel/client/__tests__/index.spec.ts

@@ -142,7 +142,8 @@ describe('Carousel component (server output)', () => {
       const cardWithIcon = root.querySelector('[data-carousel-slide] img')
 
       expect(cardWithIcon).toBeTruthy()
-      expect(cardWithIcon?.getAttribute('src')).toBe('/icons/one.svg')
+      expect(cardWithIcon?.getAttribute('src')).toMatch(/^\/_image\?href=/)
+      expect(cardWithIcon?.getAttribute('alt')).toBe('Cover image for Article One')
     })
   })
 

src/components/Carousel/index.astro

@@ -4,7 +4,7 @@
  */
 import { Picture } from 'astro:assets'
 import { getCollection } from 'astro:content'
-// type CollectionEntry
+
 import {
   type CollectionSlug,
   type CarouselVariant,
@@ -56,11 +56,11 @@ const items = prepareItems(allItems, variant, currentSlug, limit)
                       href={`/${type}/${item.id}`}
                       class="block h-full bg-bg rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden border border-border hover:border-primary transform hover:-translate-y-2"
                     >
-                      {item.data.cover?.src && (
+                      {item.data.cover && (
                         <div class="relative aspect-video overflow-hidden">
                           <Picture
-                            src={item.data.cover.src}
-                            alt={item.data.cover.alt || item.data.title}
+                            src={item.data.cover}
+                            alt={item.data.coverAlt}
                             widths={[320, 640, 960, 1280]}
                             sizes="(min-width: 1024px) 33vw, (min-width: 768px) 50vw, 100vw"
                             formats={['avif', 'webp', 'jpeg']}