[Docs Site] Add Copy Page dropdown for Markdown

Author: KianNH

src/components/CopyPageButton.tsx

@@ -0,0 +1,102 @@
+import {
+  useFloating,
+  useInteractions,
+  useClick,
+  useDismiss,
+  shift,
+  offset,
+  autoUpdate,
+  FloatingPortal,
+} from "@floating-ui/react";
+import { useState } from "react";
+import { PiMarkdownLogo, PiClipboardTextLight, PiArrowSquareOutLight } from "react-icons/pi";
+
+export default function CopyPageButton() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const { refs, floatingStyles, context } = useFloating({
+    open: isOpen,
+    onOpenChange: setIsOpen,
+    middleware: [shift(), offset(5)],
+    whileElementsMounted: autoUpdate,
+  });
+
+  const click = useClick(context);
+  const dismiss = useDismiss(context);
+
+  const { getReferenceProps, getFloatingProps } = useInteractions([
+    click,
+    dismiss,
+  ]);
+
+  const handleViewMarkdown = () => {
+    const markdownUrl = new URL("index.md", window.location.href).toString();
+    window.open(markdownUrl, "_blank");
+  };
+
+  const handleCopyMarkdown = async () => {
+    const markdownUrl = new URL("index.md", window.location.href).toString();
+    try {
+      const response = await fetch(markdownUrl);
+      const markdown = await response.text();
+      await navigator.clipboard.writeText(markdown);
+    } catch (error) {
+      console.error("Failed to copy Markdown:", error);
+    }
+  };
+
+  const options = [
+    {
+      label: "Copy Page as Markdown",
+      description: "Copy the raw Markdown content to clipboard",
+      icon: PiClipboardTextLight,
+      onClick: handleCopyMarkdown,
+    },
+    {
+      label: "View Page as Markdown",
+      description: "Open the Markdown file in a new tab",
+      icon: PiArrowSquareOutLight,
+      onClick: handleViewMarkdown,
+    },
+  ];
+
+  return (
+    <>
+      <button
+        ref={refs.setReference}
+        {...getReferenceProps()}
+        className="inline-flex bg-transparent items-center justify-center text-sm h-8 gap-2 rounded border border-[--sl-color-hairline] px-3 text-black"
+      >
+        Copy Page
+        <PiMarkdownLogo />
+      </button>
+      {isOpen && (
+        <FloatingPortal>
+          <ul
+            ref={refs.setFloating}
+            style={floatingStyles}
+            {...getFloatingProps()}
+            className="list-none rounded border border-[--sl-color-hairline] bg-[--sl-color-bg] pl-0 shadow-md min-w-[240px]"
+          >
+            {options.map(({ label, description, icon: Icon, onClick }) => (
+              <li key={label}>
+                <button
+                  onClick={onClick}
+                  className="block w-full px-3 bg-transparent py-2 text-left text-black no-underline hover:bg-[--sl-color-bg-nav]"
+                >
+                  <div className="flex items-center gap-2 text-sm">
+                    <Icon className="h-4 w-4" />
+                    {label}
+                  </div>
+                  <div className="text-xs text-[--sl-color-gray-3] mt-0.5 ml-6">
+                    {description}
+                  </div>
+                </button>
+              </li>
+            ))}
+          </ul>
+        </FloatingPortal>
+      )}
+    </>
+  );
+}

src/components/index.ts

@@ -11,6 +11,7 @@ export { default as AvailableNotifications } from "./AvailableNotifications.astr
 export { default as CompatibilityFlag } from "./CompatibilityFlag.astro";
 export { default as CompatibilityFlags } from "./CompatibilityFlags.astro";
 export { default as ComponentsUsage } from "./ComponentsUsage.astro";
+export { default as CopyPageButton } from "./CopyPageButton";
 export { default as CURL } from "./CURL.astro";
 export { default as Description } from "./Description.astro";
 export { default as Details } from "./Details.astro";

src/components/overrides/PageTitle.astro

@@ -9,6 +9,7 @@ import { Aside } from "@astrojs/starlight/components";
 import Description from "~/components/Description.astro";
 import SpotlightAuthorDetails from "~/components/SpotlightAuthorDetails.astro";
 import LastReviewed from "~/components/LastReviewed.astro";
+import CopyPageButton from "~/components/CopyPageButton.tsx";
 
 import { getEntry } from "astro:content";
 
@@ -113,6 +114,10 @@ const hideBreadcrumbs = Astro.locals.starlightRoute.hideBreadcrumbs;
 
 {component && <Aside>To see a list of pages this component is used on, please visit the <a href={`/style-guide/components/usage/#${component.toLowerCase()}`}>usage page</a>.</Aside>}
 
+<div class="flex justify-end items-center">
+	<CopyPageButton client:idle />
+</div>
+
 <style>
 	:root {
 		--color-link-breadcrumbs: var(--sl-color-text-accent);