[Docs] Implement improved full-screen search bar

[Luna-Klatzer]

Is there an existing issue for this?

• I have searched the existing issues

Current State & Issue

Currently, the website has a rather simplistic search bar, which serves as a basic way to search for content on the documentation.

This search bar does its job, but works rather poorly on smaller screens, as explained in #317 and overall doesn't look very good, as search results are listed in a very small space and you are unable to scroll for more results. To that, it seems very unstable, as the search index is hard-coded and not auto-generated yet.

Expected Changes & Improvements

• Improve the design of the search bar and make it a full-screen search bar, where results are shown in an overlay tab that lies on top of the rest of the website. This would allow the search bar to work better across multiple screens and overall be more dynamic, without having to interact with the rest of the page.

  A good example of this done well is the Shopify Documentation for Polaris:
  

• Add implementation for the auto-generation of the search index inside the build script build-webpages.ts or utilise a library/service to handle the search index for the docs.

• If possible, allow search based on description content, where the search index also contains the description at the start of every page.

Referenced sites

• Website as a whole (https://luna-klatzer.github.io/Kipper/docs/)

[Luna-Klatzer]

This could possibly be implemented alongside a migration to Jekyll as a building tool since it would simplify the search process and make it easier to index the pages.

Ref:

• https://blog.webjeda.com/instant-jekyll-search/
• https://jekyllrb.com/docs/

[Luna-Klatzer]

Another alternative would be:

• https://github.com/bvaughn/js-search