AstroでURLリンクをカードにして表示

Astroはremarkを使っているから
remarkのプラグインが使えるよ

リンクをカードにして表示するプラグインはこれだよ
そしてこんな感じに表示できるよ

GitHub - gladevise/remark-link-card

Contribute to gladevise/remark-link-card development by creating an account on GitHub.

github.com

導入手順はまずインストールだね

npm i remark-link-card

そしたらastro.config.mjsに登録するよ
markdownのremarkPluginsに追加すればいいよ

import remarkLinkCard from 'remark-link-card'

export default defineConfig({
  // ほかの設定
	markdown: {
		remarkPlugins: [remarkLinkCard]
	},
})

これでマークダウンにURLを書くとカードになるよ
カードにはクラスがついてるから、
あとはお好みでスタイルを適用すればいいよ