|
| 1 | +(function () { |
| 2 | + 'use strict'; |
| 3 | + |
| 4 | + // --- Search Modal --- |
| 5 | + const searchModal = document.querySelector('[data-search-modal]'); |
| 6 | + const searchTriggers = document.querySelectorAll('[data-target="search-modal"]'); |
| 7 | + const searchClose = document.querySelector('[data-search-close]'); |
| 8 | + const searchInput = document.getElementById('search-input'); |
| 9 | + const searchResults = document.getElementById('search-results'); |
| 10 | + const searchPlaceholder = document.getElementById('search-placeholder'); |
| 11 | + |
| 12 | + if (!searchModal) return; |
| 13 | + |
| 14 | + let fuse; |
| 15 | + let searchData; |
| 16 | + let isFuseInitialized = false; |
| 17 | + |
| 18 | + async function initFuse() { |
| 19 | + if (isFuseInitialized) return; |
| 20 | + try { |
| 21 | + const response = await fetch('/searchindex.json'); |
| 22 | + if (!response.ok) { |
| 23 | + throw new Error('Search index not found'); |
| 24 | + } |
| 25 | + searchData = await response.json(); |
| 26 | + const options = { |
| 27 | + keys: [ |
| 28 | + { name: 'title', weight: 0.8 }, |
| 29 | + { name: 'content', weight: 0.5 }, |
| 30 | + { name: 'description', weight: 0.6 }, |
| 31 | + { name: 'tags', weight: 0.4 }, |
| 32 | + { name: 'categories', weight: 0.4 } |
| 33 | + ], |
| 34 | + includeMatches: true, |
| 35 | + minMatchCharLength: 2, |
| 36 | + threshold: 0.3, // Lowered from 0.4 to make search stricter |
| 37 | + }; |
| 38 | + fuse = new Fuse(searchData, options); |
| 39 | + isFuseInitialized = true; |
| 40 | + console.log('Fuse.js initialized.'); |
| 41 | + } catch (e) { |
| 42 | + console.error('Failed to initialize Fuse.js:', e); |
| 43 | + } |
| 44 | + } |
| 45 | + |
| 46 | + const showModal = () => { |
| 47 | + searchModal.classList.remove('hidden'); |
| 48 | + searchModal.classList.add('flex'); |
| 49 | + searchInput.focus(); |
| 50 | + document.body.style.overflow = 'hidden'; |
| 51 | + initFuse(); // Initialize on first open |
| 52 | + }; |
| 53 | + |
| 54 | + const hideModal = () => { |
| 55 | + searchModal.classList.add('hidden'); |
| 56 | + searchModal.classList.remove('flex'); |
| 57 | + searchInput.value = ''; |
| 58 | + searchResults.innerHTML = ''; |
| 59 | + if (searchPlaceholder) { |
| 60 | + searchResults.appendChild(searchPlaceholder); |
| 61 | + } |
| 62 | + document.body.style.overflow = ''; |
| 63 | + }; |
| 64 | + |
| 65 | + searchTriggers.forEach(trigger => { |
| 66 | + trigger.addEventListener('click', (e) => { |
| 67 | + e.preventDefault(); |
| 68 | + showModal(); |
| 69 | + }); |
| 70 | + }); |
| 71 | + |
| 72 | + if (searchClose) searchClose.addEventListener('click', hideModal); |
| 73 | + |
| 74 | + searchModal.addEventListener('click', (e) => { |
| 75 | + if (e.target === searchModal) { |
| 76 | + hideModal(); |
| 77 | + } |
| 78 | + }); |
| 79 | + |
| 80 | + document.addEventListener('keydown', (e) => { |
| 81 | + if (e.key === 'Escape' && !searchModal.classList.contains('hidden')) { |
| 82 | + hideModal(); |
| 83 | + } |
| 84 | + // Hotkey: Ctrl+K or Cmd+K |
| 85 | + if ((e.ctrlKey || e.metaKey) && e.key === 'k') { |
| 86 | + e.preventDefault(); |
| 87 | + showModal(); |
| 88 | + } |
| 89 | + }); |
| 90 | + |
| 91 | + if(searchInput) { |
| 92 | + searchInput.addEventListener('input', () => { |
| 93 | + if (!isFuseInitialized) { |
| 94 | + searchResults.innerHTML = '<div class="text-center text-gray-500 py-4">Initializing search...</div>'; |
| 95 | + return; |
| 96 | + } |
| 97 | + const query = searchInput.value.trim(); |
| 98 | + if (query.length < 2) { |
| 99 | + searchResults.innerHTML = ''; |
| 100 | + if (searchPlaceholder) searchResults.appendChild(searchPlaceholder); |
| 101 | + return; |
| 102 | + } |
| 103 | + |
| 104 | + const results = fuse.search(query, { limit: 20 }); |
| 105 | + renderResults(results, query); |
| 106 | + }); |
| 107 | + } |
| 108 | + |
| 109 | + function renderResults(results, query) { |
| 110 | + searchResults.innerHTML = ''; |
| 111 | + if (results.length === 0) { |
| 112 | + searchResults.innerHTML = `<div class="text-center text-gray-500 py-4">No results found for "${query}"</div>`; |
| 113 | + return; |
| 114 | + } |
| 115 | + |
| 116 | + const resultList = document.createElement('ul'); |
| 117 | + resultList.className = 'divide-y divide-border dark:divide-darkmode-border'; |
| 118 | + |
| 119 | + results.forEach(({ item, matches }) => { |
| 120 | + const li = document.createElement('li'); |
| 121 | + li.className = 'p-4 hover:bg-theme-light dark:hover:bg-darkmode-theme-dark/50 rounded-md'; |
| 122 | + |
| 123 | + let title = item.title; |
| 124 | + let description = item.description || (item.content ? item.content.substring(0, 150) + '...' : ''); |
| 125 | + |
| 126 | + const titleMatch = matches.find(m => m.key === 'title'); |
| 127 | + if (titleMatch) { |
| 128 | + title = highlight(title, titleMatch.indices); |
| 129 | + } |
| 130 | + |
| 131 | + const descriptionMatch = matches.find(m => m.key === 'description'); |
| 132 | + if (descriptionMatch) { |
| 133 | + description = highlight(description, descriptionMatch.indices); |
| 134 | + } else { |
| 135 | + const contentMatch = matches.find(m => m.key === 'content'); |
| 136 | + if (contentMatch && item.content) { |
| 137 | + const start = Math.max(0, contentMatch.indices[0][0] - 30); |
| 138 | + const end = Math.min(item.content.length, contentMatch.indices[0][1] + 30); |
| 139 | + let snippet = item.content.substring(start, end); |
| 140 | + // Adjust indices for snippet |
| 141 | + const adjustedIndices = contentMatch.indices.map(([i, j]) => [i - start, j - start]); |
| 142 | + description = (start > 0 ? '...' : '') + highlight(snippet, adjustedIndices) + (end < item.content.length ? '...' : ''); |
| 143 | + } |
| 144 | + } |
| 145 | + |
| 146 | + li.innerHTML = ` |
| 147 | + <a href="${item.permalink}" class="block"> |
| 148 | + <h4 class="text-lg font-semibold text-primary dark:text-darkmode-primary">${title}</h4> |
| 149 | + <p class="text-sm text-text dark:text-darkmode-text mt-1">${description}</p> |
| 150 | + </a> |
| 151 | + `; |
| 152 | + resultList.appendChild(li); |
| 153 | + }); |
| 154 | + searchResults.appendChild(resultList); |
| 155 | + } |
| 156 | + |
| 157 | + function highlight(text, indices) { |
| 158 | + if (!text) return ''; |
| 159 | + let result = ''; |
| 160 | + let lastIndex = 0; |
| 161 | + indices.forEach(([start, end]) => { |
| 162 | + result += text.substring(lastIndex, start); |
| 163 | + result += `<mark class="bg-fuchsia-200/75 dark:bg-fuchsia-500/50 rounded px-1 py-0.5">${text.substring(start, end + 1)}</mark>`; |
| 164 | + lastIndex = end + 1; |
| 165 | + }); |
| 166 | + result += text.substring(lastIndex); |
| 167 | + return result; |
| 168 | + } |
| 169 | + |
| 170 | +})(); |
0 commit comments