#astro - 1ページ目

AstroにFormspreeを導入し、react-hook-formとreCAPTCHA v3でバリデーションとスパム対策を実装するお問い合わせフォームの作り方を、環境変数設定からページ実装まで手順で解説。

Astroで構築したWebサイトに、Validation（入力チェック）とreCAPTCHA v3を設置したContact Formを実装する。Validationは「React Hook Form」というパッケージを使用する。また、reCAPTCHAのサーバサイドでの検証をNewtのForm Appで行う。

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

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

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

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