Feature: Markdown Viewer and Copy-to-Clipboard for Docs (#202)

* Add route to serve raw markdown documentation

Introduces a new controller method and route to serve raw markdown files for documentation. This allows direct access to the markdown source for a given platform, version, and page.

* Add 'Copy as Markdown' button to docs pages

Introduces a new Alpine.js component and Blade view for copying the current documentation page as Markdown. The button is added to the table of contents section and includes visual feedback for successful copying. Also adds a copy icon component and integrates the new Alpine data into the app.

* Fix regex to match markdown URLs correctly

Author: RanaMoizHaider

app/Http/Controllers/ShowDocumentationController.php

@@ -52,6 +52,24 @@ public function __invoke(Request $request, string $platform, string $version, ?s
         return view('docs.index')->with($pageProperties);
     }
 
+    public function serveRawMarkdown(Request $request, string $platform, string $version, string $page)
+    {
+        abort_unless(is_dir(resource_path('views/docs/'.$platform.'/'.$version)), 404);
+
+        $filePath = resource_path("views/docs/{$platform}/{$version}/{$page}.md");
+
+        if (! file_exists($filePath)) {
+            abort(404);
+        }
+
+        $content = file_get_contents($filePath);
+
+        return response($content, 200, [
+            'Content-Type' => 'text/plain; charset=utf-8',
+            'Content-Disposition' => 'inline; filename="'.basename($filePath).'"',
+        ]);
+    }
+
     protected function getPageProperties($platform, $version, $page = null): array
     {
         $markdownFileName = $platform.'.'.$version.'.'.($page ?? 'index');

resources/js/alpine/copyMarkdown.js

@@ -0,0 +1,34 @@
+export default () => ({
+    showMessage: false,
+
+    async copyMarkdownToClipboard() {
+        try {
+            // Get the current page URL and convert it to .md URL
+            const currentUrl = window.location.href
+            const mdUrl = currentUrl.replace(
+                /\/docs\/([^\/]+\/[^\/]+\/.*)$/,
+                '/docs/$1.md',
+            )
+
+            // Fetch the raw markdown content
+            const response = await fetch(mdUrl)
+            if (!response.ok) {
+                throw new Error('Failed to fetch markdown content')
+            }
+
+            const markdownContent = await response.text()
+
+            // Copy to clipboard
+            await navigator.clipboard.writeText(markdownContent)
+
+            // Show success message
+            this.showMessage = true
+            setTimeout(() => {
+                this.showMessage = false
+            }, 2000)
+        } catch (error) {
+            console.error('Failed to copy markdown:', error)
+            // Could show an error message here if needed
+        }
+    },
+})

resources/js/app.js

@@ -7,6 +7,7 @@ import {
     Alpine,
 } from '../../vendor/livewire/livewire/dist/livewire.esm'
 import codeBlock from './alpine/codeBlock.js'
+import copyMarkdown from './alpine/copyMarkdown.js'
 import docsearch from '@docsearch/js'
 import Atropos from 'atropos'
 import '@docsearch/css'
@@ -60,6 +61,7 @@ window.gsap = gsap
 
 // Alpine
 Alpine.data('codeBlock', codeBlock)
+Alpine.data('copyMarkdown', copyMarkdown)
 Alpine.magic('refAll', (el) => {
     return (refName) => {
         return Array.from(el.querySelectorAll(`[x-ref="${refName}"]`))

resources/views/components/docs/copy-markdown-button.blade.php

@@ -0,0 +1,16 @@
+{{-- Copy as Markdown Button --}}
+<div {{ $attributes->merge(['class' => 'mb-4']) }} x-data="copyMarkdown()" x-init="$watch('$el', () => {})">
+    <button
+        @click="copyMarkdownToClipboard()"
+        class="flex items-center gap-1.5 text-sm opacity-60 hover:opacity-100 transition-opacity duration-200"
+        title="Copy page as Markdown"
+    >
+        {{-- Icon --}}
+        <x-icons.copy x-show="!showMessage" class="size-[18px]" />
+        <x-icons.checkmark x-show="showMessage" x-cloak class="size-[18px]" />
+
+        {{-- Label --}}
+        <div x-show="!showMessage">Copy as Markdown</div>
+        <div x-show="showMessage" x-cloak>Copied!</div>
+    </button>
+</div>

resources/views/components/docs/toc-and-sponsors.blade.php

@@ -1,3 +1,6 @@
+{{-- Copy as Markdown Button --}}
+<x-docs.copy-markdown-button />
+
 {{-- On this page --}}
 <h3 class="flex items-center gap-1.5 text-sm opacity-60">
     {{-- Icon --}}

resources/views/components/icons/copy.blade.php

@@ -0,0 +1,3 @@
+<svg {{ $attributes->merge(['fill' => 'none', 'stroke' => 'currentColor', 'viewBox' => '0 0 24 24']) }}>
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
+</svg>

resources/views/docs/index.blade.php

@@ -14,8 +14,11 @@
     <x-docs.separator class="mt-4" />
 
     {{-- Table of contents --}}
-    <div class="xl:hidden">
-        <h3 class="inline-flex items-center gap-1.5 pt-5 text-sm opacity-50">
+    <div class="xl:hidden pt-5">
+        {{-- Copy as Markdown Button --}}
+        <x-docs.copy-markdown-button class="mt-4" />
+    
+        <h3 class="inline-flex items-center gap-1.5 text-sm opacity-50">
             {{-- Icon --}}
             <x-icons.stacked-lines class="size-[18px]" />
             {{-- Label --}}

routes/web.php

@@ -38,6 +38,12 @@
 Route::get('blog', [ShowBlogController::class, 'index'])->name('blog');
 Route::get('blog/{article}', [ShowBlogController::class, 'show'])->name('article');
 
+Route::get('/docs/{platform}/{version}/{page}.md', [ShowDocumentationController::class, 'serveRawMarkdown'])
+    ->where('page', '(.*)')
+    ->where('platform', '[a-z]+')
+    ->where('version', '[0-9]+')
+    ->name('docs.raw');
+
 Route::get('/docs/{platform}/{version}/{page?}', ShowDocumentationController::class)
     ->where('page', '(.*)')
     ->where('platform', '[a-z]+')