@apify/docs-theme 1.0.91 → 1.0.93

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/docs-theme",
-    "version": "1.0.91",
+    "version": "1.0.93",
     "description": "",
     "main": "./src/index.js",
     "files": [
@@ -19,6 +19,7 @@
         "access": "public"
     },
     "dependencies": {
+        "@apify/docs-search-modal": "^1.0.21",
         "@docusaurus/theme-common": "^2.4.1",
         "@stackql/docusaurus-plugin-hubspot": "^1.1.0",
         "axios": "^1.4.0",
@@ -27,7 +28,6 @@
         "prism-react-renderer": "^2.0.6"
     },
     "peerDependencies": {
-        "@apify/docsearch-apify-docs": "^3.5.3",
         "react": "*",
         "react-dom": "*"
     }

package/src/config.js

@@ -140,8 +140,8 @@ const themeConfig = ({
     },
     prism: {
         defaultLanguage: 'typescript',
-        theme: require('prism-react-renderer/themes/github'),
-        darkTheme: require('prism-react-renderer/themes/dracula'),
+        theme: require('prism-react-renderer').themes.github,
+        darkTheme: require('prism-react-renderer').themes.dracula,
         additionalLanguages: ['docker', 'log', 'php'],
     },
     // this needs to be absolute link otherwise it gets resolved wrongly in project docs
@@ -241,10 +241,8 @@ const themeConfig = ({
     },
     algolia: {
         appId: 'N8EOCSBQGH',
-        apiKey: 'b43e67a96ed18c7f63f5fd965906a96d', // search only (public) API key
-        indexName: 'apify_sdk',
-        // apiKey: 'e97714a64e2b4b8b8fe0b01cd8592870', // search only (public) API key
-        // indexName: 'crawler_dev_apify_sdk',
+        apiKey: 'e97714a64e2b4b8b8fe0b01cd8592870', // search only (public) API key
+        indexName: 'test_test_apify_sdk',
         algoliaOptions: {
             facetFilters: ['version:VERSION'],
         },

package/src/theme/SearchBar/index.js

@@ -1,18 +1,16 @@
-import React, { useCallback, useMemo, useRef, useState } from 'react';
-import { DocSearchButton, useDocSearchKeyboardEvents } from '@apify/docsearch-apify-docs';
-import Head from '@docusaurus/Head';
-import Link from '@docusaurus/Link';
-import { useSearchLinkCreator } from '@docusaurus/theme-common/internal';
-import { useAlgoliaContextualFacetFilters } from '@docusaurus/theme-search-algolia/client';
-import { useActiveDocContext } from '@docusaurus/plugin-content-docs/client';
-import Translate from '@docusaurus/Translate';
+import React, { useCallback } from 'react';
+
+import { ApifySearch } from '@apify/docs-search-modal';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import { createPortal } from 'react-dom';
-import translations from '@theme/SearchTranslations';
+import { useLocation, useHistory } from '@docusaurus/router';
+import BrowserOnly from '@docusaurus/BrowserOnly';
 
-let DocSearchModal = null;
+import RouterLink from '@docusaurus/Link';
 
-function useLink(href, baseUrl) {
+/**
+ * Tests whether the given href is pointing to the current docusaurus instance (so we can use the router link).
+ */
+function matchesCurrentInstance(href, baseUrl) {
     if (baseUrl === '/') {
         return href.startsWith('/academy') || href.startsWith('/platform');
     }
@@ -20,7 +18,7 @@ function useLink(href, baseUrl) {
     return href.startsWith(baseUrl);
 }
 
-export function A(props) {
+export function Link(props) {
     props = { ...props };
 
     if (props.href.startsWith('https://docs.apify.com')) {
@@ -28,186 +26,45 @@ export function A(props) {
     }
 
     const { siteConfig } = useDocusaurusContext();
-    if (useLink(props.href, siteConfig.baseUrl)) {
-        return <Link {...props}>
+
+    if (matchesCurrentInstance(props.href, siteConfig.baseUrl)) {
+        return <RouterLink {...props}>
             {props.children}
-        </Link>;
+        </RouterLink>;
     }
 
     return <a {...props}>{props.children}</a>;
 }
 
-function Hit({ hit, children }) {
-    return <A href={hit.url}>{children}</A>;
-}
-
-function ResultsFooter({ state, onClose }) {
-    const generateSearchPageLink = useSearchLinkCreator();
-    return (
-        <A href={generateSearchPageLink(state.query)} onClick={onClose}>
-            <Translate
-                id="theme.SearchBar.seeAll"
-                values={{ count: state.context.nbHits }}>
-                {'See all {count} results'}
-            </Translate>
-        </A>
-    );
-}
-
-function mergeFacetFilters(f1, f2) {
-    const normalize = (f) => (typeof f === 'string' ? [f] : f);
-    return [...normalize(f1), ...normalize(f2)];
-}
+export default function SearchBar() {
+    const { siteConfig } = useDocusaurusContext();
+    const location = useLocation();
+    const history = useHistory();
 
-function DocSearch({ contextualSearch, externalUrlRegex, ...props }) {
-    const { siteMetadata, siteConfig } = useDocusaurusContext();
-    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;
+    const navigate = useCallback((href) => {
+        const shortHref = href.substring('https://docs.apify.com'.length);
 
-    const tags = facetFilters[facetFilters.length - 1];
-    const docsPluginId = siteConfig.presets[0][1].docs.id ?? 'default';
-    const activeDocContext = useActiveDocContext(docsPluginId);
-    let version = tags[tags.length - 1].match(/-([^-]+)$/)?.[1];
+        if (matchesCurrentInstance(shortHref, siteConfig.baseUrl)) {
+            return history.push(shortHref);
+        }
+        return window.location.assign(href);
+    }, [history, siteConfig.baseUrl]);
 
-    // normalize the latest version regardless of what number it has,
-    // so we can search across all "latest versions of the docs"
-    if (!version || !activeDocContext.activeVersion || activeDocContext.activeVersion.isLast) {
-        version = 'latest';
-    }
+    const getVersion = useCallback(() => {
+        const match = location.pathname.match(/\/(\d+\.\d+|next)/);
 
-    tags.push(`docusaurus_tag:default-${version}`);
+        return match ? match[1] : 'latest';
+    }, [location]);
 
-    // We let user override default searchParameters if she wants to
-    const searchParameters = {
-        ...props.searchParameters,
-        facetFilters,
-    };
-    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('@apify/docsearch-apify-docs/modal'),
-            import('@apify/docsearch-apify-docs/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) => {
-            importDocSearchModalIfNeeded().then(() => {
-                setIsOpen(true);
-                setInitialQuery(event.key);
-            });
-        },
-        [importDocSearchModalIfNeeded, setIsOpen, setInitialQuery],
-    );
-    const navigator = useRef({
-        navigate({ itemUrl }) {
-            window.location.href = itemUrl;
-        },
-    }).current;
-    const transformItems = useRef((items) => (items.map((item) => {
-        if (item.url.startsWith(siteConfig.url)) {
-            return { ...item, url: item.url.substring(siteConfig.url.length) };
-        }
-        return item;
-    }))).current;
-    const resultsFooterComponent = useMemo(
-        // eslint-disable-next-line react/display-name
-        () => (footerProps) => <ResultsFooter {...footerProps} onClose={onClose}/>,
-        [onClose],
-    );
-    const transformSearchClient = useCallback(
-        (searchClient) => {
-            searchClient.addAlgoliaAgent(
-                'docusaurus',
-                siteMetadata.docusaurusVersion,
-            );
-            return searchClient;
-        },
-        [siteMetadata.docusaurusVersion],
-    );
-    useDocSearchKeyboardEvents({
-        isOpen,
-        onOpen,
-        onClose,
-        onInput,
-        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={onOpen}
-                ref={searchButtonRef}
-                translations={translations.button}
-            />
-
-            {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}
-                        placeholder={translations.placeholder}
-                        translations={translations.modal}
-                    />,
-                    searchContainer.current,
-                )}
-        </>
+        <BrowserOnly>
+            {() => <ApifySearch
+                algoliaAppId={siteConfig.themeConfig.algolia.appId}
+                algoliaIndexName='test_test_apify_sdk'
+                algoliaKey={siteConfig.themeConfig.algolia.apiKey}
+                filters={`version:${getVersion()}`}
+                navigate={navigate}
+            />}
+        </BrowserOnly>
     );
 }
-
-export default function SearchBar() {
-    const { siteConfig } = useDocusaurusContext();
-    return <DocSearch {...siteConfig.themeConfig.algolia} />;
-}

package/src/theme/SearchPage/index.js

@@ -22,7 +22,7 @@ import {
     useSearchResultUrlProcessor,
 } from '@docusaurus/theme-search-algolia/client';
 import Layout from '@theme/Layout';
-import { A } from '../SearchBar';
+import { Link } from '../SearchBar';
 import styles from './styles.module.css';
 
 // Very simple pluralization: probably good enough for now
@@ -386,7 +386,7 @@ function SearchPageContent() {
                             ({ title, url, summary, breadcrumbs }, i) => (
                                 <article key={i} className={styles.searchResultItem}>
                                     <h2 className={styles.searchResultItemHeading}>
-                                        <A href={url} dangerouslySetInnerHTML={{ __html: title }}/>
+                                        <Link href={url} dangerouslySetInnerHTML={{ __html: title }}/>
                                     </h2>
 
                                     {breadcrumbs.length > 0 && (

package/src/theme/custom.css

@@ -702,5 +702,3 @@ html[data-theme='dark'] .beta-chip {
 a.tsd-anchor[href^="https://undefined"] {
     display: none;
 }
-
-/* dummy comment to trigger theme publishing */