diff --git a/_redirects b/_redirects index bceeb5f8..10d8dc22 100644 --- a/_redirects +++ b/_redirects @@ -60,4 +60,5 @@ /posts/2023/locally-stored-music-and-storage-as-a-meaningful-constraint/ /posts/2023/doppler-locally-stored-music-and-storage-as-a-beneficial-constraint/ 301 /blog/digital-privacy-tools /posts/2021/digital-privacy-tools/ 301 /posts/2023/now-page-update-matter-favorites/ /posts/2023/now-page-update-favorite-articles-from-matter/ 301 -/posts/2023/now-playing-eleventy-netlify-edge-functions-emoji/ /posts/2023/displaying-now-playing-data-with-matching-emoji-using-netlify-edge-functions-and-eleventy/ 301 \ No newline at end of file +/posts/2023/now-playing-eleventy-netlify-edge-functions-emoji/ /posts/2023/displaying-now-playing-data-with-matching-emoji-using-netlify-edge-functions-and-eleventy/ 301 +/posts/2014/sublime-text-ctrl-tab-key-bindings/ /posts/2014/sublime-text-3-ctrl-tab-key-bindings/ 301 \ No newline at end of file diff --git a/src/assets/scripts/index.js b/src/assets/scripts/index.js index cb3570df..bff8a111 100644 --- a/src/assets/scripts/index.js +++ b/src/assets/scripts/index.js @@ -87,36 +87,40 @@ window.addEventListener('load', () => { // search logic ;(() => { - if (!MiniSearch) return - - const miniSearch = new MiniSearch({ fields: ['title', 'description', 'tags', 'type'] }) + if (!MiniSearch || !document.querySelector('.search__form')) return + + const miniSearch = new MiniSearch({ + fields: ['title', 'description', 'tags', 'type'], + idField: 'id', + storeFields: ['id', 'title', 'url', 'description', 'type', 'tags', 'total_plays'], + searchOptions: { + boost: { title: 2, tags: 1.5 }, + prefix: true, + fuzzy: 0.3, + }, + }) + const $form = document.querySelector('.search__form') const $input = document.querySelector('.search__form--input') - const $fallback = document.querySelector('.search__form--fallback') const $typeCheckboxes = document.querySelectorAll('.search__form--type input[type="checkbox"]') const $results = document.querySelector('.search__results') const $loadMoreButton = document.querySelector('.search__load-more') - - $form.removeAttribute('action') - $form.removeAttribute('method') - $fallback.remove() - + const PAGE_SIZE = 10 let currentPage = 1 let currentResults = [] + let totalResults = 0 let resultsById = {} let debounceTimeout - - const parseMarkdown = markdown => { - if (!markdown) return '' - return markdown + + const parseMarkdown = (markdown = '') => + markdown .replace(/\*\*(.*?)\*\*/g, '$1') .replace(/\*(.*?)\*/g, '$1') .replace(/\[(.*?)\]\((.*?)\)/g, '$1') .replace(/\n/g, '
') .replace(/[#*_~`]/g, '') - } - + const truncateDescription = (markdown, maxLength = 150) => { const htmlDescription = parseMarkdown(markdown) const tempDiv = document.createElement('div') @@ -124,41 +128,22 @@ window.addEventListener('load', () => { const plainText = tempDiv.textContent || tempDiv.innerText || '' return plainText.length > maxLength ? `${plainText.substring(0, maxLength)}...` : plainText } - + const formatArtistTitle = (title, totalPlays) => totalPlays > 0 ? `${title} ${totalPlays} plays` : title - - const renderSearchResults = results => { - if (results.length > 0) { - $results.innerHTML = results.map(({ title, url, description, type, total_plays }) => { - const truncatedDesc = truncateDescription(description) - const formattedTitle = type === 'artist' && total_plays !== undefined - ? formatArtistTitle(title, total_plays) - : title - - return ` -
  • - -

    ${formattedTitle}

    -     -

    ${truncatedDesc}

    -
    • - ` - }).join('') - $results.style.display = 'block' - } else { - $results.innerHTML = '
  • No results found.
    • ' - $results.style.display = 'block' - } + + const updateLoadMoreButton = () => { + const moreResultsToShow = currentPage * PAGE_SIZE < totalResults + $loadMoreButton.style.display = moreResultsToShow ? 'block' : 'none' } - - const appendSearchResults = results => { - const newResults = results.map(({ title, url, description, type, total_plays }) => { + + const renderSearchResults = results => { + const resultHTML = results.map(({ title, url, description, type, total_plays }) => { const truncatedDesc = truncateDescription(description) const formattedTitle = type === 'artist' && total_plays !== undefined ? formatArtistTitle(title, total_plays) : title - + return `
  • @@ -168,85 +153,108 @@ window.addEventListener('load', () => {
    • ` }).join('') - $results.insertAdjacentHTML('beforeend', newResults) + + $results.innerHTML = resultHTML || '
  • No results found.
    • ' + $results.style.display = 'block' } - - const loadSearchIndex = async (query = '', types = []) => { + + const appendSearchResults = results => { + const resultHTML = results.map(({ title, url, description, type, total_plays }) => { + const truncatedDesc = truncateDescription(description) + const formattedTitle = type === 'artist' && total_plays !== undefined + ? formatArtistTitle(title, total_plays) + : title + + return ` +
  • +

    ${formattedTitle}

     +

    ${truncatedDesc}

    +
    • + ` + }).join('') + + $results.insertAdjacentHTML('beforeend', resultHTML) + } + + const loadSearchIndex = async (query = '', types = [], page = 1) => { const typeQuery = types.join(',') - try { - const response = await fetch(`https://coryd.dev/api/search?q=${query}&type=${typeQuery}`) + const response = await fetch(`http://localhost:8787/api/search?q=${query}&type=${typeQuery}&page=${page}&pageSize=${PAGE_SIZE}`) const index = await response.json() - const results = index.results - - if (!Array.isArray(results)) return {} - + + const results = index.results || [] + totalResults = index.total || 0 + + if (!Array.isArray(results)) throw new Error('Expected results to be an array') + resultsById = results.reduce((acc, item) => { acc[item.id] = item return acc }, {}) - - miniSearch.removeAll() - miniSearch.addAll(index) - return resultsById + + if (page === 1) { + miniSearch.removeAll() + miniSearch.addAll(results) + } + + return results } catch (error) { console.error('Error fetching search data:', error) - return {} + return [] } } - + + const getSearchResults = query => + miniSearch.search(query).map(({ id }) => resultsById[id]) + .filter(result => getSelectedTypes().includes(result.type)) + const getSelectedTypes = () => Array.from($typeCheckboxes) .filter(checkbox => checkbox.checked) .map(checkbox => checkbox.value) - - $input.addEventListener('input', () => { + + const handleInputEvent = async () => { const query = $input.value.trim() clearTimeout(debounceTimeout) - + if (!query) { renderSearchResults([]) $loadMoreButton.style.display = 'none' return } - + debounceTimeout = setTimeout(async () => { - resultsById = await loadSearchIndex(query, getSelectedTypes()) - const results = getSearchResults(query) + const results = await loadSearchIndex(query, getSelectedTypes(), 1) currentResults = results currentPage = 1 - + renderSearchResults(getResultsForPage(currentPage)) - $loadMoreButton.style.display = results.length > PAGE_SIZE ? 'block' : 'none' + updateLoadMoreButton() }, 300) - }) - - $typeCheckboxes.forEach(checkbox => { - checkbox.addEventListener('change', async () => { - resultsById = await loadSearchIndex($input.value.trim(), getSelectedTypes()) - const results = getSearchResults($input.value.trim()) - currentResults = results - currentPage = 1 - - renderSearchResults(getResultsForPage(currentPage)) - $loadMoreButton.style.display = results.length > PAGE_SIZE ? 'block' : 'none' - }) - }) - - $loadMoreButton.addEventListener('click', () => { + } + + const handleCheckboxChange = async () => { + const results = await loadSearchIndex($input.value.trim(), getSelectedTypes(), 1) + currentResults = results + currentPage = 1 + + renderSearchResults(getResultsForPage(currentPage)) + updateLoadMoreButton() + } + + const handleLoadMoreClick = async () => { currentPage++ - const nextResults = getResultsForPage(currentPage) + const nextResults = await loadSearchIndex($input.value.trim(), getSelectedTypes(), currentPage) appendSearchResults(nextResults) - - if (currentPage * PAGE_SIZE >= currentResults.length) $loadMoreButton.style.display = 'none' - }) - - const getSearchResults = query => - miniSearch.search(query, { prefix: true, fuzzy: 0.2, boost: { title: 2 } }) - .map(({ id }) => resultsById[id]) - .filter(result => getSelectedTypes().includes(result.type)) - + + updateLoadMoreButton() + } + const getResultsForPage = page => currentResults.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE) + + $input.addEventListener('input', handleInputEvent) + $typeCheckboxes.forEach(checkbox => checkbox.addEventListener('change', handleCheckboxChange)) + $loadMoreButton.addEventListener('click', handleLoadMoreClick) })() }) \ No newline at end of file