@docusaurus/theme-search-algolia 2.0.0-beta.2 → 2.0.0-beta.20

package/lib/client/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export { useAlgoliaContextualFacetFilters } from './useAlgoliaContextualFacetFilters';

package/lib/client/index.js

@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export {useAlgoliaContextualFacetFilters} from './useAlgoliaContextualFacetFilters';

package/lib/client/useAlgoliaContextualFacetFilters.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export declare function useAlgoliaContextualFacetFilters(): [string, string[]];

package/lib/client/useAlgoliaContextualFacetFilters.js

@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import {useContextualSearchFilters} from '@docusaurus/theme-common';
+// Translate search-engine agnostic search filters to Algolia search filters
+export function useAlgoliaContextualFacetFilters() {
+  const {locale, tags} = useContextualSearchFilters();
+  // Seems safe to convert locale->language, see AlgoliaSearchMetadata comment
+  const languageFilter = `language:${locale}`;
+  const tagsFilter = tags.map((tag) => `docusaurus_tag:${tag}`);
+  return [languageFilter, tagsFilter];
+}

package/lib/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import type { LoadContext, Plugin } from '@docusaurus/types';
+export default function themeSearchAlgolia(context: LoadContext): Plugin<void>;
+export { validateThemeConfig } from './validateThemeConfig';

package/lib/index.js

@@ -0,0 +1,107 @@
+'use strict';
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+Object.defineProperty(exports, '__esModule', {value: true});
+exports.validateThemeConfig = void 0;
+const tslib_1 = require('tslib');
+const path_1 = tslib_1.__importDefault(require('path'));
+const fs_extra_1 = tslib_1.__importDefault(require('fs-extra'));
+const eta_1 = require('eta');
+const utils_1 = require('@docusaurus/utils');
+const theme_translations_1 = require('@docusaurus/theme-translations');
+const logger_1 = tslib_1.__importDefault(require('@docusaurus/logger'));
+const opensearch_1 = tslib_1.__importDefault(require('./templates/opensearch'));
+const lodash_1 = tslib_1.__importDefault(require('lodash'));
+const getCompiledOpenSearchTemplate = lodash_1.default.memoize(() =>
+  (0, eta_1.compile)(opensearch_1.default.trim()),
+);
+function renderOpenSearchTemplate(data) {
+  const compiled = getCompiledOpenSearchTemplate();
+  return compiled(data, eta_1.defaultConfig);
+}
+const OPEN_SEARCH_FILENAME = 'opensearch.xml';
+function themeSearchAlgolia(context) {
+  const {
+    baseUrl,
+    siteConfig: {title, url, favicon, themeConfig},
+    i18n: {currentLocale},
+  } = context;
+  const {
+    algolia: {searchPagePath},
+  } = themeConfig;
+  return {
+    name: 'docusaurus-theme-search-algolia',
+    getThemePath() {
+      return '../lib/theme';
+    },
+    getTypeScriptThemePath() {
+      return '../src/theme';
+    },
+    getDefaultCodeTranslationMessages() {
+      return (0, theme_translations_1.readDefaultCodeTranslationMessages)({
+        locale: currentLocale,
+        name: 'theme-search-algolia',
+      });
+    },
+    async contentLoaded({actions: {addRoute}}) {
+      if (searchPagePath) {
+        addRoute({
+          path: (0, utils_1.normalizeUrl)([baseUrl, searchPagePath]),
+          component: '@theme/SearchPage',
+          exact: true,
+        });
+      }
+    },
+    async postBuild({outDir}) {
+      if (searchPagePath) {
+        const siteUrl = (0, utils_1.normalizeUrl)([url, baseUrl]);
+        try {
+          await fs_extra_1.default.writeFile(
+            path_1.default.join(outDir, OPEN_SEARCH_FILENAME),
+            renderOpenSearchTemplate({
+              title,
+              siteUrl,
+              searchUrl: (0, utils_1.normalizeUrl)([siteUrl, searchPagePath]),
+              faviconUrl: favicon
+                ? (0, utils_1.normalizeUrl)([siteUrl, favicon])
+                : null,
+            }),
+          );
+        } catch (err) {
+          logger_1.default.error('Generating OpenSearch file failed.');
+          throw err;
+        }
+      }
+    },
+    injectHtmlTags() {
+      if (!searchPagePath) {
+        return {};
+      }
+      return {
+        headTags: [
+          {
+            tagName: 'link',
+            attributes: {
+              rel: 'search',
+              type: 'application/opensearchdescription+xml',
+              title,
+              href: (0, utils_1.normalizeUrl)([baseUrl, OPEN_SEARCH_FILENAME]),
+            },
+          },
+        ],
+      };
+    },
+  };
+}
+exports.default = themeSearchAlgolia;
+var validateThemeConfig_1 = require('./validateThemeConfig');
+Object.defineProperty(exports, 'validateThemeConfig', {
+  enumerable: true,
+  get: function () {
+    return validateThemeConfig_1.validateThemeConfig;
+  },
+});

