wip

Author: simonhamp

resources/css/app.css

@@ -279,3 +279,21 @@ nav.docs-navigation > ul > li > ul {
     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;
+}

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 class="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">
 
 #### 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 class="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">
 
 #### Can you sponsor?
 

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 class="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">
 
 [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 class="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">
 
 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 class="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">
 
 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 class="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">
 
 #### 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 class="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">
 
 #### 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 class="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">
 
 #### 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 class="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">
 
 #### 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 class="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">
 
 #### 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 class="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">
 
 #### Note
 

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

@@ -22,7 +22,7 @@ Thank you for supporting the project in this way! 🙏
 
 ## Install the Composer package
 
-<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 class="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">
 
 #### We love Laravel
 
@@ -46,13 +46,13 @@ Then run:
 ```shell
 composer require nativephp/mobile
 ```
-<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 class="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">
 
 If you experience a cURL error when running this command, make sure you are running PHP 8.3+ in your CLI.
 
 </aside>
 
-<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 class="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">
 
 #### Windows Performance Tip
 
@@ -81,7 +81,7 @@ NATIVEPHP_APP_VERSION_CODE="1"
 Find out more about these options in
 [Configuration](/docs/getting-started/configuration#codenativephp-app-idcode).
 
-<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 class="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">
 
 #### Setting your Apple Developer Team ID
 
@@ -108,7 +108,7 @@ your application relies on the `intl` PHP extension.
 
 If you don't need `intl` or are not sure, choose the default, non-ICU builds.
 
-<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 class="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">
 
 #### Planning to use Filament?
 

resources/views/docs/mobile/1/getting-started/quick-start.md

@@ -5,7 +5,7 @@ order: 2
 
 ## Let's go!
 
-<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 class="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">
 
 #### License Required!
 

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

@@ -33,7 +33,7 @@ We're working on adding more and more features, including (in no particular orde
  - Ads
  - In-app billing
 
-<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 class="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">
 
 #### Something missing?