Search this blog

const searchCutoff = 0.9;

async function fetchSearchIndex() {
    try {
        const response = await fetch('/search.json');
        const data = await response.json();
        return data;
    } catch (error) {
        console.error('Error fetching JSON data:', error);
    }
}

function findLongestIndexPair(indices) {
    let longestPair = [];
    let maxLength = 0;

    indices.forEach(pair => {
        let length = pair[1] - pair[0] + 1;
        if (length > maxLength) {
            maxLength = length;
            longestPair = pair;
        }
    });
    return longestPair;
}

function findWordIndexAtCharIndex(text, charIndex) {
    const words = text.split(/\s+/);
    let index = 0;
    let currentCharCount = 0;

    for (let i = 0; i < words.length; i++) {
        let wordLength = words[i].length + 1;
        if (currentCharCount + wordLength > charIndex) {
            index = i;
            break;
        }
        currentCharCount += wordLength;
    }

    return index;
}

function extractSnippet(text, indices, wordLimit) {
    const words = text.split(/\s+/);
    const longestIndices = findLongestIndexPair(indices);

    let startCharIndex = longestIndices[0];
    let endCharIndex = longestIndices[1];
    
    let startWordIndex = findWordIndexAtCharIndex(text, startCharIndex);
    let endWordIndex = findWordIndexAtCharIndex(text, endCharIndex);

    startWordIndex = Math.max(startWordIndex - wordLimit, 0);
    endWordIndex = Math.min(endWordIndex + wordLimit, words.length - 1);

    let snippetWords = words.slice(startWordIndex, endWordIndex + 1).join(' ');

    return (startCharIndex > 0 ? '... ' : '') + snippetWords + (endCharIndex < text.length ? ' ...' : '');
}

function updateUrlQuery(query) {
    // Replace the current URL's hash without adding a new entry to the browser history
    window.history.replaceState(null, '', `#q=${encodeURIComponent(query)}`);
}

async function initializeFuse() {
    const data = await fetchSearchIndex();

    if (!data) {
        console.error('No data found.');
        return;
    }

    const options = {
        keys: ['title', 'content'],
        shouldSort: true,
        includeScore: true,
        includeMatches: true,
        ignoreLocation: true,
        minMatchCharLength: 4,
        distance: 10000,
        threshold: 0.4
    };

    const fuse = new Fuse(data, options);

    const searchReady = document.querySelector('.search-ready');
    const searchLoading = document.querySelector('.search-loading');
    searchReady.classList.remove('hidden');
    searchLoading.classList.add('hidden');

    const searchInput = document.getElementById('search-input');
    const searchResultsContainer = document.getElementById('search-results');

    function performSearch(query) {
        if (query.length === 0) {
            searchResultsContainer.innerHTML = '';
            return;
        }

        const result = fuse.search(query);

        searchResultsContainer.innerHTML = '';

        result.filter(result => result.score < searchCutoff).forEach(({ item, matches }) => {
            const resultElement = document.createElement('a');
            resultElement.classList.add('search-result');
            resultElement.href = item.path;

            const titleElement = document.createElement('h2');
            titleElement.textContent = item.title;

            const metadataElement = document.createElement('div');
            metadataElement.classList.add('metadata');

            const timeElement = document.createElement('time');
            timeElement.setAttribute('datetime', item.dateISO);
            timeElement.textContent = item.dateString;

            const urlElement = document.createElement('span');
            urlElement.classList.add('url');
            urlElement.textContent = item.path;

            const contentElement = document.createElement('p');
            contentElement.classList.add('content');

            const contentMatch = matches.find(match => match.key === 'content');
            if (contentMatch) {
                const indices = contentMatch.indices;
                contentElement.innerHTML = extractSnippet(item.content, indices, 35);
            } else {
                contentElement.innerHTML = item.summary;
            }

            metadataElement.appendChild(timeElement);
            metadataElement.appendChild(document.createTextNode(' • '));
            metadataElement.appendChild(urlElement);

            resultElement.appendChild(titleElement);
            resultElement.appendChild(metadataElement);
            resultElement.appendChild(contentElement);

            searchResultsContainer.appendChild(resultElement);
        });
    }

    searchInput.addEventListener('input', (event) => {
        const query = event.target.value;
        updateUrlQuery(query);  // Update the URL hash without adding to history
        performSearch(query);
    });

    // Initialize search from URL query if present
    const initialQuery = new URLSearchParams(window.location.hash.slice(1)).get('q');
    if (initialQuery) {
        searchInput.value = decodeURIComponent(initialQuery);
        performSearch(initialQuery);
    }
}

initializeFuse();