package/lib/templates/opensearch.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+declare const _default: "\n<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<OpenSearchDescription xmlns=\"http://a9.com/-/spec/opensearch/1.1/\"\n                       xmlns:moz=\"http://www.mozilla.org/2006/browser/search/\">\n  <ShortName><%= it.title %></ShortName>\n  <Description>Search <%= it.title %></Description>\n  <InputEncoding>UTF-8</InputEncoding>\n  <% if (it.faviconUrl) { _%>\n    <Image width=\"16\" height=\"16\" type=\"image/x-icon\"><%= it.faviconUrl %></Image>\n  <% } _%>\n  <Url type=\"text/html\" method=\"get\" template=\"<%= it.searchUrl %>?q={searchTerms}\"/>\n  <Url type=\"application/opensearchdescription+xml\" rel=\"self\" template=\"<%= it.siteUrl %>opensearch.xml\" />\n  <moz:SearchForm><%= it.siteUrl %></moz:SearchForm>\n</OpenSearchDescription>\n";
+export default _default;

package/lib/templates/opensearch.js

@@ -0,0 +1,23 @@
+'use strict';
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+Object.defineProperty(exports, '__esModule', {value: true});
+exports.default = `
+<?xml version="1.0" encoding="UTF-8"?>
+<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/"
+                       xmlns:moz="http://www.mozilla.org/2006/browser/search/">
+  <ShortName><%= it.title %></ShortName>
+  <Description>Search <%= it.title %></Description>
+  <InputEncoding>UTF-8</InputEncoding>
+  <% if (it.faviconUrl) { _%>
+    <Image width="16" height="16" type="image/x-icon"><%= it.faviconUrl %></Image>
+  <% } _%>
+  <Url type="text/html" method="get" template="<%= it.searchUrl %>?q={searchTerms}"/>
+  <Url type="application/opensearchdescription+xml" rel="self" template="<%= it.siteUrl %>opensearch.xml" />
+  <moz:SearchForm><%= it.siteUrl %></moz:SearchForm>
+</OpenSearchDescription>
+`;

package/lib/theme/SearchBar/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/// <reference types="react" />
+export default function SearchBar(): JSX.Element;

package/{src → lib}/theme/SearchBar/index.js

@@ -4,7 +4,6 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-
 import React, {useState, useRef, useCallback, useMemo} from 'react';
 import {createPortal} from 'react-dom';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
@@ -12,59 +11,54 @@ import {useHistory} from '@docusaurus/router';
 import {useBaseUrlUtils} from '@docusaurus/useBaseUrl';
 import Link from '@docusaurus/Link';
 import Head from '@docusaurus/Head';
-import useSearchQuery from '@theme/hooks/useSearchQuery';
+import {isRegexpStringMatch, useSearchPage} from '@docusaurus/theme-common';
 import {DocSearchButton, useDocSearchKeyboardEvents} from '@docsearch/react';
-import useAlgoliaContextualFacetFilters from '@theme/hooks/useAlgoliaContextualFacetFilters';
-import {translate} from '@docusaurus/Translate';
-import styles from './styles.module.css';
-
+import {useAlgoliaContextualFacetFilters} from '@docusaurus/theme-search-algolia/client';
+import Translate, {translate} from '@docusaurus/Translate';
 let DocSearchModal = null;
