ToC + New layout

NativePHP · simonhamp · Sep 15, 2024 · Sep 14, 2024 · Sep 14, 2024 · Sep 14, 2024
commit 86db5d5db8d6789f5939f85a9778feac0b5ac1e7
diff --git a/resources/views/components/banner.blade.php b/resources/views/components/banner.blade.php
@@ -1,7 +1,6 @@
-<div class="lg:sticky top-0 relative text-white bg-gray-50 border-b border-gray-100 z-50 dark:bg-gray-800">
-    <div
-        class="flex items-center justify-between gap-6 px-6 py-3 mx-auto max-w-7xl sm:py-4"
-    >
+<div class="lg:sticky top-0 text-white bg-gray-50 border-b border-gray-100 z-50 dark:bg-gray-800">
+    <x-alert />
+    <div class="flex items-center justify-between gap-6 px-6 py-3 mx-auto max-w-screen-xl sm:py-4">
         <a
             href="/"
             class="inline-flex items-center gap-3 transition rounded hover:text-white/80 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80 focus-visible:ring-offset-2 focus-visible:ring-offset-red-600"

diff --git a/resources/views/components/layout.blade.php b/resources/views/components/layout.blade.php
@@ -24,7 +24,7 @@
     <!-- / Fathom -->
 </head>
 <body class="min-h-screen font-sans antialiased bg-white dark:bg-gray-900 dark:text-white">
-<x-alert />
+
 <x-banner />
 {{ $slot }}
 <script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>

diff --git a/resources/views/docs/index.blade.php b/resources/views/docs/index.blade.php
@@ -1,50 +1,66 @@
 <x-layout>
 
-    <main class="relative px-4 lg:pt-16 mx-auto max-w-7xl min-h-screen flex flex-col">
-        <div class="lg:flex gap-8 flex-1 mb-64">
+    <main class="overflow-hidden lg:flex lg:flex-1 lg:flex-col">
+        <div class="max-w-screen-xl w-full mx-auto px-6 flex flex-wrap justify-between gap-8">
             @include('docs.navigation')
 
-            <div class="lg:pt-4">
-                <div class="max-w-3xl mx-auto xl:max-w-none xl:ml-0 xl:mr-[15.5rem] xl:pr-16">
-
-                    <div class="flex px-6 py-4 mb-8 space-x-4 text-lg text-orange-800 border-2 border-orange-500 bg-orange-50 dark:text-white dark:bg-orange-800">
-                        <x-heroicon-o-shield-exclamation class="size-10" />
-                        <span>
-                            NativePHP is currently
-                            <a href="/docs/getting-started/status" class="font-bold italic font-mono flex-inline px-2 text-base bg-orange-200 rounded">alpha</a>.
-                            <br><br>
-                            <a href="https://github.com/nativephp/laravel?sponsor=1"
-                               onclick="fathom.trackEvent('beta_interest');"
-                               class="font-bold inline-flex items-center bg-orange-200 rounded-md px-3 py-1 border border-orange-400 hover:bg-orange-300 group" 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>
-                        </span>
-                    </div>
+            <div class="overflow-hidden lg:ml-[240px] max-w-prose w-full p-8">
 
-                    <div class="text-5xl font-bold tracking-tight mb-4 text-[#00aaa6]">
-                        {{$title}}
-                    </div>
+                <div class="text-5xl font-bold tracking-tight mb-4 text-[#00aaa6]">
+                    {{$title}}
+                </div>
 
