[Draft] Add "Copy for LLM" button in docs pages

.gitignore

@@ -5,4 +5,6 @@ package-lock.json
 build
 .idea
 
-scripts/image_analysis/
+scripts/image_analysis/
+
+.claude/settings.local.json

docusaurus.config.js

@@ -45,18 +45,20 @@ const config = {
     locales: ["en"],
   },
 
-  future: {
-    experimental_faster: {
-      lightningCssMinimizer: true,
-      mdxCrossCompilerCache: true,
-      swcJsLoader: true,
-      swcJsMinimizer: true,
-      swcHtmlMinimizer: true,
-      rspackBundler: true,
-      rspackPersistentCache: true,
-      ssgWorkerThreads: false, // redocusaurus doesn't support this yet, so we'll disable it for now
+  customFields: {
+    future: {
+      experimental_faster: {
+        lightningCssMinimizer: true,
+        mdxCrossCompilerCache: true,
+        swcJsLoader: true,
+        swcJsMinimizer: true,
+        swcHtmlMinimizer: true,
+        rspackBundler: true,
+        rspackPersistentCache: true,
+        ssgWorkerThreads: false, // redocusaurus doesn't support this yet, so we'll disable it for now
+      },
+      v4: true,
     },
-    v4: true,
   },
 
   presets: [

src/components/CopyForLLMButton/index.tsx

@@ -0,0 +1,41 @@
+import React, { useState } from 'react';
+import { usePageCopyContent } from '@site/src/utils/copyPageContent';
+import { CatIcon } from '@site/src/theme/CatIcon/CatIcon';
+import styles from './styles.module.css';
+
+export default function CopyForLLMButton() {
+  const { copyToClipboard } = usePageCopyContent();
+  const [copyFeedback, setCopyFeedback] = useState<string>('');
+
+  const handleCopyPage = async () => {
+    const success = await copyToClipboard();
+    if (success) {
+      setCopyFeedback('Copied!');
+      setTimeout(() => setCopyFeedback(''), 2000);
+    } else {
+      setCopyFeedback('Failed to copy');
+      setTimeout(() => setCopyFeedback(''), 2000);
+    }
+  };
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.buttonWrapper}>
+        <button
+          className={styles.copyButton}
+          onClick={handleCopyPage}
+          aria-label="Copy page content for LLM"
+          title="Copy for LLM"
+        >
+          <CatIcon name="copy" size={16} customColor="white" />
+          <span>Copy for LLM</span>
+        </button>
+        {copyFeedback && (
+          <span className={styles.copyFeedback}>
+            {copyFeedback}
+          </span>
+        )}
+      </div>
+    </div>
+  );
+}

src/components/CopyForLLMButton/styles.module.css

@@ -0,0 +1,54 @@
+.container {
+  margin-bottom: 1.5rem;
+}
+
+.buttonWrapper {
+  position: relative;
+  display: inline-block;
+}
+
+.copyButton {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  border: 1px solid var(--ifm-color-emphasis-300);
+  background: var(--ifm-background-color);
+  cursor: pointer;
+  border-radius: 0.375rem;
+  transition: all var(--ifm-transition-fast);
+  font-size: 0.875rem;
+  color: var(--ifm-color-emphasis-700);
+  user-select: none;
+}
+
+.copyButton svg {
+  width: 1rem;
+  height: 1rem;
+  fill: var(--ifm-color-emphasis-600);
+}
+
+.copyButton:hover {
+  background-color: var(--ifm-color-emphasis-100);
+  border-color: var(--ifm-color-emphasis-400);
+  color: var(--ifm-color-emphasis-800);
+}
+
+.copyButton:hover svg {
+  fill: var(--ifm-color-emphasis-800);
+}
+
+.copyFeedback {
+  position: absolute;
+  left: calc(100% + 0.5rem);
+  top: 50%;
+  transform: translateY(-50%);
+  padding: 0.25rem 0.5rem;
+  background-color: var(--ifm-color-emphasis-800);
+  color: var(--ifm-color-emphasis-100);
+  border-radius: 0.25rem;
+  font-size: 0.75rem;
+  white-space: nowrap;
+  pointer-events: none;
+  z-index: 10;
+}

src/theme/DocItem/Content/index.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import Content from '@theme-original/DocItem/Content';
+import type ContentType from '@theme/DocItem/Content';
+import type { WrapperProps } from '@docusaurus/types';
+import CopyForLLMButton from '@site/src/components/CopyForLLMButton';
+
+type Props = WrapperProps<typeof ContentType>;
+
+export default function ContentWrapper(props: Props): JSX.Element {
+  return (
+    <div style={{ position: 'relative' }}>
+      <div className="theme-doc-markdown" style={{ marginTop: '1rem' }}>
+        <CopyForLLMButton />
+      </div>
+      <Content {...props} />
+    </div>
+  );
+}

src/theme/Heading/index.tsx

@@ -24,6 +24,11 @@ export default function Heading({
 
   // H1 headings do not need an id because they don't appear in the TOC.
   if (As === "h1" || !id) {
+    if (As === "h1") {
+      return <As {...props} id={undefined} className={props.className}>
+        {props.children}
+      </As>;
+    }
     return <As {...props} id={undefined} />;
   }
 

src/theme/Heading/styles.module.css

@@ -26,3 +26,86 @@ See https://twitter.com/JoshWComeau/status/1332015868725891076
 :global(*:hover > .hash-link) {
   opacity: 1;
 }
+
+.copyButton {
+  opacity: 0;
+  margin-left: 0.5rem;
+  padding: 0.25rem;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  border-radius: 0.25rem;
+  transition: all var(--ifm-transition-fast);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+  user-select: none;
+}
+
+.copyButton svg {
+  width: 1rem;
+  height: 1rem;
+  fill: var(--ifm-color-emphasis-600);
+}
+
+.copyButton:hover {
+  background-color: var(--ifm-color-emphasis-200);
+}
+
+.copyButton:hover svg {
+  fill: var(--ifm-color-emphasis-800);
+}
+
+:global(.group:hover) .copyButton {
+  opacity: 1;
+}
+
+.copyFeedback {
+  position: absolute;
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  margin-left: 0.5rem;
+  padding: 0.25rem 0.5rem;
+  background-color: var(--ifm-color-emphasis-800);
+  color: var(--ifm-color-emphasis-100);
+  border-radius: 0.25rem;
+  font-size: 0.75rem;
+  white-space: nowrap;
+  pointer-events: none;
+  z-index: 10;
+}
+
+.copyButtonBelow {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-top: 0.75rem;
+  margin-bottom: 1rem;
+  padding: 0.5rem 1rem;
+  border: 1px solid var(--ifm-color-emphasis-300);
+  background: var(--ifm-background-color);
+  cursor: pointer;
+  border-radius: 0.375rem;
+  transition: all var(--ifm-transition-fast);
+  font-size: 0.875rem;
+  color: var(--ifm-color-emphasis-700);
+  user-select: none;
+}
+
+.copyButtonBelow svg {
+  width: 1rem;
+  height: 1rem;
+  fill: var(--ifm-color-emphasis-600);
+}
+
+.copyButtonBelow:hover {
+  background-color: var(--ifm-color-emphasis-100);
+  border-color: var(--ifm-color-emphasis-400);
+  color: var(--ifm-color-emphasis-800);
+}
+
+.copyButtonBelow:hover svg {
+  fill: var(--ifm-color-emphasis-800);
+}