@docusaurus/theme-search-algolia 2.0.0-beta.1ec2c95e3 → 2.0.0-beta.21

package/src/index.ts

@@ -0,0 +1,116 @@
+/**
+ * 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 path from 'path';
+import fs from 'fs-extra';
+import _ from 'lodash';
+import logger from '@docusaurus/logger';
+import {defaultConfig, compile} from 'eta';
+import {normalizeUrl} from '@docusaurus/utils';
+import {readDefaultCodeTranslationMessages} from '@docusaurus/theme-translations';
+import openSearchTemplate from './templates/opensearch';
+
+import type {LoadContext, Plugin} from '@docusaurus/types';
+import type {ThemeConfig} from '@docusaurus/theme-search-algolia';
+
+const getCompiledOpenSearchTemplate = _.memoize(() =>
+  compile(openSearchTemplate.trim()),
+);
+
+function renderOpenSearchTemplate(data: {
+  title: string;
+  siteUrl: string;
+  searchUrl: string;
+  faviconUrl: string | null;
+}) {
+  const compiled = getCompiledOpenSearchTemplate();
+  return compiled(data, defaultConfig);
+}
+
+const OPEN_SEARCH_FILENAME = 'opensearch.xml';
+
+export default function themeSearchAlgolia(context: LoadContext): Plugin<void> {
+  const {
+    baseUrl,
+    siteConfig: {title, url, favicon, themeConfig},
+    i18n: {currentLocale},
+  } = context;
+  const {
+    algolia: {searchPagePath},
+  } = themeConfig as ThemeConfig;
+
+  return {
+    name: 'docusaurus-theme-search-algolia',
+
+    getThemePath() {
+      return '../lib/theme';
+    },
+    getTypeScriptThemePath() {
+      return '../src/theme';
+    },
+
+    getDefaultCodeTranslationMessages() {
+      return readDefaultCodeTranslationMessages({
+        locale: currentLocale,
+        name: 'theme-search-algolia',
+      });
+    },
+
+    contentLoaded({actions: {addRoute}}) {
+      if (searchPagePath) {
+        addRoute({
+          path: normalizeUrl([baseUrl, searchPagePath]),
+          component: '@theme/SearchPage',
+          exact: true,
+        });
+      }
+    },
+
+    async postBuild({outDir}) {
+      if (searchPagePath) {
+        const siteUrl = normalizeUrl([url, baseUrl]);
+
+        try {
+          await fs.writeFile(
+            path.join(outDir, OPEN_SEARCH_FILENAME),
+            renderOpenSearchTemplate({
+              title,
+              siteUrl,
+              searchUrl: normalizeUrl([siteUrl, searchPagePath]),
+              faviconUrl: favicon ? normalizeUrl([siteUrl, favicon]) : null,
+            }),
+          );
+        } catch (err) {
+          logger.error('Generating OpenSearch file failed.');
+          throw err;
+        }
+      }
+    },
+
+    injectHtmlTags() {
+      if (!searchPagePath) {
+        return {};
+      }
+
+      return {
+        headTags: [
+          {
+            tagName: 'link',
+            attributes: {
+              rel: 'search',
+              type: 'application/opensearchdescription+xml',
+              title,
+              href: normalizeUrl([baseUrl, OPEN_SEARCH_FILENAME]),
+            },
+          },
+        ],
+      };
+    },
+  };
+}
+
+export {validateThemeConfig} from './validateThemeConfig';

package/src/templates/{opensearch.js → opensearch.ts}

@@ -5,16 +5,18 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-module.exports = `
+export 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>
-  <Image width="16" height="16" type="image/x-icon"><%= it.favicon %></Image>
-  <Url type="text/html" method="get" template="<%= it.url %>search?q={searchTerms}"/>
-  <Url type="application/opensearchdescription+xml" rel="self" template="<%= it.url %>opensearch.xml" />
-  <moz:SearchForm><%= it.url %></moz:SearchForm>
+  <% 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/src/theme/SearchBar/index.tsx

@@ -0,0 +1,276 @@
+/**
+ * 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 React, {useState, useRef, useCallback, useMemo} from 'react';
+import {createPortal} from 'react-dom';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import {useHistory} from '@docusaurus/router';
+import {useBaseUrlUtils} from '@docusaurus/useBaseUrl';
+import Link from '@docusaurus/Link';
+import Head from '@docusaurus/Head';
+import {isRegexpStringMatch, useSearchPage} from '@docusaurus/theme-common';
+import {DocSearchButton, useDocSearchKeyboardEvents} from '@docsearch/react';
+import {useAlgoliaContextualFacetFilters} from '@docusaurus/theme-search-algolia/client';
+import Translate, {translate} from '@docusaurus/Translate';
+
+import type {
+  DocSearchModal as DocSearchModalType,
+  DocSearchModalProps,
+} from '@docsearch/react';
+import type {
+  InternalDocSearchHit,
+  StoredDocSearchHit,
+} from '@docsearch/react/dist/esm/types';
+import type {SearchClient} from 'algoliasearch/lite';
+import type {AutocompleteState} from '@algolia/autocomplete-core';
+
+type DocSearchProps = Omit<
+  DocSearchModalProps,
+  'onClose' | 'initialScrollY'
+> & {
+  contextualSearch?: string;
+  externalUrlRegex?: string;
+  searchPagePath: boolean | string;
+};
+
+let DocSearchModal: typeof DocSearchModalType | null = null;
+
+function Hit({
+  hit,
+  children,
+}: {
+  hit: InternalDocSearchHit | StoredDocSearchHit;
+  children: React.ReactNode;
+}) {
+  return <Link to={hit.url}>{children}</Link>;
+}
+
+type ResultsFooterProps = {
+  state: AutocompleteState<InternalDocSearchHit>;
+  onClose: () => void;
+};
+
+function ResultsFooter({state, onClose}: ResultsFooterProps) {
+  const {generateSearchPageLink} = useSearchPage();
+
+  return (
+    <Link to={generateSearchPageLink(state.query)} onClick={onClose}>
+      <Translate
+        id="theme.SearchBar.seeAll"
+        values={{count: state.context.nbHits}}>
+        {'See all {count} results'}
+      </Translate>
+    </Link>
+  );
+}
+
+type FacetFilters = Required<
+  Required<DocSearchProps>['searchParameters']
+>['facetFilters'];
+
+function mergeFacetFilters(f1: FacetFilters, f2: FacetFilters): FacetFilters {
+  const normalize = (
+    f: FacetFilters,
+  ): readonly string[] | readonly (string | readonly string[])[] =>
+    typeof f === 'string' ? [f] : f;
+  return [...normalize(f1), ...normalize(f2)] as FacetFilters;
+}
+
+function DocSearch({
+  contextualSearch,
+  externalUrlRegex,
+  ...props
+}: DocSearchProps) {
+  const {siteMetadata} = useDocusaurusContext();
+
+  const contextualSearchFacetFilters =
+    useAlgoliaContextualFacetFilters() as FacetFilters;
+
+  const configFacetFilters: FacetFilters =
+    props.searchParameters?.facetFilters ?? [];
+
+  const facetFilters: FacetFilters = contextualSearch
+    ? // Merge contextual search filters with config filters
+      mergeFacetFilters(contextualSearchFacetFilters, configFacetFilters)
+    : // ... or use config facetFilters
+      configFacetFilters;
+
+  // We let user override default searchParameters if she wants to
+  const searchParameters: DocSearchProps['searchParameters'] = {
+    ...props.searchParameters,
+    facetFilters,
+  };
+
+  const {withBaseUrl} = useBaseUrlUtils();
+  const history = useHistory();
+  const searchContainer = useRef<HTMLDivElement | null>(null);
+  const searchButtonRef = useRef<HTMLButtonElement>(null);
+  const [isOpen, setIsOpen] = useState(false);
+  const [initialQuery, setInitialQuery] = useState<string | undefined>(
+    undefined,
+  );
+
+  const importDocSearchModalIfNeeded = useCallback(() => {
+    if (DocSearchModal) {
+      return Promise.resolve();
+    }
+
+    return Promise.all([
+      import('@docsearch/react/modal') as Promise<
+        typeof import('@docsearch/react')
+      >,
+      import('@docsearch/react/style'),
+      import('./styles.css'),
+    ]).then(([{DocSearchModal: Modal}]) => {
+      DocSearchModal = Modal;
+    });
+  }, []);
+
+  const onOpen = useCallback(() => {
+    importDocSearchModalIfNeeded().then(() => {
+      searchContainer.current = document.createElement('div');
+      document.body.insertBefore(
+        searchContainer.current,
+        document.body.firstChild,
+      );
+      setIsOpen(true);
+    });
+  }, [importDocSearchModalIfNeeded, setIsOpen]);
+
+  const onClose = useCallback(() => {
+    setIsOpen(false);
+    searchContainer.current?.remove();
+  }, [setIsOpen]);
+
+  const onInput = useCallback(
+    (event: KeyboardEvent) => {
+      importDocSearchModalIfNeeded().then(() => {
+        setIsOpen(true);
+        setInitialQuery(event.key);
+      });
+    },
+    [importDocSearchModalIfNeeded, setIsOpen, setInitialQuery],
+  );
+
+  const navigator = useRef({
+    navigate({itemUrl}: {itemUrl?: string}) {
+      // 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<DocSearchModalProps['transformItems']>(
+    (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.
+        const url = new URL(item.url);
+        return {
+          ...item,
+          url: withBaseUrl(`${url.pathname}${url.hash}`),
+        };
+      }),
+  ).current;
+
+  const resultsFooterComponent: DocSearchProps['resultsFooterComponent'] =
+    useMemo(
+      () =>
+        // eslint-disable-next-line react/no-unstable-nested-components
+        (footerProps: Omit<ResultsFooterProps, 'onClose'>): JSX.Element =>
+          <ResultsFooter {...footerProps} onClose={onClose} />,
+      [onClose],
+    );
+
+  const transformSearchClient = useCallback(
+    (searchClient: SearchClient) => {
+      searchClient.addAlgoliaAgent(
+        'docusaurus',
+        siteMetadata.docusaurusVersion,
+      );
+
+      return searchClient;
+    },
+    [siteMetadata.docusaurusVersion],
+  );
+
+  useDocSearchKeyboardEvents({
+    isOpen,
+    onOpen,
+    onClose,
+    onInput,
+    searchButtonRef,
+  });
+
+  const translatedSearchLabel = translate({
+    id: 'theme.SearchBar.label',
+    message: 'Search',
+    description: 'The ARIA label and placeholder for search button',
+  });
+
+  return (
+    <>
+      <Head>
+        {/* This hints the browser that the website will load data from Algolia,
+        and allows it to preconnect to the DocSearch cluster. It makes the first
+        query faster, especially on mobile. */}
+        <link
+          rel="preconnect"
+          href={`https://${props.appId}-dsn.algolia.net`}
+          crossOrigin="anonymous"
+        />
+      </Head>
+
+      <DocSearchButton
+        onTouchStart={importDocSearchModalIfNeeded}
+        onFocus={importDocSearchModalIfNeeded}
+        onMouseOver={importDocSearchModalIfNeeded}
+        onClick={onOpen}
+        ref={searchButtonRef}
+        translations={{
+          buttonText: translatedSearchLabel,
+          buttonAriaLabel: translatedSearchLabel,
+        }}
+      />
+
+      {isOpen &&
+        DocSearchModal &&
+        searchContainer.current &&
+        createPortal(
+          <DocSearchModal
+            onClose={onClose}
+            initialScrollY={window.scrollY}
+            initialQuery={initialQuery}
+            navigator={navigator}
+            transformItems={transformItems}
+            hitComponent={Hit}
+            transformSearchClient={transformSearchClient}
+            {...(props.searchPagePath && {
+              resultsFooterComponent,
+            })}
+            {...props}
+            searchParameters={searchParameters}
+          />,
+          searchContainer.current,
+        )}
+    </>
+  );
+}
+
+export default function SearchBar(): JSX.Element {
+  const {siteConfig} = useDocusaurusContext();
+  return <DocSearch {...(siteConfig.themeConfig.algolia as DocSearchProps)} />;
+}