Astro製サイトをちょこっとパワーアップしました

Astro製サイトをちょこっとパワーアップしました

News@hemomao

お仕事をこなしている間に Astro さんが異常なスピードでバージョンアップしており、弊サイトでも新しい機能の恩恵をはやく受けたい…!
と思いつつ月日が経ち…やっとこいろいろ触れました 😊
実験段階の機能もさわりつつ、めちゃくちゃ楽しくて久しぶりに朝までやりこんでおりました。

ちょこっとパワーアップした内容

Astro 2系から3系に

Astro 2系 から Astro 3.5.5 にバージョンアップしました。
3.3 で組み込まれた Picture コンポーネントが便利でした。
Astro 3.3: Picture component

3.5 では 多言語化(i18n)用のルーティングサポートや Prefetch が標準化されました。
viewport や hover を個別のリンクに明示的に指定可能になりました。
( デフォルトでは hover が設定されています。)
その他パフォーマンス面でも、もりもりと成長しておりました。
Astro 3.5: i18n Routing

メニューを増やしたよ

メニューに「NOTES」「お知らせ(ベルマーク)」を追加しました。
追加したメニュー内容は以下になります。

  • NOTES:デザインや技術のことや目まぐるしいテック情報で気になったものなど掲載していきます。
  • お知らせ(ベルマーク):サイトの更新情報や告知を掲載していきます。

コンテンツをローカルで管理するようにしたよ

メニューに追加した「NOTES」は Astro 2系から登場した Content Collections を利用しています。
microCMS さんや Newt さんのヘッドレスCMS利用も検討して途中まで組み込んでいたのですが、ローカルで管理するのに良さそうなものが見つかったのでそちらで管理することにしました。
今のところ快適なのであらためて NOTE にしたためたいと思います。

まとめ

コンテンツに利用している Markdown の展開機能も充実させたいですね!
またページ遷移につけている View Transition API を要素にもつけたりして次は遊んでみようかなーと思います。
タイミングの制御や動きの自然さなどがやりがいありそうです :)
レスポンシブに伴う改善も引き続きやっていきます 💪
内部的なところもやることたくさんあるので粛々といじっていきたいと思います!

新しい記事
Front Matter CMS + VSCode + Astro が快適なので布教したい
NOTES へ