はじめに 静的サイト向けの全文検索エンジンである Pagefind と Cloudflare Workers + D1 を用いて、Next.js（SSG）の静的サイトに全文検索機能と人気キーワードの集計機能を実装する方法の備忘録。 技術構成 技術 用途 Next.js (App Router) フロントエンドフレームワーク OpenNext Next.jsをCloudflare Workersで動作させるために使用 Cloudflare Workers デプロイ先 Pagefind 静的検索エンジン Cloudflare D1 検索ログ保存用データベ...
zoxide とは Linux コマンドcdの改良版。z コマンドで移動したディレクトリを履歴としてデータベースに保存し、頻繁に使用するディレクトリに高速に移動ができるようになる。 例えば、今までcdで次のように移動していたものが、 ~ cd path/to/develop/project-name zoxide インストール後に移動した場合は、データベースに履歴が保存され、次のコマンドだけで移動できる（z pro とかだけでも移動できる） ~ z project-name zoxide のインストール homebrew でインストール brew install zoxi...
環境 Astro: 4.0.3 Package manager: pnpm 発生した不具合 色々な Web サイトで見かける、現在の path とナビゲーションメニューの path が一致している場合にメニューをハイライト表示する実装を Astro.url.pathnameで実装していた時に起こったバグ(?)。 ↓ こんなやつ（ /about ページのとき ） 実際のコード（CSS は省略） Menu.astro --- const navItems = [ { name: "Home", path: "/", }, { name: "A...
はじめに 「Vanilla JS ハンバーガーメニュー アクセシビリティ」で Google 検索したとき、なかなか良い記事に辿り着けなかったので備忘録としてソースコードを残しておく。（※ライブラリ等は使用しません。） 最終的なソースコードはこちら。 https://codesandbox.io/embed/eager-elion-6ffwzs?fontsize=14&hidenavigation=1&theme=dark&view=editor 実現したいこと ハンバーガーメニューをクリックするとナビゲーションが開き、ハンバーガーメニューの「≡」と「×...
概要 個人サイトに Zenn の記事を掲載したときのメモ Zenn の記事を取得する API Zenn の記事は以下の API から取得 https://zenn.dev/api/articles?username=(ユーザーID)&order=latest ソースコード BlogList.tsx interface Post { id: number; path: string; emoji: string; title: string; published_at: string; } export default async functio...