clean up, minify javascript

_includes/layouts/header.njk

@@ -1,15 +1,21 @@
 {% set css %}
-{% include "styles/base.css" %}
-{% include "styles/font.css" %}
-{% include "styles/accessibility.css" %}
-{% include "styles/navbar.css" %}
-{% include "styles/windows.css" %}
-{% include "styles/footer.css" %}
-{% include "styles/animations.css" %}
-{% include "styles/icons.css" %}
-{% include "styles/pages/home.css" %}
-{% include "styles/pages/notebook.css" %}
-{% include "styles/pages/sneexy.css" %}
+        {% include "styles/base.css" %}
+        {% include "styles/font.css" %}
+        {% include "styles/accessibility.css" %}
+        {% include "styles/navbar.css" %}
+        {% include "styles/windows.css" %}
+        {% include "styles/footer.css" %}
+        {% include "styles/animations.css" %}
+        {% include "styles/icons.css" %}
+        {% include "styles/pages/home.css" %}
+        {% include "styles/pages/notebook.css" %}
+        {% include "styles/pages/sneexy.css" %}
+{% endset %}
+
+{% set js %}
+        {% include "scripts/alt-popup.js" %}
+        {% include "scripts/button.js" %}
+        {% include "scripts/settings.js" %}
 {% endset %}
 
         <meta charset="UTF-8">
@@ -24,9 +30,7 @@
         <meta name="generator" content="{{ eleventy.generator }}">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <meta property="og:url" content="https://synth.download/">
-        <link rel="stylesheet" href="/pagefind/pagefind-ui.css">
         <style>{{ css | cssmin | safe }}</style>
-        <script src="/pagefind/pagefind-ui.js"></script>
-        <script src="/scripts/alt-popup.js"></script>
-        <script src="/scripts/button.js"></script>
-        <script src="/scripts/settings.js"></script>
+        <script>{{ js | jsmin | safe }}</script>
+        <link rel="stylesheet" href="/pagefind/pagefind-ui.css">
+        <script src="/pagefind/pagefind-ui.js"></script>

_includes/scripts/alt-popup.js

@@ -0,0 +1,100 @@
+// custom popups that appear on hover that uses the alt/aria-label attribute on elements
+// replacement for using title without the issue it causes with screen readers and such
+document.addEventListener("DOMContentLoaded", function () {
+    let popup = document.getElementById("alt-popup");
+
+    // add popup to all elements with alt or aria-label
+    function initializePopups() {
+        // find all elements with alt or aria-label
+        const elementsWithAlt = document.querySelectorAll("[alt], [aria-label]");
+
+        // add mouse events to each element
+        elementsWithAlt.forEach((element) => {
+            element.addEventListener("mousemove", showPopup);
+            element.addEventListener("mouseout", hidePopup);
+        });
+    }
+
+    // show popup and position it near the cursor
+    function showPopup(event) {
+        // get alt text or aria-label
+        const altText = event.target.getAttribute("alt");
+        const ariaLabel = event.target.getAttribute("aria-label");
+        
+        // Use alt text if available, otherwise use aria-label
+        const displayText = altText || ariaLabel;
+
+        if (displayText) {
+            // use text in popup
+            popup.textContent = displayText;
+            
+            // Make the popup visible but with position:fixed and visibility:hidden
+            // so we can measure its dimensions without it being visible yet
+            popup.style.opacity = "0";
+            popup.style.visibility = "visible";
+            popup.style.position = "fixed"; // Changed from absolute to fixed
+            
+            // Get viewport dimensions
+            const viewportWidth = window.innerWidth;
+            const viewportHeight = window.innerHeight;
+            
+            // Get popup dimensions
+            const popupWidth = popup.offsetWidth;
+            const popupHeight = popup.offsetHeight;
+            
+            // Use clientX/clientY which are relative to the viewport (for fixed positioning)
+            let leftPos = event.clientX + 20;
+            let topPos = event.clientY + 20;
+            
+            // Check if popup would extend beyond right edge of viewport
+            if (leftPos + popupWidth > viewportWidth) {
+                // Flip to left side of cursor
+                leftPos = event.clientX - popupWidth - 10;
+            }
+            
+            // Check if popup would extend beyond bottom edge of viewport
+            if (topPos + popupHeight > viewportHeight) {
+                // Flip to above cursor
+                topPos = event.clientY - popupHeight - 10;
+            }
+            
+            // Additional check if flipping to left puts it offscreen
+            if (leftPos < 0) {
+                leftPos = 10;
+            }
+            
+            // Additional check if flipping to top puts it offscreen
+            if (topPos < 0) {
+                topPos = 10;
+            }
+            
+            // Set the final position and make it visible
+            popup.style.left = leftPos + "px";
+            popup.style.top = topPos + "px";
+            popup.style.opacity = "1";
+            popup.style.visibility = "visible";
+        }
+    }
+
+    function hidePopup() {
+        popup.style.opacity = "0";
+        popup.style.visibility = "hidden";
+    }
+
+    initializePopups();
+
+    if (window.MutationObserver) {
+        const observer = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                if (mutation.addedNodes.length) {
+                    initializePopups();
+                }
+            });
+        });
+
+        // Only set up the observer once
+        if (document.body) {
+            observer.observe(document.body, { childList: true, subtree: true });
+        }
+    }
+});

