DEV

Astroで構築したWebサイトにパンくずリストを追加する。プラグインを追加すれば簡単に実装できる。しかしURLに日本語が含まれる場合（タグやカテゴリ）、URLエンコードされた表記となってしまう。プラグインのリポジトリをForkし、デコードした値を表示できるようにする

Astroで構築したサイトでGoogle Adsenseを遅延読み込みする実装方法についてまとめる。AdsenseはPartytownで動作させることができなかった。よってobserverを使用し、広告エリアの表示を起点にロードする実装を行う。

Astroで構築したWebサイトにGoogleアナリティクスのJavaScriptを遅延読み込みする実装を行う。partytownというパッケージを使用する。

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で実際に使用しているものを掲示する。