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

* feat(v2): Algolia search plugin

* patch PR facebook#1440 (facebook#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,17 +10,17 @@ 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;
  const {
  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-classic/src/theme/Search/index.js → 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);
+
+ const combinedAliases = [
+ fallbackAliases,
+ ...pluginThemeAliases,
+ userAliases,
+ ].reduce(
+ (acc, curr) => ({
+ ...acc,
+ ...curr,
+ }),
+ {},
+ );
 
- // Make a fake plugin to resolve alias theme.
+ // 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 => {
- const filePath = path.join(themePath, relativeSource);
- const fileName = fileToPath(relativeSource);
- const aliasName = posixPath(
- normalizeUrl(['@theme', fileName]).replace(/\/$/, ''),
- );
- alias[aliasName] = filePath;
- }),
- );
+
+ 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,10 +19,12 @@ module.exports = {
  ],
  headerIcon: 'img/docusaurus.svg',
  favicon: 'img/docusaurus.ico',
- algolia: {
- apiKey: '47ecd3b21be71c5822571b9f59e52544',
- indexName: 'docusaurus-2',
- algoliaOptions: {},
+ themeConfig: {
+ algolia: {
+ apiKey: '47ecd3b21be71c5822571b9f59e52544',
+ indexName: 'docusaurus-2',
+ algoliaOptions: {},
+ },
  },
  presets: [
  [