custom Picture component

src/components/PhotoTeaser.astro

@@ -1,6 +1,6 @@
 ---
-import Image from '@components/core/Image.astro'
 import type { CollectionEntry } from 'astro:content'
+import Picture from './core/Picture.astro'
 
 type Props = CollectionEntry<'photos'>
 
@@ -29,7 +29,7 @@ const { title, image } = Astro.props.data
   {
     image ? (
       <a href={slug}>
-        <Image
+        <Picture
           width={316}
           height={316}
           image={image}

src/components/PostTeaser.astro

@@ -1,7 +1,7 @@
 ---
-import Image from '@components/core/Image.astro'
 import PostTitle from './layouts/Post/Title.astro'
 import styles from './PostTeaser.module.css'
+import Picture from './core/Picture.astro'
 
 const { title, date, updated, hideDate, image, toggleSearch, slug } =
   Astro.props
@@ -10,7 +10,7 @@ const { title, date, updated, hideDate, image, toggleSearch, slug } =
 <a class={styles.post} href={slug} onclick={toggleSearch && toggleSearch}>
   {
     image ? (
-      <Image image={image} alt={title} width={480} height={180} />
+      <Picture image={image} alt={title} width={480} height={180} />
     ) : (
       <span class={styles.empty} />
     )

src/components/PostTeaser.module.css

@@ -29,7 +29,7 @@
 }
 
 .empty {
-  composes: frame from './core/Image.module.css';
+  composes: frame from './core/Picture.module.css';
   display: block;
   min-height: 95px;
   background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAACaADAAQAAAABAAAACQAAAAAvQpmhAAAAHElEQVQYGWNgoBL4T8gcggoIGcBA0ASCCmhsBQBhFwX7u70C8QAAAABJRU5ErkJggg==');

src/components/core/Image.astro

@@ -1,20 +0,0 @@
----
-import { Image, type ImgAttributes } from 'astro:assets'
-import styles from './Image.module.css'
-
-type Props = {
-  image: ImgAttributes
-  alt: string
-  title?: string
-  class?: string
-  width?: number
-  height?: number
-}
-
-const { title, image, class: className, ...rest } = Astro.props
----
-
-<figure class={`${styles.image} ${className ? className : ''}`}>
-  <Image src={image} {...rest} />
-  {title && <figcaption class={styles.imageTitle}>{title}</figcaption>}
-</figure>

src/components/core/Picture.astro

@@ -1,9 +1,10 @@
 ---
-import { getImage, type ImgAttributes } from 'astro:assets'
-import styles from './Image.module.css'
+import { getImage } from 'astro:assets'
+import type { ImageMetadata } from 'astro'
+import styles from './Picture.module.css'
 
 type Props = {
-  image: ImgAttributes
+  image: ImageMetadata
   alt: string
   title?: string
   class?: string
@@ -12,10 +13,11 @@ type Props = {
 }
 
 const { title, alt, image, class: className } = Astro.props
-const { src } = image
+const src = image
 
 const sizes = [260, 520, 1040, 2080]
 
+// TODO: make less repetitive
 const image260_webp = await getImage({ src, width: 260, format: 'webp' })
 const image520_webp = await getImage({ src, width: 520, format: 'webp' })
 const image1040_webp = await getImage({ src, width: 1040, format: 'webp' })

src/components/layouts/Post/Date.astro

@@ -2,7 +2,7 @@
 import Time from '@components/core/Time.astro'
 
 type Props = {
-  date: Date
+  date: Date | undefined
   updated?: Date
 }
 

src/components/layouts/Post/index.astro

@@ -1,11 +1,11 @@
 ---
 import type { CollectionEntry } from 'astro:content'
 import LayoutBase from '@layouts/Base/index.astro'
-import Image from '@components/core/Image.astro'
 import Title from './Title.astro'
 import Actions from './Actions.astro'
 import styles from './index.module.css'
 import Meta from './Meta.astro'
+import Picture from '@components/core/Picture.astro'
 
 type Props = CollectionEntry<'articles' | 'links' | 'photos'> & {
   lead?: string // comes in through remark plugin as html
@@ -25,9 +25,13 @@ const { title, date, updated, image, linkurl } = data
 
     {
       image && (
-        <div class={styles.image}>
-          <Image width={1040} height={460} image={image} alt={title} />
-        </div>
+        <Picture
+          class={styles.image}
+          width={1040}
+          height={460}
+          image={image}
+          alt={title}
+        />
       )
     }