Custom Search Bar in Docusaurus 2

Question

I'm just experimenting with Docusaurus V2, i want o enable offline search witth LUNR(https://lunrjs.com/) Search, like described, in this blog.

https://v2.docusaurus.io/feedback/p/offline-search

i also searched the docs for that.

https://v2.docusaurus.io/docs/search/#__docusaurus

I installed the with the "yarn swizzle @docusaurus/theme-classic SearchBar" command, but no search bar appeared, when running with "npm start".

Besides, a document was created with this content in src/theme/SearchBar.js:

/**
 * Copyright (c) 2017-present, Facebook, Inc.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

export {default} from '@docusaurus/Noop';

The documentation is really thin, what could be wrong. Is there a working example?

As described in the Blog by this video, there is a possibility. https://canny.io/images/873b18eabf90e91512ac4d0ceb48973b.gif

Answer 1

You need to edit that file and implement your own searchbar component. You can do yarn swizzle @docusaurus/theme-search-algolia SearchBar instead if you want to modify it from the algolia searchbar