Implement DocSearch v3

[francoischalifour]

Hello TypeScript team! This PR integrates the new version of DocSearch, that better reflects what we think documentation search should be.

Description

Reducing users' efforts to get them started integrating your product is key to adoption. We created DocSearch in 2015 as a community effort to solve this problem.

We've had time to try different approaches since then and would like to propose you a new documentation search experience. This new experience has been well received and is now live on the Docusaurus v2 integration: facebook/docusaurus#2815.

Preview

Dark mode

Mobile	Desktop

Light mode

Changes

You can read about all the new features in the Docusaurus PR (facebook/docusaurus#2815), but here's a summary:

• We replaced the dropdown list for a modal
• You can open the search modal with Ctrl + K, ⌘ + K or /
• No hard refresh (we leverage the Gatsby navigation API in this integration)
• The experience works on mobile and is close to a native mobile experience
• Recent searches
• Favorite searches
• Selection search
• Search suggestions
• Offline detection

What's next

This new DocSearch version has been used in production for a couple of weeks now, on the DocSearch website, Tailwind, Formik, and on a few Docusaurus v2 integrations.

This version is marked as alpha for now because the underlying libraries that we use (e.g., autocomplete-core) are still being worked on at @algolia to make sure that it handles more cases than DocSearch and usual autocomplete search experiences. We plan to go stable in the coming weeks but no major changes will happen to DocSearch.

Let us know what you think!

[ghost]

All CLA requirements met.

[orta]

Hi, cool!

This is a duplicate of #690 but it changes the design and interaction model of the search input, which isn't something I'd like to happen. I'm open to closing mine and wrapping this one up later by pushing commits to this branch.

That said, I'm still not sure on whether I want to update:

• The switch to React means all the CSS/JS is now always bundled with every page, vs before it was requested only when needed
• This is one of the only parts of the site which uses react at runtime, and I've been avoiding this because I want to keep the entire site understandable for folks without react knowledge

But otherwise, yeah, it looks and feels much better

[francoischalifour]

[...] it changes the design and interaction model of the search input, which isn't something I'd like to happen.

We've made some user research before going that way. Do you mind sharing your concerns?

Notice that you can also search by only focusing the "button" and typing on your keyboard, like a native search input.

The switch to React means all the CSS/JS is now always bundled with every page, vs before it was requested only when needed

This branch doesn't load the modal code and styles until user is about to interact with it, so no unused code is loaded.

This is one of the only parts of the site which uses react at runtime, and I've been avoiding this because I want to keep the entire site understandable for folks without react knowledge

This is encapsulated in the DocSearch component. If you think this is too much code to understand, this is because of lazy loading, otherwise, you can rely on the DocSearch component exported in @docsearch/react, which doesn't require any logic user-land.

If you want to get rid of React all together, you can use DocSearch from @docsearch/js, which is a vanilla version. I wouldn't recommend doing so here because we're leveraging the Gatsby components (e.g., Link) for a faster navigation in this branch.

[orta]

My main concern is that I'd like to keep the text input acting like a text input until someone asks it to do something, I don't doubt that you've done more research than me on the topic and I'm sure it's good work. However, it's a text input, not a button and it should act like a text input.

I'm more open for that to happen specifically when you're on a tiny screen, where the patten of modally taking over the screen unexpectedly happens more often, but none of the websites I have open does this on desktop.

Awesome on the code loading! I'll check that out locally because everything looked to be imported on the top level and I figured that made it get bundled into the site. There's so much I still don't know. I'm cool on keeping it react then if that works out 👍🏻

[orta]

Alright, I've given this a look again, I think there's enough design hints to it being a button here that I'm good with switching the interaction model after playing around with it for a while 👍🏻 - I've pushed some design changes and rebased it to master ( preview: https://ts-with-algolia-search.vercel.app )

When I gave it an run with a11y tools for folks with visibility issues I spotted it'll need some work, so I'll put looking at that in the library on my TODO

[jakebailey]

It's been ages, but I just fixed up this PR in hopes that we can make a decision about this.

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://victorious-plant-05c166c10-928.centralus.5.azurestaticapps.net