-                    @if (count($tableOfContents) > 0)
-                        <ul class="mt-8 space-y-2">
-                            @foreach($tableOfContents as $item)
-                                <li class="@if($item['level'] == 2) before:content-['#']  font-medium text-gray-800 dark:text-gray-200 @else before:content-['##'] @endif before:text-[#00aaa6] @if($item['level'] == 3) ml-4 @endif">
-                                    <a href="#{{ $item['anchor'] }}">{{ $item['title'] }}</a>
-                                </li>
-                            @endforeach
-                        </ul>
-                    @endif
-
-                    <div class="mt-12 prose dark:prose-invert">
-                        {!! $content !!}
+                <div class="rounded-lg flex p-3 mt-8 space-x-4 text-orange-800 border border-orange-300 bg-orange-50 dark:text-white dark:bg-orange-800">
+                    <x-heroicon-o-shield-exclamation class="size-10"/>
+                    <div>
+                        <p>
+                            NativePHP is currently in
+                            <a 
8000
href="/docs/getting-started/status" class="font-bold italic font-mono flex-inline px-1 py-0.5 text-base bg-orange-200 rounded">alpha</a>
+                            development
+                        </p>
+
+                        <a href="https://github.com/nativephp/laravel?sponsor=1"
+                           onclick="fathom.trackEvent('beta_interest');"
+                           class="mt-4 font-bold inline-flex items-center bg-orange-200 rounded-md px-3 py-1 border border-orange-400 hover:bg-orange-300 group" 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>
+
+                @if (count($tableOfContents) > 0)
+                    <ul class="mt-8 space-y-2 block xl:hidden">
+                        @foreach($tableOfContents as $item)
+                            <li class="@if($item['level'] == 2) before:content-['#']  font-medium text-gray-800 dark:text-gray-200 @else before:content-['##'] @endif before:text-[#00aaa6] @if($item['level'] == 3) ml-4 @endif">
+                                <a href="#{{ $item['anchor'] }}">{{ $item['title'] }}</a>
+                            </li>
+                        @endforeach
+                    </ul>
+                @endif
+
+                <div class="mt-8 prose dark:prose-invert">
+                    {!! $content !!}
+                </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">
+                <div class="uppercase font-bold tracking-tight mb-4 text-gray-500">
+                    On this page
+                </div>
+                @if (count($tableOfContents) > 0)
+                    <ul class="mt-4 space-y-2 text-sm">
+                        @foreach($tableOfContents as $item)
+                            <li class="@if($item['level'] == 2) font-medium text-gray-800 dark:text-gray-200 @endif  @if($item['level'] == 3) ml-4 @endif">
+                                <a href="#{{ $item['anchor'] }}">{{ $item['title'] }}</a>
+                            </li>
+                        @endforeach
+                    </ul>
+                @endif
             </div>
         </div>
 
-        <x-footer />
+        <x-footer/>
     </main>
 
 

diff --git a/resources/views/docs/navigation.blade.php b/resources/views/docs/navigation.blade.php
@@ -1,28 +1,30 @@
-<div class="hidden lg:block relative z-20 w-[18rem] inset-0 left-[max(0px,calc(50%-45rem))] right-auto ">
-    <div class="sticky max-h-screen overflow-y-scroll top-20 w-full border-r border-[#00aaa6] border-opacity-10 dark:border-opacity-90 pt-6 pb-24 pl-4">
-        <nav class="flex flex-col flex-1">
-            {!! $navigation !!}
-        </nav>
-    </div>
-</div>
-
-<div class="my-8 lg:hidden" x-data="{ showDocsNavigation: false }">
-    <div class="flex justify-end">
-        <button type="button" class="p-4" @click="showDocsNavigation = !showDocsNavigation">
-            <div x-show="!showDocsNavigation">
-                <x-icons.menu class="w-6 h-6 text-teal-600 dark:text-red-300" />
-            </div>
-            <div x-show="showDocsNavigation">
-                <x-icons.close class="w-6 h-6 text-teal-600" />
-            </div>
-        </button>
-    </div>
-
-    <nav x-show="showDocsNavigation" x-transition:enter="transition ease-out duration-200"
-        x-transition:enter-start="translate-y-1 opacity-0" x-transition:enter-end="translate-y-0 opacity-100"
-        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="mt-2 px-4 pt-4 border-b border-[#00aaa6] border-opacity-50 dark:border-opacity-90">
+<div class="
+fixed -mx-3 overflow-y-auto max-h-[calc(100%-134px)] hidden lg:block py-8 lg:max-w-[240px] lg:w-full
+ border-r border-[#00aaa6] border-opacity-10 dark:border-opacity-90
+  pl-4
+ ">
+    <nav class="flex flex-col flex-1">
         {!! $navigation !!}
     </nav>
 </div>
+
+{{--<div class="my-8 lg:hidden" x-data="{ showDocsNavigation: false }">--}}
+{{--    <div class="flex justify-end">--}}
+{{--        <button type="button" class="p-4" @click="showDocsNavigation = !showDocsNavigation">--}}
+{{--            <div x-show="!showDocsNavigation">--}}
+{{--                <x-icons.menu class="w-6 h-6 text-teal-600 dark:text-red-300"/>--}}
+{{--            </div>--}}
+{{--            <div x-show="showDocsNavigation">--}}
+{{--                <x-icons.close class="w-6 h-6 text-teal-600"/>--}}
+{{--            </div>--}}
+{{--        </button>--}}
+{{--    </div>--}}
+
+{{--    <nav x-show="showDocsNavigation" x-transition:enter="transition ease-out duration-200"--}}
+{{--         x-transition:enter-start="translate-y-1 opacity-0" x-transition:enter-end="translate-y-0 opacity-100"--}}
+{{--         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="mt-2 px-4 pt-4 border-b border-[#00aaa6] border-opacity-50 dark:border-opacity-90">--}}
+{{--        {!! $navigation !!}--}}
+{{--    </nav>--}}
+{{--</div>--}}