feat(theme-algolia): add option.replaceSearchResultPathname to process/replaceAll search result urls

packages/docusaurus-theme-search-algolia/src/__tests__/validateThemeConfig.test.ts

@@ -121,6 +121,24 @@ describe('validateThemeConfig', () => {
     });
   });
 
+  it('replaceSearchResultPathname config', () => {
+    const algolia = {
+      appId: 'BH4D9OD16A',
+      indexName: 'index',
+      apiKey: 'apiKey',
+      replaceSearchResultPathname: {
+        from: '/docs/',
+        to: '/',
+      },
+    };
+    expect(testValidateThemeConfig({algolia})).toEqual({
+      algolia: {
+        ...DEFAULT_CONFIG,
+        ...algolia,
+      },
+    });
+  });
+
   it('searchParameters.facetFilters search config', () => {
     const algolia = {
       appId: 'BH4D9OD16A',

packages/docusaurus-theme-search-algolia/src/theme-search-algolia.d.ts

@@ -17,6 +17,10 @@ declare module '@docusaurus/theme-search-algolia' {
       indexName: string;
       searchParameters: {[key: string]: unknown};
       searchPagePath: string | false | null;
+      replaceSearchResultPathname?: {
+        from: string;
+        to: string;
+      };
     };
   };
   export type UserThemeConfig = DeepPartial<ThemeConfig>;

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

@@ -5,20 +5,21 @@
  * 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 React, {useCallback, useMemo, useRef, useState} from 'react';
+import {DocSearchButton, useDocSearchKeyboardEvents} from '@docsearch/react';
 import Head from '@docusaurus/Head';
+import Link from '@docusaurus/Link';
+import {useHistory} from '@docusaurus/router';
 import {isRegexpStringMatch} from '@docusaurus/theme-common';
 import {useSearchPage} from '@docusaurus/theme-common/internal';
-import {DocSearchButton, useDocSearchKeyboardEvents} from '@docsearch/react';
 import {useAlgoliaContextualFacetFilters} from '@docusaurus/theme-search-algolia/client';
 import Translate from '@docusaurus/Translate';
+import {useBaseUrlUtils} from '@docusaurus/useBaseUrl';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import {createPortal} from 'react-dom';
 import translations from '@theme/SearchTranslations';
 
+import type {AutocompleteState} from '@algolia/autocomplete-core';
 import type {
   DocSearchModal as DocSearchModalType,
   DocSearchModalProps,
@@ -28,7 +29,6 @@ import type {
   StoredDocSearchHit,
 } from '@docsearch/react/dist/esm/types';
 import type {SearchClient} from 'algoliasearch/lite';
-import type {AutocompleteState} from '@algolia/autocomplete-core';
 
 type DocSearchProps = Omit<
   DocSearchModalProps,
@@ -37,6 +37,10 @@ type DocSearchProps = Omit<
   contextualSearch?: string;
   externalUrlRegex?: string;
   searchPagePath: boolean | string;
+  replaceSearchResultPathname?: {
+    from: string;
+    to: string;
+  };
 };
 
 let DocSearchModal: typeof DocSearchModalType | null = null;
@@ -85,6 +89,7 @@ function mergeFacetFilters(f1: FacetFilters, f2: FacetFilters): FacetFilters {
 function DocSearch({
   contextualSearch,
   externalUrlRegex,
+  replaceSearchResultPathname,
   ...props
 }: DocSearchProps) {
   const {siteMetadata} = useDocusaurusContext();
@@ -173,14 +178,22 @@ function DocSearch({
   const transformItems = useRef<DocSearchModalProps['transformItems']>(
     (items) =>
       items.map((item) => {
+        // Replace parts of the URL if the user has added it in the config
+        const itemUrl = replaceSearchResultPathname
+          ? item.url.replace(
+              new RegExp(replaceSearchResultPathname.from, 'g'),
+              replaceSearchResultPathname.to,
+            )
+          : item.url;
+
         // If Algolia contains a external domain, we should navigate without
         // relative URL
-        if (isRegexpStringMatch(externalUrlRegex, item.url)) {
+        if (isRegexpStringMatch(externalUrlRegex, itemUrl)) {
           return item;
         }
 
         // We transform the absolute URL into a relative URL.
-        const url = new URL(item.url);
+        const url = new URL(itemUrl);
         return {
           ...item,
           url: withBaseUrl(`${url.pathname}${url.hash}`),

packages/docusaurus-theme-search-algolia/src/theme/SearchPage/index.tsx

@@ -7,28 +7,28 @@
 
 /* eslint-disable jsx-a11y/no-autofocus */
 
-import React, {useEffect, useState, useReducer, useRef} from 'react';
+import React, {useEffect, useReducer, useRef, useState} from 'react';
 import clsx from 'clsx';
 
-import algoliaSearch from 'algoliasearch/lite';
 import algoliaSearchHelper from 'algoliasearch-helper';
+import algoliaSearch from 'algoliasearch/lite';
 
+import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
 import Head from '@docusaurus/Head';
 import Link from '@docusaurus/Link';
-import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
+import {useAllDocsData} from '@docusaurus/plugin-content-docs/client';
 import {
   HtmlClassNameProvider,
-  usePluralForm,
   isRegexpStringMatch,
   useEvent,
+  usePluralForm,
 } from '@docusaurus/theme-common';
 import {
-  useTitleFormatter,
   useSearchPage,
+  useTitleFormatter,
 } from '@docusaurus/theme-common/internal';
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import {useAllDocsData} from '@docusaurus/plugin-content-docs/client';
 import Translate, {translate} from '@docusaurus/Translate';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Layout from '@theme/Layout';
 
 import type {ThemeConfig} from '@docusaurus/theme-search-algolia';
@@ -161,7 +161,13 @@ function SearchPageContent(): JSX.Element {
     i18n: {currentLocale},
   } = useDocusaurusContext();
   const {
-    algolia: {appId, apiKey, indexName, externalUrlRegex},
+    algolia: {
+      appId,
+      apiKey,
+      indexName,
+      externalUrlRegex,
+      replaceSearchResultPathname,
+    },
   } = themeConfig as ThemeConfig;
   const documentsFoundPlural = useDocumentsFoundPlural();
 
@@ -245,7 +251,14 @@ function SearchPageContent(): JSX.Element {
           _highlightResult: {hierarchy: {[key: string]: {value: string}}};
           _snippetResult: {content?: {value: string}};
         }) => {
-          const parsedURL = new URL(url);
+          const parsedURL = new URL(
+            replaceSearchResultPathname
+              ? url.replace(
+                  new RegExp(replaceSearchResultPathname.from, 'g'),
+                  replaceSearchResultPathname.to,
+                )
+              : url,
+          );
           const titles = Object.keys(hierarchy).map((key) =>
             sanitizeValue(hierarchy[key]!.value),
           );

packages/docusaurus-theme-search-algolia/src/validateThemeConfig.ts

@@ -39,6 +39,10 @@ export const Schema = Joi.object<ThemeConfig>({
       .try(Joi.boolean().invalid(true), Joi.string())
       .allow(null)
       .default(DEFAULT_CONFIG.searchPagePath),
+    replaceSearchResultPathname: Joi.object({
+      from: Joi.string().required(),
+      to: Joi.string().required(),
+    }).optional(),
   })
     .label('themeConfig.algolia')
     .required()

website/docs/search.md

@@ -104,6 +104,12 @@ module.exports = {
       // Optional: Specify domains where the navigation should occur through window.location instead on history.push. Useful when our Algolia config crawls multiple documentation sites and we want to navigate with window.location.href to them.
       externalUrlRegex: 'external\\.com|domain\\.com',
 
+      // Optional: Replace parts of the item URLs from Algolia. Useful when using the same search index for multiple deployments using a different baseUrl. For example: localhost:3000 vs myCompany.com/docs
+      replaceSearchResultPathname: {
+        from: '/docs/',
+        to: '/',
+      },
+
       // Optional: Algolia search parameters
       searchParameters: {},
 

website/versioned_docs/version-2.0.1/search.md

@@ -104,6 +104,12 @@ module.exports = {
       // Optional: Specify domains where the navigation should occur through window.location instead on history.push. Useful when our Algolia config crawls multiple documentation sites and we want to navigate with window.location.href to them.
       externalUrlRegex: 'external\\.com|domain\\.com',
 
+      // Optional: Replace parts of the item URLs from Algolia. Useful when using the same search index for multiple deployments using a different baseUrl. For example: localhost:3000 vs myCompany.com/docs
+      replaceSearchResultPathname: {
+        from: '/docs/',
+        to: '/',
+      },
+
       // Optional: Algolia search parameters
       searchParameters: {},
 

website/versioned_docs/version-2.1.0/search.md

@@ -104,6 +104,12 @@ module.exports = {
       // Optional: Specify domains where the navigation should occur through window.location instead on history.push. Useful when our Algolia config crawls multiple documentation sites and we want to navigate with window.location.href to them.
       externalUrlRegex: 'external\\.com|domain\\.com',
 
+      // Optional: Replace parts of the item URLs from Algolia. Useful when using the same search index for multiple deployments using a different baseUrl. For example: localhost:3000 vs myCompany.com/docs
+      replaceSearchResultPathname: {
+        from: '/docs/',
+        to: '/',
+      },
+
       // Optional: Algolia search parameters
       searchParameters: {},
 

website/versioned_docs/version-2.2.0/search.md

@@ -104,6 +104,12 @@ module.exports = {
       // Optional: Specify domains where the navigation should occur through window.location instead on history.push. Useful when our Algolia config crawls multiple documentation sites and we want to navigate with window.location.href to them.
       externalUrlRegex: 'external\\.com|domain\\.com',
 
+      // Optional: Replace parts of the item URLs from Algolia. Useful when using the same search index for multiple deployments using a different baseUrl. For example: localhost:3000 vs myCompany.com/docs
+      replaceSearchResultPathname: {
+        from: '/docs/',
+        to: '/',
+      },
+
       // Optional: Algolia search parameters
       searchParameters: {},