Mobile v2 Docs

config/docs.php

@@ -0,0 +1,21 @@
+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Documentation Latest Versions
+    |--------------------------------------------------------------------------
+    |
+    | This configuration defines the latest version for each documentation
+    | platform. When a user views an older version, they will see a notice
+    | prompting them to view the latest version.
+    |
+    */
+
+    'latest_versions' => [
+        'desktop' => 2,
+        'mobile' => 2,
+    ],
+
+];

resources/css/app.css

@@ -271,6 +271,46 @@ nav.docs-navigation > ul > li > ul {
     @apply bg-gray-800 text-purple-300;
 }
 
+.prose table {
+    @apply w-full;
+}
+
+.prose :where(table):not(:where([class~='not-prose'] *)) {
+    display: block;
+    overflow-x: auto;
+}
+
+/*
+  Blur and dim the lines that don't have the `.line-focus` class,
+  but are within a code block that contains any focus lines.
+*/
+.torchlight.has-focus-lines .line:not(.line-focus) {
+    transition: filter 0.35s, opacity 0.35s;
+    filter: blur(.095rem);
+    opacity: .65;
+}
+
+/*
+  When the code block is hovered, bring all the lines into focus.
+*/
+.torchlight.has-focus-lines:hover .line:not(.line-focus) {
+    filter: blur(0px);
+    opacity: 1;
+}
+
+.prose aside {
+    @apply relative z-0 mt-5 overflow-hidden rounded-2xl bg-gradient-to-tl from-transparent to-violet-100/75 px-5 ring-1 ring-black/5 dark:from-slate-900/30 dark:to-indigo-900/35;
+}
+
+.images-two-up {
+    @apply grid gap-8 mt-0 items-center;
+
+    @variant sm {
+        @apply grid-cols-2;
+    }
+}
+
+
 /* Responsive embedded content */
 @layer components {
     .aspect-video iframe {

resources/views/components/docs/old-version-notice.blade.php

@@ -0,0 +1,47 @@
+@props(['platform', 'version', 'page'])
+
+@php
+    $latestVersion = config("docs.latest_versions.{$platform}");
+    $isOldVersion = $latestVersion && (int) $version < (int) $latestVersion;
+
+    if ($isOldVersion) {
+        $latestPagePath = resource_path("views/docs/{$platform}/{$latestVersion}/{$page}.md");
+        $targetPage = file_exists($latestPagePath) ? $page : 'getting-started/introduction';
+
+        $latestUrl = route('docs.show', [
+            'platform' => $platform,
+            'version' => $latestVersion,
+            'page' => $targetPage,
+        ]);
+    }
+@endphp
+
+@if ($isOldVersion)
+    <div
+        class="mb-6 flex items-center gap-3 rounded-xl bg-amber-50 p-4 text-amber-800 ring-1 ring-amber-200 dark:bg-amber-950/50 dark:text-amber-200 dark:ring-amber-800/50"
+        role="alert"
+    >
+        <svg
+            class="size-5 shrink-0"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+            aria-hidden="true"
+        >
+            <path
+                fill-rule="evenodd"
+                d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z"
+                clip-rule="evenodd"
+            />
+        </svg>
+        <p class="text-sm">
+            You're viewing an older version of this documentation.
+            <a
+                href="{{ $latestUrl }}"
+                class="font-medium underline underline-offset-2 hover:text-amber-900 dark:hover:text-amber-100"
+            >
+                View the latest version ({{ $latestVersion }}.x)
+            </a>
+        </p>
+    </div>
+@endif

resources/views/components/navbar/device-dropdowns.blade.php

@@ -6,7 +6,7 @@
         id="mobile-dropdown"
     >
         <x-navbar.device-dropdown-item
-            href="/docs/mobile/1/getting-started/introduction"
+            href="/docs/mobile/2/getting-started/introduction"
             title="Documentation"
             subtitle="Get started with Mobile"
             icon="docs"

resources/views/docs/desktop/1/getting-started/status.md

@@ -17,7 +17,7 @@ your ideas and questions through the [forum](https://github.com/orgs/nativephp/d
 [raising issues](https://github.com/nativephp/laravel/issues/new/choose)/reporting bugs, and discussing on
 [Discord]({{ $discordLink }}).
 
-<aside class="relative z-0 mt-5 overflow-hidden rounded-2xl bg-pink-50 px-5 ring-1 ring-black/5 dark:bg-pink-600/10">
+<aside>
 
 #### Can you sponsor?
 

resources/views/docs/desktop/2/getting-started/status.md

@@ -17,7 +17,7 @@ your ideas and questions through the [forum](https://github.com/orgs/nativephp/d
 [raising issues](https://github.com/nativephp/desktop/issues/new/choose)/reporting bugs, and discussing on
 [Discord]({{ $discordLink }}).
 
-<aside class="relative z-0 mt-5 overflow-hidden rounded-2xl bg-pink-50 px-5 ring-1 ring-black/5 dark:bg-pink-600/10">
+<aside>
 
 #### Can you sponsor?
 

resources/views/docs/index.blade.php

@@ -10,11 +10,22 @@
                 1 => '1.x',
                 2 => '2.x'
             ]" />
+        @elseif($platform === 'mobile')
+            <livewire:version-switcher :versions="[
+                1 => '1.x',
+                2 => '2.x'
+            ]" />
         @endif
 
         <x-docs.toc-and-sponsors :tableOfContents="$tableOfContents" />
     </x-slot>
 
+    <x-docs.old-version-notice
+        :platform="$platform"
+        :version="$version"
+        :page="request()->route('page')"
+    />
+
     <h1 class="text-4xl font-semibold">
         {{ $title }}
     </h1>
@@ -30,6 +41,11 @@
                 1 => '1.x',
                 2 => '2.x'
             ]" />
+        @elseif($platform === 'mobile')
+            <livewire:version-switcher :versions="[
+                1 => '1.x',
+                2 => '2.x'
+            ]" />
         @endif
 
         {{-- Copy as Markdown Button --}}

resources/views/docs/mobile/1/apis/biometrics.md

@@ -35,9 +35,9 @@ use Livewire\Attributes\On;
 use Native\Mobile\Events\Biometric\Completed;
 
 #[On('native:'.Completed::class)]
-public function handle(Completed $event)
+public function handle(bool $success)
 {
-    if ($event->success) {
+    if ($success) {
         // User authenticated successfully
         $this->unlockSecureFeature();
     } else {

resources/views/docs/mobile/1/apis/browser.md

@@ -1,6 +1,6 @@
 ---
 title: Browser
-order: 150
+order: 200
 ---
 
 ## Overview

resources/views/docs/mobile/1/apis/camera.md

@@ -1,6 +1,6 @@
 ---
 title: Camera
-order: 200
+order: 300
 ---
 
 ## Overview

resources/views/docs/mobile/1/apis/device.md

@@ -1,6 +1,6 @@
 ---
 title: Device
-order: 200
+order: 400
 ---
 
 ## Overview

resources/views/docs/mobile/1/apis/dialog.md

@@ -1,6 +1,6 @@
 ---
 title: Dialog
-order: 300
+order: 500
 ---
 
 ## Overview

resources/views/docs/mobile/1/apis/geolocation.md

@@ -1,6 +1,6 @@
 ---
 title: Geolocation
-order: 400
+order: 600
 ---
 
 ## Overview

resources/views/docs/mobile/1/apis/haptics.md

@@ -1,6 +1,6 @@
 ---
 title: Haptics
-order: 500
+order: 700
 ---
 
 ## Overview

resources/views/docs/mobile/1/apis/push-notifications.md

@@ -1,6 +1,6 @@
 ---
 title: PushNotifications
-order: 600
+order: 800
 ---
 
 ## Overview

resources/views/docs/mobile/1/apis/secure-storage.md

@@ -1,6 +1,6 @@
 ---
 title: SecureStorage
-order: 700
+order: 900
 ---
 
 ## Overview

resources/views/docs/mobile/1/apis/system.md

@@ -1,11 +1,11 @@
 ---
 title: System
-order: 800
+order: 1000
 ---
 
 ## Overview
 
-The System API provides access to basic system functions like flashlight control.
+The System API provides access to basic system functions like flashlight control and platform detection.
 
 ```php
 use Native\Mobile\Facades\System;

resources/views/docs/mobile/1/concepts/databases.md

@@ -124,7 +124,7 @@ Generating tokens is cheap; leaking personal customer data can get _very_ expens
 
 Use industry-standard tools like OAuth-2.0-based providers, Laravel Passport, or Laravel Sanctum.
 
-<aside class="relative z-0 mt-5 overflow-hidden rounded-2xl bg-pink-50 px-5 ring-1 ring-black/5 dark:bg-pink-600/10">
+<aside>
 
 [Laravel Sanctum](https://laravel.com/docs/sanctum) is an ideal solution for API authentication between your mobile app and Laravel backend.
 It provides secure, token-based authentication without the complexity of OAuth.

resources/views/docs/mobile/1/concepts/push-notifications.md

@@ -17,7 +17,7 @@ your app will receive the token.
 When you want to send a notification to that user, you pass this token along with a request to the FCM service and
 Firebase handles sending the message to the right device.
 
-<aside class="relative z-0 mt-5 overflow-hidden rounded-2xl bg-pink-50 px-5 ring-1 ring-black/5 dark:bg-pink-600/10">
+<aside>
 
 FCM automatically routes notifications through Apple's Push Notification Service (APNS) behind the scenes - you don't
 need to configure APNS separately. You only need to configure Firebase with access to your APNS account.
@@ -86,7 +86,7 @@ class PushNotifications extends Component
 Once you have a token, you may use it from your server-side applications to trigger Push Notifications directly to your
 user's device.
 
-<aside class="relative z-0 mt-5 overflow-hidden rounded-2xl bg-pink-50 px-5 ring-1 ring-black/5 dark:bg-pink-600/10">
+<aside>
 
 The server-side implementation is out of scope for this documentation.
 

resources/views/docs/mobile/1/getting-started/development.md

@@ -13,7 +13,7 @@ But when you want to test _native_ features, then you must run your app on a rea
 Whether you run your native app on an emulated or real device, it will always require compilation after changes have
 been made.
 
-<aside class="relative z-0 mt-5 overflow-hidden rounded-2xl bg-pink-50 px-5 ring-1 ring-black/5 dark:bg-pink-600/10">
+<aside>
 
 #### Platforms
 
@@ -69,7 +69,7 @@ php artisan native:run --build=debug
 This single command takes care of everything and allows you to run new builds of your application without having to
 learn any new editors or platform-specific tools.
 
-<aside class="relative z-0 mt-5 overflow-hidden rounded-2xl bg-pink-50 px-5 ring-1 ring-black/5 dark:bg-pink-600/10">
+<aside>
 
 #### Rule of thumb
 
@@ -111,7 +111,7 @@ changes to any files in your Laravel app, the web view will be reloaded and your
 
 The proper way to implement this is to first `run` your app on your device/emulator, then start HMR with `npm run dev` then in a separate terminal run the `native:watch` command. This will reload any Blade/Livewire files as well as any recompiled assets (css/js etc).
 
-<aside class="relative z-0 mt-5 overflow-hidden rounded-2xl bg-pink-50 px-5 ring-1 ring-black/5 dark:bg-pink-600/10">
+<aside>
 
 #### Note
 
@@ -186,7 +186,7 @@ submit it to the stores for approval and distribution.
 - [Google Play Store submission guidelines](https://support.google.com/googleplay/android-developer/answer/9859152?hl=en-GB#zippy=%2Cmaximum-size-limit)
 - [Apple App Store submission guidelines](https://developer.apple.com/ios/submit/)
 
-<aside class="relative z-0 mt-5 overflow-hidden rounded-2xl bg-pink-50 px-5 ring-1 ring-black/5 dark:bg-pink-600/10">
+<aside>
 
 #### Skip the prompts
 

resources/views/docs/mobile/1/getting-started/environment-setup.md

@@ -14,7 +14,7 @@ Windows is with [Laravel Herd](https://herd.laravel.com). It's fast and free!
 
 ## iOS Requirements
 
-<aside class="relative z-0 mt-5 overflow-hidden rounded-2xl bg-pink-50 px-5 ring-1 ring-black/5 dark:bg-pink-600/10">
+<aside>
 
 #### Heads up!
 
@@ -70,7 +70,7 @@ to develop and test your apps on a Simulator. However, you will need to enroll w
 2. Android SDK with API 33 or higher
 3. **Windows only**: You must have [7zip](https://www.7-zip.org/) installed.
 
-<aside class="relative z-0 mt-5 overflow-hidden rounded-2xl bg-pink-50 px-5 ring-1 ring-black/5 dark:bg-pink-600/10">
+<aside>
 
 #### Note