feat: Add copy to clipboard Heading

Author: birosrichard

apify-docs-theme/src/theme/Heading/index.jsx

@@ -0,0 +1,70 @@
+import { useThemeConfig } from '@docusaurus/theme-common';
+import { translate } from '@docusaurus/Translate';
+import useBrokenLinks from '@docusaurus/useBrokenLinks';
+import clsx from 'clsx';
+import React from 'react';
+
+import { LinkIcon } from '@apify/ui-icons';
+
+import styles from './styles.module.css';
+import { useCopyToClipboard } from './useCopyToClipboard';
+
+export default function Heading({ as: As, id, ...props }) {
+    const brokenLinks = useBrokenLinks();
+    const {
+        navbar: { hideOnScroll },
+    } = useThemeConfig();
+
+    const [isCopied, handleClick] = useCopyToClipboard({
+        text: id ?? '',
+        transform: (text) => {
+            const url = new URL(window.location.href);
+            url.hash = `#${text}`;
+            return url.toString();
+        },
+    });
+
+    // H1 headings shouldn't have the copy to clipboard button
+    if (As === 'h1') {
+        return <As {...props} />;
+    }
+
+    // Register the anchor ID so Docusaurus can scroll to it
+    if (id) {
+        brokenLinks.collectAnchor(id);
+    }
+
+    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={handleClick}
+                href={`#${id}`}
+                className={clsx(styles.headingCopyIcon, isCopied && styles.copied)}
+                aria-label={anchorTitle}
+            >
+                <LinkIcon size="16" />
+            </a>
+        </As>
+    );
+}

apify-docs-theme/src/theme/Heading/styles.module.css

@@ -0,0 +1,46 @@
+.anchorWithStickyNavbar {
+  scroll-margin-top: calc(var(--ifm-navbar-height) + 0.5rem);
+}
+
+.anchorWithHideOnScrollNavbar {
+  scroll-margin-top: 0.5rem;
+}
+
+.headingCopyIcon {
+  display: none;
+  transform: translateX(0.25rem);
+  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;
+}
+

apify-docs-theme/src/theme/Heading/useCopyToClipboard.js

@@ -0,0 +1,20 @@
+import { useState } from 'react';
+
+const HIDE_COPIED_AFTER = 2000;
+
+export const useCopyToClipboard = ({ text, transform }) => {
+    const [isCopied, setIsCopied] = useState(false);
+
+    const handleClick = async () => {
+        try {
+            const textToCopy = transform ? transform(text) : text;
+            await navigator.clipboard.writeText(textToCopy);
+            setIsCopied(true);
+            setTimeout(() => setIsCopied(false), HIDE_COPIED_AFTER);
+        } catch (err) {
+            console.error('Failed to copy link:', err);
+        }
+    };
+
+    return [isCopied, handleClick];
+};