Astro Blog記事の画像にキャプションを付ける

$ pnpm add -D @microflash/remark-figure-caption remark-gfm

import { defineConfig } from 'astro/config'
import mdx from '@astrojs/mdx'
import tailwind from '@astrojs/tailwind'
import sitemap from '@astrojs/sitemap'
import remarkGfm from 'remark-gfm'
import remarkFigureCaption from '@microflash/remark-figure-caption'

// https://astro.build/config
export default defineConfig({
  site: 'https://example.com',
  integrations: [mdx(), sitemap()],
  markdown: {
    remarkPlugins: [remarkFigureCaption, remarkGfm]
  },
  integrations: [
    tailwind(),
    mdx({
      syntaxHighlight: false,
      drafts: true
    })
  ]
})

---
title: '画像キャプションのテスト記事'
description: 'remarkプラグインを使って画像にキャプションを付ける'
pubDate: 'Jul 19 2024'
heroImage: '/blog-placeholder-3.jpg'
---

実際に画像はこんな感じになる

![ここがキャプションになる](../../assets/images/default.webp)

---
import { Image } from 'astro:assets'

const { title, src, alt } = Astro.props
---

<figure class='w-fit'>
  <Image src={src} alt={alt} format='webp' />
  {
    /* eslint-disable astro/no-set-html-directive */
    title && (
      <figcaption class='mt-4 text-center text-sm text-gray-700 dark:text-gray-300 md:mt-2'>
        <Fragment set:html={title} />
      </figcaption>
    )
    /* eslint-enable astro/no-set-html-directive */
  }
</figure>

---
import { type CollectionEntry, getCollection } from 'astro:content'
import BlogPost from '../../layouts/BlogPost.astro'
import BlogImage from '../../components/BlogImage.astro'

export async function getStaticPaths() {
  const posts = await getCollection('blog')
  return posts.map((post: any) => ({
    params: { slug: post.slug },
    props: post
  }))
}
type Props = CollectionEntry<'blog'>

const post = Astro.props
const { Content } = await post.render()
---

<BlogPost {...post.data}>
  <Content />
  <Content components={{ img: BlogImage }} />
</BlogPost>

---
title: '画像キャプションのテスト記事'
description: 'componentを使って画像にキャプションを付ける'
pubDate: 'Jul 19 2024'
heroImage: '/blog-placeholder-3.jpg'
---

実際に画像はこんな感じになる

![ここはalt](../../assets/images/default.webp 'MDX版 ここがキャプションになる')