jekyll-theme-zer0 0.17.0 → 0.18.0

data/assets/js/code-copy.js

@@ -1,27 +1,93 @@
 document.addEventListener('DOMContentLoaded', function () {
+  // Enhanced code copy functionality with better UX
   document
-    .querySelectorAll('pre.highlight')
+    .querySelectorAll('pre.highlight, pre code')
     .forEach(function (pre) {
+      // Skip if already has copy button
+      if (pre.querySelector('.copy')) return;
+      
+      // Find the actual pre element (might be parent)
+      var preElement = pre.tagName === 'PRE' ? pre : pre.closest('pre');
+      if (!preElement) return;
+      
       var button = document.createElement('button');
       var copyText = 'Copy';
+      var copiedText = 'Copied!';
       button.className = 'copy';
       button.type = 'button';
-      button.ariaLabel = 'Copy code to clipboard';
-      button.innerText = copyText;
-      button.tabIndex = 1; // Add this line to make the button focusable with the keyboard
-      button.addEventListener('click', function () {
-        var code = pre.querySelector('code').innerText
+      button.setAttribute('aria-label', 'Copy code to clipboard');
+      button.setAttribute('title', 'Copy code to clipboard');
+      button.innerHTML = '<i class="bi bi-clipboard me-1"></i>' + copyText;
+      button.tabIndex = 0;
+      
+      // Enhanced click handler with better feedback
+      button.addEventListener('click', function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        
+        var codeElement = preElement.querySelector('code');
+        if (!codeElement) return;
+        
+        var code = codeElement.innerText
           .split('\n')
           .filter(line => !line.trim().startsWith('#'))
           .join('\n')
           .trim();
-        navigator.clipboard.writeText(code);
-        button.innerText = 'Copied';
-        setTimeout(function () {
-          button.innerText = copyText;
-        }, 4000);
+        
+        // Use modern Clipboard API with fallback
+        if (navigator.clipboard && navigator.clipboard.writeText) {
+          navigator.clipboard.writeText(code).then(function() {
+            // Success feedback
+            button.innerHTML = '<i class="bi bi-check-circle me-1"></i>' + copiedText;
+            button.classList.add('copied');
+            
+            setTimeout(function () {
+              button.innerHTML = '<i class="bi bi-clipboard me-1"></i>' + copyText;
+              button.classList.remove('copied');
+            }, 2000);
+          }).catch(function(err) {
+            console.error('Failed to copy:', err);
+            fallbackCopy(code, button, copyText);
+          });
+        } else {
+          fallbackCopy(code, button, copyText);
+        }
       });
-      pre.appendChild(button);
-      pre.classList.add('has-copy-button'); // Add a class to the pre element
+      
+      // Ensure pre has position relative for absolute positioning
+      if (getComputedStyle(preElement).position === 'static') {
+        preElement.style.position = 'relative';
+      }
+      
+      preElement.appendChild(button);
+      preElement.classList.add('has-copy-button');
     });
+  
+  // Fallback copy method for older browsers
+  function fallbackCopy(text, button, copyText) {
+    var textArea = document.createElement('textarea');
+    textArea.value = text;
+    textArea.style.position = 'fixed';
+    textArea.style.opacity = '0';
+    document.body.appendChild(textArea);
+    textArea.select();
+    
+    try {
+      document.execCommand('copy');
+      button.innerHTML = '<i class="bi bi-check-circle me-1"></i>Copied!';
+      button.classList.add('copied');
+      setTimeout(function () {
+        button.innerHTML = '<i class="bi bi-clipboard me-1"></i>' + copyText;
+        button.classList.remove('copied');
+      }, 2000);
+    } catch (err) {
+      console.error('Fallback copy failed:', err);
+      button.innerHTML = '<i class="bi bi-x-circle me-1"></i>Failed';
+      setTimeout(function () {
+        button.innerHTML = '<i class="bi bi-clipboard me-1"></i>' + copyText;
+      }, 2000);
+    }
+    
+    document.body.removeChild(textArea);
+  }
 });

data/assets/js/modules/navigation/keyboard.js

@@ -103,6 +103,11 @@ export class KeyboardShortcuts {
                     this._toggleToc();
                 }
                 break;
+            default:
+                if (event.code === 'Slash' && keys.search === '/') {
+                    event.preventDefault();
+                    this._focusSearch();
+                }
         }
     }
 
