KB: Improve KB search - search by title, description (tags)

[Blargian]

Summary

Uses https://github.com/nextapps-de/flexsearch to do the indexing -> gives us more flexibility in future

• Searches by title and description now
• implemented new navigation design for knowledge base
• added breadcrumbs to KB page

Checklist

• Delete items not relevant to your PR
• URL changes should add a redirect to the old URL via https://github.com/ClickHouse/clickhouse-docs/blob/main/docusaurus.config.js
• If adding a new integration page, also add an entry to the integrations list here: https://github.com/ClickHouse/clickhouse-docs/blob/main/docs/en/integrations/index.mdx

[gingerwizard]

As discussed:

• Add All KB articles next to All tags
• Add All tags (right aligned) to All KB articles

[Blargian]

@gingerwizard @crisalbu tagging for review and testing : https://clickhouse-docs-47khsdid1-clickhouse.vercel.app/docs/knowledgebase

[crisalbu]

Thansk @Blargian !

the breadcrumbs should look and behave in the same way they behave for other categories, see example below:

[Blargian]

Thanks @crisalbu, fixed. Here's the latest version: https://clickhouse-docs-kt9adis2h-clickhouse.vercel.app/docs/knowledgebase

[crisalbu]

Thanks @Blargian!

The title shouldn't change to Recently added or Tags in this case, it should stay the same: Knowledge base.
I know, it's a bit weird, because of the button group, but let's implement it like that, please, since that is what we're displaying.

[crisalbu]

Also, can we keep the breadcrumb in the same position?

When we click on a KB article, there's some top margin added to it, not sure why, see example below:

Correct
Incorrect

[Blargian]

@crisalbu Title and alignment of the breadcrumbs on the article page fixed, latest changes here: https://clickhouse-docs-plc2wgdl4-clickhouse.vercel.app/docs/knowledgebase

[crisalbu]

Just spotted another small error, there's no space here, and since we're using Knaowledge Base as title, we should also use the same format for the breadcrumb.

[Blargian]

Just spotted another small error, there's no space here, and since we're using Knaowledge Base as title, we should also use the same format for the breadcrumb.

That's because the breadcrumb uses the page url /docs/knowledgebase which has it as a single word. I'll add something to display it as two words.

[Blargian]

@crisalbu With breadcrumbs for Knowledge Base as two words: https://clickhouse-docs-1icbcs6a3-clickhouse.vercel.app/docs/knowledgebase

[crisalbu]

Spotted another one:

• When you search by Tags, the title 2 posts tagged with .... should be displayed under the button group. The title should stay the same, Knowledge Base, until the user clicks on an article, in which case, it should change.

How it was designed
How it was implemented

Figma design available here

[gingerwizard]

minor but some questions

[gingerwizard]

nit:

[gingerwizard]

here @Blargian

[gingerwizard]

whats the value here? why do we need to persist results in local storage?

[Blargian]

Has to do with how the docusaurus blog components are setup, there is no single component for the sidebar, tags page, the recent page and the article page which renders those components conditionally. As a result when you change urls the sidebar re-renders each time and causes these ugly glitching effects. I'm using local storage to persist the current search between page navigations between the different components.

[gingerwizard]

reluctantly accepting the state storage between re-renders, not good alternative

[gingerwizard]

here @Blargian

[gingerwizard]

here