When I first launched this site revamp, it was notably missing one feature: a working site search! The issue was less a problem with function and more one of form. I never liked the way the search worked on my old WordPress site, and with the increased freedom afforded by building my site from scratch, I decided it was time to design a search I actually like.
What I Want from a Search
My primary requirements were that it be unobtrusive when not in use, work on mobile devices, and have some form of live search functionality. All easily accomplished by implementing something akin to the Spotlight search used by Apple. After much research and experimentation, I finally settled on a nifty library called kbar.
Why I Chose kbar
There are many options for implementing command palette functionality in a React site, so why did I choose kbar? The kbar documentation is minimalistic at best, and is missing a fair bit of detail necessary to implement my search the way I want it. However, this trend continues with the library itself; unlike similar libraries, kbar is truly unconstrained. You can easily override virtually every part of the system, and it's unstyled by default, but allows styling through Tailwind classes. This flexibility allowed me to adjust the system to work the way I wanted, including the inclusion of excerpts in both the display and logic of the search functionality.
Is this the end of my customization to the search system? Probably not. It's a fun library to work with, and I'm sure, given time, I'll think of something else I want to add or adjust. For now, it's pretty, and it works on both desktop and mobile. I'm happy with it.