Tagged: javascript

  • When Themes Don’t Change: Debugging Astro, CSS Variables, and Vim Keybindings

    When Themes Don’t Change: Debugging Astro, CSS Variables, and Vim Keybindings

    The dark/light mode toggle worked, debug logs showed the Vim key handler firing, but cycling visual themes with t/T mysteriously stopped changing the UI. This post walks through how we tracked the issue down across Astro, CSS variables, and keyboard navigation, and how a small change to CSS specificity and data attributes fixed it cleanly.


  • Headless Search in Astro with Pagefind

    Headless Search in Astro with Pagefind

    Move beyond the default UI and learn how to use Pagefind's powerful core API to build a completely custom, on-brand search interface in Astro. This guide covers setup, indexing content-only pages, and dynamically rendering results with your own components.


  • Implementing Vim Keybindings for Site Navigation in Astro

    Implementing Vim Keybindings for Site Navigation in Astro

    Learn how to add a powerful, mouse-free navigation experience to your Astro website. This post details a single JavaScript file that enables Vim-like keybindings for scrolling, jumping between list items, focusing the navbar, and even cycling through site themes, all managed with a clean, centralized script.

HQ Key Mappings

gg / G Jump to top/bottom of page
j / k Scroll page up/down
h / l Focus navigation bar and move left/right
c / Escape Remove focus from nav bar / Close modal
x / Enter Follow a focused navigation link
t / T Cycle through site themes
m / M Toggle light/dark mode
f / / Open search dialog
? Open help dialog