まえがき かつて静的サイトジェネレータの Hugo で Tailwind CSS を使おうとするとうまくいかないことがありました。 たとえば hugo server で起動中、新しいクラスを付けてホットリロードしたのに見た目が反映されない……ということが、Hugo だと容易に起こります。 また、それを解決するための設定は一筋縄ではいきませんでした。 しかし最近改めて調べてみたら、去年 Tailwind CSS のためだけに新機能が実装されていました。 現在はそう複雑ではない設定で Tailwind CSS を快適に使うことができますので、今後 Hugo を使う方にご紹介したいと思いま...

Hugo で Zenn の記事へのリンクを RSS から取得し、通常の記事と混ぜてトップページに表示する。

概要 astro-typed-links は先月 v1.0.0 がリリースされたばかりの比較的新しい Astro Integration で、型安全にリンクを書けるようになる。 Astro の公式ブログ で紹介されていたので使ってみた。 環境 astro: 5.1.2 astro-typed-links は Astro v5 で追加されたばかりの astro:routes:resolved というフックを用いているため、Astro v5 が必須 astro-typed-links: 1.1.1 使ってみた インストールについては README に従って pnpm a...

@pixiv/three-vrm を使って VRM を個人サイトに表示し、VRMA でアニメーションもできるビューワーを作って公開した。

モチベーション Storybook は大変素晴らしいツールで非常にお世話になっているが、v6 時代に依存関係で多少面倒だった覚えがある。[1] そこで今後また Storybook 自体の更新の遅さが負債になるケースを想定し、代替ツールを調べてみて最初に見つけたのが Ladle だったので、これに移行できそうか調べてみた。 https://ladle.dev/ Ladle の依存関係については、React にしか対応しないという潔さもあってか Storybook よりはシンプルである。 webpack は使用しておらず、Vite を採用している。 Ladle を試してみる 私のユー...

モチベーション Next.js の App Router で 全ページに dynamic rendering を強制している loading.js を一つも配置していない という状況のとき、prefetch（プリフェッチ）で fetch によるデータの取得が行われるのかの理解が曖昧だったため改めて検証した。 環境 Next.js v15.0.1 App Router 検証に使用したソースコードは下記に配置した。 https://gitlab.com/k1350/nextjs-15-prefetch-test Link コンポーネントの prefetch 以外の設定はすべて...

概要 九月半ば、Astro DB に関する変更がアナウンスされました。 https://astro.build/blog/goodbye-astro-studio/ これまでの Astro DB は Astro Studio というプラットフォームを使用することが前提となっていたのですが、Astro Studio は廃止されることになりました。 その代わりに あらゆる libSQL データベースに接続可能になります。 接続先の例として挙げられているのは Turso です。 元々 Astro Studio は Turso のラッパーみたいなものだったので、今後は直接 Turso を使え...

Next.js（App Router）で、どこかのページで revalidatePath するたびに別のページの Suspense で囲んでいる部分がローディング表示になる事象が起きたので、どうしてそうなるのか詳しく調べた。

もう少し具体的に言うと、親コンポーネントから子コンポーネントに渡した関数を、子は自由に実行するのだが、実際にその関数が実行されるのは最大で 1 秒に 1 回にしたい。

Pagefind で Hugo 製のブログに検索機能を付けて Cloudflare Pages でデプロイする。