cuttlebelle
cuttlebelle copied to clipboard
Create a search engine
The API would be simple:
- index content files into a eg
index.json
- each page has an entry with content and metadata like
url
,date
,tags
etc - on query return that URL with relevant content bit (20 words before, 20 words after)
- run as API in backend and query it from front end
- alternatively because some providers don't offer server side node script you can load the same script on the front end
pros:
- because content is isolated the content json would be small
- content inside front-matter will be easily attributed to a partial and a page
- can run on both back and front end
draw backs:
- content inside layouts won't be found
I'm currently trying to integrate Lunr.js into our Cuttlebelle site. Any suggestions on a convenient way to add the content data to a search index?
My plan is to generate the Lunr static index during the build and save it as a json file.
What you got so far is pretty amazing if I may say so myself. https://github.com/govau/designsystem/blob/master/server/search.js
It loads the content into a json and uses the backend to do the search which means your search will work without js AND the frontend doesn't have to load a large json file oif pretty much all your content for everyone. I personally think this makes more sense for designsystem.gov.au @sirleech ;)
Thanks for that @dominikwilkowski - It's pretty cool.
One disadvantage I see going this way is that the Cuttlebelle site is slightly less portable, as it requires a node environment for the express server.
A purely client-side search, although less payload efficient, has the flexibility to be deployed in non-node environments.
Definitely true. Though doesn't seem to be an issue for you as you have the awesome govau cloud to your disposal and I would rather save people from having to download all the content of the entire site for a search than locking yourself out of a node option? Interesting to see what you will end up with.
Hopefully the prebuilt Lunr index is smaller than the entire site contents. Time will tell!
One more nice thing about client-side search is that it works in the development environment, i.e. cuttlebelle watch
.
I'll post back with my progress on Digital Guides (govau/service-manual) search.
Just be careful balancing developer experience vs user experience. In the past client side search has always been a burden on the user however I would recommend testing it and letting me know 👍
Here is a search prototype with elasticlunr.js:
https://service-manual-search-staging.apps.y.cld.gov.au/
We are going to move back to lunr.js to take advantage of fuzzy search and result position for snippets.
https://github.com/govau/service-manual/tree/search-staging