Implement Algolia DocSearch: update to v3, place input inside navigation

[mwojtul]

This expands upon the work started in https://github.com/vikejs/libframe/pull/1.

Some desired features that were discussed in that first PR:

• placing the search input in the navigation header
• implementing similar search input styling to Vite
• recent search history

Luckily updating to v3 gets us all of this for free and the new styling means it won't look weird in the navigation anymore.

I also added it to the mobile header so that the search appears in the top right corner when the navigation becomes toggleable.

[brillout]

Lovely, looks exactly like Vite's search 👌.

I also added it to the mobile header so that the search appears in the top right corner when the navigation becomes toggleable.

Neat, good idea.

Seems like Alogila fails crawling vite-plugin-ssr.com, for example:

Ideas why?

While I share the sentiment to make the sidebar header sticky, vite-plugin-ssr.com has a lot of pages and I'm therefore somewhat relunctant to reduce the hight of the sidebar. On latptops, the sidebar's height is quite significantly reduced. Maybe we can assume the user to remember that vite-plugin-ssr.com has Algolia search and to know about the "CTRL + K" shortcut?

Looking forward to merge this in.

[mwojtul]

Seems like Alogila fails crawling vite-plugin-ssr.com, for example:

After looking at their docs, it seems we may need to rerun the crawler after specifying the selectors: https://docsearch.algolia.com/docs/record-extractor#usage

I think that has to be done through https://crawler.algolia.com/ though?

I think adding appId might help as well. Maybe it should be an env variable like indexName and apiKey.

While I share the sentiment to make the sidebar header sticky, vite-plugin-ssr.com has a lot of pages and I'm therefore somewhat relunctant to reduce the hight of the sidebar.

Removed the sticky header 👍

[brillout]

Just sent you the credentials for https://crawler.algolia.com/ and yes I checked the crawler can be extensively edited at https://crawler.algolia.com/admin/crawlers/e6af3c02-e4bd-4782-a0b0-9912071de609/configuration/edit.

I think adding appId might help as well. Maybe it should be an env variable like indexName and apiKey.

Let me add it.

[brillout]

Let me add it.

https://github.com/brillout/vite-plugin-ssr/commit/6f70162f414aebc9a418878adfce464a0446509c; we can now access it at pageContext.meta.algolia.apiKey.

[mwojtul]

Cool. It turns out we need to update the apiKey as well for v3, made a PR here for it: https://github.com/brillout/vite-plugin-ssr/pull/239

After that goes, the search should work again.

[mwojtul]

Taking a look at the crawler as well. It seems like we should be able to get the h2 titles grouped underneath their h1 i.e.

Routing | Server Routing or Client Routing? | React Router / Vue Router |__ etc etc

[brillout]

👍

[mwojtul]

Here we go: