feat(v2): Algolia search theme (#1440)

* feat(v2): Algolia search plugin

* patch PR #1440 (#1441)

* alternative implementation

* typo

* refactor noop

* rename SearchAlgolia -> SearchBar

* changes.md

packages/docusaurus-preset-classic/src/index.js

@@ -11,6 +11,9 @@ module.exports = function preset(context, opts = {}) {
       {
         name: '@docusaurus/theme-classic',
       },
+      {
+        name: '@docusaurus/theme-search-algolia',
+      },
     ],
     plugins: [
       {

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

@@ -9,7 +9,7 @@ const path = require('path');
 
 const DEFAULT_OPTIONS = {};
 
-class DocusaurusThemeDefault {
+class DocusaurusThemeClassic {
   constructor(context, opts) {
     this.options = {...DEFAULT_OPTIONS, ...opts};
     this.context = context;
@@ -24,4 +24,4 @@ class DocusaurusThemeDefault {
   }
 }
 
-module.exports = DocusaurusThemeDefault;
+module.exports = DocusaurusThemeClassic;

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

@@ -10,9 +10,9 @@ import React from 'react';
 import Link from '@docusaurus/Link';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 
-import Search from '@theme/Search';
+import SearchBar from '@theme/SearchBar';
 
-function Navbar(props) {
+function Navbar() {
   const context = useDocusaurusContext();
   const {siteConfig = {}} = context;
   // TODO: navbar headerlinks should depends on theme, not siteConfig;
@@ -20,7 +20,7 @@ function Navbar(props) {
     baseUrl,
     headerLinks,
     headerIcon,
-    algolia,
+    themeConfig: {algolia},
     title,
     disableHeaderTitle,
   } = siteConfig;
@@ -41,8 +41,9 @@ function Navbar(props) {
         </div>
       );
     }
+
     if (link.href) {
-      // set link to specified href
+      // Set link to specified href.
       return (
         <div key={link.label} className="navbar__item">
           <Link to={link.href} className="navbar__link">
@@ -51,6 +52,7 @@ function Navbar(props) {
         </div>
       );
     }
+
     return null;
   };
 
@@ -73,7 +75,7 @@ function Navbar(props) {
         <div className="navbar__items navbar__items--right">
           {algolia && (
             <div className="navbar__search" key="search-box">
-              <Search {...props} />
+              <SearchBar />
             </div>
           )}
         </div>

packages/docusaurus-theme-classic/src/theme/SearchBar.js

@@ -0,0 +1,8 @@
+/**
+ * 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';

packages/docusaurus-theme-search-algolia/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@docusaurus/theme-search-algolia",
+  "version": "2.0.0-alpha.13",
+  "description": "Algolia search component for Docusaurus",
+  "main": "src/index.js",
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "docsearch.js": "^2.5.2"
+  },
+  "peerDependencies": {
+    "@docusaurus/core": "^2.0.0",
+    "react": "^16.8.4",
+    "react-dom": "^16.8.4"
+  },
+  "engines": {
+    "node": ">=8"
+  }
+}

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

@@ -0,0 +1,27 @@
+/**
+ * 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.
+ */
+
+const path = require('path');
+
+const DEFAULT_OPTIONS = {};
+
+class DocusaurusThemeSearchAlgolia {
+  constructor(context, opts) {
+    this.options = {...DEFAULT_OPTIONS, ...opts};
+    this.context = context;
+  }
+
+  getName() {
+    return 'docusaurus-theme-search-algolia';
+  }
+
+  getThemePath() {
+    return path.resolve(__dirname, './theme');
+  }
+}
+
+module.exports = DocusaurusThemeSearchAlgolia;

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

@@ -22,7 +22,9 @@ class Search extends React.Component {
   componentDidMount() {
     const {siteConfig = {}, metadata = {}} = this.context;
     const {version: thisVersion, language: thisLanguage} = metadata;
-    const {algolia} = siteConfig;
+    const {
+      themeConfig: {algolia},
+    } = siteConfig;
 
     // https://github.com/algolia/docsearch/issues/352
     const isClient = typeof window !== 'undefined';

packages/docusaurus/CHANGES.md

@@ -15,10 +15,6 @@ headerLinks: [
   { url: "help", label: "Help" },
   // Links to href destination/ external page
   { href: "https://github.com/", label: "GitHub" },
-  // Determines search bar position among links
-  { search: true },
-  // Determines language drop down position among links
-  { languages: true }
 ],
 ```
 

packages/docusaurus/lib/client/exports/Noop.js

@@ -0,0 +1,8 @@
+/**
+ * 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 () => null;

packages/docusaurus/lib/server/index.js

@@ -55,35 +55,39 @@ module.exports = async function load(siteDir, cliOptions = {}) {
   // These can be overriden in plugins/ through component swizzling.
   // However, we alias it here first as a fallback.
   const themeFallback = path.resolve(__dirname, '../client/theme-fallback');
-  let themeAliases = await loadTheme(themeFallback);
+  const fallbackAliases = await loadTheme(themeFallback);
 
-  // create theme alias from plugins
-  await Promise.all(
+  // Create theme alias from plugins.
+  const pluginThemeAliases = await Promise.all(
     plugins.map(async plugin => {
       if (!plugin.getThemePath) {
-        return;
+        return null;
       }
-      const aliases = await loadTheme(plugin.getThemePath());
-      themeAliases = {
-        ...themeAliases,
-        ...aliases,
-      };
+      return loadTheme(plugin.getThemePath());
     }),
   );
 
-  // user's own theme alias override. Highest priority
+  // User's own theme alias override. Highest priority.
   const themePath = path.resolve(siteDir, 'theme');
-  const aliases = await loadTheme(themePath);
-  themeAliases = {
-    ...themeAliases,
-    ...aliases,
-  };
+  const userAliases = await loadTheme(themePath);
 
-  // Make a fake plugin to resolve alias theme.
+  const combinedAliases = [
+    fallbackAliases,
+    ...pluginThemeAliases,
+    userAliases,
+  ].reduce(
+    (acc, curr) => ({
+      ...acc,
+      ...curr,
+    }),
+    {},
+  );
+
+  // Make a fake plugin to resolve aliased theme components.
   plugins.push({
     configureWebpack: () => ({
       resolve: {
-        alias: themeAliases,
+        alias: combinedAliases,
       },
     }),
   });

packages/docusaurus/lib/server/load/config.js

@@ -23,7 +23,6 @@ const REQUIRED_FIELDS = [
 ];
 
 const OPTIONAL_FIELDS = [
-  'algolia',
   'customFields',
   'defaultLanguage',
   'disableHeaderTitle',
@@ -32,6 +31,7 @@ const OPTIONAL_FIELDS = [
   'markdownPlugins',
   'plugins',
   'presets',
+  'themeConfig',
 ];
 
 const DEFAULT_CONFIG = {

packages/docusaurus/lib/server/load/theme.js

@@ -20,16 +20,15 @@ module.exports = async function loadTheme(themePath) {
   });
 
   const alias = {};
-  await Promise.all(
-    themeComponentFiles.map(async relativeSource => {
+
+  themeComponentFiles.forEach(relativeSource => {
     const filePath = path.join(themePath, relativeSource);
     const fileName = fileToPath(relativeSource);
     const aliasName = posixPath(
       normalizeUrl(['@theme', fileName]).replace(/\/$/, ''),
     );
     alias[aliasName] = filePath;
-    }),
-  );
+  });
 
   return alias;
 };

website/docusaurus.config.js

@@ -19,11 +19,13 @@ module.exports = {
   ],
   headerIcon: 'img/docusaurus.svg',
   favicon: 'img/docusaurus.ico',
+  themeConfig: {
     algolia: {
       apiKey: '47ecd3b21be71c5822571b9f59e52544',
       indexName: 'docusaurus-2',
       algoliaOptions: {},
     },
+  },
   presets: [
     [
       '@docusaurus/preset-classic',