devfolio-page 0.1.0

package/dist/generator/themes/modern/script.js

@@ -0,0 +1,136 @@
+/**
+ * Modern Theme Interactive Features
+ */
+
+(function() {
+  'use strict';
+
+  // Theme Toggle
+  function toggleTheme() {
+    const current = document.body.dataset.theme || document.documentElement.dataset.theme || 'light';
+    const newTheme = current === 'light' ? 'dark' : 'light';
+
+    // Set on both html and body for CSS compatibility
+    document.documentElement.dataset.theme = newTheme;
+    document.body.dataset.theme = newTheme;
+
+    try {
+      localStorage.setItem('modern-theme', newTheme);
+    } catch (e) {
+      // localStorage not available
+    }
+  }
+
+  function loadThemePreference() {
+    try {
+      const saved = localStorage.getItem('modern-theme');
+      if (saved) {
+        // Set on both html and body for CSS compatibility
+        document.documentElement.dataset.theme = saved;
+        document.body.dataset.theme = saved;
+      }
+    } catch (e) {
+      // localStorage not available
+    }
+  }
+
+  // Smooth scroll for anchor links
+  function initSmoothScroll() {
+    document.querySelectorAll('a[href^="#"]').forEach(link => {
+      link.addEventListener('click', (e) => {
+        const href = link.getAttribute('href');
+        if (href === '#') return;
+
+        const target = document.querySelector(href);
+        if (target) {
+          e.preventDefault();
+          const headerHeight = document.querySelector('.site-header')?.offsetHeight || 64;
+          const targetPosition = target.getBoundingClientRect().top + window.scrollY - headerHeight - 24;
+
+          window.scrollTo({
+            top: targetPosition,
+            behavior: 'smooth'
+          });
+
+          history.pushState(null, '', href);
+        }
+      });
+    });
+  }
+
+  // Keyboard shortcuts
+  function initKeyboardShortcuts() {
+    document.addEventListener('keydown', (e) => {
+      if (e.target.matches('input, textarea, select')) return;
+
+      // Ctrl+T or Cmd+T: Toggle theme
+      if ((e.ctrlKey || e.metaKey) && e.key === 't') {
+        e.preventDefault();
+        toggleTheme();
+      }
+    });
+
+    // Theme toggle button click
+    document.querySelectorAll('.theme-toggle, [data-hotkey="ctrl+t"]').forEach(button => {
+      button.addEventListener('click', toggleTheme);
+    });
+  }
+
+  // Active nav highlight on scroll
+  function initScrollSpy() {
+    const sections = document.querySelectorAll('.section[id]');
+    const navLinks = document.querySelectorAll('.nav a[href^="#"]');
+
+    if (sections.length === 0 || navLinks.length === 0) return;
+
+    let ticking = false;
+
+    function updateActiveSection() {
+      const scrollPos = window.scrollY + 100;
+      let currentSection = '';
+
+      sections.forEach(section => {
+        const sectionTop = section.offsetTop;
+        const sectionHeight = section.offsetHeight;
+
+        if (scrollPos >= sectionTop && scrollPos < sectionTop + sectionHeight) {
+          currentSection = section.getAttribute('id');
+        }
+      });
+
+      navLinks.forEach(link => {
+        const href = link.getAttribute('href').substring(1);
+        if (href === currentSection) {
+          link.style.color = 'var(--text-primary)';
+        } else {
+          link.style.color = '';
+        }
+      });
+
+      ticking = false;
+    }
+
+    window.addEventListener('scroll', () => {
+      if (!ticking) {
+        requestAnimationFrame(updateActiveSection);
+        ticking = true;
+      }
+    }, { passive: true });
+
+    updateActiveSection();
+  }
+
+  // Initialize
+  function init() {
+    loadThemePreference();
+    initSmoothScroll();
+    initKeyboardShortcuts();
+    initScrollSpy();
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init);
+  } else {
+    init();
+  }
+})();