using javascript as modules

adds Visual Guidance System modules
- includes cursor styling and functionality
- includes theme switcher  styling and functionality

src/_includes/partials/meta.njk

@@ -17,4 +17,4 @@
         font-size=%2290%22>🚀</text></svg>"/>
 <meta rel="canonical" href="{{ page.url | baseUrl }}"/>
 <link rel="stylesheet" href="/assets/styles/style.css"/>
-<script src="/assets/js/app.js" defer></script>
+<script type="module" src="/assets/js/app.js" defer></script>

src/assets/js/app.js

@@ -1,33 +1,9 @@
-(() => {
-  // theme swap
-  const html = document.documentElement;
-  // Initialize theme
-  const initTheme = (theme) => {
-    if (theme === "dark") {
-      html.setAttribute("data-theme", "dark");
-    } else {
-      html.setAttribute("data-theme", "light");
-    }
-  };
+import { initTheme } from "./modules/vgsThemeSwitcher.js";
+import { VGSCursor } from "./modules/vgsCursor.js";
 
-  const theme = localStorage.getItem("theme");
-  initTheme(theme);
+initTheme("light");
+VGSCursor();
 
-  const eclipse = document.getElementById("mode");
-
-  const toggleTheme = (state) => {
-    if (state === "dark") {
-      localStorage.setItem("theme", "light");
-      html.setAttribute("data-theme", "light");
-    } else if (state === "light") {
-      localStorage.setItem("theme", "dark");
-      html.setAttribute("data-theme", "dark");
-    } else {
-      initTheme(state);
-    }
-  };
-
-  eclipse.addEventListener("click", () => {
-    toggleTheme(localStorage.getItem("theme"));
-  });
-})();
+console.log(initTheme);
+// const test = "test";
+// console.log(`That's one small step for man, and one giant leap for mankind with a ${test}`);

src/assets/js/modules/vgsCursor.js

@@ -0,0 +1,98 @@
+/**
+ * Flightdeck - VGS Cursor - A visual guidance system (VGS)
+ * @description Initializes a custom cursor that interacts with links.
+ * @function VGSCursor
+ * @returns {void}
+ */
+export function VGSCursor() {
+  /**
+   * The cursor element.
+   * @type {HTMLElement}
+   */
+  const cursorElement = document.querySelector(".vgs-cursor");
+
+  if (cursorElement) {
+    /**
+     * The inner cursor element.
+     * @type {HTMLElement}
+     */
+    const innerCursor = document.querySelector(".cursor-inner");
+
+    /**
+     * The outer cursor element.
+     * @type {HTMLElement}
+     */
+    const outerCursor = document.querySelector(".cursor-outer");
+
+    /**
+     * The y-coordinate of the mouse.
+     * @type {number}
+     */
+    let mouseY;
+
+    /**
+     * The x-coordinate of the mouse.
+     * @type {number}
+     */
+    let mouseX = 0;
+
+    /**
+     * Whether the cursor is hovering over a clickable element.
+     * @type {boolean}
+     */
+    let isHovering = false;
+
+    /**
+     * Updates the position of the cursor based on the mouse position.
+     * @function updateCursor
+     * @param {MouseEvent} event - The mouse event.
+     * @returns {void}
+     */
+    function updateCursor(event) {
+      if (!isHovering) {
+        outerCursor.style.transform = `translate(${event.clientX}px, ${event.clientY}px)`;
+        innerCursor.style.transform = `translate(${event.clientX}px, ${event.clientY}px)`;
+        mouseY = event.clientY;
+        mouseX = event.clientX;
+      }
+    }
+
+    /**
+     * Handles the mouseover event for clickable elements.
+     * @function handleMouseOver
+     * @param {MouseEvent} event - The mouse event.
+     * @returns {void}
+     */
+    function handleMouseOver(event) {
+      if (event.target.matches("a, .cursor-pointer")) {
+        innerCursor.classList.add("cursor-hover");
+        outerCursor.classList.add("cursor-hover");
+        isHovering = true;
+      }
+    }
+
+    /**
+     * Handles the mouseout event for clickable elements.
+     * @function handleMouseOut
+     * @param {MouseEvent} event - The mouse event.
+     * @returns {void}
+     */
+    function handleMouseOut(event) {
+      if (
+        !event.target.matches("a, .cursor-pointer") &&
+        (!event.relatedTarget || !event.relatedTarget.matches("a, .cursor-pointer"))
+      ) {
+        innerCursor.classList.remove("cursor-hover");
+        outerCursor.classList.remove("cursor-hover");
+        isHovering = false;
+      }
+    }
+
+    window.addEventListener("mousemove", updateCursor);
+    document.body.addEventListener("mouseover", handleMouseOver);
+    document.body.addEventListener("mouseout", handleMouseOut);
+
+    innerCursor.style.visibility = "visible";
+    outerCursor.style.visibility = "visible";
+  }
+}

