A lightweight, fuzzy, client-side search template for Hugo

tips & tricks
1

There are a bunch of these templates/tutorials floating around. Figured I’d throw another one into the mix for Fuse.js.

See the README.md for details.

9 Likes
2

Thank you very much for sharing this clean and well documented GitHub repository.

I’ve been using Fuse.js for a small site in production for a year. It’s a very simple site to search for a protestant parish in the French speaking part of Switzerland:

I will use your implementation as inspiration to improve my own. Fuse.js is really a nice tool (like Hugo).

1 Like
3

@nfriedli Glad to share it :+1: and I like the site you’ve made.

This was my first time using hugo’s js.Build and I was quite pleased - it transpiled TS into JS, bundled, minified, and fingerprinted the resource in a blink of the eye.

This was my first time using Fuse.js as well - simple API, fast, and was the simplest way I found to get fuzzy matching.

I also got to explore the URLSearchParams API - so if you refresh the page and have a value in the query url param, it’ll pick that up and fire the search on it.

4 Likes
4

Substring match highlighting has been added.

2 Likes
5

How to adapt it for multilingual sites?

  1. That is, without having to duplicate the main JS and search files.
  2. To allow translation of the JSON keys. If I duplicate the main.js file, only the “title” can be translated.
6

@tut - Short answer: am not sure.

Thinking out loud, you could generate a separate JSON index for each site language.

Then, depending on which site language was being used at the time, request that particular JSON index.

The TS file would probably need to be executed as a template, so that relevant strings could be swapped out, depending on the site language.

If you plan to tackle this, wishing you good luck :four_leaf_clover:

8

New issue. The JS code fails the Content Security Policy I set up because I use require-trusted-types-for 'script'; header. One issue raised in the console is the use of innerHTML.

9

Perhaps we could continue this discussion here:
https://github.com/zwbetz-gh/hugo-client-side-search-template/issues

10

I am not on Github. I use Gitlab.

11

Then maybe you should create a GitHub account. We are not going to use this forum to track issues for external projects.

12

This is a forum topic. I had no idea how this affects your ability to monitor other topics? Anyways, I have (moral and privacy) reasons why I don’t use GitHub. I will look for an alternative solution for now. Cheers!