Add search functionality to website

[neteler]

It would be great to have website search (at time not implemented at https://staging.grass.osgeo.org/ while the old CMS offers it).

Apparently, there are different technologies available for that:

https://gohugo.io/tools/search/

[veroandreo]

The academic theme had a built-in search that might be useful too. It is then displayed as in: https://sourcethemes.com/academic/ (the magnifier glass in the upper right part :))

[nbozon]

Basic static "search engine" implemented and proposed in #131 Please test and reviw @neteler @lucadelu @veroandreo

[veroandreo]

Hugo-academic was renamed to wowchemy (MIT license). Here are the search functionalities provided:

• built-in: https://github.com/wowchemy/wowchemy-hugo-modules/blob/master/wowchemy/assets/js/wowchemy-search.js
• Algolia: https://github.com/wowchemy/wowchemy-hugo-modules/blob/master/wowchemy/assets/js/algolia-search.js

Maybe we can just adapt one of them accordingly and re-use. I cannot really judge how difficult it might be.

The built-in one works nicely in my website. However (dunno if relevant for grass website), wowchemy docs say:

Note that this search engine runs entirely in the web browser on the visitor’s device. Thus, it is not scalable to an extremely large number of pages. If you have a very large amount of content and find the search running slowly, we recommend opting for a server-side search engine such as Algolia or Google

@nbozon, @lucadelu what do you think ?

[lucadelu]

@nbozon, @lucadelu what do you think ?

No clear idea, I looked at the code and this is only the client side there should be something more (like json document with all the info and some html code). Sorry but I have no time, now and probably in the next months, to spend on this topic

[veroandreo]

@nbozon, @lucadelu what do you think ?

No clear idea, I looked at the code and this is only the client side there should be something more (like json document with all the info and some html code).

This is what I found:

• https://github.com/wowchemy/wowchemy-hugo-modules/blob/master/wowchemy/layouts/index.json
• https://github.com/wowchemy/wowchemy-hugo-modules/blob/master/wowchemy/layouts/partials/search.html

Sorry but I have no time, now and probably in the next months, to spend on this topic

No worries, I just wanted to understand which files were needed

[ecodiv]

This blogpost outlines some simple steps to get a client-side search page in a Hugo website: https://blog.wains.be/2020/2020-06-02-hugo-search-lunr/. It uses one of the options also mentioned in the link by Markus, hugo_lunr. Perhaps I am overlooking things, but this seems do-able?

[nobeeakon]

coming to this old discussion. In Hugo's website they discuss basically two approaches: client side and paid.

• Client side: the client needs to load all the information needed for the search + a js library to perform the search. The js libraries they suggest are not so heavy and must be fast. The issue is it implies loading all pages of the site just for this feature to work. So, a lot of data for a feature that the user may not even use. Also this will happen every time the user navigates (even when going back). In broad terms the implementation is: Hugo can generate a json containing all the pages info (content + title + tags + dates+ etc etc), fetching this data in the client , and lastly using some library to search (lunr, fuse, etc). As can be seen, as the site grows the data you need to load increases. So, loading every possible piece of data the user may search may be just too much and it may impact loading times and so on..

• Paid: algolia, and so on. Never used those, but guess they offer a light weight API and they handle the rest.

There is a third approach that is not really a search feature in the site itself, but that does the job. This is jus using some search engine (google, duckduckgo, etc) for the search and redirecting the user to the search engine.

As for the previous work that has been done. There are currently two old PRs, both using client side approach. #131 uses Vue (which may be a heavy library for this use case), and #242 which uses client side approach plus duckduckgo.

So, the options are:

• client side:
  • Pros: no need to link external sites, not paid
  • Cons: need to load everything in the client everytime the user navigates
  • Paid:
  • Pros: light, fast
  • Cons: paid
• Search engine (duckduckgo, google, ...)
  • Pros: simple, light, not paid
  • Cons: no really an insite search, but linking another site, so the user needs to click to go again to the site

From my point of view, if it's not an option to pay, I'd go with the search engine option.

@veroandreo

[veroandreo]

Thanks for your summary and analysis @nobeeakon :)

I'm fine with the option of using a search engine as @neteler proposed in #242. My reasoning and question here is: add a search engine to a website means the user wants to search something within the website content (first), otherwise they directly use google or duckduckgo... so, can that be somehow ensured? i.e., that the input search word is first searched for within the content of the website?

What do others think?

[nobeeakon]

@veroandreo , yep, for example in @neteler implementation, when searching spatio, you are redirected to Duckduck go, and get this (autommatically adds site:grass.osgeo.org so gives the info of the site you want to seach):