Fixes Dark Mode Script - Work on Detail Page

.editorconfig

@@ -7,12 +7,16 @@ indent_size = 4
 indent_style = space
 insert_final_newline = true
 trim_trailing_whitespace = true
+max_line_length = 120
 
 [*.md]
 trim_trailing_whitespace = false
+max_line_length = off
 
 [*.{yml,yaml,neon}]
 indent_size = 2
+max_line_length = off
 
 [docker-compose.yml]
 indent_size = 4
+max_line_length = off

.github/workflows/ci.yml

@@ -154,4 +154,6 @@ jobs:
         run: composer install -n --no-dev --prefer-dist
 
       - name: Execute Code Static Analysis with Larastan
-        run: vendor/bin/phpstan analyse -c ./phpstan.neon --no-progress
+        run: |
+          composer require --dev larastan/larastan
+          vendor/bin/phpstan analyse -c ./phpstan.neon --no-progress

app/Policies/ModPolicy.php

@@ -4,7 +4,6 @@ namespace App\Policies;
 
 use App\Models\Mod;
 use App\Models\User;
-use Illuminate\Auth\Access\Response;
 
 class ModPolicy
 {

composer.json

@@ -20,6 +20,7 @@
     },
     "require-dev": {
         "barryvdh/laravel-debugbar": "^3.13",
+        "deployer/deployer": "^7.4",
         "fakerphp/faker": "^1.23",
         "larastan/larastan": "^2.9",
         "laravel/pint": "^1.13",

composer.lock

@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "ca3ac0463e2bccac87eddb5c41b29a5b",
+    "content-hash": "40b3d2220c6f07a6c8182c49f5174d16",
     "packages": [
         {
             "name": "bacon/bacon-qr-code",
@@ -7236,6 +7236,49 @@
             ],
             "time": "2024-04-12T11:20:37+00:00"
         },
+        {
+            "name": "deployer/deployer",
+            "version": "v7.4.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/deployphp/deployer.git",
+                "reference": "b438dc22545ab2ecc67d79c80c7a79c156de3599"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/deployphp/deployer/zipball/b438dc22545ab2ecc67d79c80c7a79c156de3599",
+                "reference": "b438dc22545ab2ecc67d79c80c7a79c156de3599",
+                "shasum": ""
+            },
+            "bin": [
+                "dep"
+            ],
+            "type": "library",
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Anton Medvedev",
+                    "email": "anton@medv.io"
+                }
+            ],
+            "description": "Deployment Tool",
+            "homepage": "https://deployer.org",
+            "support": {
+                "docs": "https://deployer.org/docs",
+                "issues": "https://github.com/deployphp/deployer/issues",
+                "source": "https://github.com/deployphp/deployer"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/sponsors/antonmedv",
+                    "type": "github"
+                }
+            ],
+            "time": "2024-04-17T20:55:49+00:00"
+        },
         {
             "name": "fakerphp/faker",
             "version": "v1.23.1",

deploy.yaml

@@ -0,0 +1,24 @@
+import:
+  - recipe/laravel.php
+
+config:
+  application: 'Forge'
+  repository: 'https://github.com/SPT-AKI/forge.git'
+  keep_releases: 5
+
+hosts:
+  forge.sp-tarkov.com:
+    remote_user: deployer
+    deploy_path: '~/Forge'
+    branch: 'main'
+    env:
+      environment: production
+    labels:
+      env: prod
+
+tasks:
+  build:
+    - run: uptime
+
+after:
+  deploy:failed: deploy:unlock

resources/js/app.js

@@ -1,37 +1,49 @@
 import "./bootstrap";
 
-var themeToggleDarkIcon = document.getElementById("theme-toggle-dark-icon");
-var themeToggleLightIcon = document.getElementById("theme-toggle-light-icon");
+document.addEventListener("DOMContentLoaded", function () {
+    const themeToggleIcon = {
+        dark: document.getElementById("theme-toggle-dark-icon"),
+        light: document.getElementById("theme-toggle-light-icon"),
+    };
 
-if (
-    localStorage.getItem("color-theme") === "dark" ||
-    (!("color-theme" in localStorage) &&
-        window.matchMedia("(prefers-color-scheme: dark)").matches)
-) {
-    themeToggleLightIcon.classList.remove("hidden");
+    // Function to update the visibility of the theme icons based on the theme
+    function updateIconVisibility(theme) {
+        if (theme === "dark") {
+            themeToggleIcon.dark.classList.add("hidden");
+            themeToggleIcon.light.classList.remove("hidden");
         } else {
-    themeToggleDarkIcon.classList.remove("hidden");
+            themeToggleIcon.dark.classList.remove("hidden");
+            themeToggleIcon.light.classList.add("hidden");
+        }
     }
 
-var themeToggleBtn = document.getElementById("theme-toggle");
+    // Function to update the theme
+    function updateTheme(theme) {
+        // Update the document element class
+        document.documentElement.classList.remove("light", "dark");
+        document.documentElement.classList.add(theme);
+
+        // Update local storage
+        localStorage.setItem("forge-theme", theme);
+
+        // Update icon visibility
+        updateIconVisibility(theme);
+    }
+
+    // Initial setup: Determine the current theme and set icon visibility
+    const initialTheme =
+        localStorage.getItem("forge-theme") ||
+        (window.matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark");
+    document.documentElement.classList.add(initialTheme); // Ensure the class is set
+    updateIconVisibility(initialTheme);
+
+    // Set up the theme toggle button
+    const themeToggleBtn = document.getElementById("theme-toggle");
     themeToggleBtn.addEventListener("click", function () {
-    themeToggleDarkIcon.classList.toggle("hidden");
-    themeToggleLightIcon.classList.toggle("hidden");
-    if (localStorage.getItem("color-theme")) {
-        if (localStorage.getItem("color-theme") === "light") {
-            document.documentElement.classList.add("dark");
-            localStorage.setItem("color-theme", "dark");
-        } else {
-            document.documentElement.classList.remove("dark");
-            localStorage.setItem("color-theme", "light");
-        }
-    } else {
-        if (document.documentElement.classList.contains("dark")) {
-            document.documentElement.classList.remove("dark");
-            localStorage.setItem("color-theme", "light");
-        } else {
-            document.documentElement.classList.add("dark");
-            localStorage.setItem("color-theme", "dark");
-        }
-    }
+        // Determine the current theme by checking the classList of documentElement
+        const currentTheme = document.documentElement.classList.contains("dark") ? "dark" : "light";
+        const newTheme = currentTheme === "light" ? "dark" : "light";
+
+        updateTheme(newTheme);
+    });
 });

resources/views/layouts/app.blade.php

@@ -7,16 +7,21 @@
 
     <title>{{ config('app.name', 'The Forge') }}</title>
 
-    <link href="https://fonts.bunny.net" rel="preconnect">
-    <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet">
+    <link rel="icon" href="data:image/x-icon;base64,AA">
+    <link href="//fonts.bunny.net" rel="preconnect">
+    <link href="//fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet">
 
-    {{-- Handle setting the dark mode theme. Done here to avoid FOUC --}}
     <script>
-        if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
-            document.documentElement.classList.add('dark')
-        } else {
-            document.documentElement.classList.remove('dark')
+        // Immediately set the theme to prevent a flash of the default theme when another is set.
+        // Must be located inline, in the head, and before any CSS is loaded.
+        (function () {
+            let theme = localStorage.getItem('forge-theme');
+            if (!theme) {
+                theme = window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
+                localStorage.setItem('forge-theme', theme);
             }
+            document.documentElement.classList.add(theme);
+        })();
     </script>
 
     @vite(['resources/css/app.css', 'resources/js/app.js'])
@@ -32,14 +37,14 @@
     @livewire('navigation-menu')
 
     @if (isset($header))
-        <header class="bg-white dark:bg-gray-800 shadow dark:shadow-white">
+        <header class="bg-gray-50 dark:bg-gray-900 shadow dark:shadow-gray-950">
             <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
                 {{ $header }}
             </div>
         </header>
     @endif
 
-    <main class="py-12">
+    <main class="py-6 sm:py-12">
         {{ $slot }}
     </main>
 </div>

resources/views/layouts/guest.blade.php

@@ -5,28 +5,35 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="csrf-token" content="{{ csrf_token() }}">
 
-    <title>{{ config('app.name', 'Laravel') }}</title>
+    <title>{{ config('app.name', 'The Forge') }}</title>
 
-    <link href="https://fonts.bunny.net" rel="preconnect">
-    <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet">
+    <link rel="icon" href="data:image/x-icon;base64,AA">
+    <link href="//fonts.bunny.net" rel="preconnect">
+    <link href="//fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet">
 
-    {{-- Handle setting the dark mode theme. Done here to avoid FOUC --}}
     <script>
-        if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
-            document.documentElement.classList.add('dark')
-        } else {
-            document.documentElement.classList.remove('dark')
+        // Immediately set the theme to prevent a flash of the default theme when another is set.
+        // Must be located inline, in the head, and before any CSS is loaded.
+        (function () {
+            let theme = localStorage.getItem('forge-theme');
+            if (!theme) {
+                theme = window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
+                localStorage.setItem('forge-theme', theme);
             }
+            document.documentElement.classList.add(theme);
+        })();
     </script>
 
     @vite(['resources/css/app.css', 'resources/js/app.js'])
     @livewireStyles
 </head>
 <body>
+
 <div class="font-sans text-gray-900 antialiased">
     {{ $slot }}
 </div>
 
 @livewireScripts
+
 </body>
 </html>

resources/views/mod/show.blade.php

@@ -1,30 +1,44 @@
 <x-app-layout>
 
     <x-slot name="header">
-        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
+        <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
             {{ __('Mod Details') }}
         </h2>
     </x-slot>
 
-    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
-        <div class="bg-white dark:bg-gray-900 overflow-hidden shadow-xl dark:shadow-gray-900 sm:rounded-lg">
-            <div class="grid grid-cols-2 gap-6">
-                <div>
-                    <div>
-                        <img src="{{ $mod->thumbnail }}" alt="{{ $mod->name }}" />
-                        <h2>{{ $mod->name }}</h2>
-                        <p>{{ $mod->latestSptVersion->sptVersion->version }}</p>
-                        <p>{{ $mod->user->name }}</p>
-                        <p>{{ $mod->total_downloads }}</p>
+    <div class="grid grid-cols-1 lg:grid-cols-3 max-w-7xl mx-auto pb-6 px-4 gap-6 sm:px-6 lg:px-8">
+
+        <div class="lg:col-span-2 p-4 sm:p-6 text-center sm:text-left bg-white dark:bg-gray-950 rounded-xl shadow-md dark:shadow-gray-950 drop-shadow-2xl">
+            <div class="flex flex-col sm:flex-row gap-4 sm:gap-6">
+                <div class="grow-0 flex justify-center items-center">
+                    @if(empty($mod->thumbnail))
+                        <img src="https://placehold.co/144x144/EEE/31343C?font=source-sans-pro&text={{ $mod->name }}" alt="{{ $mod->name }}" class="block dark:hidden w-36 rounded-lg">
+                        <img src="https://placehold.co/144x144/31343C/EEE?font=source-sans-pro&text={{ $mod->name }}" alt="{{ $mod->name }}" class="hidden dark:block w-36 rounded-lg">
+                    @else
+                        <img src="{{ $mod->thumbnail }}" alt="{{ $mod->name }}" class="w-36 rounded-lg">
+                    @endif
                 </div>
-                    <div>
-                        <a href="{{ $mod->latestSptVersion->link }}">{{ __('Download') }}</a>
-                    </div>
-                </div>
-                <div>
-                    <h2>{{ __('Details') }}</h2>
+                <div class="grow flex flex-col justify-center items-center sm:items-start text-gray-800 dark:text-gray-200">
+                    <h2 class="pb-1 sm:p-0 text-3xl font-bold text-gray-900 dark:text-white">
+                        {{ $mod->name }}
+                        <span class="font-light text-nowrap text-gray-700 dark:text-gray-400">
+                            {{ $mod->latestSptVersion->version }}
+                        </span>
+                    </h2>
+                    <p>{{ __('Created by') }} {{ $mod->user->name }}</p>
+                    <p>{{ $mod->latestSptVersion->sptVersion->version }} {{ __('Compatible') }}</p>
+                    <p>{{ $mod->total_downloads }} {{ __('Downloads') }}</p>
                 </div>
             </div>
         </div>
+
+        <div class="col-span-1 flex flex-col gap-6">
+            <a href="{{ $mod->latestSptVersion->link }}" class="block">
+                <button type="button" class="w-full">{{ __('Download Latest Version') }}</button>
+            </a>
+            <h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100">{{ __('Details') }}</h2>
         </div>
+
+    </div>
+
 </x-app-layout>

resources/views/navigation-menu.blade.php

@@ -1,4 +1,4 @@
-<nav x-data="{ open: false }" class="bg-white dark:bg-gray-900 border-b border-gray-100 dark:border-gray-700">
+<nav x-data="{ open: false }" class="bg-white dark:bg-gray-950 border-b border-gray-100 dark:border-gray-800">
     {{-- Primary Navigation Menu --}}
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div class="flex justify-between h-16">