From bca02f1511250a706f537102282be498b01a723c Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <coryd@hey.com>
Date: Thu, 4 Apr 2024 08:38:20 -0700
Subject: [PATCH] chore: embed search index; one less network call

---
 package.json                 |  2 +-
 src/api/search.liquid        |  6 -----
 src/assets/scripts/search.js | 48 -----------------------------------
 src/pages/search.html        | 49 +++++++++++++++++++++++++++++++++---
 4 files changed, 46 insertions(+), 59 deletions(-)
 delete mode 100644 src/api/search.liquid
 delete mode 100644 src/assets/scripts/search.js

diff --git a/package.json b/package.json
index b367c22e..e1c41838 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "9.1.0",
+  "version": "9.2.0",
   "description": "The source for my personal site. Built using 11ty.",
   "type": "module",
   "scripts": {
diff --git a/src/api/search.liquid b/src/api/search.liquid
deleted file mode 100644
index 9fee56c0..00000000
--- a/src/api/search.liquid
+++ /dev/null
@@ -1,6 +0,0 @@
----
-layout: null
-eleventyExcludeFromCollections: true
-permalink: /api/search
----
-{{ collections.searchIndex | json }}
\ No newline at end of file
diff --git a/src/assets/scripts/search.js b/src/assets/scripts/search.js
deleted file mode 100644
index 0e624c09..00000000
--- a/src/assets/scripts/search.js
+++ /dev/null
@@ -1,48 +0,0 @@
-(() => {
-  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()
-
-  let resultsById = {}
-
-  // fetch index
-  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', () => {
-    const query = $input.value
-    const results = (query.length > 1) ? getSearchResults(query) : []
-    if (query === '') renderSearchResults([])
-    if (results && window.fathom) fathom?.trackEvent(`Search query: ${query}`)
-    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')
-    }
-  }
-})();
\ No newline at end of file
diff --git a/src/pages/search.html b/src/pages/search.html
index e52ebcab..0672c825 100644
--- a/src/pages/search.html
+++ b/src/pages/search.html
@@ -9,10 +9,51 @@ permalink: /search.html
 {% endcapture %}
 <style>{{ css }}</style>
 <script src="/assets/scripts/components/minisearch.js"></script>
-{% capture js %}
-{% render "../assets/scripts/search.js" %}
-{% endcapture %}
-<script type="module">{{ 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.fathom) fathom?.trackEvent(`Search query: ${query}`)
+      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">