サイトを Astro で作り直しました

長らく素の HTML と jQuery で書かれていたこのサイトを、Astro で作り直しました。 配信先もこれまでの VPS から Firebase Hosting に変わっています。

見た目の印象は大きく変えていませんが、中身はほとんど別物になりました。

変わったこと

ダークモードに対応しました。 右上のボタンで切り替えられます。 初回はお使いの端末の設定に合わせて表示され、一度切り替えるとその選択を覚えます。

スマートフォンでの表示を作り直しました。 幅に応じてレイアウトが変わり、 ナビゲーションは折りたたみ式になります。

Library を作りました。 手持ちの画材の色見本を並べたページです。 メーカーやシリーズで絞り込んだり、色相順に並べ替えたりできます。

Note ができました。 この記事を置いている場所です。

中身の話

記事も色見本も、Markdown や YAML のファイルを置くだけで増やせる形にしました。 これまでは HTML を直接書き足していたので、1件増やすたびに同じような記述を 繰り返していました。

ページは全て事前に生成した HTML として配信しています。 JavaScript を使うのは、テーマの切り替え、スマートフォンのメニュー、 Library の絞り込みの3か所だけです。

JavaScript が動かない環境でも読めるようにしてあります。 メニューは縦に並んだリンクとして表示され、Library は絞り込みこそ効きませんが 一覧とページ送りはそのまま使えます。

これから

Library の色見本はまだ10件しかありません。少しずつ増やしていく予定です。

トップページの図版は現在プレースホルダーのままです。こちらも順次差し替えます。