@apify/docs-theme 1.0.200 → 1.0.201

package/package.json

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

package/src/theme/LLMButtons/CopyForLLM/index.tsx

@@ -0,0 +1,72 @@
+import type React from 'react';
+import { useState } from 'react';
+
+import styles from '../styles.module.css';
+
+// Custom component for button text
+function ButtonText({ isLoading, isCopied }: { isLoading: boolean; isCopied: boolean }) {
+    if (isLoading) {
+        return 'Copying...';
+    }
+    if (isCopied) {
+        return 'Copied!';
+    }
+    return 'Copy for LLM';
+}
+
+export default function CopyForLLM() {
+    const [isLoading, setIsLoading] = useState(false);
+    const [isCopied, setIsCopied] = useState(false);
+
+    const handleCopy = async () => {
+        if ((window as any).analytics) {
+            (window as any).analytics.track('Clicked', {
+                app: 'docs',
+                button_text: 'Copy for LLM',
+                element: 'llm-buttons.copyForLLM',
+            });
+        }
+
+        try {
+            setIsLoading(true);
+
+            const currentUrl = window.location.href;
+            const markdownUrl = `${currentUrl}.md`;
+
+            // Fetch the markdown content
+            const response = await fetch(markdownUrl);
+
+            if (!response.ok) {
+                throw new Error(`Failed to fetch markdown: ${response.status}`);
+            }
+
+            const markdownContent = await response.text();
+
+            // Copy to clipboard
+            await navigator.clipboard.writeText(markdownContent);
+
+            // Show success feedback
+            setIsCopied(true);
+            setTimeout(() => setIsCopied(false), 2000);
+        } catch (error) {
+            console.error('Failed to copy markdown content:', error);
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    return (
+        <button
+            className={styles.llmButton}
+            title="Copy for LLM"
+            onClick={handleCopy}
+            disabled={isLoading}
+        >
+            <span
+                className={`${styles.llmButtonIcon} ${styles.llmButtonIconBackgroundCopy}`}
+                aria-label="Copy for LLM"
+            />
+            <ButtonText isLoading={isLoading} isCopied={isCopied} />
+        </button>
+    );
+}

package/src/theme/LLMButtons/ViewAsMarkdown/index.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+import styles from '../styles.module.css';
+
+export default function ViewAsMarkdown() {
+    const handleClick = () => {
+        if ((window as any).analytics) {
+            (window as any).analytics.track('Clicked', {
+                app: 'docs',
+                button_text: 'View as Markdown',
+                element: 'llm-buttons.viewAsMarkdown',
+            });
+        }
+
+        try {
+            const currentUrl = window.location.href;
+            const markdownUrl = `${currentUrl}.md`;
+            window.open(markdownUrl, '_blank');
+        } catch (error) {
+            console.error('Error opening markdown file:', error);
+        }
+    };
+
+    return (
+        <button
+            className={styles.llmButton}
+            title="View as Markdown"
+            onClick={handleClick}
+        >
+            <span
+                className={`${styles.llmButtonIcon} ${styles.llmButtonIconBackgroundMarkdown}`}
+                aria-label="View as Markdown"
+            />
+            View as Markdown
+        </button>
+    );
+}

package/src/theme/LLMButtons/index.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import CopyForLLM from './CopyForLLM';
+import styles from './styles.module.css';
+import ViewAsMarkdown from './ViewAsMarkdown';
+
+export default function LLMButtons() {
+    return (
+        <div className={styles.llmButtonsContainer}>
+            <ViewAsMarkdown />
+            <div className={styles.llmButtonsSeparator}></div>
+            <CopyForLLM />
+        </div>
+    );
+}

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

@@ -0,0 +1,57 @@
+.llmButtonsContainer {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-top: -8px;
+    margin-bottom: calc(var(--ifm-h1-vertical-rhythm-bottom) * var(--ifm-leading));
+}
+
+.llmButtonsSeparator {
+    width: 1px;
+    height: 16px;
+    background-color: var(--ifm-hr-background-color);
+}
+
+.llmButton {
+    display: flex;
+    align-items: center;
+    background-color: transparent;
+    border: none;
+    height: 16px;
+    cursor: pointer;
+    padding: 0;
+    gap: 4px;
+}
+
+.llmButtonIcon {
+    width: 16px;
+    height: 16px;
+    margin: 0 !important;
+    cursor: pointer;
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+    display: inline-block;
+}
+
+.llmButtonIconBackgroundMarkdown {
+    background-image: url('/img/markdown.svg');
+
+}
+
+.llmButtonIconBackgroundCopy {
+    background-image: url('/img/copy.svg');
+}
+
+/* Dark theme adjustments */
+[data-theme='dark'] .llmButtonIcon {
+    color: #e0e0e0;
+}
+
+[data-theme='dark'] .llmButtonIconBackgroundMarkdown {
+    background-image: url('/img/markdown-dark-theme.svg');
+}
+
+[data-theme='dark'] .llmButtonIconBackgroundCopy {
+    background-image: url('/img/copy-dark-theme.svg');
+}

package/src/theme/MDXComponents/index.js

@@ -1,5 +1,5 @@
-import LLMButtons from '@site/src/components/LLMButtons';
 import Admonition from '@theme/Admonition';
+import LLMButtons from '@theme/LLMButtons';
 import MDXA from '@theme/MDXComponents/A';
 import MDXCode from '@theme/MDXComponents/Code';
 import MDXDetails from '@theme/MDXComponents/Details';