feat: rewrite search

src/assets/scripts/search.js

@@ -0,0 +1,47 @@
+(() => {
+  const miniSearch = new MiniSearch({
+    fields: ['title', 'text', 'tags']
+  })
+
+  const $form = document.querySelector('.search__form')
+  const $input = document.querySelector('.search__form--input')
+  const $fallback = document.querySelector('.search__form--fallback')
+  const $results = document.querySelector('.search__results')
+
+  // remove no-js fallbacks
+  $form.removeAttribute('action')
+  $form.removeAttribute('method')
+  $fallback.remove()
+
+  let resultsById = {}
+
+  // fetch index
+  const results = fetch('/api/search').then(response => response.json())
+  .then((results) => {
+    resultsById = results.reduce((byId, result) => {
+      byId[result.id] = result
+      return byId
+    }, {})
+    return miniSearch.addAll(results)
+  })
+
+  $input.addEventListener('input', (event) => {
+    const query = $input.value
+    const results = (query.length > 1) ? getSearchResults(query) : []
+    if (query === '') renderSearchResults([])
+    renderSearchResults(results)
+  })
+
+  const getSearchResults = (query) => miniSearch.search(query, {}).map(({ id }) => resultsById[id])
+  const renderSearchResults = (results) => {
+    $results.innerHTML = results.map(({ title, url }) => {
+      return `<li class="search__results--result"><a href="${url}">${title}</a></li>`
+    }).join('\n')
+
+    if (results.length > 0) {
+      $results.classList.remove('hidden')
+    } else {
+      $results.classList.add('hidden')
+    }
+  }
+})();