_includes/scripts/button.js

@@ -0,0 +1,14 @@
+// snippet that copies the html for my button(s)
+function copyButtonSneexy() {
+    navigator.clipboard.writeText(
+        '<a href="https://synth.download"><img src="https://synth.download/assets/buttons/sneexy.svg" alt="Sneexy"></a>'
+    );
+    alert("button html copied!");
+}
+
+function copyButtonSynthDownload() {
+    navigator.clipboard.writeText(
+        '<a href="https://synth.download"><img src="https://synth.download/assets/buttons/synth.download.svg" alt="Synth.Download!"></a>'
+    );
+    alert("button html copied!");
+}

_includes/scripts/settings.js

@@ -0,0 +1,97 @@
+document.addEventListener('DOMContentLoaded', function() {
+    // all available settings
+    const fontInputs = document.querySelectorAll('input[name="font-setting"]');
+    const themeInputs = document.querySelectorAll('input[name="theme-setting"]');
+    const uncapitalizationCheckbox = document.getElementById('uncapitalization');
+    const disableBgCheckbox = document.getElementById('disable-bg');
+    const disableAnimationsCheckbox = document.getElementById('disable-animations');
+    const disableAlttextCheckbox = document.getElementById('disable-alttext');
+    
+    // load saved settings
+    loadSettings();
+    applyTheme();
+    
+    // event listeners on all inputs
+    fontInputs.forEach(input => {
+        input.addEventListener('change', saveSettings);
+    });
+    
+    themeInputs.forEach(input => {
+        input.addEventListener('change', function() {
+            saveSettings();
+            applyTheme();
+        });
+    });
+    
+    uncapitalizationCheckbox.addEventListener('change', saveSettings);
+    disableBgCheckbox.addEventListener('change', saveSettings);
+    disableAnimationsCheckbox.addEventListener('change', saveSettings);
+    disableAlttextCheckbox.addEventListener('change', saveSettings);
+    
+    // settings saving function
+    function saveSettings() {
+        // save font setting
+        const selectedFont = document.querySelector('input[name="font-setting"]:checked').id;
+        localStorage.setItem('accessibility-font', selectedFont);
+        
+        // save theme setting
+        const selectedTheme = document.querySelector('input[name="theme-setting"]:checked').value;
+        localStorage.setItem('accessibility-theme', selectedTheme);
+        
+        // save toggle states
+        localStorage.setItem('accessibility-uncapitalization', uncapitalizationCheckbox.checked);
+        localStorage.setItem('accessibility-disable-bg', disableBgCheckbox.checked);
+        localStorage.setItem('accessibility-disable-animations', disableAnimationsCheckbox.checked);
+        localStorage.setItem('accessibility-disable-alttext', disableAlttextCheckbox.checked);
+    }
+    
+    // settings loading function
+    function loadSettings() {
+        // load the font setting
+        const savedFont = localStorage.getItem('accessibility-font');
+        if (savedFont) {
+            const fontInput = document.getElementById(savedFont);
+            if (fontInput) fontInput.checked = true;
+        }
+        
+        // load the theme setting
+        const savedTheme = localStorage.getItem('accessibility-theme');
+        if (savedTheme) {
+            const themeInput = document.querySelector(`input[name="theme-setting"][value="${savedTheme}"]`);
+            if (themeInput) themeInput.checked = true;
+        }
+        
+        // load toggle states
+        if (localStorage.getItem('accessibility-uncapitalization') === 'true') {
+            uncapitalizationCheckbox.checked = true;
+        }
+        
+        if (localStorage.getItem('accessibility-disable-bg') === 'true') {
+            disableBgCheckbox.checked = true;
+        }
+        
+        if (localStorage.getItem('accessibility-disable-animations') === 'true') {
+            disableAnimationsCheckbox.checked = true;
+        }
+        
+        if (localStorage.getItem('accessibility-disable-alttext') === 'true') {
+            disableAlttextCheckbox.checked = true;
+        }
+    }
+    
+    // apply the theme based on user preference
+    function applyTheme() {
+        const selectedTheme = document.querySelector('input[name="theme-setting"]:checked').value;
+        
+        // remove any existing theme
+        document.documentElement.removeAttribute('data-theme');
+        
+        // apply the selected theme
+        if (selectedTheme === 'light') {
+            document.documentElement.setAttribute('data-theme', 'light');
+        } else if (selectedTheme === 'dark') {
+            document.documentElement.setAttribute('data-theme', 'dark');
+        }
+        // if auto, don't set a data-theme attribute, let the media query handle it
+    }
+});