From 57cd3fe19b677869fe73c4f8cb7c04352b8ba1f9 Mon Sep 17 00:00:00 2001
From: Nathan Schneider <n@nathanschneider.info>
Date: Sat, 19 Jul 2025 21:49:44 -0600
Subject: [PATCH] Moved JS from baseof

---
 layouts/_default/baseof.html           | 52 +-------------------
 layouts/index.html                     | 66 +-------------------------
 layouts/partials/homepage-scripts.html | 65 +++++++++++++++++++++++++
 static/js/mobile-menu.js               | 50 +++++++++++++++++++
 4 files changed, 117 insertions(+), 116 deletions(-)
 create mode 100644 layouts/partials/homepage-scripts.html
 create mode 100644 static/js/mobile-menu.js

diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 41bf648..d08042d 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -75,56 +75,6 @@
         </div>
     </footer>
     
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const mobileMenuToggle = document.querySelector('.mobile-menu-toggle');
-            const navLinks = document.querySelector('.nav-links');
-            const overlay = document.querySelector('.mobile-menu-overlay');
-            const body = document.body;
-            
-            function toggleMenu() {
-                const isActive = mobileMenuToggle.classList.contains('active');
-                
-                if (isActive) {
-                    mobileMenuToggle.classList.remove('active');
-                    navLinks.classList.remove('active');
-                    overlay.classList.remove('active');
-                    body.classList.remove('menu-open');
-                } else {
-                    mobileMenuToggle.classList.add('active');
-                    navLinks.classList.add('active');
-                    overlay.classList.add('active');
-                    body.classList.add('menu-open');
-                }
-            }
-            
-            function closeMenu() {
-                mobileMenuToggle.classList.remove('active');
-                navLinks.classList.remove('active');
-                overlay.classList.remove('active');
-                body.classList.remove('menu-open');
-            }
-            
-            if (mobileMenuToggle && navLinks && overlay) {
-                mobileMenuToggle.addEventListener('click', toggleMenu);
-                
-                // Close menu when clicking on overlay
-                overlay.addEventListener('click', closeMenu);
-                
-                // Close menu when clicking on a link
-                const navLinksItems = navLinks.querySelectorAll('a');
-                navLinksItems.forEach(link => {
-                    link.addEventListener('click', closeMenu);
-                });
-                
-                // Close menu on escape key
-                document.addEventListener('keydown', function(event) {
-                    if (event.key === 'Escape') {
-                        closeMenu();
-                    }
-                });
-            }
-        });
-    </script>
+    <script src="/js/mobile-menu.js"></script>
 </body>
 </html>
diff --git a/layouts/index.html b/layouts/index.html
index 8e0cd10..e91e30b 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -152,69 +152,5 @@
 }
 </style>
 
-<script>
-document.addEventListener('DOMContentLoaded', function() {
-    // Case studies data - this will be populated by Hugo
-    const caseStudies = [
-        {{ range where .Site.Pages "Section" "case-studies" }}
-        {{ if and .Params.image .Title (ne .Title "Case Studies") }}
-        {
-            title: "{{ .Title | replaceRE `"` `\"` }}",
-            description: "{{ if .Description }}{{ .Description | replaceRE `"` `\"` }}{{ else }}{{ .Summary | plainify | truncate 150 | replaceRE `"` `\"` }}{{ end }}",
-            url: "{{ .RelPermalink }}",
-            image: "{{ .Params.image }}",
-            banner: {{ if .Params.banner }}"{{ .Params.banner }}"{{ else }}null{{ end }}
-        },
-        {{ end }}
-        {{ end }}
-    ].filter(study => study.title); // Remove any empty entries
-    
-    // Function to shuffle array and get random selection
-    function getRandomCases(cases, count = 3) {
-        const shuffled = [...cases].sort(() => 0.5 - Math.random());
-        return shuffled.slice(0, count);
-    }
-    
-    // Function to create case card HTML
-    function createCaseCard(caseStudy) {
-        const hasImage = caseStudy.image && caseStudy.image !== 'null' && caseStudy.image !== null;
-        const hasBanner = caseStudy.banner && caseStudy.banner !== 'null' && caseStudy.banner !== null;
-        
-        let imageHTML = '';
-        if (hasBanner) {
-            imageHTML = `
-                <a href="${caseStudy.url}" class="featured-banner-link">
-                    <div class="featured-card-banner">
-                        <img src="${caseStudy.banner}" alt="${caseStudy.title} banner" class="featured-case-banner" />
-                        ${hasImage ? `<img src="${caseStudy.image}" alt="${caseStudy.title} logo" class="featured-case-logo-overlay" />` : ''}
-                    </div>
-                </a>
-            `;
-        } else if (hasImage) {
-            imageHTML = `
-                <a href="${caseStudy.url}" class="featured-banner-link">
-                    <img src="${caseStudy.image}" alt="${caseStudy.title} logo" class="featured-case-logo" />
-                </a>
-            `;
-        }
-        
-        return `
-            <div class="featured-case-card">
-                ${imageHTML}
-                <div class="featured-case-content">
-                    <h3><a href="${caseStudy.url}" class="featured-case-title">${caseStudy.title}</a></h3>
-                    <p class="featured-case-description">${caseStudy.description}</p>
-                </div>
-            </div>
-        `;
-    }
-    
-    // Populate featured cases
-    const featuredCasesGrid = document.getElementById('featuredCasesGrid');
-    if (featuredCasesGrid && caseStudies.length > 0) {
-        const randomCases = getRandomCases(caseStudies, 3);
-        featuredCasesGrid.innerHTML = randomCases.map(createCaseCard).join('');
-    }
-});
-</script>
+{{ partial "homepage-scripts.html" . }}
 {{ end }}
