Homepage: Mobile/Desktop path chooser with SuperNative-first messaging (#438)

* Homepage: Mobile/Desktop path chooser, SuperNative-first messaging for v4

The hero CTAs become a platform toggle (persisted, Mobile by default) and
the Under the hood, tools, Fast/Tiny apps and install-steps blocks adapt
to the chosen track. Mobile leads with SuperNative: Blade rendering to
real SwiftUI/Jetpack Compose views over shared memory, web view demoted
to an optional component. Desktop keeps the accurate Electron story:
static PHP binary, authenticated HTTP, Chromium window.

Also: Bifrost diagram redrawn with a two-arm fan (Windows track removed)
and a centred bubble, announcement cards scoped to the Mobile track, and
the invalid flux-pro carousel stub class excluded from Tailwind's sources
to silence a Lightning CSS warning on every build.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* Fix CI: fake Torchlight for the SuperNative docs-page test

The test renders a docs page with fenced code blocks; Torchlight throws
outside production when no token is configured (as in CI). Worse, the
thrown request skipped the middleware's clearBlocks(), so the static
block registry leaked into every later HTML response in the process,
500ing 12 unrelated tests.

Fake the token and API (the DocumentationRenderingTest pattern) and
clear the registry in tearDown so a failure here can never cascade.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* Mobile v4 changelog: pull release candidates from GitHub release notes

releasesAfter('4.0.0') excluded every 4.0.0-rc.* tag because
version_compare ranks prereleases below the release, so the automated
feed rendered nothing while only RCs exist. Add releasesFrom(), which
filters on a "-dev" floor (dev ranks below every prerelease marker),
admitting alphas, betas, RCs and the release itself, and switch the v4
changelog to it. Covered by unit tests and a page test against a faked
GitHub API.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* Promote Mobile v4 docs to stable; SuperNative banner, changelog and homepage updates

- Docs: v4 is now the latest version — beta notice retired (machinery
  still tested via pinned config), unversioned URLs and hardcoded v3
  links resolve to the latest version, renamed pages 301 in one hop
- Changelog: pull v4 release candidates from GitHub release notes, fix
  double-encoded links in hand-written release bodies, cap the v3 feed
  below 4.0.0, replace the static v4.0 section with the automated feed
- New SuperNative header banner replacing The Vibes event banner
- Homepage: announcement row moved above Plugins with Jump leading,
  Jump/Bifrost card copy and pricing ($10/mo), matched card padding,
  and hover transitions scoped to shadow/colors so the card fade-ins
  no longer fight gsap frame-by-frame

* Homepage: move the platform chooser above Under the hood, reshape the Desktop track

The chooser (heading, buttons and docs link) moves out of the hero to sit
directly above the section it controls, and selecting a track eases the
page down to it. One chooser on the page now, pinned by a test that
counts them.

Desktop track: text left with the diagram right across the full width,
the diagram redrawn as a ~4:3 app window with a vertical internal flow,
and Fast apps / One file stacked beside the tools card.

Mobile track: reworded How does it work? around Blade rendering to real
SwiftUI and Compose, the 240fps headroom, and the SuperNative name.

* Keep the "New" nav badge on Learn only

Ultra, Consulting, Build and Support no longer read as new, so drop their
badges from the mobile menu and the footer. Learn keeps its badge in both.
The header's nav pills never carried one.

Prettier reflowed both files while it was in there, so the diff is larger
than the eight removed spans; the rendered link set is unchanged.

* Show coming-soon course content to users who haven't purchased

The pre-purchase curriculum hid anything unreleased: modules without a
published lesson were filtered out entirely, and unpublished lessons were
dropped from the modules that survived. Free users couldn't see what was
still to come.

Published modules now always appear, badged "Coming Soon" when nothing in
them has been released yet, and every lesson is listed. Unreleased lessons
carry their own "Coming Soon" badge and deliberately no lock icon — they
aren't gated by purchase, they just aren't out yet.

Two tests asserted the old hiding behaviour and are inverted to match.
Also reconciles TheVibesBannerTest, which arrived with main and expected
the Vibes countdown on the homepage; this branch replaced that banner with
the SuperNative one, so its page-level assertions now check for absence
while main's countdown component tests stay as they were.

---------

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: simonhamp

app/Livewire/Customer/Course/Index.php

@@ -122,10 +122,13 @@ public function completedCount(): int
     }
 
     /**
-     * Published modules with at least one published lesson.
+     * Every published module, including those still awaiting their first
+     * released lesson.
      *
      * Drives the pre-purchase curriculum outline, which lists every lesson —
-     * locked or not — so non-purchasers can see the whole course.
+     * locked or not — so non-purchasers can see the whole course. Modules with
+     * nothing released yet are listed as coming soon rather than hidden, so the
+     * outline reflects the full shape of the course.
      *
      * Keys are preserved so the view can number each module by its real position
      * in the course rather than its position within this filtered subset.
@@ -140,8 +143,17 @@ public function outlineModules(): Collection
         }
 
         return $this->course->modules
-            ->filter(fn (CourseModule $module): bool => $module->is_published
-                && $module->lessons->contains(fn (CourseLesson $lesson): bool => $lesson->is_published));
+            ->filter(fn (CourseModule $module): bool => $module->is_published);
+    }
+
+    /**
+     * A published module whose lessons are all still unreleased.
+     */
+    public function isComingSoonModule(CourseModule $module): bool
+    {
+        return ! $module->lessons->contains(
+            fn (CourseLesson $lesson): bool => $lesson->is_published
+        );
     }
 
     #[Computed]

