wip

SRWieZ · simonhamp · commit df88437be82a · 2025-01-22T22:08:46.000Z
diff --git a/resources/css/app.css b/resources/css/app.css
@@ -49,7 +49,7 @@ nav > ul > li > ul {
     & > li {
         @apply font-normal;
 
-        a {
+        & a {
             @apply w-full block;
             @apply py-1.5;
             @apply border-l pl-3 dark:border-white/10;
@@ -177,7 +177,7 @@ nav > ul > li > ul {
 }
 
 .DocSearch-Button-Placeholder {
-    @apply dark:text-white/60 pr-56 text-xs;
+    @apply dark:text-white/60 pr-44 text-xs;
 }
 
 .DocSearch-Button-Keys {
diff --git a/resources/views/components/hearder-banner.blade.php b/resources/views/components/hearder-banner.blade.php
@@ -1,10 +1,11 @@
+@props(['hasMenu' => false])
 <div class="sticky top-0 z-50
 text-white blur-background bg-gray-50/85 dark:bg-gray-800/85
 border-b border-gray-100 dark:border-0
 ">
 
     <div class="hidden lg:block">
-                <x-alert/>
+        <x-alert/>
     </div>
     <div class="
     relative flex top-0 left-0 z-50
@@ -21,16 +22,32 @@ class="inline-flex items-center gap-3 transition rounded hover:text-white/80 foc
             <span class="sr-only">NativePHP</span>
         </a>
         <div id="docsearch"></div>
-
+        <a class="group
+        text-sm bg-purple-500 border-purple-600
+dark:border-purple-500 dark:bg-purple-700
+hover:bg-purple-600 dark:hover:bg-purple-800
+        px-4 py-1.5
+        border rounded-md
+        font-medium
+        text-white
+        hidden lg:block" href="{{route('early-adopter')}}">
+            <div class="group-hover:animate-none animate-pulse flex items-center gap-2">
+                <x-icons.party-popper class="size-4"/>
+{{--                <x-icons.sparkles class="size-4"/>--}}
+{{--                <x-icons.device-mobile-phone class="size-4"/>--}}
+                <span>Early Adopter Program</span>
+            </div>
+        </a>
         <div class="hidden lg:flex items-center space-x-5">
+
             <a href="https://bsky.app/profile/nativephp.bsky.social" title="Bluesky">
-                <x-icons.bluesky  class="size-5 text-black dark:invert hover:text-[#00aaa6] hover:invert-0" />
+                <x-icons.bluesky class="size-5 text-black dark:invert hover:text-[#00aaa6] hover:invert-0"/>
             </a>
 
             <a href="https://discord.gg/X62tWNStZK" title="Go to discord server">
                 <x-icons.discord class="size-5 dark:fill-white hover:fill-[#00aaa6]"/>
             </a>
-            
+
             <a href="https://opencollective.com/nativephp" title="NativePHP on LinkedIn">
                 <x-icons.opencollective class="size-5 text-black dark:invert hover:text-[#00aaa6] hover:invert-0"/>
             </a>
@@ -40,14 +57,22 @@ class="inline-flex items-center gap-3 transition rounded hover:text-white/80 foc
             </a>
         </div>
         <div class="lg:hidden flex justify-end pl-4">
-            <button type="button" class="" @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>
+            @if($hasMenu)
+                <button type="button" class="" @click="showDocsNavigation = !showDocsNavigation">
+                    <div x-show="!showDocsNavigation">
+                        <x-icons.menu class="w-6 h-6 text-teal-600 dark:text-teal-300"/>
+                    </div>
+                    <div x-show="showDocsNavigation">
+                        <x-icons.close class="w-6 h-6 text-teal-600"/>
+                    </div>
+                </button>
+            @else
+                <a href="{{route('docs')}}" class="text-teal-600 hover:text-teal-800 dark:text-teal-400 dark:hover:text-teal-200
+                 flex items-center gap-1">
+                    <x-icons.book-text class="size-5"/>
+                    <span class="text-md hidden sm:inline">Documentation</span>
+                </a>
+            @endif
         </div>
     </div>
 </div>
diff --git a/resources/views/components/icons/book-text.blade.php b/resources/views/components/icons/book-text.blade.php
@@ -0,0 +1 @@
+<svg {{$attributes}} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-book-text"><path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20"/><path d="M8 11h8"/><path d="M8 7h6"/></svg>
diff --git a/resources/views/components/icons/device-mobile-phone.blade.php b/resources/views/components/icons/device-mobile-phone.blade.php
@@ -0,0 +1,3 @@
+<svg {{ $attributes }} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+    <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 1.5H8.25A2.25 2.25 0 0 0 6 3.75v16.5a2.25 2.25 0 0 0 2.25 2.25h7.5A2.25 2.25 0 0 0 18 20.25V3.75a2.25 2.25 0 0 0-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3m-3 18.75h3" />
+</svg>
diff --git a/resources/views/components/icons/party-popper.blade.php b/resources/views/components/icons/party-popper.blade.php
@@ -0,0 +1 @@
+<svg {{$attributes}} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-party-popper"><path d="M5.8 11.3 2 22l10.7-3.79"/><path d="M4 3h.01"/><path d="M22 8h.01"/><path d="M15 2h.01"/><path d="M22 20h.01"/><path d="m22 2-2.24.75a2.9 2.9 0 0 0-1.96 3.12c.1.86-.57 1.63-1.45 1.63h-.38c-.86 0-1.6.6-1.76 1.44L14 10"/><path d="m22 13-.82-.33c-.86-.34-1.82.2-1.98 1.11c-.11.7-.72 1.22-1.43 1.22H17"/><path d="m11 2 .33.82c.34.86-.2 1.82-1.11 1.98C9.52 4.9 9 5.52 9 6.23V7"/><path d="M11 13c1.93 1.93 2.83 4.17 2 5-.83.83-3.07-.07-5-2-1.93-1.93-2.83-4.17-2-5 .83-.83 3.07.07 5 2Z"/></svg>
diff --git a/resources/views/components/icons/sparkles.blade.php b/resources/views/components/icons/sparkles.blade.php
@@ -0,0 +1 @@
+<svg {{$attributes}} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkles"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"/><path d="M20 3v4"/><path d="M22 5h-4"/><path d="M4 17v2"/><path d="M5 18H3"/></svg>
diff --git a/resources/views/components/layout-three-columns.blade.php b/resources/views/components/layout-three-columns.blade.php
@@ -0,0 +1,30 @@
+<x-layout :hasMenu="! empty($sidebarLeft)">
+    <main class="overflow-hidden lg:flex lg:flex-1 lg:flex-col">
+
+        <div class="max-w-8xl mx-auto px-4 sm:px-6 md:px-8">
+            <main class="overflow-hidden lg:flex lg:flex-1 lg:flex-col">
+                @if(!empty($sidebarLeft))
+                    <x-sidebar-left-navigation>
+                        {{ $sidebarLeft }}
+                    </x-sidebar-left-navigation>
+                @endif
+
+
+                <div class="lg:pl-[19.5rem]">
+                    <div class="max-w-3xl mx-auto pt-4 sm:pt-6 xl:max-w-none xl:ml-0 xl:mr-[15.5rem] xl:pr-16">
+
+                        @if(!empty($sidebarRight))
+                            <x-sidebar-right>
+                                {{ $sidebarRight }}
+                            </x-sidebar-right>
+                        @endif
+
+                        {{ $slot }}
+
+                        <x-footer/>
+                    </div>
+                </div>
+            </main>
+        </div>
+    </main>
+</x-layout>
diff --git a/resources/views/components/layout.blade.php b/resources/views/components/layout.blade.php
@@ -27,7 +27,7 @@
       x-data="{ showDocsNavigation: false }"
 >
 
-<x-banner />
+<x-hearder-banner :hasMenu="$hasMenu ?? false" />
 {{ $slot }}
 <script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
 <script type="text/javascript">
diff --git a/resources/views/components/link-button.blade.php b/resources/views/components/link-button.blade.php
@@ -2,6 +2,7 @@
 font-medium
 border border-gray-300 dark:border-gray-700 rounded-lg
 px-4 py-2
+text-black dark:text-white
 hover:text-[#00aaa6] hover:border-[#00aaa6]/25
 flex items-center gap-2
 text-sm
diff --git a/resources/views/components/sidebar-left-navigation.blade.php b/resources/views/components/sidebar-left-navigation.blade.php
@@ -12,7 +12,7 @@
     dark:text-gray-200
  ">
     <nav class="flex flex-col flex-1">
-        {!! $navigation !!}
+        {!! $slot !!}
     </nav>
 </div>
 
@@ -25,7 +25,7 @@
      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 h-screen pt-10 pb-16 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 !!}
+    {!! $slot !!}
 
 
     <div class="my-16 flex items-center justify-center space-x-6">
diff --git a/resources/views/components/sidebar-right.blade.php b/resources/views/components/sidebar-right.blade.php
@@ -11,29 +11,5 @@
 
     border-l border-[#00aaa6] border-opacity-10 dark:border-gray-800
 ">
-    <x-sidebar-title>On this page</x-sidebar-title>
-    @if (count($tableOfContents) > 0)
-        <ul class="mt-4 space-y-2 text-sm">
-            @foreach($tableOfContents as $item)
-                <li class="hover:text-[#00aaa6] text-gray-700 dark:text-gray-300
-
-                @if($item['level'] == 2) font-semibold leading-6 @endif
-                @if($item['level'] == 3) ml-4 leading-4 pb-0.5 @endif
-                @if($item['level'] == 3 && ($tableOfContents[$loop->index+1]['level']??0) == 2) pb-2 @endif
-                ">
-                    <a href="#{{ $item['anchor'] }}">{{ $item['title'] }}</a>
-                </li>
-            @endforeach
-        </ul>
-    @endif
-
-    <x-sidebar-title class="mt-8">Featured sponsors</x-sidebar-title>
-    <div class="mt-4 flex flex-col gap-4 w-3/4 pl-3">
-        <x-sponsors-featured height="h-12" :same-height="false"/>
-    </div>
-
-    <x-sidebar-title class="mt-8">Corporate sponsors</x-sidebar-title>
-    <div class="mt-4 flex flex-col gap-6 w-3/4 pl-3">
-        <x-sponsors-corporate height="h-8"/>
-    </div>
+    {{ $slot }}
 </div>
diff --git a/resources/views/components/toc-and-sponsors.blade.php b/resources/views/components/toc-and-sponsors.blade.php
@@ -0,0 +1,26 @@
+
+    <x-sidebar-title>On this page</x-sidebar-title>
+    @if (count($tableOfContents) > 0)
+        <ul class="mt-4 space-y-2 text-sm">
+            @foreach($tableOfContents as $item)
+                <li class="hover:text-[#00aaa6] text-gray-700 dark:text-gray-300
+
+                @if($item['level'] == 2) font-semibold leading-6 @endif
+                @if($item['level'] == 3) ml-4 leading-4 pb-0.5 @endif
+                @if($item['level'] == 3 && ($tableOfContents[$loop->index+1]['level']??0) == 2) pb-2 @endif
+                ">
+                    <a href="#{{ $item['anchor'] }}">{{ $item['title'] }}</a>
+                </li>
+            @endforeach
+        </ul>
+    @endif
+
+    <x-sidebar-title class="mt-8">Featured sponsors</x-sidebar-title>
+    <div class="mt-4 flex flex-col gap-4 w-3/4 pl-3">
+        <x-sponsors-featured height="h-12" :same-height="false"/>
+    </div>
+
+    <x-sidebar-title class="mt-8">Corporate sponsors</x-sidebar-title>
+    <div class="mt-4 flex flex-col gap-6 w-3/4 pl-3">
+        <x-sponsors-corporate height="h-8"/>
+    </div>
diff --git a/resources/views/docs/index.blade.php b/resources/views/docs/index.blade.php
@@ -1,73 +1,59 @@
-<x-layout>
-
-    <main class="overflow-hidden lg:flex lg:flex-1 lg:flex-col">
-        <div class="max-w-8xl mx-auto px-4 sm:px-6 md:px-8">
-            <x-sidebar-left :navigation="$navigation"/>
-
-
-            <div class="
-            lg:pl-[19.5rem]
-{{--            overflow-hidden lg:ml-[240px] max-w-prose w-full py-8 sm:px-8--}}
-            ">
-                <div class="max-w-3xl mx-auto pt-4 sm:pt-6 xl:max-w-none xl:ml-0 xl:mr-[15.5rem] xl:pr-16">
-
-                    <x-sidebar-right :tableOfContents="$tableOfContents"/>
-                    
-                    <h1 class="text-4xl font-semibold mb-4 text-[#00aaa6]">
-                        {{$title}}
-                    </h1>
-
-                    <x-separator class="mt-3 -mr-4 -ml-4"/>
-
-                    <x-alert-beta/>
-
-                    @if (count($tableOfContents) > 0)
-                        <ul class="mt-8 space-y-2 block xl:hidden">
-                            @foreach($tableOfContents as $item)
-                                <li class="@if($item['level'] == 2) font-bold text-gray-800 dark:text-gray-200 @else before:content-['→'] @endif  before:text-[#00aaa6] @if($item['level'] == 3) ml-6 @endif">
-                                    <a href="#{{ $item['anchor'] }}">{{ $item['title'] }}</a>
-                                </li>
-                            @endforeach
-                        </ul>
-                    @endif
-
-                    <div class="mt-8 prose dark:prose-invert prose-headings:scroll-mt-20 sm:prose-headings:scroll-mt-32 prose-headings:text-gray-800 dark:prose-headings:text-gray-50">
-                        {!! $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-4 text-center">
-                        <x-link-subtle href="{{ $editUrl }}" target="_blank" rel="noopener">
-                            Edit this page on GitHub
-                        </x-link-subtle>
-                    </div>
-                    <x-footer/>
-
-                </div>
-            </div>
-
-        </div>
-    </main>
-
-
-</x-layout>
+<x-layout-three-columns>
+    <x-slot name="sidebarLeft">
+        {!! $navigation !!}
+    </x-slot>
+    <x-slot name="sidebarRight">
+        <x-toc-and-sponsors :tableOfContents="$tableOfContents"/>
+    </x-slot>
+
+    <h1 class="text-4xl font-semibold mb-4 text-[#00aaa6]">
+        {{$title}}
+    </h1>
+
+    <x-separator class="mt-3 -mr-4 -ml-4"/>
+
+    <x-alert-beta/>
+
+    @if (count($tableOfContents) > 0)
+        <ul class="mt-8 space-y-2 block xl:hidden">
+            @foreach($tableOfContents as $item)
+                <li class="@if($item['level'] == 2) font-bold text-gray-800 dark:text-gray-200 @else before:content-['→'] @endif  before:text-[#00aaa6] @if($item['level'] == 3) ml-6 @endif">
+                    <a href="#{{ $item['anchor'] }}">{{ $item['title'] }}</a>
+                </li>
+            @endforeach
+        </ul>
+    @endif
+
+    <div class="mt-8 prose dark:prose-invert prose-headings:scroll-mt-20 sm:prose-headings:scroll-mt-32 prose-headings:text-gray-800 dark:prose-headings:text-gray-50">
+        {!! $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-4 text-center">
+        <x-link-subtle href="{{ $editUrl }}" target="_blank" rel="noopener">
+            Edit this page on GitHub
+        </x-link-subtle>
+    </div>
+
+
+</x-layout-three-columns>
diff --git a/resources/views/early-adopter.blade.php b/resources/views/early-adopter.blade.php
diff --git a/routes/web.php b/routes/web.php

Original file line number	Diff line number	Diff line change
`@@ -49,7 +49,7 @@ nav > ul > li > ul {`
`49`	`49`	`& > li {`
`50`	`50`	`@apply font-normal;`
`51`	`51`
`52`		`- a {`
	`52`	`+ & a {`
`53`	`53`	`@apply w-full block;`
`54`	`54`	`@apply py-1.5;`
`55`	`55`	`@apply border-l pl-3 dark:border-white/10;`
`@@ -177,7 +177,7 @@ nav > ul > li > ul {`
`177`	`177`	`}`
`178`	`178`
`179`	`179`	`.DocSearch-Button-Placeholder {`
`180`		`- @apply dark:text-white/60 pr-56 text-xs;`
	`180`	`+ @apply dark:text-white/60 pr-44 text-xs;`
`181`	`181`	`}`
`182`	`182`
`183`	`183`	`.DocSearch-Button-Keys {`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+<svg {{$attributes}} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-book-text"><path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20"/><path d="M8 11h8"/><path d="M8 7h6"/></svg>`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+<svg {{ $attributes }} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">`
	`2`	`+ <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 1.5H8.25A2.25 2.25 0 0 0 6 3.75v16.5a2.25 2.25 0 0 0 2.25 2.25h7.5A2.25 2.25 0 0 0 18 20.25V3.75a2.25 2.25 0 0 0-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3m-3 18.75h3" />`
	`3`	`+</svg>`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	+<svg {{$attributes}} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-party-popper"><path d="M5.8 11.3 2 22l10.7-3.79"/><path d="M4 3h.01"/><path d="M22 8h.01"/><path d="M15 2h.01"/><path d="M22 20h.01"/><path d="m22 2-2.24.75a2.9 2.9 0 0 0-1.96 3.12c.1.86-.57 1.63-1.45 1.63h-.38c-.86 0-1.6.6-1.76 1.44L14 10"/><path d="m22 13-.82-.33c-.86-.34-1.82.2-1.98 1.11c-.11.7-.72 1.22-1.43 1.22H17"/><path d="m11 2 .33.82c.34.86-.2 1.82-1.11 1.98C9.52 4.9 9 5.52 9 6.23V7"/><path d="M11 13c1.93 1.93 2.83 4.17 2 5-.83.83-3.07-.07-5-2-1.93-1.93-2.83-4.17-2-5 .83-.83 3.07.07 5 2Z"/></svg>
Original file line number	Diff line number	Diff line change
`@@ -27,7 +27,7 @@`
`27`	`27`	`x-data="{ showDocsNavigation: false }"`
`28`	`28`	`>`
`29`	`29`
`30`		`-<x-banner />`
	`30`	`+<x-hearder-banner :hasMenu="$hasMenu ?? false" />`
`31`	`31`	`{{ $slot }}`
`32`	`32`	`<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>`
`33`	`33`	`<script type="text/javascript">`