@apify/docs-theme 1.0.224 → 1.0.226

package/package.json

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

package/src/theme/LLMButtons/index.jsx

@@ -7,10 +7,13 @@ import {
     CheckIcon,
     ChevronDownIcon,
     CopyIcon,
+    CursorIcon,
     ExternalLinkIcon,
     LoaderIcon,
     MarkdownIcon,
+    McpIcon,
     PerplexityIcon,
+    VscodeIcon,
 } from '@apify/ui-icons';
 import { Menu, Text, theme } from '@apify/ui-library';
 
@@ -31,6 +34,29 @@ const DROPDOWN_OPTIONS = [
         Icon: MarkdownIcon,
         value: 'viewAsMarkdown',
     },
+    {
+        label: 'Copy MCP server',
+        description: 'Copy MCP Server URL to clipboard',
+        showExternalIcon: false,
+        Icon: McpIcon,
+        value: 'copyMcpServer',
+    },
+    {
+        label: 'Connect to Cursor',
+        description: 'Install MCP Server on Cursor',
+        showExternalIcon: true,
+        // TODO: Replace with CursorIcon - we don't have one yet
+        Icon: CursorIcon,
+        value: 'connectCursor',
+    },
+    {
+        label: 'Connect to VS Code',
+        description: 'Install MCP server on VS Code',
+        showExternalIcon: true,
+        // TODO: Replace with VS Code Icon - we don't have one yet
+        Icon: VscodeIcon,
+        value: 'connectVsCode',
+    },
     {
         label: 'Open in ChatGPT',
         description: 'Ask questions about this page',
@@ -54,6 +80,16 @@ const DROPDOWN_OPTIONS = [
     },
 ];
 
+const MCP_SERVER_URL = 'https://mcp.apify.com/?tools=docs';
+
+const MCP_CONFIG_JSON = `{
+    "mcpServers": {
+        "apify": {
+            "url": "${MCP_SERVER_URL}"
+        }
+    }
+}`;
+
 const getPrompt = (currentUrl) => `Read from ${currentUrl} so I can ask questions about it.`;
 const getMarkdownUrl = (currentUrl) => {
     const url = new URL(currentUrl);
@@ -161,6 +197,87 @@ const onCopyAsMarkdownClick = async ({ setCopyingStatus }) => {
     }
 };
 
