Refactored ArticleHeader

src/components/post/Header/Cover.astro

@@ -1,10 +1,34 @@
 ---
-import Figure from '@/components/media/Figure.astro'
+import ContentImage from '@/components/media/ContentImage.astro'
 import type { Article } from '@/lib/site/types'
 
-type Props = { cover: Article['summary']['cover'] }
+type Props = {
+  cover: Article['summary']['cover']
+}
 
-const { image, ...rest } = Astro.props.cover
+const { image, alt, caption, credit, effect, ratio } = Astro.props.cover
 ---
 
-{image && <Figure image={image} {...rest} size="wide" eager />}
+{image && (
+  <figure
+    class:list={[
+      'article-header__cover',
+      effect !== 'none' && `effect--${effect}`,
+      ratio !== 'original' && `ratio--${ratio}`,
+    ]}
+  >
+    <ContentImage
+      src={image}
+      alt={alt}
+      widths={[800, 1600, 2400]}
+      sizes="(min-width: 80rem) 74rem, 100vw"
+      eager
+    />
+    {(caption || credit) && (
+      <figcaption class="article-header__caption dark">
+        {caption && <span>{caption}</span>}
+        {credit && <span class="article-header__credit">{credit}</span>}
+      </figcaption>
+    )}
+  </figure>
+)}