app/Notifications/PluginReviewChecksIncomplete.php

@@ -12,7 +12,7 @@ class PluginReviewChecksIncomplete extends Notification implements ShouldQueue
 {
     use Queueable;
 
-    private const DOCS_BASE = 'https://nativephp.com/docs/mobile/3/plugins';
+    private const DOCS_BASE = 'https://nativephp.com/docs/mobile/plugins';
 
     /**
      * @var array<string, array{label: string, passing_label: string, docs_url: string, docs_label: string}>

app/Support/GitHub.php

@@ -70,12 +70,38 @@ public function releases(): Collection
         ) ?? collect();
     }
 
-    public function releasesAfter(string $version): Collection
+    /**
+     * Releases strictly after the given version, optionally capped below
+     * another version and its prereleases — without a cap, a versioned
+     * changelog would list the next major's releases too (4.0.0-rc.1
+     * compares greater than any 3.x tag).
+     */
+    public function releasesAfter(string $version, ?string $before = null): Collection
     {
         $version = ltrim($version, 'v');
+        $ceiling = $before === null ? null : ltrim($before, 'v').'-dev';
+
+        return $this->releases()->filter(function (Release $release) use ($version, $ceiling) {
+            $tag = ltrim((string) $release->tag_name, 'v');
+
+            return version_compare($tag, $version, '>')
+                && ($ceiling === null || version_compare($tag, $ceiling, '<'));
+        })->values();
+    }
+
+    /**
+     * Releases for the given version and everything later, including that
+     * prefix version itself and its prereleases. releasesAfter("4.0.0")
+     * would exclude 4.0.0-rc.1 because version_compare ranks prereleases
+     * below the release; "dev" ranks below every other prerelease marker,
+     * so a "-dev" floor admits alphas, betas, RCs and the release itself.
+     */
+    public function releasesFrom(string $version): Collection
+    {
+        $floor = ltrim($version, 'v').'-dev';
 
         return $this->releases()->filter(
-            fn (Release $release) => version_compare(ltrim((string) $release->tag_name, 'v'), $version, '>')
+            fn (Release $release) => version_compare(ltrim((string) $release->tag_name, 'v'), $floor, '>=')
         )->values();
     }
 

app/Support/GitHub/Release.php

@@ -49,25 +49,31 @@ public function getBodyForMarkdown(): string
     {
         $body = $this->body;
 
-        // Convert any URLs to Markdown links
+        // Convert bare URLs to Markdown links. Release bodies can already
+        // contain Markdown links, so URLs preceded by "(" or "<" are left
+        // alone — wrapping those again nests link syntax and the page ends
+        // up rendering both the text and the URL. Closing ")" and "]" are
+        // excluded from the URL so a link's own delimiters are never
+        // swallowed into it.
         if ($this->convertLinks) {
             $body = preg_replace(
-                '/https?:\/\/[^\s]+\/pull\/(\d+)/',
+                '/(?<![(<])https?:\/\/[^\s)\]]+\/pull\/(\d+)/',
                 '[#$1]($0)',
                 $body
             );
 
             $body = preg_replace(
-                '/(https?:\/\/(?![^\s]+\/pull\/\d+)[^\s]+)/',
+                '/(?<![(<])(https?:\/\/(?![^\s]+\/pull\/\d+)[^\s)\]]+)/',
                 '[$1]($1)',
                 $body
             );
         }
 
-        // Change any @ tags to markdown links to GitHub
+        // Change any @ tags to markdown links to GitHub, unless they are
+        // already the text of a Markdown link or part of an email address.
         if ($this->withUserLinks) {
             $body = preg_replace(
-                '/@([a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?)/',
+                '/(?<![\w\[])@([a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?)/',
                 '[@$1](https://github.com/$1)',
                 $body
             );

config/docs.php

@@ -16,7 +16,7 @@
 
     'latest_versions' => [
         'desktop' => 2,
-        'mobile' => 3,
+        'mobile' => 4,
     ],
 
     /*
@@ -32,7 +32,7 @@
 
     'prerelease_versions' => [
         'desktop' => [],
-        'mobile' => [4],
+        'mobile' => [],
     ],
 
     /*
@@ -53,6 +53,7 @@
             4 => [
                 'the-basics/native-components' => 'the-basics/native-ui',
                 'the-basics/dialog' => 'the-basics/dialogs',
+                'the-basics/web-view' => 'edge-components/web-view',
                 'getting-started/deployment' => 'publishing/introduction',
                 'plugins/vibe' => 'digging-deeper/websockets',
 

resources/css/app.css

@@ -8,6 +8,15 @@
 @source '../../storage/framework/views/*.php';
 @source '../../vendor/filament/**/*.blade.php';
 
+/*
+ * flux.css pulls in the flux-pro stubs, and the carousel slide stub declares
+ * `[snap="mandatory"_&]:snap-always` — one bracket short, so it compiles to the
+ * invalid selector `snap="mandatory" &` and Lightning CSS warns on every build.
+ * We don't use <flux:carousel>, so skip that stub. Drop this once Flux fixes it
+ * upstream; remove it first if we ever adopt the carousel.
+ */
+@source not '../../vendor/livewire/flux-pro/stubs/resources/views/flux/carousel';
+
 /* Safelist classes used in dynamic content (blog posts from database) */
 @source inline("grid-cols-1 grid-cols-2 grid-cols-3 grid-cols-4 grid-cols-5 grid-cols-6");
 

resources/js/app.js

@@ -115,10 +115,58 @@ Alpine.data('countdown', (iso) => ({
     }, // tidy up
 }))
 
+// Which platform path the homepage is showing: 'mobile' | 'desktop'.
+// Shared across sections (hero, explainer) and remembered between visits.
+// Registered on alpine:init because $persist only exists once Livewire has
+// registered Alpine's plugins.
+document.addEventListener('alpine:init', () => {
+    Alpine.store('platform', {
+        current: Alpine.$persist('mobile').as('nativephpPlatform'),
+        is(name) {
+            return this.current === name
+        },
+        select(name) {
+            if (this.current === name) return
+
+            this.current = name
+            this.revealExplainer()
+        },
+        // Switching tracks rewrites the explainer, so bring it into view.
+        // Two frames: one for Alpine to apply the change, one for the
+        // browser to lay it out, so the target offset is the final one.
+        revealExplainer() {
+            requestAnimationFrame(() =>
+                requestAnimationFrame(() => {
+                    const target = document.getElementById('platform-explainer')
+                    if (!target) return
+
+                    const nav = document.querySelector('[data-site-nav]')
+                    const offset = (nav?.offsetHeight ?? 0) + 16
+                    const top =
+                        target.getBoundingClientRect().top +
+                        window.scrollY -
+                        offset
+
+                    window.scrollTo({
+                        top: Math.max(0, top),
+                        behavior: window.matchMedia(
+                            '(prefers-reduced-motion: reduce)',
+                        ).matches
+                            ? 'auto'
+                            : 'smooth',
+                    })
+                }),
+            )
+        },
+    })
+})
+
 Livewire.start()
 
 // Docsearch
-const docsPathMatch = window.location.pathname.match(/^\/docs\/(desktop|mobile)\/(\d+)/)
+const docsPathMatch = window.location.pathname.match(
+    /^\/docs\/(desktop|mobile)\/(\d+)/,
+)
 const docsearchOptions = {
     appId: 'ZNII9QZ8WI',
     apiKey: '9be495a1aaf367b47c873d30a8e7ccf5',
@@ -148,7 +196,9 @@ docsearch({
 // pressing Cmd+K only registers one handler (avoiding duplicate modals).
 const mobileContainer = document.getElementById('docsearch-mobile')
 if (mobileContainer) {
-    const desktopButton = document.querySelector('#docsearch-desktop .DocSearch-Button')
+    const desktopButton = document.querySelector(
+        '#docsearch-desktop .DocSearch-Button',
+    )
     if (desktopButton) {
         const mobileButton = desktopButton.cloneNode(true)
         mobileContainer.appendChild(mobileButton)

resources/views/components/blog/ad-rotation.blade.php

@@ -180,7 +180,7 @@ class="group relative z-0 grid place-items-center overflow-hidden rounded-2xl bg
 
             {{-- Price hint --}}
             <div class="mt-2 text-xs text-sky-100">
-                Plans from $19/mo
+                Plans from $10/mo
             </div>
 
             {{-- Decorative stars --}}

resources/views/components/docs/platform-switcher.blade.php

@@ -1,7 +1,7 @@
 @php
     $isMobile = request()->is('docs/mobile/*');
-    $mobileHref = '/docs/mobile/3';
-    $desktopHref = '/docs/desktop/2';
+    $mobileHref = '/docs/mobile/'.config('docs.latest_versions.mobile');
+    $desktopHref = '/docs/desktop/'.config('docs.latest_versions.desktop');
 @endphp
 
 <a