@apify/docs-theme 1.0.216 → 1.0.218

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/docs-theme",
-    "version": "1.0.216",
+    "version": "1.0.218",
     "description": "",
     "main": "./src/index.js",
     "files": [

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/LLMButtons/index.jsx

@@ -2,6 +2,7 @@ import clsx from 'clsx';
 import React, { useCallback, useState } from 'react';
 
 import {
+    AnthropicIcon,
     ChatGptIcon,
     CheckIcon,
     ChevronDownIcon,
@@ -37,6 +38,13 @@ const DROPDOWN_OPTIONS = [
         Icon: ChatGptIcon,
         value: 'openInChatGPT',
     },
+    {
+        label: 'Open in Claude',
+        description: 'Ask questions about this page',
+        showExternalIcon: true,
+        Icon: AnthropicIcon,
+        value: 'openInClaude',
+    },
     {
         label: 'Open in Perplexity',
         description: 'Ask questions about this page',
@@ -70,6 +78,27 @@ const onOpenInChatGPTClick = () => {
     }
 };
 
+const onOpenInClaudeClick = () => {
+    if (window.analytics) {
+        window.analytics.track('Clicked', {
+            app: 'docs',
+            button_text: 'Open in Claude',
+            element: 'llm-buttons.openInClaude',
+        });
+    }
+
+    const prompt = getPrompt(window.location.href);
+
+    try {
+        window.open(
+            `https://claude.ai/new?q=${encodeURIComponent(prompt)}`,
+            '_blank',
+        );
+    } catch (error) {
+        console.error('Error opening Claude:', error);
+    }
+};
+
 const onOpenInPerplexityClick = () => {
     if (window.analytics) {
         window.analytics.track('Clicked', {
@@ -227,6 +256,9 @@ export default function LLMButtons({ isApiReferencePage = false }) {
             case 'openInChatGPT':
                 onOpenInChatGPTClick();
                 break;
+            case 'openInClaude':
+                onOpenInClaudeClick();
+                break;
             case 'openInPerplexity':
                 onOpenInPerplexityClick();
                 break;