Activitiesページをつくった

Galleryに続いて、Activitiesページをつくった。
展示への参加、ポートフォリオ、イベントなどの活動履歴をまとめておく場所だ。

なぜつくったか

これまで展示に参加したりフォトコンテストで入選したりしても、記録する場所がなかった。SNSに投稿して終わりだと後から見つけづらいし、流れていく。外部サービスにまとめようかとも思ったが、自分のサイトで完結させたかったので、ページとして用意することにした。

一覧ページに並ぶ各エントリは4つのタイプに分類される。

Exhibition には会場のタイプを示すバッジが付く。VR かリアルかだ。VRChatでの活動が多いので、区別しておきたかった。

Exhibition には startDate と endDate を設定できる。現在の日付と照合して、自動で 近日開催 / 開催中 / 終了のステータスを計算してバッジに表示する。手動で書き換える必要はない。

Portfolio はステータスの概念がないので、バッジにはタイプ名（Portfolio）が表示される。

各エントリはクリックすると詳細ページに飛ぶ。コンテンツは MDX で書いていて、本文には写真を埋め込んだりXのポストを引用したりできる。

各ページの上部には ogImage で設定した画像がヒーローとして表示される。タイトル・日程・会場名・外部リンクはフロントマターで管理していて、ページが自動的に整形して表示する。

Galleryに works-ui があるのと同様、activities-ui（Activity Manager）というローカル管理ツールを用意した。npm run dev:all で起動する開発サーバーと一緒に立ち上がる。

やれることは：

これで MDX ファイルを直接エディタで書かなくても、基本的な情報はUIから入力できる。詳細な本文は引き続きファイルを開いて書くが、フロントマターの管理がだいぶ楽になった。

以前のトップページには Featured として選んだギャラリーの写真が3枚並んでいた。それをActivitiesの最新3件の表示に切り替えた。

写真を見てほしいという気持ちはあるが、「今何をしているか」をより前面に出したいと思った。展示やポートフォリオはGalleryに並ぶ写真より動機や文脈が見えやすいので、はじめて訪れた人への入口としてわかりやすい。

ギャラリー写真はヘッダーナビゲーションの Gallery から変わらず見られるし、トップページのヒーロー画像は引き続きギャラリーの写真を使っている。

Galleryをつくり、ブログをつくり、Activitiesをつくった。ひとまずサイトとして欲しい場所は揃ったと思う。
あとは使いながら直していく。