+const onCopyMcpServerClick = async () => {
+    if (window.analytics) {
+        window.analytics.track('Clicked', {
+            app: 'docs',
+            button_text: 'Copy MCP server',
+            element: 'llm-buttons.copyMcpServer',
+        });
+    }
+
+    try {
+        await navigator.clipboard.writeText(MCP_CONFIG_JSON);
+    } catch (error) {
+        console.error('Failed to copy MCP configuration:', error);
+    }
+};
+
+const openApifyMcpConfigurator = (integration) => {
+    try {
+        window.open(`https://mcp.apify.com/?integration=${integration}`, '_blank');
+    } catch (error) {
+        console.error('Error opening fallback URL:', error);
+    }
+};
+
+const openMcpIntegration = async (integration) => {
+    // Try to open the app directly using URL scheme
+    let appUrl;
+    if (integration === 'cursor') {
+        // Cursor deeplink format:
+        // cursor://anysphere.cursor-deeplink/mcp/install?name=$NAME&config=$BASE64_JSON
+        const cursorConfig = {
+            url: MCP_SERVER_URL,
+        };
+        const encodedConfig = btoa(JSON.stringify(cursorConfig));
+        appUrl = `cursor://anysphere.cursor-deeplink/mcp/install?name=apify&config=${encodeURIComponent(encodedConfig)}`;
+    } else if (integration === 'vscode') {
+        // VS Code deeplink format: vscode:mcp/install?<url-encoded-json>
+        const mcpConfig = {
+            name: 'Apify',
+            type: 'http',
+            url: MCP_SERVER_URL,
+        };
+        const encodedConfig = encodeURIComponent(JSON.stringify(mcpConfig));
+        appUrl = `vscode:mcp/install?${encodedConfig}`;
+    }
+
+    if (appUrl) {
+        const openedWindow = window.open(appUrl, '_blank');
+
+        if (openedWindow) {
+            return;
+        }
+    }
+    // Fallback to web configurator if appUrl doesn't exist or window.open failed
+    openApifyMcpConfigurator(integration);
+};
+
+const onConnectCursorClick = () => {
+    if (window.analytics) {
+        window.analytics.track('Clicked', {
+            app: 'docs',
+            button_text: 'Connect to Cursor',
+            element: 'llm-buttons.connectCursor',
+        });
+    }
+
+    openMcpIntegration('cursor');
+};
+
+const onConnectVsCodeClick = () => {
+    if (window.analytics) {
+        window.analytics.track('Clicked', {
+            app: 'docs',
+            button_text: 'Connect to VS Code',
+            element: 'llm-buttons.connectVsCode',
+        });
+    }
+
+    openMcpIntegration('vscode');
+};
+
 const onViewAsMarkdownClick = () => {
     if (window.analytics) {
         window.analytics.track('Clicked', {
@@ -257,6 +374,15 @@ export default function LLMButtons({ isApiReferencePage = false }) {
             case 'viewAsMarkdown':
                 onViewAsMarkdownClick();
                 break;
+            case 'copyMcpServer':
+                onCopyMcpServerClick();
+                break;
+            case 'connectCursor':
+                onConnectCursorClick();
+                break;
+            case 'connectVsCode':
+                onConnectVsCodeClick();
+                break;
             case 'openInChatGPT':
                 onOpenInChatGPTClick();
                 break;
@@ -277,9 +403,9 @@ export default function LLMButtons({ isApiReferencePage = false }) {
                 [styles.llmMenuApiReferencePage]: isApiReferencePage,
             })}
             onMenuOpen={(isOpen) => chevronIconRef.current?.classList.toggle(
-                    styles.chevronIconOpen,
-                    isOpen,
-                )
+                styles.chevronIconOpen,
+                isOpen,
+            )
             }
             components={{
                 MenuBase: (props) => (

package/src/theme/custom.css

@@ -126,12 +126,15 @@ html[data-theme='dark'] {
 
 :root {
     /* use default system font based on https://devhints.io/css-system-font-stack */
-    --ifm-font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI',
-        'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
-        'Helvetica Neue', sans-serif;
-    --ifm-heading-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
-        'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
-        'Helvetica Neue', sans-serif;
+    --ifm-font-family-base:
+        -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+        'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+        sans-serif;
+    --ifm-heading-font-family: 'Lota Grotesque', sans-serif;
+    --tsd-spacing-vertical: 1.2rem !important;
+    --tsd-spacing-horizontal: 1.6rem !important;
+    --ifm-list-item-margin: 0.4rem !important;
+    --ifm-list-left-padding: 3.2rem !important;
     --ifm-font-weight-semibold: 600;
     --ifm-font-color-base: #242736;
 
@@ -286,6 +289,34 @@ html[data-theme='dark'] {
     --button-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
 }
 
+@font-face {
+    font-family: 'Lota Grotesque';
+    src:
+        url('/font/lota.woff2') format('woff2'),
+        url('/font/lota.woff') format('woff');
+    font-weight: 600;
+}
+
+.apiItemContainer h2 {
+    font-size: 2.4rem;
+}
+
+.apiItemContainer h3 {
+    font-size: 2rem;
+}
+
+.apiItemContainer h4 {
+    font-size: 1.6rem;
+}
+
+.apiItemContainer h5 {
+    font-size: 1.4rem;
+}
+
+.tsd-comment {
+    margin-bottom: var(--tsd-spacing-vertical);
+}
+
 .markdown h1,
 .markdown h2,
 .markdown h3,
@@ -621,7 +652,7 @@ article .card h2 {
 }
 
 .tsd-panel-header .tsd-flag-group {
-    margin-right: .5rem;
+    margin-right: .8rem;
     margin-left: .5rem;
 }