@apify/docs-theme 1.0.215 → 1.0.217

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/docs-theme",
-    "version": "1.0.215",
+    "version": "1.0.217",
     "description": "",
     "main": "./src/index.js",
     "files": [
@@ -19,9 +19,9 @@
         "access": "public"
     },
     "dependencies": {
-        "@apify/docs-search-modal": "^1.2.2",
-        "@apify/ui-library": "^1.97.2",
+        "@apify/docs-search-modal": "^1.3.3",
         "@apify/ui-icons": "^1.19.0",
+        "@apify/ui-library": "^1.97.2",
         "@docusaurus/theme-common": "^3.7.0",
         "@stackql/docusaurus-plugin-hubspot": "^1.1.0",
         "algoliasearch": "^5.19.0",

package/src/config.js

@@ -315,44 +315,27 @@ const plugins = [
 ];
 
 const scripts = [
-    // {
-    //     src: 'https://widget.kapa.ai/kapa-widget.bundle.js',
-    //     'data-website-id': 'a9937f98-9c9d-44d9-a433-fec4cb1c114d',
-    //     'data-project-name': 'Apify',
-    //     'data-modal-title': 'Apify AI Assistant',
-    //     'data-project-color': '#666666',
-    //     'data-button-hide': 'true',
-    //     'data-search-mode-enabled': 'true',
-    //     'data-search-include-source-names': '["Docs"]',
-    //     'data-project-logo': 'https://apify.com/img/apify-logo/logomark-32x32.svg',
-    //     'data-modal-example-questions': 'How to run an Actor?,Create a version of an Actor?',
-    //     'data-modal-override-open-id': 'ask-ai-input',
-    //     'data-modal-override-open-class': 'search-input',
-    //     'data-font-size-xs': '1.2rem',
-    //     'data-font-size-sm': '1.4rem',
-    //     'data-font-size-md': '1.6rem',
-    //     'data-font-size-lg': '1.8rem',
-    //     'data-font-size-xl': '2.0rem',
-    //     async: true,
-    // },
-    // {
-    //     src: 'https://cdn.jsdelivr.net/npm/@inkeep/cxkit-js@0.5/dist/embed.js',
-    //     type: 'module',
-    //     async: true,
-    // },
+    {
+        src: 'https://widget.kapa.ai/kapa-widget.bundle.js',
+        'data-website-id': 'a9937f98-9c9d-44d9-a433-fec4cb1c114d',
+        'data-project-name': 'Apify',
+        'data-modal-title': 'Apify AI Assistant',
+        'data-project-color': '#666666',
+        'data-button-hide': 'true',
+        'data-project-logo': 'https://apify.com/img/apify-logo/logomark-32x32.svg',
+        'data-modal-example-questions': 'How to run an Actor?,Create a version of an Actor?',
+        'data-modal-override-open-id': 'ask-ai-input',
+        'data-modal-override-open-class': 'search-input',
+        'data-scale-factor': '1.6',
+        'data-modal-size': '800px',
+        async: true,
+    },
 ];
 
-const customFields = {
-    // inkeepApiKey: process.env.LOCALHOST || process.env.DEV
-    //     ? 'bbbb9f1001a9b66f282431a80bb743a24e2bdefb85d4f1e4' // development, works with localhost
-    //     : '8af30e40009f26622237f75aab8256064c26a3063717c48a', // production, only works on apify.com (any subdomain)
-};
-
 module.exports = {
     themeConfig,
     plugins,
     absoluteUrl,
     noIndex,
     scripts,
-    customFields,
 };

package/src/theme/Heading/index.jsx

@@ -0,0 +1,85 @@
+import { useThemeConfig } from '@docusaurus/theme-common';
+import { translate } from '@docusaurus/Translate';
+import useBrokenLinks from '@docusaurus/useBrokenLinks';
+import clsx from 'clsx';
+import React, { useEffect } from 'react';
+
+import { LinkIcon } from '@apify/ui-icons';
+import { useCopyToClipboard } from '@apify/ui-library';
+
+import styles from './styles.module.css';
+
+export default function Heading({ as: As, id, ...props }) {
+    const brokenLinks = useBrokenLinks();
+    const {
+        navbar: { hideOnScroll },
+    } = useThemeConfig();
+
+    const { isCopied, copyToClipboard } = useCopyToClipboard();
+
+    // Register the anchor ID so Docusaurus can scroll to it
+    useEffect(() => {
+        if (id) {
+            brokenLinks.collectAnchor(id);
+
+            // Handle scroll on page load if this heading matches the URL hash
+            const hash = decodeURIComponent(window.location.hash.slice(1));
+            if (hash === id) {
+                // Use setTimeout to ensure the page is fully rendered
+                setTimeout(() => {
+                    const element = document.getElementById(id);
+                    if (element) {
+                        element.scrollIntoView({ behavior: 'smooth', block: 'start' });
+                    }
+                }, 100);
+            }
+        }
+    }, [id, brokenLinks]);
+
+    // H1 headings and headings without an id shouldn't have the copy to clipboard button
+    if (As === 'h1' || !id) {
+        return <As {...props} {...(id && { id })} />;
+    }
+
+    const handleCopy = async (e) => {
+        e.preventDefault();
+        const url = new URL(window.location.href);
+        url.hash = `#${id ?? ''}`;
+        window.location.hash = `#${id ?? ''}`;
+        await copyToClipboard(url.toString());
+    };
+
+    const anchorTitle = translate(
+        {
+            id: 'theme.common.headingLinkTitle',
+            message: 'Direct link to {heading}',
+            description: 'Title for link to heading',
+        },
+        {
+            heading: typeof props.children === 'string' ? props.children : id,
+        },
+    );
+
+    return (
+        <As
+            {...props}
+            className={clsx(
+                'anchor',
+                hideOnScroll
+                    ? styles.anchorWithHideOnScrollNavbar
+                    : styles.anchorWithStickyNavbar,
+                props.className,
+            )}
+            id={id}>
+            {props.children}
+            <a
+                onClick={handleCopy}
+                href={`#${id}`}
+                className={clsx(styles.headingCopyIcon, isCopied && styles.copied)}
+                aria-label={anchorTitle}
+            >
+                <LinkIcon size="16" />
+            </a>
+        </As>
+    );
+}

package/src/theme/Heading/styles.module.css

@@ -0,0 +1,47 @@
+.anchorWithStickyNavbar {
+  scroll-margin-top: calc(var(--ifm-navbar-height) + 0.5rem);
+}
+
+.anchorWithHideOnScrollNavbar {
+  scroll-margin-top: 0.5rem;
+}
+
+.headingCopyIcon {
+  display: none;
+  position: relative;
+  left: .4rem;
+  color: var(--ifm-color-emphasis-700);
+  text-decoration: none;
+}
+
+.headingCopyIcon svg {
+  stroke: var(--ifm-color-primary);
+  max-height: 1em !important;
+}
+
+h2:hover .headingCopyIcon,
+h3:hover .headingCopyIcon,
+h4:hover .headingCopyIcon,
+h5:hover .headingCopyIcon,
+h6:hover .headingCopyIcon {
+  display: inline-block;
+}
+
+.headingCopyIcon.copied {
+  display: inline-block !important;
+}
+
+.headingCopyIcon.copied svg {
+  display: none;
+}
+
+.headingCopyIcon.copied::after {
+  content: 'Copied!';
+  font-size: 12px;
+  color: var(--ifm-font-color-secondary);
+  font-weight: 600;
+  margin-left: 8px;
+  vertical-align: middle;
+  line-height: 1;
+}
+

package/src/theme/SearchBar/index.js

@@ -3,13 +3,9 @@ import BrowserOnly from '@docusaurus/BrowserOnly';
 import RouterLink from '@docusaurus/Link';
 import { useHistory, useLocation } from '@docusaurus/router';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-// import clsx from 'clsx';
-// import React, { useEffect, useState } from 'react';
-import React, { useCallback } from 'react';
-// import { useHotkeys } from 'react-hotkeys-hook';
+import { useState, useCallback } from 'react';
 
 import { ApifySearch } from '@apify/docs-search-modal';
-// import { ControlKeyIcon, SearchIcon } from '@apify/docs-search-modal/dist/utils/icons';
 
 // needs to be imported as the last thing, so that it can override the default styles
 // TODO: update simple-import-sort to allow importing css as last.
@@ -67,7 +63,9 @@ export default function SearchBar({ onClick }) {
     return (
         <BrowserOnly>
             {() => (
-                <div onClick={onClick}>
+                <div className="SearchButton-Container">
+
+                <div onClick={onClick} className="AlgoliaContainer" style={{ marginRight: '12px' }}>
                     <ApifySearch
                         algoliaAppId={siteConfig.themeConfig.algolia.appId}
                         algoliaIndexName='apify_sdk_v2'
@@ -76,169 +74,42 @@ export default function SearchBar({ onClick }) {
                         navigate={navigate}
                     />
                 </div>
+                <KapaAIButton />
+                </div>
             )}
         </BrowserOnly>
     );
 }
 
-// export default function SearchBar({ onClick }) {
-//     const [variant, setVariant] = useState(null);
-//     const [opened, setOpened] = useState(false);
-//     const { siteConfig } = useDocusaurusContext();
-//     const { inkeepApiKey } = siteConfig.customFields;
-//
-//     useEffect(() => {
-//         const storedVariant = localStorage.getItem('search-provider');
-//
-//         if (storedVariant) {
-//             setVariant(storedVariant);
-//         } else {
-//             const assignedVariant = Math.random() < 0.5 ? 'inkeep' : 'kapa';
-//             localStorage.setItem('search-provider', assignedVariant);
-//             setVariant(assignedVariant);
-//         }
-//     }, []);
-//
-//     onClick = () => {
-//         if (opened) {
-//             return;
-//         }
-//
-//         setOpened(true);
-//
-//         if (variant === 'kapa') {
-//             if (window.Kapa && typeof window.Kapa.open === 'function') {
-//                 window.Kapa.open();
-//                 window.Kapa('onModalClose', () => {
-//                     setOpened(false);
-//                 });
-//             } else {
-//                 console.error('Kapa.ai widget is not available.');
-//             }
-//             return;
-//         }
-//
-//         if (variant !== 'inkeep') {
-//             console.warn('Unknown search variant:', variant);
-//             return;
-//         }
-//
-//         if (window.Inkeep) {
-//             const config = {
-//                 baseSettings: {
-//                     apiKey: inkeepApiKey,
-//                     organizationDisplayName: 'Apify',
-//                     primaryBrandColor: '#FF9013',
-//                     transformSource: (source) => {
-//                         function getTabForSource(src) {
-//                             if (src.url.includes('help.apify.com')) {
-//                                 return 'Help';
-//                             }
-//                             return 'Docs';
-//                         }
-//
-//                         if (source.contentType === 'documentation') {
-//                             return {
-//                                 ...source,
-//                                 tabs: [...(source.tabs || []), getTabForSource(source)],
-//                             };
-//                         }
-//                         return source;
-//                     },
-//                     trigger: {
-//                         disableDefaultTrigger: true,
-//                     },
-//                     theme: {
-//                         styles: [
-//                             {
-//                                 key: 'main',
-//                                 type: 'link',
-//                                 value: '/inkeep-overrides.css',
-//                             },
-//                         ],
-//                     },
-//                 },
-//                 modalSettings: {
-//                     onOpenChange: handleOpenChange,
-//                 },
-//                 searchSettings: {
-//                     tabs: [
-//                         ['Docs', { isAlwaysVisible: true }],
-//                         'GitHub',
-//                         'All',
-//                     ],
-//                 },
-//                 aiChatSettings: {
-//                     aiAssistantAvatar: 'https://intercom.help/apify/assets/favicon',
-//                     chatSubjectName: 'Apify',
-//                     exampleQuestions: [
-//                         'What is an Actor?',
-//                         'How to use my own proxies?',
-//                         'How to integrate Apify Actors with GitHub?',
-//                         'How to share key-value stores between runs?',
-//                     ],
-//                     getHelpOptions: [
-//                         {
-//                             action: {
-//                                 type: 'open_link',
-//                                 url: 'https://apify.com/contact',
-//                             },
-//                             icon: {
-//                                 builtIn: 'IoChatbubblesOutline',
-//                             },
-//                             name: 'Contact Us',
-//                         },
-//                     ],
-//                 },
-//                 defaultView: 'chat',
-//             };
-//             const modal = window.Inkeep.ModalSearchAndChat(config);
-//
-//             function handleOpenChange(newOpen) {
-//                 modal.update({ modalSettings: { isOpen: newOpen } });
-//                 setOpened(newOpen);
-//             }
-//
-//             modal.update({ modalSettings: { isOpen: true } });
-//         } else {
-//             console.error('Inkeep widget is not available.');
-//         }
-//     };
-//
-//     const [key, setKey] = useState(null);
-//
-//     useEffect(() => {
-//         if (typeof navigator !== 'undefined') {
-//             const isMac = /Mac|iPod|iPhone|iPad/.test(navigator.platform);
-//             setKey(isMac ? '⌘' : 'ctrl');
-//         }
-//     }, []);
-//
-//     useHotkeys('mod+k, /', () => {
-//         onClick();
-//     }, { preventDefault: true });
-//
-//     return (
-//         <BrowserOnly>
-//             {() => (
-//                 <div onClick={onClick}>
-//                     <button type="button" className="DocSearch DocSearch-Button" aria-label="Search">
-//                         <span className="DocSearch-Button-Container">
-//                             <SearchIcon/>
-//                             <span className="DocSearch-Button-Placeholder">Search</span>
-//                         </span>
-//                         <span className="DocSearch-Button-Keys">
-//                             {key !== null && (<>
-//                                 <kbd className={clsx(key === 'ctrl' ? 'ctrl' : 'cmd', 'DocSearch-Button-Key')}>
-//                                     {key === 'ctrl' ? <ControlKeyIcon/> : key}
-//                                 </kbd>
-//                                 <kbd className="DocSearch-Button-Key">K</kbd>
-//                             </>)}
-//                         </span>
-//
-//                     </button>
-//                 </div>
-//             )}
-//         </BrowserOnly>
-//     );
-// }
+function KapaAIButton({ onClick }) {
+    const [opened, setOpened] = useState(false);
+
+    onClick = () => {
+        if (opened) {
+            return;
+        }
+
+        setOpened(true);
+
+        if (window.Kapa && typeof window.Kapa.open === 'function') {
+            window.Kapa.open();
+            window.Kapa('onModalClose', () => {
+                setOpened(false);
+            });
+        } else {
+            console.error('Kapa.ai widget is not available.');
+        }
+    };
+
+    return (
+        <BrowserOnly>
+            {() => (
+                <div onClick={onClick}>
+                    <button type="button" className="AskAI-Button" aria-label="Ask AI">
+                        Ask AI
+                    </button>
+                </div>
+            )}
+        </BrowserOnly>
+    );
+}

package/src/theme/SearchBar/styles.css

@@ -22,20 +22,54 @@
     color var(--ifm-transition-fast) var(--ifm-transition-timing-default);
 }
 
-.navbar-sidebar .DocSearch-Button {
+.AskAI-Button {
+  height: 4rem;
+  padding: 0.8rem 1.6rem !important;
+  background-color: var(--ifm-color-primary);
+  border-radius: 8px;
+  color: var(--color-neutral-text-on-primary);
+  font-size: 1.6rem;
+  font-weight: 500;
+  line-height: 2.4rem;
+  border: none;
+  box-shadow: none;
+  outline: none;
+  box-sizing: border-box;
+  cursor: pointer;
+  display: block;
+  position: relative;
+  text-align: center;
+  transition: all var(--ifm-transition-fast) var(--ifm-transition-timing-default);
+}
+
+.SearchButton-Container {
+  display: flex;
+  align-items: center;
+}
+
+.navbar-sidebar .SearchButton-Container {
   display: none;
 }
 
 @media (max-width: 768px) {
+    .SearchButton-Container {
+      width: 100%;
+    }
+
+    .AlgoliaContainer {
+      flex: 1;
+    }
+
     .DocSearch-Button {
       width: 100%;
+      justify-content: space-between;
     }
 
-    .navbar__inner .DocSearch-Button {
+    .navbar__inner .SearchButton-Container {
       display: none;
     }
 
-    .navbar-sidebar .DocSearch-Button {
+    .navbar-sidebar .SearchButton-Container {
       display: flex;
     }