Created by: shortcuts
Hello Bootstrap team!
After @mdo requested a DocSearch for the icons website, we thought it was time to bring the Bootstrap search documentation to the next level.
This PR integrates the new version of DocSearch, that better reflects what we think documentation search should be. It has the advantage to bring results from the documentation but also the icon library where we use a dedicated template to display the icons directly in the search making it straightforward to identify the right one.
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 integrations, TailwindCSS, React Native, and we working closely with some others major OSS projects.
Preview
| Web | Mobile |
|---|---|
 |
 |
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,⌘+Kor/ - No hard refresh
- The experience works on mobile and is close to a native mobile experience
- Recent searches
- Favorite searches
- Selection search
- Search suggestions
- Offline detection
The bundle size decreased and we now provide React components which can be lazy loaded.
What's next
This new DocSearch version has been used in production for a couple of months now.
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!
Possible improvement
Navbar vs Subnav
The SearchBox is currently located in the subnav which is the sticky element.
With this multi-index search, it would make more sense to merge the navs together and make the navbar the sticky one. This feature will allow you to implement your search experience from any pages.
What's this PR doesn't include:
- It only indexes https://v5.getbootstrap.com/ and https://icons.getbootstrap.com/
- It is possible to merge the versions where the icons are available under the same config
- It is possible to setup a contextual search where you give more relevance to the content based on the page you are on. (e.g display icons first when you are on the icon page)