@@ -169,10 +174,12 @@ export class KeyboardShortcuts {
      */
     _focusSearch() {
         const searchInput = document.querySelector('#search-input, [data-search-input]');
-        if (searchInput) {
+        const searchModal = searchInput?.closest('.modal');
+        const modalVisible = searchModal?.classList.contains('show');
+
+        if (searchInput && (!searchModal || modalVisible)) {
             searchInput.focus();
         } else {
-            console.log('KeyboardShortcuts: Search not yet implemented');
             // Dispatch event so other modules can handle
             document.dispatchEvent(new CustomEvent('navigation:searchRequest'));
         }

data/assets/js/search-modal.js

@@ -0,0 +1,239 @@
+/**
+ * Search Modal Controller
+ * - Opens modal on navigation:searchRequest event ("/" shortcut)
+ * - Focuses search input on open
+ */
+(function() {
+    'use strict';
+
+    function initSearchModal() {
+        const modalEl = document.getElementById('siteSearchModal');
+        if (!modalEl) return;
+
+        const searchInput = modalEl.querySelector('[data-search-input]');
+        const searchForm = modalEl.querySelector('[data-search-form]');
+        const resultsContainer = modalEl.querySelector('[data-search-results]');
+        const emptyState = modalEl.querySelector('[data-search-empty]');
+        const searchIndexUrl = new URL('/search.json', window.location.origin);
+        let searchIndex = null;
+        let searchIndexPromise = null;
+        let searchTimeout = null;
+
+        const openModal = () => {
+            const modalInstance = typeof bootstrap !== 'undefined'
+                ? bootstrap.Modal.getOrCreateInstance(modalEl)
+                : null;
+
+            if (modalInstance) {
+                modalInstance.show();
+            }
+        };
+
+        // Open modal when keyboard shortcut requests search
+        document.addEventListener('navigation:searchRequest', openModal);
+
+        // Open modal when clicking a search toggle button
+        document.querySelectorAll('[data-search-toggle]').forEach((button) => {
+            button.addEventListener('click', (event) => {
+                event.preventDefault();
+                openModal();
+            });
+        });
+
+        // Fallback keyboard shortcut ("/" or Cmd/Ctrl+K) in case other modules are unavailable
+        document.addEventListener('keydown', (event) => {
+            if (event.target.matches('input, textarea, select, [contenteditable="true"]')) {
+                return;
+            }
+            const isSearchSlash = event.key === '/' || event.code === 'Slash';
+            const isSearchShortcut = (event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'k';
+            if (isSearchSlash || isSearchShortcut) {
+                event.preventDefault();
+                openModal();
+            }
+        });
+
+        // Ensure focus on input once modal is shown
+        modalEl.addEventListener('shown.bs.modal', () => {
+            if (searchInput) {
+                searchInput.focus();
+                searchInput.select();
+            }
+            if (searchInput && searchInput.value.trim()) {
+                triggerSearch();
+            }
+        });
+
+        // Clear input when modal closes
+        modalEl.addEventListener('hidden.bs.modal', () => {
+            if (searchInput) {
+                searchInput.value = '';
+            }
+            clearResults();
+        });
+
+        // Prevent empty submissions
+        if (searchForm && searchInput) {
+            searchForm.addEventListener('submit', (event) => {
+                if (!searchInput.value.trim()) {
+                    event.preventDefault();
+                    searchInput.focus();
+                }
+            });
+        }
+
+        if (searchInput) {
+            searchInput.addEventListener('input', () => {
+                clearTimeout(searchTimeout);
+                searchTimeout = setTimeout(() => triggerSearch(), 200);
+            });
+        }
+
+        function clearResults() {
+            if (!resultsContainer) return;
+            resultsContainer.innerHTML = '';
+            if (emptyState) {
+                emptyState.textContent = 'Start typing to see results.';
+                emptyState.classList.remove('d-none');
+                resultsContainer.appendChild(emptyState);
+            }
+        }
+
+        function renderResults(items, query) {
+            if (!resultsContainer) return;
+            resultsContainer.innerHTML = '';
+
+            if (!query) {
+                clearResults();
+                return;
+            }
+
+            if (!items.length) {
+                const empty = document.createElement('div');
+                empty.className = 'text-muted small';
+                empty.textContent = 'No results found.';
+                resultsContainer.appendChild(empty);
+                return;
+            }
+
+            const list = document.createElement('div');
+            list.className = 'list-group';
+
+            items.slice(0, 8).forEach((item) => {
+                const link = document.createElement('a');
+                link.className = 'list-group-item list-group-item-action';
+                link.href = item.url;
+
+                const title = document.createElement('div');
+                title.className = 'fw-semibold';
+                title.innerHTML = highlightText(item.title || 'Untitled', query);
+                link.appendChild(title);
+
+                const snippet = buildSnippet(item, query);
+                if (snippet) {
+                    const desc = document.createElement('div');
+                    desc.className = 'small text-muted';
+                    desc.innerHTML = highlightText(snippet, query);
+                    link.appendChild(desc);
+                }
+
+                list.appendChild(link);
+            });
+
+            resultsContainer.appendChild(list);
+
+            const viewAll = document.createElement('a');
+            viewAll.className = 'd-block mt-2 small';
+            viewAll.href = `/sitemap/?q=${encodeURIComponent(query)}`;
+            viewAll.textContent = 'View all results';
+            resultsContainer.appendChild(viewAll);
+        }
+
+        function escapeHtml(value) {
+            return String(value)
+                .replace(/&/g, '&')
+                .replace(/</g, '&lt;')
+                .replace(/>/g, '&gt;')
+                .replace(/"/g, '&quot;')
+                .replace(/'/g, '&#39;');
+        }
+
+        function highlightText(text, query) {
+            if (!query) return escapeHtml(text);
+            const escaped = escapeHtml(text);
+            const escapedQuery = query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+            const regex = new RegExp(`(${escapedQuery})`, 'ig');
+            return escaped.replace(regex, '<mark>$1</mark>');
+        }
+
+        function buildSnippet(item, query) {
+            const description = item.description || '';
+            const content = item.content || '';
+            if (!description && !content) return '';
+
+            const lowerQuery = query.toLowerCase();
+            const lowerContent = content.toLowerCase();
+            const lowerDescription = description.toLowerCase();
+
+            let sourceText = content;
+            let index = lowerContent.indexOf(lowerQuery);
+
+            if (index === -1 && description) {
+                sourceText = description;
+                index = lowerDescription.indexOf(lowerQuery);
+            }
+
+            if (index === -1) {
+                const fallback = content || description;
+                return fallback.length > 140 ? `${fallback.slice(0, 140)}...` : fallback;
+            }
+
+            const start = Math.max(0, index - 60);
+            const end = Math.min(sourceText.length, index + 80);
+            const prefix = start > 0 ? '... ' : '';
+            const suffix = end < sourceText.length ? ' ...' : '';
+            return `${prefix}${sourceText.slice(start, end)}${suffix}`;
+        }
+
+        function loadSearchIndex() {
+            if (searchIndex) return Promise.resolve(searchIndex);
+            if (!searchIndexPromise) {
+                searchIndexPromise = fetch(searchIndexUrl.toString())
+                    .then((response) => (response.ok ? response.json() : []))
+                    .then((data) => {
+                        searchIndex = Array.isArray(data) ? data : [];
+                        return searchIndex;
+                    })
+                    .catch(() => []);
+            }
+            return searchIndexPromise;
+        }
+
+        function triggerSearch() {
+            if (!searchInput) return;
+            const query = searchInput.value.trim().toLowerCase();
+
+            if (!query) {
+                renderResults([], '');
+                return;
+            }
+
+            loadSearchIndex().then((index) => {
+                const matches = index.filter((item) => {
+                    const title = (item.title || '').toLowerCase();
+                    const description = (item.description || '').toLowerCase();
+                    const content = (item.content || '').toLowerCase();
+                    return title.includes(query) || description.includes(query) || content.includes(query);
+                });
+
+                renderResults(matches, query);
+            });
+        }
+    }
+
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', initSearchModal);
+    } else {
+        initSearchModal();
+    }
+})();

data/assets/js/ui-enhancements.js

@@ -0,0 +1,164 @@
+/**
+ * UI/UX Enhancements for zer0-mistakes Theme
+ * Adds smooth scroll animations, intersection observer effects, and enhanced interactions
+ */
+
+(function() {
+  'use strict';
+
+  // Check for reduced motion preference
+  const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+  /**
+   * Initialize scroll animations for elements with animate-on-scroll class
+   */
+  function initScrollAnimations() {
+    if (prefersReducedMotion) return;
+
+    const animatedElements = document.querySelectorAll('.animate-on-scroll');
+    
+    if (!animatedElements.length) return;
+
+    const observerOptions = {
+      threshold: 0.1,
+      rootMargin: '0px 0px -50px 0px'
+    };
+
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          entry.target.style.opacity = '1';
+          entry.target.style.transform = 'translateY(0)';
+          observer.unobserve(entry.target);
+        }
+      });
+    }, observerOptions);
+
+    animatedElements.forEach(el => {
+      el.style.opacity = '0';
+      el.style.transform = 'translateY(30px)';
+      el.style.transition = 'opacity 0.6s ease-out, transform 0.6s ease-out';
+      observer.observe(el);
+    });
+  }
+
+  /**
+   * Smooth scroll for anchor links
+   */
+  function initSmoothScroll() {
+    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+      anchor.addEventListener('click', function(e) {
+        const href = this.getAttribute('href');
+        if (href === '#' || href === '') return;
+        
+        const target = document.querySelector(href);
+        if (target) {
+          e.preventDefault();
+          const offsetTop = target.offsetTop - 80; // Account for fixed navbar
+          
+          window.scrollTo({
+            top: offsetTop,
+            behavior: prefersReducedMotion ? 'auto' : 'smooth'
+          });
+        }
+      });
+    });
+  }
+
+  /**
+   * Add loading state to images
+   */
+  function initImageLoading() {
+    const images = document.querySelectorAll('img[loading="lazy"]');
+    
+    images.forEach(img => {
+      if (img.complete) {
+        img.classList.add('loaded');
+      } else {
+        img.addEventListener('load', function() {
+          this.classList.add('loaded');
+        });
+      }
+    });
+  }
+
+  /**
+   * Enhance button ripple effect
+   */
+  function initButtonRipples() {
+    if (prefersReducedMotion) return;
+
+    document.querySelectorAll('.btn').forEach(button => {
+      button.addEventListener('click', function(e) {
+        const ripple = document.createElement('span');
+        const rect = this.getBoundingClientRect();
+        const size = Math.max(rect.width, rect.height);
+        const x = e.clientX - rect.left - size / 2;
+        const y = e.clientY - rect.top - size / 2;
+        
+        ripple.style.width = ripple.style.height = size + 'px';
+        ripple.style.left = x + 'px';
+        ripple.style.top = y + 'px';
+        ripple.classList.add('ripple');
+        
+        this.appendChild(ripple);
+        
+        setTimeout(() => {
+          ripple.remove();
+        }, 600);
+      });
+    });
+  }
+
+  /**
+   * Add active state to navigation links on scroll
+   */
+  function initScrollSpy() {
+    const sections = document.querySelectorAll('section[id], [id^="get-started"], [id^="features"]');
+    const navLinks = document.querySelectorAll('a[href^="#"]');
+    
+    if (!sections.length || !navLinks.length) return;
+
+    const observerOptions = {
+      threshold: 0.3,
+      rootMargin: '-80px 0px -50% 0px'
+    };
+
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          const id = entry.target.getAttribute('id');
+          navLinks.forEach(link => {
+            link.classList.remove('active');
+            if (link.getAttribute('href') === `#${id}`) {
+              link.classList.add('active');
+            }
+          });
+        }
+      });
+    }, observerOptions);
+
+    sections.forEach(section => observer.observe(section));
+  }
+
+  /**
+   * Initialize all enhancements
+   */
+  function init() {
+    // Wait for DOM to be fully loaded
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', init);
+      return;
+    }
+
+    initScrollAnimations();
+    initSmoothScroll();
+    initImageLoading();
+    initButtonRipples();
+    initScrollSpy();
+  }
+
+  // Start initialization
+  init();
+})();
+