vercel · anthonyshew · Apr 21, 2025 · Apr 16, 2025 · Apr 21, 2025 · Apr 21, 2025
@@ -17,7 +17,7 @@ export default async function SlugLayout(props: {
   }
 
   return (
-    <DocsPage>
+    <DocsPage breadcrumb={{ enabled: false }}>
       <DocsBody>{children}</DocsBody>
     </DocsPage>
   );

@@ -1,9 +1,11 @@
 import { notFound } from "next/navigation";
+import { readFileSync } from "fs";
 import type { Metadata } from "next/types";
 import { repoDocsPages } from "@/app/source";
 import { createMetadata } from "@/lib/create-metadata";
 import { mdxComponents } from "@/mdx-components";
 import { SystemEnvironmentVariablesHashHighlighter } from "./system-environment-variables-hash-highlighter";
+import { CopyToMarkdown } from "@/components/copy-to-markdown";
 
 export async function generateMetadata(props: {
   params: Promise<{ slug?: string[] }>;
@@ -36,14 +38,25 @@ export default async function Page(props: {
     notFound();
   }
 
+  const rawMarkdown = readFileSync(page.data._file.absolutePath)
+    .toString()
+    // Removes frontmatter
+    .replace(/^---\n(.*?\n)---\n/s, "")
+    // Removes import statements for components
+    .replace(/^import\s+{[^}]+}\s+from\s+['"]#\/[^'"]+['"];(\r?\n|$)/gm, "");
+
   const Mdx = page.data.body;
 
   return (
     <>
       <SystemEnvironmentVariablesHashHighlighter />
-      <h1 className="scroll-m-7 text-4xl font-semibold tracking-normal">
-        {page.data.title}
-      </h1>
+      <div className="flex justify-between gap-4">
+        <h1 className="scroll-m-7 text-4xl font-semibold tracking-normal">
+          {page.data.title}
+        </h1>
+
+        <CopyToMarkdown markdownContent={rawMarkdown} />
+      </div>
       <Mdx components={mdxComponents} />
     </>
   );

@@ -0,0 +1,40 @@
+"use client";
+
+import { useState } from "react";
+import { Copy, Check } from "lucide-react";
+import { Button } from "./button";
+import { cn } from "./cn";
+
+export const CopyToMarkdown = ({
+  markdownContent,
+}: {
+  markdownContent: string;
+}) => {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(markdownContent);
+    setCopied(true);
+
+    // Reset back to copy icon after 2 seconds
+    setTimeout(() => {
+      setCopied(false);
+    }, 2000);
+  };
+
+  return (
+    <Button
+      variant="outline"
+      size="sm"
+      className={"text-xs hidden sm:flex"}
+      onClick={handleCopy}
+    >
+      {copied ? (
+        <Check className="w-4 h-4 mr-1" />
+      ) : (
+        <Copy className="w-4 h-4 mr-1" />
+      )}
+      Copy as Markdown
+    </Button>
+  );
+};
@@ -15,7 +15,7 @@
       "#/*": ["./*"]
     },
     "allowJs": true,
-    "target": "ES2017",
+    "target": "ESNext",
     "lib": ["dom", "dom.iterable", "esnext"],
     "noEmit": true,
     "incremental": true