chore: bug fixes, organization, metadata

src/pages/main/search.html

@@ -0,0 +1,59 @@
+---
+title: Search
+description: "Search through and find the posts on my site."
+layout: default
+permalink: /search.html
+---
+<script src="/assets/scripts/components/minisearch.js"></script>
+<script type="module">
+  (() => {
+    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 noscript fallbacks
+    $form.removeAttribute('action')
+    $form.removeAttribute('method')
+    $fallback.remove()
+
+    const index = {{ collections.searchIndex | json }}
+    const resultsById = index.reduce((byId, result) => {
+      byId[result.id] = result
+      return byId
+    }, {})
+    miniSearch.addAll(index)
+
+    $input.addEventListener('input', () => {
+      const query = $input.value
+      const results = (query.length > 1) ? getSearchResults(query) : []
+      if (query === '') renderSearchResults([])
+      if (results && window.clicky) clicky.log('/search', query, 'click')
+      renderSearchResults(results)
+    })
+
+    const getSearchResults = (query) => miniSearch.search(query, { prefix: true, fuzzy: 0.2, boost: { title: 2 } }).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')
+      }
+    }
+  })();
+</script>
+<form class="search__form" action="https://duckduckgo.com" method="get">
+  <input class="search__form--input" placeholder="Search" type="search" name="q" autocomplete="off" autofocus>
+  <input class="search__form--fallback" type="hidden" placeholder="Search" name="sites" value="coryd.dev">
+</form>
+<ul class="search__results hidden"></ul>
+{% render "partials/widgets/tags.liquid", tags:collections.tagsSortedByCount, hasSpace:true %}
+{% render "partials/widgets/addon-links.liquid", posts:collections.posts, analytics:analytics, links:collections.links %}