rssを追加 & ダークモード追加（onigiri.w2 v1.2）

個人サイトにいくつかアップデートを加えました。主に以下の3点です：

1. ダークモードの追加
2. RSS対応
3. コードブロックのスタイル調整（Markdown）

1. ダークモードの追加

今回はCSSの標準機能である color-scheme と light-dark() を使って、ダークモードを実装しました。最近のブラウザならほとんど対応しています。

Tailwind CSSと組み合わせるときに便利なのが next-themes。これで color-scheme の制御を任せられるので、簡単にテーマの切り替えができます。

@import "tailwindcss";
 
@theme {
  --color-bg: light-dark(#fff, #000);
}
 
:root {
  color-scheme: light dark;
}

この light-dark() を使うことで、Tailwindの dark: プレフィックスをあまり使わなくて済むのが嬉しいところ。

参考リンク：

• color-scheme (MDN)
• light-dark() (MDN)
• next-themes GitHub

2. RSS対応

意外と苦戦しました。

フィードそのものはライブラリで生成できるのですが、問題は description の扱いです。
ここには HTML を文字列として入れられるのですが、記事は MDX 形式なので一筋縄ではいきません。

最初は rehype で HTML に変換しようとしましたが、MDXに含まれる JSX 部分がうまく処理できず...。

最終的には、

• MDX → React コンポーネントに変換
• それを renderToString() で HTML に変換

という流れにしました。ひとまずこれで動いています。
詳しいコードは GitHub を見てください（スクリプト一発でやってます）。

3. コードブロックのスタイル調整

Markdownのコードブロックには、rehype-pretty-code を使いました。

導入は簡単。ドキュメントを10分も読めば使えるようになります。

ただし、light/dark モードごとのスタイル切り替えには少し工夫が必要です。
theme オプションでスキーマを分けるだけでなく、CSS側でもちゃんと対応してあげましょう。

こちらも、具体的な実装は GitHub をどうぞ。