New command palette

Last month, I wrote about the new “command bars” UI pattern, and ever since the idea of adding one to this site has been kicking around my head. The design doesn’t support lots of links in the header, so an “over UI” for navigating seemed like a decent choice.

Yesterday I added a new command/control k command palette to this site. You can activate it by typing the keyboard shortcut or clicking the magnifying-glass icon in the header. You can exit the palette by pressing “Escape” or tapping on the overlay.

The component is built using Astro and some styles and TypeScript, which should make it portable to other sites once I iron out all of the bugs. I still get a kick out of how easy it is to build UI with Astro components. Well done, Astro team!

Currently your query has to directly match the content available, but I’m planning to add fuzzy matching in the future. In the meantime, I’m hoping that it simplifies the process of surfacing content on my site.

Happy commanding!