21 April, 2020
After being in lockdown for over a month I was bored as hell. So, recently I created a website for sharing my recipes with the world. I choose Jigsaw to create this site as it was very quick and easy for me to built because it's based on Laravel's Blade templating engine. I also didn't want to spend any money on the site, so a static site was the perfect choice for me. I built the side within a day and deploy it to netlify. I launched the side with 10 recipes only, but soon I started adding more and more recipes and after a week the number of recipes was more than 40. I was looking for a search solution for the site. There was couple of paid choice, but I didn't want to spend any money, so those were not a viable option for me. Then I found a nifty little npm package called fuse.js. It was exactly what I needed. Let's talk about the implementation.
Fuse.js needs some kind of index to be able to search. It could be a simple json array. It was very strait forward to generate the index with a Jigsaw afterBuild event listener. I created this file on listeners/GenerateIndex.php location.
Then I hooked the event listener in the bootstrap.php file like this-
Then every time I built the site, all the gist of all my recipes goes to a index.json file in the built directory. This file will work as the api for my fuse.js search.
Now, let's talk about the search functionality. I opt in for simple vue.js single file component for the search with a very basic styling. Here is the code for that file-
Finally I added the search component in the the navbar to render the search field-
It just works like a bridge.
You can visit the website here and the whole source code can be found in Github. Enjoy!