fix(v2): custom searchbar should appear even if themeconfig.algolia is undefined (#1909)

* fix(v2): custom searchbar should appear even if themeconfig.algolia is undefined

* nits

* Docs docs

* inaccuracy

* changelog

* nits

CHANGELOG-2.x.md

@@ -2,6 +2,12 @@
 
 ## Unreleased
 
+- Fixed a bug in which if `themeConfig.algolia` is not defined, the custom searchbar won't appear.
+If you've swizzled Algolia `SearchBar` component before, please update your source code otherwise CSS might break. See [#1909](https://github.com/facebook/docusaurus/pull/1909/files) for reference.
+```js
+- <Fragment>
++ <div className="navbar__search" key="search-box">
+```
 - Reduce memory usage consumption.
 - Slightly adjust search icon position to be more aligned on small width device.
 - Convert sitemap plugin to TypeScript.

packages/docusaurus-theme-classic/src/theme/Navbar/index.js

@@ -52,7 +52,7 @@ function Navbar() {
   const [theme, setTheme] = useTheme();
   const {siteConfig = {}} = context;
   const {baseUrl, themeConfig = {}} = siteConfig;
-  const {algolia, navbar = {}} = themeConfig;
+  const {navbar = {}} = themeConfig;
   const {title, logo = {}, links = []} = navbar;
 
   const showSidebar = useCallback(() => {
@@ -137,14 +137,10 @@ function Navbar() {
                 unchecked: <Sun />,
               }}
             />
-            {algolia && (
+            <SearchBar
-              <div className="navbar__search" key="search-box">
+              handleSearchBarToggle={setIsSearchBarExpanded}
-                <SearchBar
+              isSearchBarExpanded={isSearchBarExpanded}
-                  handleSearchBarToggle={setIsSearchBarExpanded}
+            />
-                  isSearchBarExpanded={isSearchBarExpanded}
-                />
-              </div>
-            )}
           </div>
         </div>
         <div

packages/docusaurus-theme-search-algolia/src/theme/SearchBar/index.js

@@ -8,7 +8,6 @@
 import React, {
   useState,
   useEffect,
-  Fragment,
   useContext,
   useRef,
   useCallback,
@@ -60,7 +59,7 @@ const Search = props => {
   );
 
   return isEnabled ? (
-    <Fragment>
+    <div className="navbar__search" key="search-box">
       <span
         role="button"
         className={classnames('search-icon', {
@@ -84,7 +83,7 @@ const Search = props => {
         onBlur={toggleSearchIconClick}
         ref={searchBarRef}
       />
-    </Fragment>
+    </div>
   ) : null;
 };
 

website/docs/search.md

@@ -47,3 +47,5 @@ yarn swizzle @docusaurus/theme-classic SearchBar
 ```
 
 This will create a `src/themes/SearchBar` file in your project folder. Restart your dev server and edit the component, you will see that Docusaurus uses your own `SearchBar` component now.
+
+**Notes**: You can alternatively [swizzle from Algolia SearchBar](#customizing-the-algolia-search-bar) and create your own search component from there.

website/docs/theme-classic.md

@@ -0,0 +1,51 @@
+---
+id: theme-classic
+title: Classic Theme Configuration
+---
+
+_This section is a work in progress._
+
+## Navbar
+
+### Navbar Title & Logo
+
+You can add a logo and title to the navbar via `themeConfig.navbar`. Logo can be placed in [static folder](static-assets.md).
+
+```js
+// docusaurus.config.js
+module.exports = {
+  themeConfig: {
+    navbar: {
+      title: 'Site Title',
+      logo: {
+        alt: 'Site Logo',
+        src: 'img/logo.svg',
+      },
+    }
+}
+```
+
+### Navbar Links
+
+You can add links to the navbar via `themeConfig.navbar.links`:
+
+```js
+// docusaurus/config.js
+module.exports = {
+  themeConfig: {
+    navbar: {
+      links: [
+        {
+          to: 'docs/docusaurus.config.js',
+          label: 'docusaurus.config.js',
+          position: 'left',
+        },
+        // ... other links
+      ],
+    }
+}
+```
+
+Outbound links automatically get `target="_blank" rel="noopener noreferrer"`.
+
+## Footer

website/sidebars.js

@@ -34,7 +34,7 @@ module.exports = {
       {
         type: 'category',
         label: 'Themes',
-        items: ['using-themes', 'advanced-themes'],
+        items: ['using-themes', 'advanced-themes', 'theme-classic'],
       },
       'presets',
     ],