val-blog/assets/js/main.js

// Theme Toggle
(function() {
  const toggle = document.getElementById('theme-toggle');
  const iconLight = document.getElementById('theme-icon-light');
  const iconDark = document.getElementById('theme-icon-dark');
  const html = document.documentElement;
  
  // Get initial theme
  function getTheme() {
    const saved = localStorage.getItem('theme');
    if (saved) return saved;
    if (window.matchMedia('(prefers-color-scheme: dark)').matches) return 'dark';
    return 'light';
  }
  
  // Apply theme
  function applyTheme(theme) {
    html.setAttribute('data-theme', theme);
    localStorage.setItem('theme', theme);
    updateIcons(theme);
  }
  
  // Update icons
  function updateIcons(theme) {
    if (theme === 'dark') {
      iconLight?.classList.remove('hidden');
      iconDark?.classList.add('hidden');
    } else {
      iconLight?.classList.add('hidden');
      iconDark?.classList.remove('hidden');
    }
  }
  
  // Initialize
  applyTheme(getTheme());
  
  // Toggle handler
  toggle?.addEventListener('click', () => {
    const current = html.getAttribute('data-theme');
    applyTheme(current === 'dark' ? 'light' : 'dark');
  });
})();

// Mobile Menu
(function() {
  const menuToggle = document.getElementById('mobile-menu-toggle');
  const mobileMenu = document.getElementById('mobile-menu');
  
  menuToggle?.addEventListener('click', () => {
    mobileMenu?.classList.toggle('hidden');
  });
})();

// Search
(function() {
  const searchToggle = document.getElementById('search-toggle');
  const searchModal = document.getElementById('search-modal');
  const searchBackdrop = document.getElementById('search-backdrop');
  const searchInput = document.getElementById('search-input');
  const searchResults = document.getElementById('search-results');
  const searchCount = document.getElementById('search-count');
  
  let fuse = null;
  let searchIndex = null;
  
  // Load search index
  async function loadSearchIndex() {
    if (searchIndex) return searchIndex;
    
    try {
      const response = await fetch('/index.json');
      searchIndex = await response.json();
      
      fuse = new Fuse(searchIndex, {
        keys: ['title', 'content', 'tags'],
        threshold: 0.3,
        includeMatches: true,
      });
      
      return searchIndex;
    } catch (err) {
      console.error('Failed to load search index:', err);
      return [];
    }
  }
  
  // Open search
  function openSearch() {
    searchModal?.classList.remove('hidden');
    document.body.style.overflow = 'hidden';
    searchInput?.focus();
    loadSearchIndex();
  }
  
  // Close search
  function closeSearch() {
    searchModal?.classList.add('hidden');
    document.body.style.overflow = '';
    if (searchInput) searchInput.value = '';
    searchResults!.innerHTML = '<div class="px-4 py-8 text-center text-secondary text-sm">输入关键词开始搜索...</div>';
    searchCount!.textContent = '0';
  }
  
  // Perform search
  function performSearch(query) {
    if (!query || !fuse) {
      searchResults!.innerHTML = '<div class="px-4 py-8 text-center text-secondary text-sm">输入关键词开始搜索...</div>';
      searchCount!.textContent = '0';
      return;
    }
    
    const results = fuse.search(query);
    searchCount!.textContent = results.length.toString();
    
    if (results.length === 0) {
      searchResults!.innerHTML = '<div class="px-4 py-8 text-center text-secondary text-sm">未找到相关结果</div>';
      return;
    }
    
    const html = results.map(result => {
      const item = result.item;
      const matches = result.matches || [];
      
      // Highlight matches in title
      let title = item.title;
      matches.filter(m => m.key === 'title').forEach(m => {
        m.indices.forEach(([start, end]) => {
          const matched = title.slice(start, end + 1);
          title = title.slice(0, start) + `<mark class="search-highlight">${matched}</mark>` + title.slice(end + 1);
        });
      });
      
      // Get summary with highlighted content
      let summary = item.summary || item.content?.slice(0, 150) + '...' || '';
      matches.filter(m => m.key === 'content').forEach(m => {
        if (m.indices[0]) {
          const [start, end] = m.indices[0];
          const contextStart = Math.max(0, start - 50);
          const contextEnd = Math.min(item.content.length, end + 50);
          summary = '...' + item.content.slice(contextStart, contextEnd) + '...';
          
          m.indices.slice(0, 2).forEach(([s, e]) => {
            const relativeStart = s - contextStart + 3;
            const relativeEnd = e - contextStart + 3;
            if (relativeStart >= 0 && relativeEnd < summary.length) {
              const matched = summary.slice(relativeStart, relativeEnd + 1);
              summary = summary.slice(0, relativeStart) + `<mark class="search-highlight">${matched}</mark>` + summary.slice(relativeEnd + 1);
            }
          });
        }
      });
      
      return `
        <a href="${item.permalink}" class="search-result block">
          <div class="search-result-title">${title}</div>
          <div class="search-result-summary">${summary}</div>
          <div class="text-xs text-tertiary mt-1">${item.date} · ${item.category}</div>
        </a>
      `;
    }).join('');
    
    searchResults!.innerHTML = html;
  }
  
  // Event listeners
  searchToggle?.addEventListener('click', openSearch);
  searchBackdrop?.addEventListener('click', closeSearch);
  
  document.addEventListener('keydown', (e) => {
    if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
      e.preventDefault();
      openSearch();
    }
    if (e.key === 'Escape') {
      closeSearch();
    }
  });
  
  // Debounced search input
  let debounceTimer;
  searchInput?.addEventListener('input', (e) => {
    clearTimeout(debounceTimer);
    debounceTimer = setTimeout(() => {
      performSearch(e.target.value.trim());
    }, 300);
  });
})();