Next, Previous and Edit link (#50)

Author: SRWieZ

app/Http/Controllers/ShowDocumentationController.php

@@ -87,6 +87,25 @@ protected function getPageProperties($version, $page = null): array
             ->setActive(\request()->path())
             ->__toString();
 
+        $pageProperties['editUrl'] = "https://github.com/NativePHP/nativephp.com/tree/main/resources/views/docs/{$version}/{$page}.md";
+
+        // Find the next & previous page in the navigation
+        $pageProperties['nextPage'] = null;
+        $pageProperties['previousPage'] = null;
+
+        foreach ($navigation as $section) {
+            foreach ($section['children'] as $key => $child) {
+                if ($child['path'] === '/'.$pageProperties['pagePath']) {
+                    if (isset($section['children'][$key + 1])) {
+                        $pageProperties['nextPage'] = $section['children'][$key + 1];
+                    }
+                    if (isset($section['children'][$key - 1])) {
+                        $pageProperties['previousPage'] = $section['children'][$key - 1];
+                    }
+                }
+            }
+        }
+
         if (isset($pageProperties['packageName'])) {
             $cardFilename = '/img/docs/'.strtolower(Str::slug($pageProperties['packageName'])).'/img/card.png';
             $cardPath = public_path($cardFilename);

resources/views/components/alert-beta.blade.php

@@ -0,0 +1,23 @@
+<div {{ $attributes->class(['rounded-lg flex items-center p-3 mt-8 space-x-6 border
+                text-orange-800 border-orange-300 bg-orange-50
+                dark:text-orange-100 dark:bg-orange-900/80 dark:border-orange-600']) }}>
+    <x-heroicon-o-shield-exclamation class="size-10 ml-3"/>
+    <div>
+        <p>
+            NativePHP is currently in
+            <a href="/docs/getting-started/status" class="font-bold italic font-mono flex-inline px-1 py-0.5 text-base bg-orange-200 dark:bg-orange-600 rounded">alpha</a>
+            development
+        </p>
+
+        <a href="https://github.com/nativephp/laravel?sponsor=1"
+           onclick="fathom.trackEvent('beta_interest');"
+           class="group mt-4 font-bold inline-flex items-center rounded-md px-3 py-1
+                            bg-orange-200 border border-orange-400 hover:bg-orange-300
+                            dark:bg-orange-600 dark:border-orange-400 dark:hover:bg-orange-500 dark:text-orange-100
+                            " target="_blank">
+            Let's get to beta!
+            <x-heroicon-o-rocket-launch class="ml-2 size-5 group-hover:hidden"/>
+            <x-heroicon-s-rocket-launch class="hidden ml-2 size-5 group-hover:block"/>
+        </a>
+    </div>
+</div>

resources/views/components/flex-list-of-links.blade.php

@@ -0,0 +1,12 @@
+@props([
+    'align' => 'left',
+])
+<div {{ $attributes->class([
+    'flex sm:flex-row items-center gap-x-6 gap-y-4',
+    'justify-start flex-col-reverse' => $align === 'left',
+    'justify-center flex-col' => $align === 'center',
+    'justify-between flex-col-reverse' => $align === 'between',
+    'justify-end flex-col-reverse' => $align === 'right'
+    ]) }}>
+    {{ $slot }}
+</div>

resources/views/components/link-button.blade.php

@@ -0,0 +1,10 @@
+<a {{ $attributes->class(['
+border border-gray-300 dark:border-gray-700 rounded
+px-4 py-2
+hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-700
+dark:hover:text-gray-300
+flex items-center gap-2
+text-sm
+']) }}>
+    {{ $slot }}
+</a>

resources/views/components/separator.blade.php

@@ -0,0 +1 @@
+<hr {{ $attributes->class(['dark:border-gray-500']) }}>

resources/views/docs/index.blade.php

@@ -10,29 +10,8 @@
                 <div class="text-5xl font-bold tracking-tight mb-4 text-[#00aaa6]">
                     {{$title}}
                 </div>
-                <div class="rounded-lg flex items-center p-3 mt-8 space-x-6 border
-                text-orange-800 border-orange-300 bg-orange-50
-                dark:text-orange-100 dark:bg-orange-900/80 dark:border-orange-600">
-                    <x-heroicon-o-shield-exclamation class="size-10 ml-3"/>
-                    <div>
-                        <p>
-                            NativePHP is currently in
-                            <a href="/docs/getting-started/status" class="font-bold italic font-mono flex-inline px-1 py-0.5 text-base bg-orange-200 dark:bg-orange-600 rounded">alpha</a>
-                            development
-                        </p>
 
-                        <a href="https://github.com/nativephp/laravel?sponsor=1"
-                           onclick="fathom.trackEvent('beta_interest');"
-                           class="group mt-4 font-bold inline-flex items-center rounded-md px-3 py-1
-                            bg-orange-200 border border-orange-400 hover:bg-orange-300
-                            dark:bg-orange-600 dark:border-orange-400 dark:hover:bg-orange-500 dark:text-orange-100
-                            " target="_blank">
-                            Let's get to beta!
-                            <x-heroicon-o-rocket-launch class="ml-2 size-5 group-hover:hidden"/>
-                            <x-heroicon-s-rocket-launch class="hidden ml-2 size-5 group-hover:block"/>
-                        </a>
-                    </div>
-                </div>
+                <x-alert-beta/>
 
                 @if (count($tableOfContents) > 0)
                     <ul class="mt-8 space-y-2 block xl:hidden">
@@ -47,6 +26,33 @@ class="group mt-4 font-bold inline-flex items-center rounded-md px-3 py-1
                 <div class="mt-8 prose dark:prose-invert">
                     {!! $content !!}
                 </div>
+
+                <x-separator class="mt-8 -mr-4 -ml-4"/>
+
+                @php $linkAlign = $previousPage === null ? 'right' : 'between'; @endphp
+                <x-flex-list-of-links align="{{$linkAlign}}" class="mt-8">
+                    @if($previousPage !== null)
+                        <x-link-button href="{{ $previousPage['path'] }}">
+                            <span class="md:hidden">Previous page: </span>
+                            <span aria-hidden="true" class="hidden sm:inline">&larr;</span>
+                            <span>{{ $previousPage['title'] }}</span>
+                        </x-link-button>
+                    @endif
+                    @if($nextPage !== null)
+                        <x-link-button href="{{ $nextPage['path'] }}">
+                            <span class="md:hidden">Next page: </span>
+                            <span>{{ $nextPage['title'] }}</span>
+                            <span aria-hidden="true" class="hidden sm:inline"> &rarr;</span>
+                        </x-link-button>
+                    @endif
+                </x-flex-list-of-links>
+
+                <x-separator class="mt-8 -mr-4 -ml-4"/>
+                <div class="mt-8 text-center">
+                    <a href="{{ $editUrl }}" target="_blank" rel="noopener noreferrer" class="text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300">
+                        Edit this page on GitHub
+                    </a>
+                </div>
             </div>
             <div class="hidden max-h-[calc(100%-134px)] overflow-y-auto
             xl:fixed xl:right-[max(0px,calc(50%-48rem))] xl:block xl:py-8 xl:px-4 xl:pr-3 xl:w-full xl:max-w-sm">

resources/views/docs/navigation.blade.php

@@ -17,6 +17,6 @@
      x-transition:leave="transition ease-in duration-150"
      x-transition:leave-start="translate-y-0 opacity-100"
      x-transition:leave-end="translate-y-1 opacity-0"
-     class="fixed top-12 left-0 z-40 w-full max-h-screen pt-10 pb-36 overflow-y-auto bg-white dark:bg-gray-700 mt-2 px-4 pt-4 border-b border-[#00aaa6] border-opacity-50 dark:border-opacity-90">
+     class="fixed top-12 left-0 z-40 w-full max-h-screen pt-10 pb-36 overflow-y-auto bg-white dark:bg-gray-700 mt-2 px-4 border-b border-[#00aaa6] border-opacity-50 dark:border-opacity-90">
     {!! $navigation !!}
 </nav>