JS Cleanup, Adds Focus Alpine Plugin

package-lock.json

@@ -4,6 +4,9 @@
     "requires": true,
     "packages": {
         "": {
+            "dependencies": {
+                "@alpinejs/focus": "^3.14.1"
+            },
             "devDependencies": {
                 "@tailwindcss/forms": "^0.5.7",
                 "@tailwindcss/typography": "^0.5.10",
@@ -31,6 +34,16 @@
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
+        "node_modules/@alpinejs/focus": {
+            "version": "3.14.1",
+            "resolved": "https://registry.npmjs.org/@alpinejs/focus/-/focus-3.14.1.tgz",
+            "integrity": "sha512-z4xdpK6X1LB2VitsWbL61tmABoOORuEhE5v2tnUX/be6/nAygXyeDxZ1x9s1u+bOEYlIOXXLmjdmTlhchUVWxw==",
+            "license": "MIT",
+            "dependencies": {
+                "focus-trap": "^6.9.4",
+                "tabbable": "^5.3.3"
+            }
+        },
         "node_modules/@esbuild/aix-ppc64": {
             "version": "0.21.5",
             "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
@@ -1276,6 +1289,15 @@
                 "node": ">=8"
             }
         },
+        "node_modules/focus-trap": {
+            "version": "6.9.4",
+            "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-6.9.4.tgz",
+            "integrity": "sha512-v2NTsZe2FF59Y+sDykKY+XjqZ0cPfhq/hikWVL88BqLivnNiEffAsac6rP6H45ff9wG9LL5ToiDqrLEP9GX9mw==",
+            "license": "MIT",
+            "dependencies": {
+                "tabbable": "^5.3.3"
+            }
+        },
         "node_modules/follow-redirects": {
             "version": "1.15.6",
             "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
@@ -2421,6 +2443,12 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
+        "node_modules/tabbable": {
+            "version": "5.3.3",
+            "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-5.3.3.tgz",
+            "integrity": "sha512-QD9qKY3StfbZqWOPLp0++pOrAVb/HbUi5xCc8cUo4XjP19808oaMiDzn0leBY5mCespIBM0CIZePzZjgzR83kA==",
+            "license": "MIT"
+        },
         "node_modules/tailwindcss": {
             "version": "3.4.4",
             "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.4.tgz",

package.json

@@ -17,5 +17,8 @@
         "prettier-plugin-tailwindcss": "^0.6.5",
         "tailwindcss": "^3.4.0",
         "vite": "^5.0"
+    },
+    "dependencies": {
+        "@alpinejs/focus": "^3.14.1"
     }
 }

resources/js/app.js

@@ -1,57 +1,3 @@
-import "./bootstrap";
-
-import.meta.glob(["../video/**"]);
-
-document.addEventListener("DOMContentLoaded", function() {
-    const themeToggleIcon = {
-        dark: document.getElementById("theme-toggle-dark-icon"),
-        light: document.getElementById("theme-toggle-light-icon")
-    };
-
-    // Make sure the theme toggle icons are available.
-    if (themeToggleIcon.dark === null || themeToggleIcon.light === null) {
-        console.log("Theme toggle icons not found.");
-        return;
-    }
-
-    // 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 {
-            themeToggleIcon.dark.classList.remove("hidden");
-            themeToggleIcon.light.classList.add("hidden");
-        }
-    }
-
-    // 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() {
-        // 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);
-    });
-});
+import "./registerViteAssets";
+import "./registerAlpineLivewire";
+import "./themeToggle";

resources/js/bootstrap.js

@@ -1,4 +0,0 @@
-import axios from "axios";
-
-window.axios = axios;
-window.axios.defaults.headers.common["X-Requested-With"] = "XMLHttpRequest";

resources/js/registerAlpineLivewire.js

@@ -0,0 +1,6 @@
+import { Alpine, Livewire } from "../../vendor/livewire/livewire/dist/livewire.esm";
+import focus from "@alpinejs/focus";
+
+Alpine.plugin(focus);
+
+Livewire.start();

resources/js/registerViteAssets.js

@@ -0,0 +1,2 @@
+// Register all site assets for Vite to include in the build.
+import.meta.glob(["../video/**"]);

resources/js/themeToggle.js

@@ -0,0 +1,53 @@
+document.addEventListener("DOMContentLoaded", function() {
+    const themeToggleIcon = {
+        dark: document.getElementById("theme-toggle-dark-icon"),
+        light: document.getElementById("theme-toggle-light-icon")
+    };
+
+    // Make sure the theme toggle icons are available.
+    if (themeToggleIcon.dark === null || themeToggleIcon.light === null) {
+        console.log("Theme toggle icons not found.");
+        return;
+    }
+
+    // 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 {
+            themeToggleIcon.dark.classList.remove("hidden");
+            themeToggleIcon.light.classList.add("hidden");
+        }
+    }
+
+    // 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() {
+        // 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

@@ -56,6 +56,6 @@
 @livewire('global-search')
 @stack('modals')
 
-@livewireScripts
+@livewireScriptConfig
 </body>
 </html>

resources/views/layouts/guest.blade.php

@@ -35,6 +35,6 @@
     {{ $slot }}
 </div>
 
-@livewireScripts
+@livewireScriptConfig
 </body>
 </html>