月別の記事一覧を表示するための実装その4

3/26の続き。

ちまちま続きを実装していてもう最終盤なんだけど、一ヶ月も経っている……。最近ちょっと色々なもののペースが遅い。

プルリクエストはこれ↓

内容としては、

年月の選択肢(2022-04とか)を選ぶとその月に投稿された記事のみの一覧が表示される
ホーム表示(/pages/index.tsx)は表示時点での月に投稿された記事の一覧が表示される
- といってもビルド時に年月情報をディレクトリから取得するので、更新が滞れば表示時点での最新の月が表示されるようになる、はず
月別の表示は/posts/YYYY/MMのようなURLになる
react-selectを使って選択肢を表示する

といった感じ。

今はもう表示はできていて、あとはreact-selectの見た目の調整をしたり、セレクトメニューをコンポーネント化したりしている。

react-selectの見た目は、

これのCustomised Styles for Single Selectの部分を参考に、基本のスタイルはreact-selectのものを使い、ライトモード/ダークモード時の見た目を調整している。

見た目の調整でisFocusedやisSelectedのような状態がreact-selectから提供されるので、それの条件分岐で見た目を変えていたらわりとコードの行数が膨らんでしまい、ホームと月別のページで表示する内容は同じなのでコンポーネントに切り出したくて切り出し中という感じ。

かなり時間がかかってしまっているので、もうちょっと集中してババっと実装したい。最近怠慢だな。

月別の記事一覧を表示するための実装 その4