何するの
astroの3.0が出た。パフォーマンスや最適化がより向上しているし、Astro View Transitionsという良い感じの遷移ができる機能もできたようで、色々試したいので自分のサイトも3.0にすることにした
Astro 3.0 | Astro
やったこと
参考: Upgrade to Astro v3 🚀 Astro Documentation
- package.jsonから
@astrojs/imageを削除する npm install astro@latestを走らせる- Upgrade to Astro v3 🚀 Astro Documentation の Removed:
@astrojs/imageと [Images 🚀 Astro Documentation] を参考に書き換えastro.config.mjsを修正@astrojs/imageのラッパーコンポーネントがImage.astroというファイル名だったので、ImageWrap.astroにRename（astro:assetsのImageと名前が衝突してエラーがでるため）ImageWrap.astroで利用していたPicutureタグをImageに変更Imageタグにはaspect-ratioがないので削除し、heightを追加
- ｵﾜﾘ🎉！！
つぶやき
- Upgrade Guideが結構長いのでちょっと警戒してたんですが、そんなに面倒な作業じゃなくてよかったです
- 1番面倒だったのは
aspect-ratioからheightを算出する作業でした。- Wrapperコンポーネントあったおかげでpropsをちょっと書き換えるだけで済んだのでまあWrapperにしといてよかったのかな
- ちょうど1ページサイトから複数ページサイトになったところなので、Astro View Transitionsを近いうちに素振りしようと思います
- この作業のついでに利用してなかったtailwindを削除しました。astro導入した時はこれを機に覚えようと思ったのかもですが、astroみたいにCSSとHTMLが1ファイルにあると特にtailwindにしたい気持ちが湧かないですね。こうしてtailwindチャレンジが見送られ続けていく。
おわり。
