Implement Algolia Docsearch

[DoubleJ-G]

This adds in the search functionality discussed in #216. It uses the Algolia js and css provided in the snippet.

Users can also press ctrl+k to focus on the search input like most sites implement today.

The styling is fairly basic other than what Algolia provide, feel free to change.

[brillout]

Neat, love it.

Thanks for respecting the HTML-only approach 👌.

Some thoughts:

• Maybe we can embed the search input in the header on the left between "LOGO vite-plugin-ssr" and the social icons.
• https://vitejs.dev/ has a nice style for the search input, is that something Algolia provides? Or maybe we can just copy Vite's style?
• On https://vitejs.dev/, when clicking on the search input, a popup shows with my recent searches. That's neat. Also, the styling of the popup is different; makes me wonder if Vite is somehow using another Algolia client version?

Super looking forward to this :-)

[DoubleJ-G]

I do love the vuepress/vitepress powered search functions. I did dig into them to see if it was a library they relied on we could use as well but it seems they roll their own implementation here around @docsearch/js and possibly more styling provided by @docsearch/css.

I did try in the Navigation on the left at first but I think I remember it looking a bit weird with how the results are shown currently, happy to re-visit it and look at the options of making a popup component for the search instead.

[brillout]

Yea would be nice to get as close as possible to Vite's Alogia integration :-).

But no rush / no worries if don't do it.

Super looking forward to this 😊.

Neat thing: it will also then be added to https://telefunc.com/ :-). (Note that Telefunc is work-in-progress and not released yet.)

[brillout]

between "LOGO vite-plugin-ssr" and the social icons.

Or right below the social buttons.

[DoubleJ-G]

Neat thing: it will also then be added to https://telefunc.com/ :-). (Note that Telefunc is work-in-progress and not released yet.)

Maybe you do want to have the api key and index name in an environment variable then if it's going to be used with multiple docs? It's just hard coded at the moment because it doesn't need to be secret, but env variables would also give you flexibility over the project it's used in.

[brillout]

Good idea.

https://github.com/vikejs/libframe/pull/1/commits/770669511f458a4c198d5310840426b526835c79 https://github.com/brillout/vite-plugin-ssr/commit/736ac1a7d6a45e7bd0f81a98c16faf6d3c52265f

[brillout]

Closing in favor of https://github.com/vikejs/libframe/pull/4.