Add copy page as markdown feature

Co-authored-by: xuyushun441-sys <255036401+xuyushun441-sys@users.noreply.github.com>

Author: Copilot

apps/docs/app/[lang]/docs/[[...slug]]/page.tsx

@@ -5,6 +5,9 @@ import { notFound } from 'next/navigation';
 import defaultMdxComponents from 'fumadocs-ui/mdx';
 import { Step, Steps } from 'fumadocs-ui/components/steps';
 import { File, Folder, Files } from 'fumadocs-ui/components/files';
+import { CopyPageMarkdown } from '@/components/copy-page-markdown';
+import fs from 'fs';
+import path from 'path';
 
 const components = {
   ...defaultMdxComponents,
@@ -26,15 +29,45 @@ export default async function Page(props: {
   const data = page.data as any;
   const Content = data.body;
 
+  // Read the raw MDX content
+  let rawMarkdown = '';
+  try {
+    const slugPath = params.slug?.join('/') || 'index';
+    const possiblePaths = [
+      path.join(process.cwd(), '../../content/docs', `${slugPath}.mdx`),
+      path.join(process.cwd(), '../../content/docs', `${slugPath}.${params.lang}.mdx`),
+      path.join(process.cwd(), '../../content/docs', slugPath, 'index.mdx'),
+      path.join(process.cwd(), '../../content/docs', slugPath, `index.${params.lang}.mdx`),
+    ];
+    
+    for (const filePath of possiblePaths) {
+      if (fs.existsSync(filePath)) {
+        rawMarkdown = fs.readFileSync(filePath, 'utf-8');
+        break;
+      }
+    }
+  } catch (error) {
+    console.error('Failed to read raw markdown:', error);
+  }
+
   return (
     <DocsPage toc={data.toc} full={data.full}>
       <DocsBody>
-        <h1 className="mb-2 text-3xl font-bold text-foreground">{page.data.title}</h1>
-        {page.data.description && (
-          <p className="mb-8 text-lg text-muted-foreground">
-            {page.data.description}
-          </p>
-        )}
+        <div className="flex items-start justify-between gap-4 mb-4">
+          <div className="flex-1">
+            <h1 className="mb-2 text-3xl font-bold text-foreground">{page.data.title}</h1>
+            {page.data.description && (
+              <p className="mb-8 text-lg text-muted-foreground">
+                {page.data.description}
+              </p>
+            )}
+          </div>
+          {rawMarkdown && (
+            <div className="flex-shrink-0">
+              <CopyPageMarkdown content={rawMarkdown} />
+            </div>
+          )}
+        </div>
         <Content components={components} />
       </DocsBody>
     </DocsPage>

apps/docs/components/copy-page-markdown.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import { useState } from 'react';
+import { Copy, Check } from 'lucide-react';
+
+interface CopyPageMarkdownProps {
+  content: string;
+}
+
+export function CopyPageMarkdown({ content }: CopyPageMarkdownProps) {
+  const [copied, setCopied] = useState(false);
+
+  const copyToClipboard = async () => {
+    try {
+      await navigator.clipboard.writeText(content);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (error) {
+      console.error('Failed to copy:', error);
+    }
+  };
+
+  return (
+    <button
+      onClick={copyToClipboard}
+      className="inline-flex items-center gap-2 rounded-md border border-input bg-background px-3 py-2 text-sm font-medium ring-offset-background transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+      title="Copy entire page as Markdown"
+    >
+      {copied ? (
+        <>
+          <Check className="h-4 w-4" />
+          <span>Copied!</span>
+        </>
+      ) : (
+        <>
+          <Copy className="h-4 w-4" />
+          <span>Copy as Markdown</span>
+        </>
+      )}
+    </button>
+  );
+}

content/docs/copy-test.mdx

@@ -0,0 +1,28 @@
+---
+title: Copy Feature Test
+description: Testing the copy page as markdown feature
+---
+
+## Introduction
+
+This is a test page for the copy functionality.
+
+## Example Code
+
+```typescript
+const hello = 'world';
+console.log(hello);
+```
+
+## List Example
+
+- Item 1
+- Item 2
+- Item 3
+
+## Table Example
+
+| Column 1 | Column 2 |
+| --- | --- |
+| Data 1 | Data 2 |
+| Data 3 | Data 4 |