Add client-side search widget

[metzger100]

This pull request adds a client-side search widget to the theme, allowing users to search content directly on the site. The widget uses JavaScript to filter and display results from a generated index.json file.

Key Changes:

• Added local-search.html partial for search input, results display, and styling. You might have to check the css styling in local-search.html. I am not sure if I have the minimal approach to it.
• Added the index.json file to gather informations of all posts for the search script.

Note:

• Performance Warning: On large websites with many pages, this client-side search might increase traffic and slow down performance due to the large index.json file size. Consider server-side search solutions for bigger sites, maybe we need to add a warning to the README? I tried to minimize the size of the index.json by plainifying the content but it still contains the text of all posts.

[metzger100]

I will consider changing the relevance weighting of the search. Currently there is no priority for more matches of the searchterm in the content. So I may add a logarithmic calculation that increases the relevance value logarithmically for each additional hit in the text. This should mean that large pages will not be favored as much.
Something like that:

filteredPages = filteredPages.map(function (page) {
    let score = 0;
    let content = (page.content || "").normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase();
    let title = (page.title || "").normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase();

    searchTerms.forEach(term => {
        // Count matches
        let titleMatches = (title.match(new RegExp(term, "g")) || []).length;
        let contentMatches = (content.match(new RegExp(term, "g")) || []).length;

        // logarithmic calculation of the scores
        if (titleMatches > 0) {
            score += 5 * Math.log(titleMatches + 1);
        }
        if (contentMatches > 0) {
            score += 1 * Math.log(contentMatches + 1);
        }
    });

    return { ...page, score };
});

I am not sure if that is beneficial, so I want to test the current implementation first. RegExp() would also be much slower, than a simple includes(). So I am not sure if it is worth it.

[metzger100]

After further testing, I decided to add the logarithmic relevance calculation. First, the calculation happens on the client side, and second, the traffic caused by the index.js is most likely a problem before the performance hit of the RegExp function. I also fixed some final bugs. I limited the number of rendered results to 10 and added a cache-busting query so that the index.json is fetched on every reload of the website. Sometimes, the browser created a disk cache of that file, causing the index to become outdated.

I believe the pull request is now ready to be merged.

[mxmehl]

Thank you! I'm currently a bit low on time so review will take a while, sorry.

I never really dived into local search functions. May I ask how your work relates to the official docu on this on https://gohugo.io/tools/search/?

[metzger100]

No worries! I already have that search widget running, so I’m not the one who has to wait for it. ;-)

Thanks for the question! No, my work isn’t related to that. I tried the existing solutions for a bit, but I couldn’t get them to work properly without a lot of effort .

My approach is much simpler. I use the custom output formats of Hugo.

Speaking of which, I completely forgot that you need to enable outputs in the hugo.toml file:

[outputs]
  home = ["HTML", "RSS", "JSON"]

I will add that to the README.md, otherwise the index won't get generated.

The rest happens in the widget itself. It’s a super simple search algorithm with some CSS wrapped around it.

[mxmehl]

Ah, thanks for explaining! Perhaps it would make sense then to add this to the exampleSite, so that we basically have a test case and can demonstrate it live: https://github.com/pfadfinder-konstanz/hugo-dpsg/tree/main/exampleSite

Would you be able to do that?

[metzger100]

Should work now.

[metzger100]

OFFTOPIC: I wanted to inform you that I forked your hugo-snap-gallery.

I made changes like switching to CSS Grid instead of flexbox for better responsiveness on different screens, adding key navigation, improving captions on slideshows, fixing a weird rebuild bug resulting in vanishing css and js files (in the generated html code), and removing buttons for single-image galleries.

It might be interesting for you, after the version you use on your Website is kind of broken. The Lightbox only works for the gallery of "Pfingstlager 2018 im Orient" but not for "Pfingstlager 2017 in Westernohe".