-
 function Hit({hit, children}) {
   return <Link to={hit.url}>{children}</Link>;
 }
-
 function ResultsFooter({state, onClose}) {
-  const {generateSearchPageLink} = useSearchQuery();
-
+  const {generateSearchPageLink} = useSearchPage();
   return (
     <Link to={generateSearchPageLink(state.query)} onClick={onClose}>
-      See all {state.context.nbHits} results
+      <Translate
+        id="theme.SearchBar.seeAll"
+        values={{count: state.context.nbHits}}>
+        {'See all {count} results'}
+      </Translate>
     </Link>
   );
 }
-
-function DocSearch({contextualSearch, ...props}) {
+function mergeFacetFilters(f1, f2) {
+  const normalize = (f) => (typeof f === 'string' ? [f] : f);
+  return [...normalize(f1), ...normalize(f2)];
+}
+function DocSearch({contextualSearch, externalUrlRegex, ...props}) {
   const {siteMetadata} = useDocusaurusContext();
-
   const contextualSearchFacetFilters = useAlgoliaContextualFacetFilters();
-
   const configFacetFilters = props.searchParameters?.facetFilters ?? [];
-
   const facetFilters = contextualSearch
     ? // Merge contextual search filters with config filters
-      [...contextualSearchFacetFilters, ...configFacetFilters]
+      mergeFacetFilters(contextualSearchFacetFilters, configFacetFilters)
     : // ... or use config facetFilters
       configFacetFilters;
-
-  // we let user override default searchParameters if he wants to
+  // We let user override default searchParameters if she wants to
   const searchParameters = {
     ...props.searchParameters,
     facetFilters,
   };
-
   const {withBaseUrl} = useBaseUrlUtils();
   const history = useHistory();
   const searchContainer = useRef(null);
   const searchButtonRef = useRef(null);
   const [isOpen, setIsOpen] = useState(false);
-  const [initialQuery, setInitialQuery] = useState(null);
-
+  const [initialQuery, setInitialQuery] = useState(undefined);
   const importDocSearchModalIfNeeded = useCallback(() => {
     if (DocSearchModal) {
       return Promise.resolve();
     }
-
     return Promise.all([
       import('@docsearch/react/modal'),
       import('@docsearch/react/style'),
@@ -73,7 +67,6 @@ function DocSearch({contextualSearch, ...props}) {
       DocSearchModal = Modal;
     });
   }, []);
-
   const onOpen = useCallback(() => {
     importDocSearchModalIfNeeded().then(() => {
       searchContainer.current = document.createElement('div');
@@ -84,12 +77,10 @@ function DocSearch({contextualSearch, ...props}) {
       setIsOpen(true);
     });
   }, [importDocSearchModalIfNeeded, setIsOpen]);
-
   const onClose = useCallback(() => {
     setIsOpen(false);
-    searchContainer.current.remove();
+    searchContainer.current?.remove();
   }, [setIsOpen]);
-
   const onInput = useCallback(
     (event) => {
       importDocSearchModalIfNeeded().then(() => {
@@ -99,45 +90,49 @@ function DocSearch({contextualSearch, ...props}) {
     },
     [importDocSearchModalIfNeeded, setIsOpen, setInitialQuery],
   );
-
   const navigator = useRef({
     navigate({itemUrl}) {
-      history.push(itemUrl);
+      // Algolia results could contain URL's from other domains which cannot
+      // be served through history and should navigate with window.location
+      if (isRegexpStringMatch(externalUrlRegex, itemUrl)) {
+        window.location.href = itemUrl;
+      } else {
+        history.push(itemUrl);
+      }
     },
   }).current;
-
-  const transformItems = useRef((items) => {
-    return items.map((item) => {
+  const transformItems = useRef((items) =>
+    items.map((item) => {
+      // If Algolia contains a external domain, we should navigate without
+      // relative URL
+      if (isRegexpStringMatch(externalUrlRegex, item.url)) {
+        return item;
+      }
       // We transform the absolute URL into a relative URL.
-      // Alternatively, we can use `new URL(item.url)` but it's not
-      // supported in IE.
-      const a = document.createElement('a');
-      a.href = item.url;
-
+      const url = new URL(item.url);
       return {
         ...item,
-        url: withBaseUrl(`${a.pathname}${a.hash}`),
+        url: withBaseUrl(`${url.pathname}${url.hash}`),
       };
-    });
-  }).current;
-
+    }),
+  ).current;
   const resultsFooterComponent = useMemo(
-    () => (footerProps) => <ResultsFooter {...footerProps} onClose={onClose} />,
+    () =>
+      // eslint-disable-next-line react/no-unstable-nested-components
+      (footerProps) =>
+        <ResultsFooter {...footerProps} onClose={onClose} />,
     [onClose],
   );
-
   const transformSearchClient = useCallback(
     (searchClient) => {
       searchClient.addAlgoliaAgent(
         'docusaurus',
         siteMetadata.docusaurusVersion,
       );
-
       return searchClient;
     },
     [siteMetadata.docusaurusVersion],
   );
-
   useDocSearchKeyboardEvents({
     isOpen,
     onOpen,
@@ -145,13 +140,11 @@ function DocSearch({contextualSearch, ...props}) {
     onInput,
     searchButtonRef,
   });
-
   const translatedSearchLabel = translate({
     id: 'theme.SearchBar.label',
     message: 'Search',
     description: 'The ARIA label and placeholder for search button',
   });
-
   return (
     <>
       <Head>
@@ -165,21 +158,21 @@ function DocSearch({contextualSearch, ...props}) {
         />
       </Head>
 
-      <div className={styles.searchBox}>
-        <DocSearchButton
-          onTouchStart={importDocSearchModalIfNeeded}
-          onFocus={importDocSearchModalIfNeeded}
-          onMouseOver={importDocSearchModalIfNeeded}
-          onClick={onOpen}
-          ref={searchButtonRef}
-          translations={{
-            buttonText: translatedSearchLabel,
-            buttonAriaLabel: translatedSearchLabel,
-          }}
-        />
-      </div>
+      <DocSearchButton
+        onTouchStart={importDocSearchModalIfNeeded}
+        onFocus={importDocSearchModalIfNeeded}
+        onMouseOver={importDocSearchModalIfNeeded}
+        onClick={onOpen}
+        ref={searchButtonRef}
+        translations={{
+          buttonText: translatedSearchLabel,
+          buttonAriaLabel: translatedSearchLabel,
+        }}
+      />
 
       {isOpen &&
+        DocSearchModal &&
+        searchContainer.current &&
         createPortal(
           <DocSearchModal
             onClose={onClose}
@@ -188,8 +181,10 @@ function DocSearch({contextualSearch, ...props}) {
             navigator={navigator}
             transformItems={transformItems}
             hitComponent={Hit}
-            resultsFooterComponent={resultsFooterComponent}
             transformSearchClient={transformSearchClient}
+            {...(props.searchPagePath && {
+              resultsFooterComponent,
+            })}
             {...props}
             searchParameters={searchParameters}
           />,
@@ -198,10 +193,7 @@ function DocSearch({contextualSearch, ...props}) {
     </>
   );
 }
-
-function SearchBar() {
+export default function SearchBar() {
   const {siteConfig} = useDocusaurusContext();
   return <DocSearch {...siteConfig.themeConfig.algolia} />;
 }
-
-export default SearchBar;

package/lib/theme/SearchBar/styles.css

@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+:root {
+  --docsearch-primary-color: var(--ifm-color-primary);
+  --docsearch-text-color: var(--ifm-font-color-base);
+}
+
+.DocSearch-Button {
+  margin: 0;
+  transition: all var(--ifm-transition-fast)
+    var(--ifm-transition-timing-default);
+}
+
+.DocSearch-Container {
+  z-index: calc(var(--ifm-z-index-fixed) + 1);
+}

package/lib/theme/SearchPage/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/// <reference types="react" />
+export default function SearchPage(): JSX.Element;