src/assets/js/modules/vgsThemeSwitcher.js

@@ -0,0 +1,31 @@
+// Export the functions
+export const initTheme = () => {
+  const html = document.documentElement;
+
+  // Get the stored theme from local storage
+  const storedTheme = localStorage.getItem("theme");
+
+  // Set theme on root element
+  html.setAttribute("data-theme", storedTheme || "light");
+
+  // Set theme in local storage
+  localStorage.setItem("theme", storedTheme || "light");
+};
+
+export const toggleTheme = () => {
+  const html = document.documentElement;
+  const currentTheme = html.getAttribute("data-theme");
+  const targetTheme = currentTheme === "light" ? "dark" : "light";
+
+  // Set theme on root element
+  html.setAttribute("data-theme", targetTheme);
+
+  // Set theme in local storage
+  localStorage.setItem("theme", targetTheme);
+};
+
+// Initialize the theme when the page loads
+initTheme();
+
+// Add a click event listener to the "mode" element
+document.getElementById("mode").addEventListener("click", toggleTheme);

src/assets/styles/_autopilot.scss

@@ -35,7 +35,8 @@
 @import "components/nav"; // nav
 @import "components/progress"; // progress
 @import "components/dropdown"; // dropdown
-@import "components/theme-switch"; // theme-switcher
+@import "components/vgsThemeSwitch"; // theme-switcher
+@import "components/vgsCursor"; // vgs cursor styling
 
 // Utilities
 @import "utilities/loading"; // aria-busy=true

src/assets/styles/components/_vgsCursor.scss

@@ -0,0 +1,48 @@
+.vgs-cursor {
+  position: fixed;
+  left: 0;
+  top: 0;
+  pointer-events: none;
+  border-radius: 50%;
+  -webkit-transform: translateZ(0);
+  transform: translateZ(0);
+  visibility: hidden;
+}
+
+.cursor-inner {
+  margin-left: -3px;
+  margin-top: -3px;
+  width: 6px;
+  height: 6px;
+  z-index: 100;
+  background-color: var(--primary-hover);
+  -webkit-transition: width 0.3s ease-in-out, height 0.3s ease-in-out, margin 0.3s ease-in-out, opacity 0.3s ease-in-out;
+  transition: width 0.3s ease-in-out, height 0.3s ease-in-out, margin 0.3s ease-in-out, opacity 0.3s ease-in-out;
+
+  &.cursor-hover {
+    margin-left: -40px;
+    margin-top: -40px;
+    width: 80px;
+    height: 80px;
+    background-color: var(--primary-hover);
+    opacity: 0.3;
+  }
+}
+
+.cursor-outer {
+  margin-left: -15px;
+  margin-top: -15px;
+  width: 30px;
+  height: 30px;
+  border: 2px solid var(--primary-hover);
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  z-index: 100;
+  opacity: 0.5;
+  -webkit-transition: all 0.08s ease-out;
+  transition: all 0.08s ease-out;
+
+  &.cursor-hover {
+    opacity: 0;
+  }
+}