docs: Add copy for LLMs and view as markdown buttons

Author: patrikbraborec

sources/legal/index.mdx

@@ -7,7 +7,6 @@ slug: /
 hide_table_of_contents: true
 ---
 
-# Apify Legal
 <!-- vale off -->
 
 ## Company details (Impressum)

sources/platform/actors/running/index.md

@@ -5,8 +5,6 @@ sidebar_position: 7.1
 slug: /actors/running
 ---
 
-# Running Actors
-
 **In this section, you learn how to run Apify Actors using Apify Console or programmatically. You will learn about their configuration, versioning, data retention, usage, and pricing.**
 
 import Tabs from '@theme/Tabs';

sources/platform/index.mdx

@@ -1,16 +1,15 @@
 ---
-title: Home
+title: Apify platform
 description: Apify is your one-stop shop for web scraping, data extraction, and RPA. Automate anything you can do manually in a browser.
 slug: /
 hide_table_of_contents: true
 sidebar_position: 0
+sidebar_label: Home
 ---
 import Card from "@site/src/components/Card";
 import CardGrid from "@site/src/components/CardGrid";
 import homepageContent from "./homepage_content.json";
 
-# Apify platform
-
 > **Apify** is a cloud platform that helps you build reliable web scrapers, fast, and automate anything you can do manually in a web browser.
 >
 > **Actors** are serverless cloud programs running on the Apify platform that can easily crawl websites with millions of pages, but also perform arbitrary computing jobs such as sending emails or data transformations. They can be started manually, using our API or scheduler, and they can be easily integrated with other apps.

sources/platform/proxy/index.md

@@ -11,8 +11,6 @@ import TabItem from '@theme/TabItem';
 import Card from "@site/src/components/Card";
 import CardGrid from "@site/src/components/CardGrid";
 
-# Proxy
-
 **Learn to anonymously access websites in scraping/automation jobs. Improve data outputs and efficiency of bots, and access websites from various geographies.**
 
 ---

sources/platform/security.md

@@ -6,8 +6,6 @@ category: platform
 slug: /security
 ---
 
-# Security
-
 **Learn more about Apify's security practices and data protection measures that are used to protect your Actors, their data, and the Apify platform in general.**
 
 ---

sources/platform/storage/dataset.md

@@ -6,8 +6,6 @@ toc_max_heading_level: 4
 slug: /storage/dataset
 ---
 
-# Dataset
-
 **Store and export web scraping, crawling or data processing job results. Learn how to access and manage datasets in Apify Console or via API.**
 
 import Tabs from '@theme/Tabs';

sources/platform/storage/key_value_store.md

@@ -6,8 +6,6 @@ sidebar_position: 9.3
 slug: /storage/key-value-store
 ---
 
-# Key-value store
-
 **Store anything from Actor or task run results, JSON documents, or images. Learn how to access and manage key-value stores from Apify Console or via API.**
 
 import Tabs from '@theme/Tabs';

src/components/LLMButtons/CopyForLLM/index.tsx

@@ -0,0 +1,72 @@
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import React, { 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 copyIcon = useBaseUrl('/img/copy.svg');
+    const [isLoading, setIsLoading] = useState(false);
+    const [isCopied, setIsCopied] = useState(false);
+
+    const handleCopy = async () => {
+        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}
+                style={{
+                    backgroundImage: `url(${copyIcon})`,
+                    backgroundSize: 'contain',
+                    backgroundRepeat: 'no-repeat',
+                    backgroundPosition: 'center',
+                    display: 'inline-block',
+                }}
+                aria-label="Copy for LLM"
+            />
+            <ButtonText isLoading={isLoading} isCopied={isCopied} />
+        </button>
+    );
+}

src/components/LLMButtons/ViewAsMarkdown/index.tsx

@@ -0,0 +1,39 @@
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import React from 'react';
+
+import styles from '../styles.module.css';
+
+export default function ViewAsMarkdown() {
+    const markdownIcon = useBaseUrl('/img/markdown.svg');
+
+    const handleClick = () => {
+        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}
+                style={{
+                    backgroundImage: `url(${markdownIcon})`,
+                    backgroundSize: 'contain',
+                    backgroundRepeat: 'no-repeat',
+                    backgroundPosition: 'center',
+                    display: 'inline-block',
+                }}
+                aria-label="View as Markdown"
+            />
+            View as Markdown
+        </button>
+    );
+}

src/components/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}>
+            <CopyForLLM />
+            <div className={styles.llmButtonsSeparator}></div>
+            <ViewAsMarkdown />
+        </div>
+    );
+}