#Astro

Astroでローカル動画を遅延読み込み：preload="metadata"とrehypeプラグイン

記事にWebM/MP4を埋め込むとページが重くなる。preload="metadata"で最初のフレームだけ読み込み、クリックで再生開始する仕組みをrehypeプラグインで実装した。

AstroサイトにGoogle Analytics (GA4) をPartytownで導入する

Astro公式推奨のPartytownを使ってGA4を導入する方法。Web Workerで実行することでメインスレッドをブロックせず、Core Web Vitalsを維持できる。

Mintlify脆弱性はReact2Shellとは別物：フレームワークの責任と実装者の責任

Mintlifyで発見された脆弱性とReact2Shellの違いを解説。フレームワーク側の問題と実装者側の問題を区別することの重要性について。

Astro静的サイトにPagefindで全文検索を追加する

静的サイトに検索機能がない問題を、Pagefindを使って解決。ビルド時にインデックス生成、クライアント側でWASM検索という軽量な構成。

React2ShellがめんどくさすぎてNext.jsからAstroに移行した

CVSS 10.0のReact2Shell、修正したら別の脆弱性、また修正…。もう疲れたのでAstroに移行した。shadcn UIを60個入れて1個しか使ってなかった反省も込めて。

【Astro】ドラフト機能を実装する

Astroのコンテンツコレクションにドラフト機能を追加。開発時のみ表示、本番では非表示にする。

AIはAstroのスコープドCSSがJavaScriptで生成した要素に適用されない事を忘れる

Astroの<style>タグはスコープドCSSとしてコンパイルされるが、JavaScriptで動的生成したDOM要素には適用されない。解決策を解説。

AstroでYouTube埋め込みを軽量化：rehypeプラグインで遅延読み込みを実装

YouTube公式の埋め込みコードは重い。rehypeプラグインを自作して、サムネイル表示→クリックでiframe読み込みする仕組みを実装した。