結局Astroに戻ってきた

styling

Tailwind考 - uhyo/blog皆さんこんにちは。最近とある事情で Tailwind CSS にわりと真剣に向き合わないといけなくなった筆者です。 Tailwind CSSの話題は、Twitter…blog.uhy.ooo

生CSS。tailwindは好きだが、最近tailwindの運用の難しさを感じ始めている。

tailwindの利点としてはjsへの依存が少ない（静的解析はあるが、無くても動くしバンドルサイズも致命的なサイズになったりしない）こと、class名の部分にutilityを書けるのでcolocationがあること、あとは値に制限があるので割り切りを生みやすいことだろう。

jsへの依存の少なさは強力だ。新興フレームワークでも大体サポートされている（vanilla-extractやemotionはそうはいかない）。これは単にtailwindが人気というだけではなく、ビルドシステムへの介入が少なく簡単に導入出来るからだろう。これははっきりと大きな利点ではある。あるが、astroはCSSを自動でdata-属性でスコーピングしてくれる。これで十分じゃないか？

colocationも嬉しい。私はラップトップでの作業が多いので画面を複数開かずに済むのは便利だ。とはいえコンポーネントのサイズを常識的な範囲に納めていれば、これもAstroのCSSで十分ワークする。そしてReactならinline styleのCSSフレームワークがある。文字列のclass名はやたら長くなりがち（まぁ@applyでまとめればいいんだけど）なのもあり、強いかと言われると微妙だ。

そして値に制限があることの利点が一番怪しい。フォントサイズやパディングは良いだろうが、色は非連続なだけで自由に選べてしまう。これはデザインシステムを整備すればこの限りではないが、規模が小さいうちからデザインシステムを整備するのはちょっと面倒。

というわけでtailwindは剥がしてAstroのCSSだけで書いた。@layerを使ってreset、component、patchの3レイヤに分け、page内のスタイルはレイヤーなしとした。patchという謎のレイヤーはMDXだとinline codeもcode blockも同じcodeタグとして処理されるので、pre直下にあるcodeタグのcomponentレベルのスタイルを上書きするために導入した。かなりad-hocなレイヤーだが、mdxをそのまま使っている以上仕方ない。名前的にad-hocなのが明らかだし、これはこれでいいかな。

URL設計

URL構造は変えた。あまり変えるべきじゃないが、ちょっと今までのURL構造に不満があったので最後の更新のつもりで再設計。投稿は/blogから/postに名前を変更し、記事は全て西暦で分けることにした。ページネーションも導入し、/post/index.htmlを廃止して/post/page/1にリダイレクトさせた。ページネーションされたURLのみを採用したのはAstroのpaginateを使いたかったから。本当に便利です。

SEOまわり

@astrojs/sitemapとastro-seoを導入。OpenGraphとX向けのタグはastro-seoで提供し、JSON-LDデータはJSONを作る関数を書いてset:htmlで導入。ArticleとBreadcrumbsしか出していないが、他に出せるものもない。

RSS

bun add @astrojs/rss

をしてrss.xml.tsにGETハンドラを書くだけ。

OpenGraph 画像

@vercel/ogを使って素朴な画像を生成。フォントはローカルに持っておくと重いので都度Google Fontsからダウンロードするヘルパスクリプトを書いた。

emoji

:v: remark-gemoji

数式

remark-math + rehype-katex。CSSとfontをいい感じにminifyしたいが……。

TODO

• Link card
• サイト内検索（pagefindを使いvanillaで頑張る予定）
  • AstroのCSSと手でnodeを作ることの相性が微妙かも
• いい感じの脚注
• ページ内anchor
• code blockのタイトル対応
• dark-mode
• 表と図のfigureと参照。これは欲しい
• クライアント画面幅による画像出し分け