Implementation of filters in custom search modal.

[vivekjain23]

Description of change

• Added facet filter on search bar.

Links to any relevant issues

fixes https://github.com/iotaledger/iota-wiki/issues/1531

Type of change

• Enhancement (a non-breaking change which adds functionality)

Change checklist

Tick the boxes that are relevant to your changes, and delete any items that are not.

• [x] I have followed the contribution guidelines for this project
• [x] I have performed a self-review of my own changes
• [x] I have made sure that added/changed links still work
• [x] I have commented my code, particularly in hard-to-understand areas

[jlvandenhout]

Just as a consideration, since we already have to change the search component provided by @docusaurus/theme-search-algolia anyway to support dynamic selection of facets to filter. We could also use the UI components provided by instantsearch, which supports facet filters out of the box. Basically the steps would be to swizzle the SearchBar component, like we already have to do anyway, like described here, build the UI using the Instantsearch components and style it so it matches the rest of the Wiki (which we also need to look at anyway for the rebrand).

[github-actions[bot]]

This pull request has been deployed to Vercel.

Latest commit: 5829d3b22975a006558166c072023219366422e7

:white_check_mark: Preview: https://iota-wiki-pjyqx69ld-iota1.vercel.app

[lucas-tortora]

It seems we're having some css alignment issues. If you need a hand with this please let me know :)

[lucas-tortora]

@Ginowine and @salaheldinsoliman , could you please review this?

[github-actions[bot]]

This pull request has been deployed to Vercel.

Latest commit: 550bf08792fa08e7262210d154a6bc4f1bc39945

:white_check_mark: Preview: https://iota-wiki-hnh4vn2fg-iota1.vercel.app

[lucas-tortora]

It's looking better, but we still have some issues:

Please fix the following:

1. When you search within an open scrolled-down page we still have alignment issues:

2. The searched term is deleted when I enable or disable a filter using the navbar search. This bug doesn't seem to happen when using the search bar on the More results page. (see attached video)

Screencast from 2024-06-12 12-38-45.webm

[salaheldinsoliman]

The bar on the bottom side looks a bit off when zooming in/out:

I don't know if that's only in my browser though, but it looks normal in the current Wiki

[lucas-tortora]

@vivekjain23 , this popped up on the build test https://github.com/iotaledger/iota-wiki/actions/runs/9519155072/job/26241722402?pr=1560#step:7:159

[lucas-tortora]

@jlvandenhout, @Dr-Electron, could you take a look at the build error we're getting? I haven't been able to point out it's trigger this time

[Dr-Electron]

So I'm not going to pretend I understand any js code. But I can give you the actually error output without the bold error:

'[ERROR]' Docusaurus server-side rendering could not render static page with path /search/.
'[INFO]' It looks like you are using code that should run on the client-side only.
To get around it, try using `<BrowserOnly>` (https://docusaurus.io/docs/docusaurus-core/#browseronly) or `ExecutionEnvironment` (https://docusaurus.io/docs/docusaurus-core/#executionenvironment).
It might also require to wrap your client code in `useEffect` hook and/or import a third-party library dynamically (if any).

ReferenceError: window is not defined

[jlvandenhout]

The search query is cleared when the filter is changed in the search modal. This differs from the behavior on the search page, where it just updates the search results. I'd prefer if we can get the search modal to behave the same as the search page.