copy landing header to docs, blueprint sidebar hover and spacing, docs crosshairs, partners in footer nav

Author: nunowar

public/www/index-6b5fc533.css public/www/index-ff04efa1.csspublic/www/index-6b5fc533.css renamed to public/www/index-ff04efa1.css

@@ -570,10 +570,9 @@ button {
 
 /* Section labels — mono, uppercase, // prefixed */
 .docs-nav h2 {
-    @apply mb-3 mt-8 flex items-center font-mono text-2xs font-bold uppercase tracking-widest text-zinc-500;
+    @apply mb-3 mt-9 flex items-center font-mono text-2xs font-bold uppercase tracking-widest text-zinc-500;
 }
-.docs-nav ul li:first-child h2,
-.docs-nav h2:first-child {
+.docs-nav > ul > li:first-child > h2 {
     @apply mt-0;
 }
 .docs-nav h2::before {
@@ -582,15 +581,15 @@ button {
 }
 
 .docs-nav ul li {
-    @apply mb-0.5;
+    @apply mb-1;
 }
 .docs-nav ul li a {
-    @apply flex items-center rounded-md border-l border-transparent py-1.5 pl-3 font-sans text-sm font-normal text-zinc-400 no-underline transition-colors;
+    @apply flex items-center py-1 font-sans text-sm font-normal text-zinc-400 no-underline underline-offset-4 transition-colors;
 }
 .docs-nav ul li a:focus,
 .docs-nav ul li a:hover {
-    @apply border-zinc-700 text-zinc-200;
+    @apply text-white underline;
 }
 .docs-nav ul li.active a {
-    @apply border-rose-500 font-semibold text-zinc-100;
+    @apply font-semibold text-white underline;
 }

public/www/index.dcefc7aa.js public/www/index.dfef299f.jspublic/www/index.dcefc7aa.js renamed to public/www/index.dfef299f.js

@@ -1,12 +1,10 @@
 <header class="sticky top-0 z-50 border-b border-zinc-700 bg-zinc-900/85 backdrop-blur-md">
-    <nav aria-label="Main" class="h-15.5 mx-auto flex max-w-7xl items-center gap-3 px-5 sm:gap-6 sm:px-8">
-        <div class="flex shrink-0 items-center gap-2.5" x-data="pestLogoMenu">
-            <a aria-label="Home" class="flex items-center gap-2.5" href="/" @contextmenu.prevent="openMenu($event)">
-                <span class="sr-only">Pest | The elegant PHP testing framework</span>
+    <nav aria-label="Main" class="h-15.5 container mx-auto flex items-center gap-7 px-5 sm:px-10">
+        <div class="flex items-center gap-2" x-data="pestLogoMenu">
+            <a aria-label="Pest" class="flex items-center gap-2" href="/" @contextmenu.prevent="openMenu($event)">
                 <svg aria-label="PEST" class="block h-7 w-auto fill-zinc-200" role="img" viewBox="0 0 381 100" xmlns="http://www.w3.org/2000/svg">
                     <path clip-rule="evenodd" d="M16.607 27.51 22.994 0h85.181L93.484 63.272H36.697l-8.303 35.763H0l14.69-63.272h56.788l1.916-8.253zM295.574 0h85.181l-6.387 27.51h-39.752L318.01 99.035h-28.394l16.607-71.525h-73.824l-1.917 8.253h56.788l-6.387 27.51-1.916 8.252-6.387 27.51h-85.181l6.387-27.51h56.787l1.916-8.253h-56.787l6.387-27.51 1.916-8.252L210.392 0zm-93.7 0h-85.181l-6.387 27.51h85.181zm-25.34 35.763h-68.145l-6.387 27.51h68.145zm8.734 35.762h-85.182l-6.387 27.51h85.181z" fill-rule="evenodd" id="pest-wordmark" />
                 </svg>
-                <span class="text-2xs hidden rounded-full border border-zinc-700 px-2 py-0.5 font-mono tracking-wide text-zinc-400 sm:inline-block">v{{ config('site.defaultVersion') }}</span>
             </a>
 
             {{-- right-click brand menu --}}
@@ -31,24 +29,29 @@ class="fixed z-[100] w-56 overflow-hidden rounded-xl border border-zinc-700 bg-z
                 </div>
             </template>
         </div>
-
         <div class="ml-2 hidden gap-6 lg:flex">
-            <a class="text-sm font-medium text-zinc-200 underline-offset-4 hover:underline" href="/docs">Documentation</a>
-            <a class="text-sm font-medium text-zinc-400 underline-offset-4 hover:underline" href="https://youtube.com/@nunomaduro" target="_blank" rel="noopener">YouTube</a>
-            <a class="text-sm font-medium text-zinc-400 underline-offset-4 hover:underline" href="https://github.com/sponsors/nunomaduro" target="_blank" rel="noopener">Sponsor</a>
+            <a class="text-sm font-medium text-white underline-offset-4 hover:underline" href="/docs">Documentation</a>
+            <a class="text-sm font-medium text-zinc-400 underline-offset-4 hover:underline" href="https://youtube.com/@nunomaduro">YouTube</a>
+            <a class="text-sm font-medium text-zinc-400 underline-offset-4 hover:underline" href="https://github.com/sponsors/nunomaduro">Sponsor</a>
         </div>
-
-        <div class="ml-auto flex min-w-0 flex-1 items-center justify-end gap-3 sm:flex-none sm:gap-4">
-            <div id="docsearch" class="min-w-0 max-w-xs flex-1 sm:flex-none"></div>
-
-            <a class="hidden items-center gap-2 text-sm font-semibold text-zinc-200 transition-colors hover:text-rose-400 sm:inline-flex" href="{{ config('site.github') }}" target="_blank" rel="noopener">
+        <div class="ml-auto flex items-center gap-4">
+            <a class="flex items-center gap-2 text-sm font-semibold text-zinc-200 transition-colors hover:text-rose-400" href="https://github.com/pestphp/pest" target="_blank">
                 <svg class="size-4" fill="none" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
                     <path clip-rule="evenodd" d="M16 0C7.16 0 0 7.16 0 16c0 7.08 4.58 13.06 10.94 15.18.8.14 1.1-.34 1.1-.76 0-.38-.02-1.64-.02-2.98-4.02.74-5.06-.98-5.38-1.88-.18-.46-.96-1.88-1.64-2.26-.56-.3-1.36-1.04-.02-1.06 1.26-.02 2.16 1.16 2.46 1.64 1.44 2.42 3.74 1.74 4.66 1.32.14-1.04.56-1.74 1.02-2.14-3.56-.4-7.28-1.78-7.28-7.9 0-1.74.62-3.18 1.64-4.3-.16-.4-.72-2.04.16-4.24 0 0 1.34-.42 4.4 1.64 1.28-.36 2.64-.54 4-.54 1.36 0 2.72.18 4 .54 3.06-2.08 4.4-1.64 4.4-1.64.88 2.2.32 3.84.16 4.24 1.02 1.12 1.64 2.54 1.64 4.3 0 6.14-3.74 7.5-7.3 7.9.58.5 1.08 1.46 1.08 2.96 0 2.14-.02 3.86-.02 4.4 0 .42.3.92 1.1.76A16.026 16.026 0 0 0 32 16c0-8.84-7.16-16-16-16Z" fill-rule="evenodd" fill="currentColor"></path>
                 </svg>
-                10k+
+                12k+
             </a>
-
-            <button @click.prevent="toggle()" aria-label="Toggle Documentation Navigation" class="active:scale-96 flex size-8 shrink-0 items-center justify-center text-zinc-400 transition hover:text-zinc-200 lg:hidden" type="button">
+            {{-- same pill as the landing header; DocSearch renders its real button hidden below and this one forwards the click --}}
+            <div id="docsearch" class="hidden"></div>
+            <button type="button" @click="document.querySelector('#docsearch button')?.click()" class="hidden w-56 cursor-pointer items-center gap-1 rounded-lg border border-zinc-700 bg-zinc-800 px-2 py-1.5 text-sm text-zinc-400 transition-colors hover:border-zinc-200/20 hover:text-zinc-200 sm:flex">
+                <svg class="size-5" fill="none" stroke-linecap="round" stroke-width="2" stroke="currentColor" viewBox="0 0 24 24">
+                    <circle cx="11" cy="11" r="7" />
+                    <path d="m20 20-3.5-3.5" />
+                </svg>
+                Search docs
+                <kbd class="text-2xs ml-auto rounded-sm border border-zinc-700 bg-zinc-900 px-1 py-px font-sans">⌘K</kbd>
+            </button>
+            <button @click.prevent="toggle()" aria-label="Toggle Documentation Navigation" class="active:scale-96 flex size-8 items-center justify-center text-zinc-400 transition hover:text-zinc-200 lg:hidden" type="button">
                 <svg class="size-5" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.6" stroke="currentColor" viewBox="0 0 24 24">
                     <path d="M4 7h16M4 12h16M4 17h16" />
                 </svg>

public/www/index.html

@@ -25,7 +25,7 @@ class="fixed inset-0 z-40 bg-zinc-900/80 backdrop-blur-sm lg:hidden"
         x-transition:leave="transition ease-in-out duration-200 transform"
         x-transition:leave-start="translate-x-0"
         x-transition:leave-end="translate-x-full"
-        class="fixed inset-y-0 right-0 z-50 flex w-full max-w-xs flex-col overflow-y-auto border-l border-zinc-700 bg-zinc-900 px-6 py-5 lg:sticky lg:inset-auto lg:top-15.5 lg:z-0 lg:h-[calc(100vh-3.875rem)] lg:max-w-none lg:translate-x-0 lg:border-l-0 lg:border-r lg:border-zinc-700 lg:bg-transparent lg:px-5 lg:py-8"
+        class="fixed inset-y-0 right-0 z-50 flex w-full max-w-xs flex-col overflow-y-auto border-l border-zinc-700 bg-zinc-900 px-6 py-5 lg:sticky lg:inset-auto lg:top-15.5 lg:z-0 lg:h-[calc(100vh-3.875rem)] lg:max-w-none lg:translate-x-0 lg:border-l-0 lg:bg-transparent lg:px-5 lg:py-8"
     >
         {{-- mobile drawer header --}}
         <div class="mb-6 flex items-center justify-between lg:hidden">

resources/css/app.css

@@ -1,9 +1,18 @@
-<x-app-layout layout="app" :title="$matter['title']" :description="$matter['description']">
-    <main role="main" class="w-full flex-auto">
+<x-app-layout :description="$matter['description']" :title="$matter['title']" layout="app">
+    <main class="w-full flex-auto" role="main">
         <div class="relative mx-auto min-h-[70vh] max-w-7xl border-x border-zinc-700">
-            {{-- crosshair registration marks --}}
-            <span class="crosshair -left-1 top-px"></span>
-            <span class="crosshair -right-1 top-px"></span>
+            {{-- crosshair registration marks: fixed pair riding under the sticky header, as on the landing --}}
+            <div class="top-14.25 pointer-events-none fixed inset-x-0 z-10">
+                <div class="relative mx-auto max-w-7xl">
+                    <span class="crosshair -left-1 top-px"></span>
+                    <span class="crosshair -right-1 top-px"></span>
+                </div>
+            </div>
+            <span class="crosshair -left-1.25 -bottom-1.25"></span>
+            <span class="crosshair -right-1.25 -bottom-1.25"></span>
+            {{-- inner rails (content column border-x) meeting the bottom border --}}
+            <span class="crosshair -bottom-1.25 left-59 hidden lg:block"></span>
+            <span class="crosshair -bottom-1.25 right-59 hidden lg:block"></span>
 
             <div class="lg:grid lg:grid-cols-[15rem_minmax(0,1fr)_15rem]">
                 {{-- left rail: documentation navigation --}}
@@ -16,7 +25,7 @@
                         <span>docs</span>
                         <span class="text-zinc-600">/</span>
                         <span class="text-zinc-400">{{ $page }}</span>
-                        <a class="ml-auto hidden text-zinc-400 underline-offset-4 hover:text-rose-400 hover:underline lg:inline" href="https://github.com/pestphp/docs/edit/5.x/{{ $page }}.md" target="_blank" rel="noopener">edit this page →</a>
+                        <a class="ml-auto hidden text-zinc-400 underline-offset-4 hover:text-rose-400 hover:underline lg:inline" href="https://github.com/pestphp/docs/edit/5.x/{{ $page }}.md" rel="noopener" target="_blank">edit this page →</a>
                     </div>
 
                     <article class="docs-main prose prose-invert max-w-none">

resources/views/_partials/nav.blade.php

@@ -1,8 +1,16 @@
-<x-app-layout layout="app" title='IDE plugins' description="Pest has IDE plugins for PhpStorm and VSCode.">
-    <main role="main" class="w-full flex-auto">
+<x-app-layout description="Pest has IDE plugins for PhpStorm and VSCode." layout="app" title='IDE plugins'>
+    <main class="w-full flex-auto" role="main">
         <div class="relative mx-auto min-h-[70vh] max-w-7xl border-x border-zinc-700">
-            <span class="crosshair -left-1 top-px"></span>
-            <span class="crosshair -right-1 top-px"></span>
+            <div class="top-14.25 pointer-events-none fixed inset-x-0 z-10">
+                <div class="relative mx-auto max-w-7xl">
+                    <span class="crosshair -left-1 top-px"></span>
+                    <span class="crosshair -right-1 top-px"></span>
+                </div>
+            </div>
+            <span class="crosshair -left-1.25 -bottom-1.25"></span>
+            <span class="crosshair -right-1.25 -bottom-1.25"></span>
+            <span class="crosshair -bottom-1.25 left-59 hidden lg:block"></span>
+            <span class="crosshair -bottom-1.25 right-59 hidden lg:block"></span>
 
             <div class="lg:grid lg:grid-cols-[15rem_minmax(0,1fr)_15rem]">
                 <x-docs.sidebar>{!! $index !!}</x-docs.sidebar>
@@ -13,68 +21,44 @@
                         <span>docs</span>
                         <span class="text-zinc-600">/</span>
                         <span class="text-zinc-400">editor-setup</span>
-                        <a class="ml-auto hidden text-zinc-400 underline-offset-4 hover:text-rose-400 hover:underline lg:inline" href="https://github.com/pestphp/pestphp.com/edit/next/resources/views/ide.blade.php" target="_blank" rel="noopener">edit this page →</a>
+                        <a class="ml-auto hidden text-zinc-400 underline-offset-4 hover:text-rose-400 hover:underline lg:inline" href="https://github.com/pestphp/pestphp.com/edit/next/resources/views/ide.blade.php" rel="noopener" target="_blank">edit this page →</a>
                     </div>
 
                     <article class="docs-main prose prose-invert max-w-none">
-                    <h1>Editor Setup</h1>
+                        <h1>Editor Setup</h1>
 
-                    <p>
-                        An editor plugin can enhance your experience when working with Pest. While most editors offer built-in support for Pest, a dedicated plugin adds helpful functionality on top of your editor, streamlining your workflow.
-                    </p>
+                        <p>
+                            An editor plugin can enhance your experience when working with Pest. While most editors offer built-in support for Pest, a dedicated plugin adds helpful functionality on top of your editor, streamlining your workflow.
+                        </p>
 
-                    <p>
-                        Currently, the PhpStorm team at JetBrains maintains the Pest plugin for PhpStorm, which has been installed by default since PhpStorm 2023.3.
-                    </p>
+                        <p>
+                            Currently, the PhpStorm team at JetBrains maintains the Pest plugin for PhpStorm, which has been installed by default since PhpStorm 2023.3.
+                        </p>
 
-                    <div class="mt-6 mb-12">
-                        <x-jetbrains-ide-plugin
-                            title="PhpStorm"
-                            plugin-id="14636"
-                            logo="https://upload.wikimedia.org/wikipedia/commons/c/c9/PhpStorm_Icon.svg"
-                            url="https://plugins.jetbrains.com/plugin/14636-pest"
-                            github="https://github.com/pestphp/pest-intellij">
-                        </x-jetbrains-ide-plugin>
-                    </div>
+                        <div class="mb-12 mt-6">
+                            <x-jetbrains-ide-plugin github="https://github.com/pestphp/pest-intellij" logo="https://upload.wikimedia.org/wikipedia/commons/c/c9/PhpStorm_Icon.svg" plugin-id="14636" title="PhpStorm" url="https://plugins.jetbrains.com/plugin/14636-pest">
+                            </x-jetbrains-ide-plugin>
+                        </div>
 
-                    <p>
-                        If you do not use PhpStorm, you may wish to try one of the community-maintained plugins below. However, these alternatives may not offer the same experience as the official PhpStorm plugin.
-                    </p>
+                        <p>
+                            If you do not use PhpStorm, you may wish to try one of the community-maintained plugins below. However, these alternatives may not offer the same experience as the official PhpStorm plugin.
+                        </p>
 
-                    <div class="space-y-6 mt-6">
-                        <x-vs-code-ide-plugin
-                            title="VSCode PHPUnit TestExplorer"
-                            extension="recca0120.vscode-phpunit"
-                            logo="https://raw.githubusercontent.com/recca0120/vscode-phpunit/main/img/icon.png"
-                            url="https://marketplace.visualstudio.com/items?itemName=recca0120.vscode-phpunit"
-                            github="https://github.com/recca0120/vscode-phpunit">
-                        </x-vs-code-ide-plugin>
-                        
-                        <x-vs-code-ide-plugin
-                            title="VSCode"
-                            extension="m1guelpf.better-pest"
-                            logo="https://upload.wikimedia.org/wikipedia/commons/9/9a/Visual_Studio_Code_1.35_icon.svg"
-                            url="https://marketplace.visualstudio.com/items?itemName=m1guelpf.better-pest"
-                            github="https://github.com/m1guelpf/better-pest">
-                        </x-vs-code-ide-plugin>
+                        <div class="mt-6 space-y-6">
+                            <x-vs-code-ide-plugin extension="recca0120.vscode-phpunit" github="https://github.com/recca0120/vscode-phpunit" logo="https://raw.githubusercontent.com/recca0120/vscode-phpunit/main/img/icon.png" title="VSCode PHPUnit TestExplorer" url="https://marketplace.visualstudio.com/items?itemName=recca0120.vscode-phpunit">
+                            </x-vs-code-ide-plugin>
 
-                        <x-vs-code-ide-plugin
-                            title="VSCode Snippets"
-                            extension="dansysanalyst.pest-snippets"
-                            logo="https://raw.githubusercontent.com/dansysanalyst/pest-snippets/main/images/icon.png"
-                            url="https://marketplace.visualstudio.com/items?itemName=dansysanalyst.pest-snippets"
-                            github="https://github.com/dansysanalyst/pest-snippets">
-                        </x-vs-code-ide-plugin>
+                            <x-vs-code-ide-plugin extension="m1guelpf.better-pest" github="https://github.com/m1guelpf/better-pest" logo="https://upload.wikimedia.org/wikipedia/commons/9/9a/Visual_Studio_Code_1.35_icon.svg" title="VSCode" url="https://marketplace.visualstudio.com/items?itemName=m1guelpf.better-pest">
+                            </x-vs-code-ide-plugin>
 
-                        <x-neovim-ide-plugin
-                            title="Neovim (via Neotest)"
-                            logo="https://upload.wikimedia.org/wikipedia/commons/3/3a/Neovim-mark.svg"
-                            url="https://github.com/V13Axel/neotest-pest"
-                            github="https://github.com/V13Axel/neotest-pest">
-                        </x-ide-plugin>
-                    </div>
+                            <x-vs-code-ide-plugin extension="dansysanalyst.pest-snippets" github="https://github.com/dansysanalyst/pest-snippets" logo="https://raw.githubusercontent.com/dansysanalyst/pest-snippets/main/images/icon.png" title="VSCode Snippets" url="https://marketplace.visualstudio.com/items?itemName=dansysanalyst.pest-snippets">
+                            </x-vs-code-ide-plugin>
+
+                            <x-neovim-ide-plugin github="https://github.com/V13Axel/neotest-pest" logo="https://upload.wikimedia.org/wikipedia/commons/3/3a/Neovim-mark.svg" title="Neovim (via Neotest)" url="https://github.com/V13Axel/neotest-pest">
+                                </x-ide-plugin>
+                        </div>
 
-                    {!! $body !!}
+                        {!! $body !!}
                     </article>
                 </div>