\ No newline at end of file
diff --git a/layouts/partials/homepage-scripts.html b/layouts/partials/homepage-scripts.html
new file mode 100644
index 0000000..edd9d00
--- /dev/null
+++ b/layouts/partials/homepage-scripts.html
@@ -0,0 +1,65 @@
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    // Case studies data - this will be populated by Hugo
+    const caseStudies = [
+        {{ range where .Site.Pages "Section" "case-studies" }}
+        {{ if and .Params.image .Title (ne .Title "Case Studies") }}
+        {
+            title: "{{ .Title | replaceRE `"` `\"` }}",
+            description: "{{ if .Description }}{{ .Description | replaceRE `"` `\"` }}{{ else }}{{ .Summary | plainify | truncate 150 | replaceRE `"` `\"` }}{{ end }}",
+            url: "{{ .RelPermalink }}",
+            image: "{{ .Params.image }}",
+            banner: {{ if .Params.banner }}"{{ .Params.banner }}"{{ else }}null{{ end }}
+        },
+        {{ end }}
+        {{ end }}
+    ].filter(study => study.title); // Remove any empty entries
+    
+    // Function to shuffle array and get random selection
+    function getRandomCases(cases, count = 3) {
+        const shuffled = [...cases].sort(() => 0.5 - Math.random());
+        return shuffled.slice(0, count);
+    }
+    
+    // Function to create case card HTML
+    function createCaseCard(caseStudy) {
+        const hasImage = caseStudy.image && caseStudy.image !== 'null' && caseStudy.image !== null;
+        const hasBanner = caseStudy.banner && caseStudy.banner !== 'null' && caseStudy.banner !== null;
+        
+        let imageHTML = '';
+        if (hasBanner) {
+            imageHTML = `
+                <a href="${caseStudy.url}" class="featured-banner-link">
+                    <div class="featured-card-banner">
+                        <img src="${caseStudy.banner}" alt="${caseStudy.title} banner" class="featured-case-banner" />
+                        ${hasImage ? `<img src="${caseStudy.image}" alt="${caseStudy.title} logo" class="featured-case-logo-overlay" />` : ''}
+                    </div>
+                </a>
+            `;
+        } else if (hasImage) {
+            imageHTML = `
+                <a href="${caseStudy.url}" class="featured-banner-link">
+                    <img src="${caseStudy.image}" alt="${caseStudy.title} logo" class="featured-case-logo" />
+                </a>
+            `;
+        }
+        
+        return `
+            <div class="featured-case-card">
+                ${imageHTML}
+                <div class="featured-case-content">
+                    <h3><a href="${caseStudy.url}" class="featured-case-title">${caseStudy.title}</a></h3>
+                    <p class="featured-case-description">${caseStudy.description}</p>
+                </div>
+            </div>
+        `;
+    }
+    
+    // Populate featured cases
+    const featuredCasesGrid = document.getElementById('featuredCasesGrid');
+    if (featuredCasesGrid && caseStudies.length > 0) {
+        const randomCases = getRandomCases(caseStudies, 3);
+        featuredCasesGrid.innerHTML = randomCases.map(createCaseCard).join('');
+    }
+});
+</script>
\ No newline at end of file
diff --git a/static/js/mobile-menu.js b/static/js/mobile-menu.js
new file mode 100644
index 0000000..3cb55d2
--- /dev/null
+++ b/static/js/mobile-menu.js
@@ -0,0 +1,50 @@
+// Mobile Menu Functionality
+document.addEventListener('DOMContentLoaded', function() {
+    const mobileMenuToggle = document.querySelector('.mobile-menu-toggle');
+    const navLinks = document.querySelector('.nav-links');
+    const overlay = document.querySelector('.mobile-menu-overlay');
+    const body = document.body;
+    
+    function toggleMenu() {
+        const isActive = mobileMenuToggle.classList.contains('active');
+        
+        if (isActive) {
+            mobileMenuToggle.classList.remove('active');
+            navLinks.classList.remove('active');
+            overlay.classList.remove('active');
+            body.classList.remove('menu-open');
+        } else {
+            mobileMenuToggle.classList.add('active');
+            navLinks.classList.add('active');
+            overlay.classList.add('active');
+            body.classList.add('menu-open');
+        }
+    }
+    
+    function closeMenu() {
+        mobileMenuToggle.classList.remove('active');
+        navLinks.classList.remove('active');
+        overlay.classList.remove('active');
+        body.classList.remove('menu-open');
+    }
+    
+    if (mobileMenuToggle && navLinks && overlay) {
+        mobileMenuToggle.addEventListener('click', toggleMenu);
+        
+        // Close menu when clicking on overlay
+        overlay.addEventListener('click', closeMenu);
+        
+        // Close menu when clicking on a link
+        const navLinksItems = navLinks.querySelectorAll('a');
+        navLinksItems.forEach(link => {
+            link.addEventListener('click', closeMenu);
+        });
+        
+        // Close menu on escape key
+        document.addEventListener('keydown', function(event) {
+            if (event.key === 'Escape') {
+                closeMenu();
+            }
+        });
+    }
+});
\ No newline at end of file