Skip to content

feat(search): update search to DocSearch v3 #383

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Aug 17, 2020

Conversation

francoischalifour
Copy link
Contributor

This PR is a follow-up of @NataliaTepluhina's tweet.

Hello Vue 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

Video preview

Mobile Desktop
Mobile preview Desktop preview

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 Vue Router 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

Notes

I'm not too familiar with VuePress so feel free to use this PR as a base branch, not as-is.

What's next

This new DocSearch version has been used in production for a couple of weeks now, on the DocSearch website 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!

@NataliaTepluhina
Copy link
Member

@francoischalifour thank you, this looks amazing! Let me take a look at how to fix the build issue

@NataliaTepluhina
Copy link
Member

@francoischalifour sorry, it did take some time to figure it out! In order to make it work on Netlify build, we need to:

  • move all dependencies to the root package.json
  • change paths for @docsearch from relative to absolute ones:
        import(/* webpackChunkName: "docsearch" */ '@docsearch/js'),
        import(/* webpackChunkName: "docsearch" */ '@docsearch/css')

I've created a PR to test the deployment: https://github.com/vuejs/docs-next/pull/410/files but I would be happy to close this if you could add requested changes to this PR 😅

Thank you one more time for creating it! Search works and looks amazing

@francoischalifour
Copy link
Contributor Author

Thank you for investigating @NataliaTepluhina. Build issue is addressed in a6d5adf.

@NataliaTepluhina
Copy link
Member

Thank you @francoischalifour! Happy to merge 🎉

@NataliaTepluhina NataliaTepluhina merged commit 360b4d7 into vuejs:master Aug 17, 2020
@meteorlxy
Copy link
Member

Have implemented this PR in vuepress 2, as @vuepress/plugin-docsearch

vuepress/core@ae5e45a

alexeyvokin pushed a commit to alexeyvokin/docs-ru_old that referenced this pull request Apr 1, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants