@docusaurus/theme-search-algolia 2.0.0-beta.8e9b829d9 → 2.0.0-beta.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docusaurus/theme-search-algolia",
-  "version": "2.0.0-beta.8e9b829d9",
+  "version": "2.0.0-beta.9",
   "description": "Algolia search component for Docusaurus.",
   "main": "src/index.js",
   "publishConfig": {
@@ -14,14 +14,14 @@
   "license": "MIT",
   "dependencies": {
     "@docsearch/react": "^3.0.0-alpha.39",
-    "@docusaurus/core": "2.0.0-beta.8e9b829d9",
-    "@docusaurus/theme-common": "2.0.0-beta.8e9b829d9",
-    "@docusaurus/utils": "2.0.0-beta.8e9b829d9",
-    "@docusaurus/utils-validation": "2.0.0-beta.8e9b829d9",
-    "algoliasearch": "^4.8.4",
-    "algoliasearch-helper": "^3.3.4",
+    "@docusaurus/core": "2.0.0-beta.9",
+    "@docusaurus/theme-common": "2.0.0-beta.9",
+    "@docusaurus/utils": "2.0.0-beta.9",
+    "@docusaurus/utils-validation": "2.0.0-beta.9",
+    "algoliasearch": "^4.10.5",
+    "algoliasearch-helper": "^3.5.5",
     "clsx": "^1.1.1",
-    "eta": "^1.12.1",
+    "eta": "^1.12.3",
     "lodash": "^4.17.20"
   },
   "peerDependencies": {
@@ -29,7 +29,7 @@
     "react-dom": "^16.8.4 || ^17.0.0"
   },
   "engines": {
-    "node": ">=12.13.0"
+    "node": ">=14"
   },
-  "gitHead": "cb79fda03ac12835068842a7e0a86f610974eae2"
+  "gitHead": "8a491fc29ad002f90e97f5b5fe4178ac8fa0c4d7"
 }

package/src/__tests__/validateThemeConfig.test.js

@@ -103,6 +103,20 @@ describe('validateThemeConfig', () => {
     });
   });
 
+  test('externalUrlRegex config', () => {
+    const algolia = {
+      indexName: 'index',
+      apiKey: 'apiKey',
+      externalUrlRegex: 'http://external-domain.com',
+    };
+    expect(testValidateThemeConfig({algolia})).toEqual({
+      algolia: {
+        ...DEFAULT_CONFIG,
+        ...algolia,
+      },
+    });
+  });
+
   test('searchParameters.facetFilters search config', () => {
     const algolia = {
       indexName: 'index',

package/src/index.js

@@ -60,7 +60,7 @@ function theme(context) {
           renderOpenSearchTemplate({
             title,
             url: url + baseUrl,
-            favicon: normalizeUrl([url, baseUrl, favicon]),
+            favicon: favicon ? normalizeUrl([url, baseUrl, favicon]) : null,
           }),
         );
       } catch (err) {

package/src/templates/opensearch.js

@@ -12,7 +12,9 @@ module.exports = `
   <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>
+  <% if (it.favicon) { _%>
+    <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>

package/src/theme/SearchBar/index.js

@@ -13,6 +13,7 @@ import {useBaseUrlUtils} from '@docusaurus/useBaseUrl';
 import Link from '@docusaurus/Link';
 import Head from '@docusaurus/Head';
 import useSearchQuery from '@theme/hooks/useSearchQuery';
+import {isRegexpStringMatch} from '@docusaurus/theme-common';
 import {DocSearchButton, useDocSearchKeyboardEvents} from '@docsearch/react';
 import useAlgoliaContextualFacetFilters from '@theme/hooks/useAlgoliaContextualFacetFilters';
 import {translate} from '@docusaurus/Translate';
@@ -34,7 +35,7 @@ function ResultsFooter({state, onClose}) {
   );
 }
 
-function DocSearch({contextualSearch, ...props}) {
+function DocSearch({contextualSearch, externalUrlRegex, ...props}) {
   const {siteMetadata} = useDocusaurusContext();
 
   const contextualSearchFacetFilters = useAlgoliaContextualFacetFilters();
@@ -102,21 +103,28 @@ function DocSearch({contextualSearch, ...props}) {
 
   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) => {
-      // 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;
+      // 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(`${a.pathname}${a.hash}`),
+        url: withBaseUrl(`${url.pathname}${url.hash}`),
       };
     });
   }).current;

package/src/theme/SearchPage/index.js

@@ -16,7 +16,12 @@ import clsx from 'clsx';
 import Head from '@docusaurus/Head';
 import Link from '@docusaurus/Link';
 import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
-import {useTitleFormatter, usePluralForm} from '@docusaurus/theme-common';
+import {
+  useTitleFormatter,
+  usePluralForm,
+  isRegexpStringMatch,
+  useDynamicCallback,
+} from '@docusaurus/theme-common';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import {useAllDocsData} from '@theme/hooks/useDocs';
 import useSearchQuery from '@theme/hooks/useSearchQuery';
@@ -117,7 +122,7 @@ function SearchPage() {
   const {
     siteConfig: {
       themeConfig: {
-        algolia: {appId, apiKey, indexName},
+        algolia: {appId, apiKey, indexName, externalUrlRegex},
       },
     },
     i18n: {currentLocale},
@@ -125,8 +130,7 @@ function SearchPage() {
   const documentsFoundPlural = useDocumentsFoundPlural();
 
   const docsSearchVersionsHelpers = useDocsSearchVersionsHelpers();
-  const {searchValue, updateSearchPath} = useSearchQuery();
-  const [searchQuery, setSearchQuery] = useState(searchValue);
+  const {searchQuery, setSearchQuery} = useSearchQuery();
   const initialSearchResultState = {
     items: [],
     query: null,
@@ -173,6 +177,7 @@ function SearchPage() {
     },
     initialSearchResultState,
   );
+
   const algoliaClient = algoliaSearch(appId, apiKey);
   const algoliaHelper = algoliaSearchHelper(algoliaClient, indexName, {
     hitsPerPage: 15,
@@ -201,14 +206,16 @@ function SearchPage() {
           _highlightResult: {hierarchy},
           _snippetResult: snippet = {},
         }) => {
-          const {pathname, hash} = new URL(url);
+          const parsedURL = new URL(url);
           const titles = Object.keys(hierarchy).map((key) => {
             return sanitizeValue(hierarchy[key].value);
           });
 
           return {
             title: titles.pop(),
-            url: pathname + hash,
+            url: isRegexpStringMatch(externalUrlRegex, parsedURL.href)
+              ? parsedURL.href
+              : parsedURL.pathname + parsedURL.hash,
             summary: snippet.content
               ? `${sanitizeValue(snippet.content.value)}...`
               : '',
@@ -271,7 +278,7 @@ function SearchPage() {
           description: 'The search page title for empty query',
         });
 
-  const makeSearch = (page = 0) => {
+  const makeSearch = useDynamicCallback((page = 0) => {
     algoliaHelper.addDisjunctiveFacetRefinement('docusaurus_tag', 'default');
     algoliaHelper.addDisjunctiveFacetRefinement('language', currentLocale);
 
@@ -285,23 +292,19 @@ function SearchPage() {
     );
 
     algoliaHelper.setQuery(searchQuery).setPage(page).search();
-  };
+  });
 
   useEffect(() => {
     if (!loaderRef) {
       return undefined;
     }
+    const currentObserver = observer.current;
 
-    observer.current.observe(loaderRef);
-
-    return () => {
-      observer.current.unobserve(loaderRef);
-    };
+    currentObserver.observe(loaderRef);
+    return () => currentObserver.unobserve(loaderRef);
   }, [loaderRef]);
 
   useEffect(() => {
-    updateSearchPath(searchQuery);
-
     searchResultStateDispatcher({type: 'reset'});
 
     if (searchQuery) {
@@ -311,7 +314,7 @@ function SearchPage() {
         makeSearch();
       }, 300);
     }
-  }, [searchQuery, docsSearchVersionsHelpers.searchVersions]);
+  }, [searchQuery, docsSearchVersionsHelpers.searchVersions, makeSearch]);
 
   useEffect(() => {
     if (!searchResultState.lastPage || searchResultState.lastPage === 0) {
@@ -319,13 +322,7 @@ function SearchPage() {
     }
 
     makeSearch(searchResultState.lastPage);
-  }, [searchResultState.lastPage]);
-
-  useEffect(() => {
-    if (searchValue && searchValue !== searchQuery) {
-      setSearchQuery(searchValue);
-    }
-  }, [searchValue]);
+  }, [makeSearch, searchResultState.lastPage]);
 
   return (
     <Layout wrapperClassName="search-page-wrapper">

package/src/theme/hooks/useSearchQuery.js

@@ -5,27 +5,34 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {useHistory, useLocation} from '@docusaurus/router';
-import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
+import {useHistory} from '@docusaurus/router';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import {useCallback, useEffect, useState} from 'react';
 
 const SEARCH_PARAM_QUERY = 'q';
 
 function useSearchQuery() {
   const history = useHistory();
-  const location = useLocation();
-  const {siteConfig: {baseUrl} = {}} = useDocusaurusContext();
+  const {
+    siteConfig: {baseUrl},
+  } = useDocusaurusContext();
 
-  return {
-    searchValue:
-      (ExecutionEnvironment.canUseDOM &&
-        new URLSearchParams(location.search).get(SEARCH_PARAM_QUERY)) ||
-      '',
-    updateSearchPath: (searchValue) => {
-      const searchParams = new URLSearchParams(location.search);
-
-      if (searchValue) {
-        searchParams.set(SEARCH_PARAM_QUERY, searchValue);
+  const [searchQuery, setSearchQueryState] = useState('');
+
+  // Init search query just after React hydration
+  useEffect(() => {
+    const searchQueryStringValue =
+      new URLSearchParams(window.location.search).get(SEARCH_PARAM_QUERY) ?? '';
+
+    setSearchQueryState(searchQueryStringValue);
+  }, []);
+
+  const setSearchQuery = useCallback(
+    (newSearchQuery) => {
+      const searchParams = new URLSearchParams(window.location.search);
+
+      if (newSearchQuery) {
+        searchParams.set(SEARCH_PARAM_QUERY, newSearchQuery);
       } else {
         searchParams.delete(SEARCH_PARAM_QUERY);
       }
@@ -33,11 +40,23 @@ function useSearchQuery() {
       history.replace({
         search: searchParams.toString(),
       });
+      setSearchQueryState(newSearchQuery);
     },
-    generateSearchPageLink: (searchValue) => {
+    [history],
+  );
+
+  const generateSearchPageLink = useCallback(
+    (targetSearchQuery) => {
       // Refer to https://github.com/facebook/docusaurus/pull/2838
-      return `${baseUrl}search?q=${encodeURIComponent(searchValue)}`;
+      return `${baseUrl}search?q=${encodeURIComponent(targetSearchQuery)}`;
     },
+    [baseUrl],
+  );
+
+  return {
+    searchQuery,
+    setSearchQuery,
+    generateSearchPageLink,
   };
 }
 

package/src/validateThemeConfig.js

@@ -22,7 +22,7 @@ const Schema = Joi.object({
   algolia: Joi.object({
     // Docusaurus attributes
     contextualSearch: Joi.boolean().default(DEFAULT_CONFIG.contextualSearch),
-
+    externalUrlRegex: Joi.string().optional(),
     // Algolia attributes
     appId: Joi.string().default(DEFAULT_CONFIG.appId),
     apiKey: Joi.string().required(),