chore: search cleanup

_redirects

@@ -61,3 +61,4 @@
 /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
+/posts/2014/sublime-text-ctrl-tab-key-bindings/ /posts/2014/sublime-text-3-ctrl-tab-key-bindings/ 301

src/assets/scripts/index.js

@@ -87,35 +87,39 @@ window.addEventListener('load', () => {
 
   // search logic
   ;(() => {
-    if (!MiniSearch) return
+    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 miniSearch = new MiniSearch({ fields: ['title', 'description', 'tags', 'type'] })
     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 => {
+    const parseMarkdown = (markdown = '') =>
-      if (!markdown) return ''
+      markdown
-      return markdown
         .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
         .replace(/\*(.*?)\*/g, '<em>$1</em>')
         .replace(/\[(.*?)\]\((.*?)\)/g, '<a href="$2">$1</a>')
         .replace(/\n/g, '<br>')
         .replace(/[#*_~`]/g, '')
-    }
   
     const truncateDescription = (markdown, maxLength = 150) => {
       const htmlDescription = parseMarkdown(markdown)
@@ -128,9 +132,13 @@ window.addEventListener('load', () => {
     const formatArtistTitle = (title, totalPlays) =>
       totalPlays > 0 ? `${title} <strong class="highlight-text">${totalPlays} plays</strong>` : title
   
+    const updateLoadMoreButton = () => {
+      const moreResultsToShow = currentPage * PAGE_SIZE < totalResults
+      $loadMoreButton.style.display = moreResultsToShow ? 'block' : 'none'
+    }
+  
     const renderSearchResults = results => {
-      if (results.length > 0) {
+      const resultHTML = results.map(({ title, url, description, type, total_plays }) => {
-        $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)
@@ -145,15 +153,13 @@ window.addEventListener('load', () => {
           </li>
         `
       }).join('')
+  
+      $results.innerHTML = resultHTML || '<li class="search__results--no-results">No results found.</li>'
       $results.style.display = 'block'
-      } else {
-        $results.innerHTML = '<li class="search__results--no-results">No results found.</li>'
-        $results.style.display = 'block'
-      }
     }
   
     const appendSearchResults = results => {
-      const newResults = results.map(({ title, url, description, type, total_plays }) => {
+      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)
@@ -161,46 +167,53 @@ window.addEventListener('load', () => {
   
         return `
           <li class="search__results--result">
-            <a href="${url}">
+            <a href="${url}"><h3>${formattedTitle}</h3></a>
-              <h3>${formattedTitle}</h3>
-            </a>
             <p>${truncatedDesc}</p>
           </li>
         `
       }).join('')
-      $results.insertAdjacentHTML('beforeend', newResults)
+  
+      $results.insertAdjacentHTML('beforeend', resultHTML)
     }
   
-    const loadSearchIndex = async (query = '', types = []) => {
+    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
         }, {})
   
+        if (page === 1) {
           miniSearch.removeAll()
-        miniSearch.addAll(index)
+          miniSearch.addAll(results)
-        return resultsById
+        }
+  
+        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)
   
@@ -211,42 +224,37 @@ window.addEventListener('load', () => {
       }
   
       debounceTimeout = setTimeout(async () => {
-        resultsById = await loadSearchIndex(query, getSelectedTypes())
+        const results = await loadSearchIndex(query, getSelectedTypes(), 1)
-        const results = getSearchResults(query)
         currentResults = results
         currentPage = 1
   
         renderSearchResults(getResultsForPage(currentPage))
-        $loadMoreButton.style.display = results.length > PAGE_SIZE ? 'block' : 'none'
+        updateLoadMoreButton()
       }, 300)
-    })
+    }
   
-    $typeCheckboxes.forEach(checkbox => {
+    const handleCheckboxChange = async () => {
-      checkbox.addEventListener('change', async () => {
+      const results = await loadSearchIndex($input.value.trim(), getSelectedTypes(), 1)
-        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'
+      updateLoadMoreButton()
-      })
+    }
-    })
   
-    $loadMoreButton.addEventListener('click', () => {
+    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'
+      updateLoadMoreButton()
-    })
+    }
-
-    const getSearchResults = query =>
-      miniSearch.search(query, { prefix: true, fuzzy: 0.2, boost: { title: 2 } })
-        .map(({ id }) => resultsById[id])
-        .filter(result => getSelectedTypes().includes(result.type))
   
     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)
   })()
 })