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

Answer 2

It's possible to create your own custom offline search component, so for Docusaurus didn't have any inbuilt offline search option.

Running the command yarn swizzle @docusaurus/theme-classic SearchBar will create a bootstrapped search component where you have to write your own logic for search.

The offline search option is one of the most requested features in Docusaurus and the community people are working on it. There is a GitHub issue for it - https://github.com/facebook/docusaurus/issues/776 here you can check the progress of the feature.

There is a third-party plugin which will provide an offline search for Docusaurus - https://github.com/lelouch77/docusaurus-lunr-search