Flexsearch implementation from Hextra (with highlighting)

[jollydodo]

Hey,

I just stumbled across the Hextra template and noticed that they also use Flexsearch. The code is really well annotated and their implementation is really nice in that it structures the search results per category and more importantly: highlights the search input In the result sections. This is the main thing that I'm now missing in the current Hugo template, because Doks only shows the general top text and not the section of that is found on the page.

example:

Trying to search for 3D scanner shows pages where to context of '3d scanner' is not clear from the result. For the pricelist result you would for example rather see the specific section where '3d scanner' is mentioned on that page:

Hextra doesn't seem to do this either (not all the time at least?) but searching for a general term like "hextra" does clearly highlight sections and shows that the result is part of a specific docs section or the about page / blog for example:

This makes it easier to select the right result

Also, the current implementation is perhaps aimed too much towards the docsearch implementation, because even the flexsearch version shows "recent searches" which is not applicable to the current flex search implementation:

Don't get me wrong, The doks search implementation works really well! It's lightning fast and does what it is supposed to do. I just thought that it might perhaps be useful to look at the Hextra version and code for small improvements.

Template:
https://imfing.github.io/hextra/

flexsearch implementation:
https://github.com/imfing/hextra/blob/main/assets/js/flexsearch.js

Hextra uses Tainwindcss so we unfortunately can't use everything.

[h-enk]

That's a super nice theme!

It surely is a good idea to look at how Hextra did things — not only FlexSearch