GH-36 Add search functionality

docusaurus.config.js

@@ -53,7 +53,7 @@ const config = {
           sidebarPath: './sidebars.js',
           routeBasePath: '/',
           editUrl:
-            'https://github.com/Vahera/godot-orchestrator-docs/edit/main/',
+            'https://github.com/CraterCrash/godot-orchestrator-docs/edit/main/',
         },
         blog: false,
         theme: {
@@ -63,6 +63,8 @@ const config = {
     ],
   ],
 
+  /*themes: ['@docusaurus/theme-search-algolia'] */
+
   themeConfig:
     /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
     ({
@@ -101,7 +103,7 @@ const config = {
             dropdownActiveClassDisabled: true,
           },
           {
-            href: 'https://github.com/Vahera/godot-orchestrator',
+            href: 'https://github.com/CraterCrash/godot-orchestrator',
             label: 'GitHub',
             position: 'right',
           },
@@ -116,6 +118,13 @@ const config = {
         theme: prismThemes.github,
         darkTheme: prismThemes.dracula,
       },
+      algolia: {
+        appId: 'QL8Q3PK57T',
+        apiKey: 'a3801da6e3cb3ba273caa3b1fe4b9a5d',
+        indexName: 'cratercrash',
+        contextualSearch: true,
+        insights: true
+      }
     }),
 };
 

src/theme/SearchBar/index.js

@@ -0,0 +1,193 @@
+import React, {useCallback, useMemo, useRef, useState} from 'react';
+import {createPortal} from 'react-dom';
+import {DocSearchButton, useDocSearchKeyboardEvents} from '@docsearch/react';
+import Head from '@docusaurus/Head';
+import Link from '@docusaurus/Link';
+import {useHistory} from '@docusaurus/router';
+import {
+  isRegexpStringMatch,
+  useSearchLinkCreator,
+} from '@docusaurus/theme-common';
+import {
+  useAlgoliaContextualFacetFilters,
+  useSearchResultUrlProcessor,
+} from '@docusaurus/theme-search-algolia/client';
+import Translate from '@docusaurus/Translate';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import translations from '@theme/SearchTranslations';
+let DocSearchModal = null;
+function Hit({hit, children}) {
+  return <Link to={hit.url}>{children}</Link>;
+}
+function ResultsFooter({state, onClose}) {
+  const createSearchLink = useSearchLinkCreator();
+  return (
+    <Link to={createSearchLink(state.query)} onClick={onClose}>
+      <Translate
+        id="theme.SearchBar.seeAll"
+        values={{count: state.context.nbHits}}>
+        {'See all {count} results'}
+      </Translate>
+    </Link>
+  );
+}
+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 processSearchResultUrl = useSearchResultUrlProcessor();
+  const contextualSearchFacetFilters = useAlgoliaContextualFacetFilters();
+  const configFacetFilters = props.searchParameters?.facetFilters ?? [];
+  const 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 = {
+    ...props.searchParameters,
+    facetFilters,
+  };
+  const history = useHistory();
+  const searchContainer = useRef(null);
+  const searchButtonRef = useRef(null);
+  const [isOpen, setIsOpen] = useState(false);
+  const [initialQuery, setInitialQuery] = useState(undefined);
+  const importDocSearchModalIfNeeded = useCallback(() => {
+    if (DocSearchModal) {
+      return Promise.resolve();
+    }
+    return Promise.all([
+      import('@docsearch/react/modal'),
+      import('@docsearch/react/style'),
+      import('./styles.css'),
+    ]).then(([{DocSearchModal: Modal}]) => {
+      DocSearchModal = Modal;
+    });
+  }, []);
+  const prepareSearchContainer = useCallback(() => {
+    if (!searchContainer.current) {
+      const divElement = document.createElement('div');
+      searchContainer.current = divElement;
+      document.body.insertBefore(divElement, document.body.firstChild);
+    }
+  }, []);
+  const openModal = useCallback(() => {
+    prepareSearchContainer();
+    importDocSearchModalIfNeeded().then(() => setIsOpen(true));
+  }, [importDocSearchModalIfNeeded, prepareSearchContainer]);
+  const closeModal = useCallback(() => {
+    setIsOpen(false);
+    searchButtonRef.current?.focus();
+  }, []);
+  const handleInput = useCallback(
+    (event) => {
+      if (event.key === 'f' && (event.metaKey || event.ctrlKey)) {
+        // ignore browser's ctrl+f
+        return;
+      }
+      // prevents duplicate key insertion in the modal input
+      event.preventDefault();
+      setInitialQuery(event.key);
+      openModal();
+    },
+    [openModal],
+  );
+  const navigator = useRef({
+    navigate({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) =>
+    props.transformItems
+      ? // Custom transformItems
+        props.transformItems(items)
+      : // Default transformItems
+        items.map((item) => ({
+          ...item,
+          url: processSearchResultUrl(item.url),
+        })),
+  ).current;
+  const resultsFooterComponent = useMemo(
+    () =>
+      // eslint-disable-next-line react/no-unstable-nested-components
+      (footerProps) =>
+        <ResultsFooter {...footerProps} onClose={closeModal} />,
+    [closeModal],
+  );
+  const transformSearchClient = useCallback(
+    (searchClient) => {
+      searchClient.addAlgoliaAgent(
+        'docusaurus',
+        siteMetadata.docusaurusVersion,
+      );
+      return searchClient;
+    },
+    [siteMetadata.docusaurusVersion],
+  );
+  useDocSearchKeyboardEvents({
+    isOpen,
+    onOpen: openModal,
+    onClose: closeModal,
+    onInput: handleInput,
+    searchButtonRef,
+  });
+  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={openModal}
+        ref={searchButtonRef}
+        translations={translations.button}
+      />
+
+      {isOpen &&
+        DocSearchModal &&
+        searchContainer.current &&
+        createPortal(
+          <DocSearchModal
+            onClose={closeModal}
+            initialScrollY={window.scrollY}
+            initialQuery={initialQuery}
+            navigator={navigator}
+            transformItems={transformItems}
+            hitComponent={Hit}
+            transformSearchClient={transformSearchClient}
+            {...(props.searchPagePath && {
+              resultsFooterComponent,
+            })}
+            {...props}
+            searchParameters={searchParameters}
+            placeholder={translations.placeholder}
+            translations={translations.modal}
+          />,
+          searchContainer.current,
+        )}
+    </>
+  );
+}
+export default function SearchBar() {
+  const {siteConfig} = useDocusaurusContext();
+  return <DocSearch {...siteConfig.themeConfig.algolia} />;
+}

src/theme/SearchBar/styles.css

@@ -0,0 +1,14 @@
+: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);
+}