Full-Text Search with Minisearch and Alpine.js
One thing I wanted to add to my new and shiny Pollen website was full-text search. I have about 200 old blog articles on here, and it would be convenient to be able to find things now and then. It seemed like an easy enough thing to do, especially since I only intended to do it at the level of software bricolage, using existing tools.
So, full text search! Sounds exciting, eh? You can see it in action by clicking on the magnifying glass icon in the navigation bar (or hamburger menu, if you’re on mobile).
I had originally planned to build the search index from the Pollen sources for the pages I wanted to index, but I realised quite quickly that that was a stupid idea. It’s much easier to index the HTML pages generated by Pollen, because there are plenty of tools around for stripping tags out of HTML pages to get just the text, which is needed for indexing. If I’d worked from the Pollen sources, I’d have needed to parse the files myself (possible with stuff included with Pollen, but it would have taken more time than the solution I ended up with).
striptags package) and call Minisearch’s
add method to add the entry to the index. It’s really nice and simple. Minisearch produces a single JSON index file as output, which my web server just serves up as a static file.
On the client side, once you’ve got hold of the search index (more on that in a minute), you only need to call one method (called, surprisingly enough, "
search”) to perform a search, and the results come back in a format that’s easy to use for results output.
This looked just the ticket. They had me more or less from the moment when they gave a CDN link to put in your pages and the rest of the installation instructions were “That’s it. It will initialize itself.” After suffering extensive trauma at the hands of various web bundler things over the years, this was a very soothing thing to see.
And it was the real deal. The thing I’ve found in the past with frameworks like React and Vue is that once you get over the agony and self-abuse involved in getting the build tools to work, the frameworks themselves aren’t bad to use. Alpine.js shortcuts the build system self-abuse and gets you straight to the good stuff.
script tag inside my Pollen code. I think it’s pretty sweet.
My search page wasn’t completely trivial, since it needed to lazily load the search index when the page was first visited. I was worried this was going to be unpleasant, but it worked perfectly nicely.
The end result
Overall, I’m quite pleased with the outcome. Getting it all working was an outstandingly painless operation. Over years of disappointment, frustration and swearing at recalcitrant collections of electrons, “painless” has become my standard for the zenith of technological perfection. I’ve had a couple of those “painless” experiences recently, and I treasure them!