ダークモードを実装してもらった、RSS Feedを実装した、flatMapにリファクタリングした、プルリクエストをマージしたらIssueを自動で閉じれた

このサイトの改善を進めた

今日こそ色々やるぞと思ってたんだけどかなりスロースターターで、色々手を付けられ始めたのは夜になってからだった……。

僕が昼寝している間に@tabemidayoがいい感じにダークモードを実装してくれた。

投稿内容自体はマークダウンをパースして HTML にして埋め込んでいるので TailwindCSS をうまく活用できず、それにより TailswindCSS のダークモードの設定がうまいこと使えなくなってしまい、どうしたものか……という感じになっている。

シンタックスハイライトをライブラリに任せようとしているので、早めに移行したい。

参考程度に記事ページだけ載せておく。

もともと Feed を配信してほしいという要望をいくつかもらっていたので、優先度を高めて実装した。

RSS Feed、そもそも名前だけ聞いていて実際どういうものかよく分かってなかったのだけど、雑にググってひとまずなんとなくは理解できたのでそのまま進めた。

さすがにライブラリあるやろと高をくくっていてなかったらどうしようと思っていたが、実際ちゃんとあったのでよかった。

今回使ったのは feed というやつ。

rss というライブラリがあったのだけど、最終更新が 4 年前とかで不安だな〜と思って色々調べていたら以下の記事に辿り着いた。

この記事で feed について言及されていて、最近もメンテナンスされているし使い方も解説してくれていたので使うことにした。

このサイトでは記事の一覧を取得する際に中身は取得していない(タイトルや日付やタグのメタ情報だけ取得できればよい)ので、Feed 用にコンテンツの中身も返す関数を作った。

上記の記事では marked というライブラリを使ってマークダウンを HTML にしていたが、今回は記事を返すところで remark を使って HTML にしてしまっている。

で、map の中で await を使って怒られてわけわからんとなって調べて以下の記事を読んで解決した。

async/await というか Promise とか非同期処理に関する知識があまりにも曖昧なので、今度整理してちゃんとまとめようと思った。

Feed の生成を実装してローカル開発環境で/rss/feed.xmlにアクセスして確かめるとシンタックスエラーっぽいのが発生していてダメだった。

で、何が原因なのかしばらく分からなかったのだけど、エラーの部分に0x08という文字があり、うわ〜文字コード関係かな〜と思って0x08でググったら以下の記事がヒット。

これっぽいなと思ってひとまず記事内で言及されている VS Code の whitespace+という拡張機能をインストールし、設定ファイルをそのままコピペして使わせてもらったら 6 月 19 日の記事に制御文字が潜んでいることが発覚した。

この記事なかったら本当に頭を抱える以外のことができなかったのでめちゃくちゃ感謝。

6 月 4 日の記事で flatMap について学んだのを思い出して、記事取得の一部をリファクタリングした。

map 内で指定の tag が含まれている場合はその記事を返し、含まれていない場合は無を return している。これで undefined を返すことになる。その後filter(post => post)で undefined の要素を取り除いている。

だが、これはflatMapを使えばループが一度で済む、というのを前の自分が書いた記事を思い出してそれを見て書き換えた。

map 内で undefined を返すところを空配列にするのを忘れて一度ビルドがコケたが、すぐに気づいて直せたのでよかった。

プルリクエストに関連 Issue の番号を指定通り書いておいたら、マージをトリガーに Issue も閉じてくれるというのを、前からあるのは知っていたけどどうやるか分からず、今回調べてやったら便利だった。

プルリクエストのタイトルや description、コミットなどに書いてあればよく、引っかかるワードもclose #nとかfix #nとか色々あって、自分はなんとなくresolve #nと書いた。