Expressive Codeでコマンド出力にラベルを付ける — Gutter APIとコピーボタンの書き換え
AstroブログのExpressive Codeプラグインでコマンド出力を示す方法。ガター要素のAPI、プラグインの実行順、そしてコピーボタンの中身を書き換える手順まで。
Astro
AstroとVercelで手書きの自己検証CSPを実装する — 公式のsecurity.cspがオフライン機能を静かに壊していた
Astro公式のsecurity.cspはService Workerの登録を静かに壊すことがある。CIと実ブラウザの両方で検証する、手書きのCSPをAstro/Vercelに実装した記録。
Astroブログでループ動画を一時停止可能にする — WCAG 2.2.2でGIFを、iOSのハードウェア非対応でVP9を退けた
GIFには一時停止APIがなく、WCAG 2.2.2で不適合になった。VP9より大きいMP4を選んだのはiOSにVP9のハードウェアデコーダーがないため。エンコード手順とガード、テストの記録。
このブログの記事はデスクトップで本文が狭く小さすぎた — dev.to に合わせて直したら、CJKの行長バグも見つかった
Astro の記事ページは 68ch/17px で狭く小さかった。dev.to の実測値に合わせて拡大したら、ch 単位が隠していた CJK の行長バグも直った。
Astro ブログで関連記事をタグの重なりから選ぶ — IDF 重み付けと実測で決めたしきい値
タグの希少度で重み付けした重なりからビルド時に関連記事を選ぶ方法、本文への TF-IDF が 3 言語で破綻する理由、そしてスコアのしきい値を実測で決めた過程。
Service Worker が記事一覧を1回分古いまま返していた — 一覧だけネットワークを先に見る
Astro の Service Worker がすべてのナビゲーションをキャッシュ優先で返していたため、新着記事が1回分遅れて出ていました。一覧ページはネットワークを先に見るようにしています。
Astroブログで読んだ記事をオフラインでも開けるようにする — Service Worker、ページ50件の上限、TTLなし
計測がAstroブログのService Workerの設計を決めました。11.7MBのHTMLではなく287KBを事前キャッシュし、ページは50件で上限、有効期限は設けません。
転載で読者を増やしつつ自分の記事を主にしておく — rel=canonicalと全文RSS
被リンクとrel=canonicalが何をするのか、ZennとQiitaで方針が変わる理由、そして記事の転載を作業ではなく貼り付けに変えたパイプラインの話。
AstroブログをGoogleとChatGPTに見つけてもらう — robots.txt・JSON-LD・IndexNow
このAstroブログにrobots.txt・JSON-LD・Markdown版・IndexNowを入れるまで。Googleに見つからなかった原因はドメインではなく、llms.txtも解決策ではありませんでした。
Vercel Web Analytics で人気記事にバッジを付ける — ビルド時に解決し、静的サイトのまま配信する
このブログが人気記事にバッジを付ける仕組み。ビルド中に Vercel Web Analytics へ 1 回問い合わせ、3 つのロケールを合算して静的 HTML に焼き込みます。
Astroの静的ブログで「いいね」を数える — Vercelの1ルートとUpstash Redis
完全な静的Astroサイトにサーバーレスなルートをひとつだけ足し、「いいね」を共有カウントする方法。Upstash Redisのキー設計と、動作を確かめるまでに踏んだCIのバグをまとめます。
Astroの図版を自分のサイズで描かせ、タップで拡大できるようにする — 固有幅・ネイティブダイアログ・@2x
Astroでwidth:100%が256pxのスクリーンショットをぼかしていた理由と、ネイティブダイアログでスマートフォンでも図版が読めるようになるまで。設計を正したのは7つの計測でした。
Pagefindのステミング警告は見当違いだった — 日本語検索を壊していたのは分かち書きの不一致
Pagefindはビルドのたびに日本語と中国語のステミング未対応を警告していました。本当の不具合は別にあり、検索語と索引のトークナイザーの不一致が誤ったページを返していました。
Astroの共有ボタンを言語ごとに出し分ける — デスクトップは固定レール、モバイルはラベル付きのピル
AstroでIntent URLから共有ボタンを組み立てる。ロケールごとに異なる共有先、広い画面での固定アイコンレール、そして途中で見つかったエンドポイントのずれ。
Astroの目次で読者の現在地を追い続ける — スクロールスパイ・共有レール・モバイルのdvh
Astroの目次にスクロールスパイの追従、見出しの深さを問わない1本のレール、dvhによる高さ上限を実装した記録。モバイルのmax-heightを無効化していた::details-contentの生成ボックスまで。
AstroブログにExpressive Codeを導入する — ファイル名タブ・ファイルアイコンと、読めていなかった97個のコードフェンス
Astro 7でExpressive Codeを導入した記録。ファイル名タブ、テーマ別のファイルアイコン、Sätteriプロセッサの落とし穴、そしてShikiが言語名として読んでいた97個のコードフェンス。
Astroのコンテンツコレクションだけでブログを運用する — CMSを捨て、MDXを選び、外部キーを型で置き換えた話
このブログにCMSがない理由。画像から決まったディレクトリ構成、MarkdownではなくMDXを選んだ判断、そして外部キーの代わりになったタグレジストリについて整理します。