docs: added a CopyMarkdownButton component to copy page contents (#469)

Co-authored-by: Tanner Linsley <[email protected]>

Author: jpsullivan

src/components/CopyMarkdownButton.tsx

@@ -0,0 +1,91 @@
+'use client'
+import { useState, useTransition } from 'react'
+import { FaCheck, FaCopy } from 'react-icons/fa'
+
+import { type MouseEventHandler, useEffect, useRef } from 'react'
+
+export function useCopyButton(
+  onCopy: () => void | Promise<void>
+): [checked: boolean, onClick: MouseEventHandler] {
+  const [checked, setChecked] = useState(false)
+  const timeoutRef = useRef<number | null>(null)
+
+  const onClick: MouseEventHandler = async () => {
+    if (timeoutRef.current) window.clearTimeout(timeoutRef.current)
+    const res = Promise.resolve(onCopy())
+
+    void res.then(() => {
+      setChecked(true)
+      timeoutRef.current = window.setTimeout(() => {
+        setChecked(false)
+      }, 1500)
+    })
+  }
+
+  // avoid updates after being unmounted
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) window.clearTimeout(timeoutRef.current)
+    }
+  }, [])
+
+  return [checked, onClick]
+}
+
+const cache = new Map<string, string>()
+
+interface CopyMarkdownButtonProps {
+  repo: string
+  branch: string
+  filePath: string
+}
+
+export function CopyMarkdownButton({
+  repo,
+  branch,
+  filePath,
+}: CopyMarkdownButtonProps) {
+  const [isLoading, startTransition] = useTransition()
+  const [checked, onClick] = useCopyButton(async () => {
+    startTransition(() => {
+      const url = `https://raw.githubusercontent.com/${repo}/${branch}/${filePath}`
+      const cached = cache.get(url)
+
+      if (cached) {
+        navigator.clipboard.writeText(cached)
+      } else {
+        fetch(url)
+          .then((response) => response.text())
+          .then((content) => {
+            cache.set(url, content)
+            return navigator.clipboard.writeText(content)
+          })
+          .catch(() => {
+            // fallback: try to copy current page content if available
+            const pageContent =
+              document.querySelector('.styled-markdown-content')?.textContent ||
+              ''
+            return navigator.clipboard.writeText(pageContent)
+          })
+      }
+    })
+  })
+
+  return (
+    <button
+      disabled={isLoading}
+      className="py-1 px-2 text-sm bg-white/70 text-black dark:bg-gray-500/40 dark:text-white shadow-lg shadow-black/20 flex items-center justify-center backdrop-blur-sm z-20 rounded-lg overflow-hidden"
+      onClick={onClick}
+      title="Copy markdown source"
+    >
+      <div className="flex gap-2 items-center">
+        {checked ? (
+          <FaCheck className="w-3 h-3" />
+        ) : (
+          <FaCopy className="w-3 h-3" />
+        )}
+        Copy Markdown
+      </div>
+    </button>
+  )
+}

src/components/Doc.tsx

@@ -1,20 +1,21 @@
-import * as React from 'react'
-import { FaEdit } from 'react-icons/fa'
 import { marked } from 'marked'
 import markedAlert from 'marked-alert'
-import { gfmHeadingId, getHeadingList } from 'marked-gfm-heading-id'
-import { DocTitle } from '~/components/DocTitle'
-import { Markdown } from '~/components/Markdown'
-import { Toc } from './Toc'
-import { twMerge } from 'tailwind-merge'
-import { TocMobile } from './TocMobile'
-import { GamLeader } from './Gam'
-import { AdGate } from '~/contexts/AdsContext'
-import { useWidthToggle } from '~/components/DocsLayout'
+import { getHeadingList, gfmHeadingId } from 'marked-gfm-heading-id'
+import * as React from 'react'
 import {
   BsArrowsCollapseVertical,
   BsArrowsExpandVertical,
 } from 'react-icons/bs'
+import { FaEdit } from 'react-icons/fa'
+import { twMerge } from 'tailwind-merge'
+import { useWidthToggle } from '~/components/DocsLayout'
+import { DocTitle } from '~/components/DocTitle'
+import { Markdown } from '~/components/Markdown'
+import { AdGate } from '~/contexts/AdsContext'
+import { CopyMarkdownButton } from './CopyMarkdownButton'
+import { GamLeader } from './Gam'
+import { Toc } from './Toc'
+import { TocMobile } from './TocMobile'
 
 type DocProps = {
   title: string
@@ -130,19 +131,27 @@ export function Doc({
           {title ? (
             <div className="flex items-center justify-between gap-4">
               <DocTitle>{title}</DocTitle>
-              {setIsFullWidth && (
-                <button
-                  onClick={() => setIsFullWidth(!isFullWidth)}
-                  className="p-2 mr-4 text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors shrink-0 hidden [@media(min-width:1800px)]:inline-flex"
-                  title={isFullWidth ? 'Constrain width' : 'Expand width'}
-                >
-                  {isFullWidth ? (
-                    <BsArrowsCollapseVertical className="w-4 h-4" />
-                  ) : (
-                    <BsArrowsExpandVertical className="w-4 h-4" />
-                  )}
-                </button>
-              )}
+              <div className="flex items-center gap-4">
+                <CopyMarkdownButton
+                  repo={repo}
+                  branch={branch}
+                  filePath={filePath}
+                />
+
+                {setIsFullWidth && (
+                  <button
+                    onClick={() => setIsFullWidth(!isFullWidth)}
+                    className="p-2 mr-4 text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors shrink-0 hidden [@media(min-width:1800px)]:inline-flex"
+                    title={isFullWidth ? 'Constrain width' : 'Expand width'}
+                  >
+                    {isFullWidth ? (
+                      <BsArrowsCollapseVertical className="w-4 h-4" />
+                    ) : (
+                      <BsArrowsExpandVertical className="w-4 h-4" />
+                    )}
+                  </button>
+                )}
+              </div>
             </div>
           ) : null}
           <div className="h-4" />