「DEV」の3ページ目

Astroで構築したBlogの記事にYouTube動画を埋め込む。パフォーマンスの影響を避けるため、astro-embedというパッケージを使用し、動画をlazy loadingする。

Astroで構築したブログサイトの記事にキャプション付きの画像を掲載できるようにする。2つの実装例をまとめる。1つ目はremarkプラグインによる実装。2つ目はAstroの画像最適化とキャプションをWrapperするcomponentを作成する。1つ目はmarkdown・MDX共通で使用できるが、2つ目はMDXのみ。

Blogでシンプルなブログカードを使いたい。Astroで構築したBlogサイトを例に、ブログカードのcomponent、追加したいサイトのmeta情報をブラウザ上でコピーできるブックマークレットを作成する。サンプルコードはこのBlogで実際に使用しているものを掲示する。

Astroで構築したBlogサイトにモバイル表示用のTabBar（タブバー）を実装する。今回は次の3つのボタンを配置する「ホームへ戻る」「Topへ戻る」「目次を表示する」。一連の実装手順についてまとめる。

AstroのBlog記事に関連する記事の一覧を表示できるようにする。関連度合いを一致するタグの数で決定する。

AstroのmarkdwonまたはMDXで記述したコードブロックについて、ファイル名やコードのdiffを表示できるようにする。シンタックスハイライターはShikiを使用。remarkのpluginとコードブロックのcomponentを追加する。一連の実装手順をまとめた。