Wanted to share it here in case others find is useful.
I took inspiration from other examples out there and updated them to make use of Hugo pipes and avoid any extra, separate build steps. I was quite pleased with the end result! Happy to answer any questions on it.
The search capability is built on the Lunr library but could be utilized with other similar libraries. I brought in Preact (a lighter weight version of React) to add a search-as-you-type feature and make the process of rendering the results a bit easier.
Thanks for sharing this. I tried out the search on your website and it’s super snappy. I like how the search results show up in real time as you type.
Do you think you can package this into a Hugo Module? If possible, that can helps folks like me who are unfamiliar with JavaScript and related tool chains.
Here’s an example where a couple of people helped me package Fuse.js based search.
That’s a really neat idea. When I was going through this I had ended up staying away from trying to make it into a library, because it felt inherently rather integrated with the site’s structure and specific implementation choices of the website, e.g. page naming, DOM structure of result rendering, etc. The thing that seems trickiest is picking the right level of abstraction and customization to expose.
However I wasn’t really aware of modules before looking them more closely now, which may allow things to be sliced up more precisely in a way that could be re-used. If I am able to pull something together that may be more reusable rather to expand on the walk-through the post provides now, I will post back here!