From 7e1484a4460ea935b53a9b8c04ea6f30b10c32b4 Mon Sep 17 00:00:00 2001
From: Bryan Deffley <bdeffley@famous-smoke.com>
Date: Thu, 9 May 2024 13:35:23 -0400
Subject: [PATCH 1/9] add search files

---
 best-cigars-guide/blocks/search/search.css | 122 ++++++++++
 best-cigars-guide/blocks/search/search.js  | 269 +++++++++++++++++++++
 2 files changed, 391 insertions(+)
 create mode 100644 best-cigars-guide/blocks/search/search.css
 create mode 100644 best-cigars-guide/blocks/search/search.js

diff --git a/best-cigars-guide/blocks/search/search.css b/best-cigars-guide/blocks/search/search.css
new file mode 100644
index 0000000..04351b1
--- /dev/null
+++ b/best-cigars-guide/blocks/search/search.css
@@ -0,0 +1,122 @@
+/* search box */
+.search .search-box {
+    display: grid;
+    grid-template-columns: 24px 1fr;
+    gap: 8px;
+    align-items: center;
+}
+
+.search .search-box input {
+    width: 100%;
+    border: 1px solid var(--dark-color);
+    padding: 5px 15px;
+    font: inherit;
+}
+
+/* search results */
+.search ul.search-results {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(278px, 1fr));
+    gap: 16px;
+    padding-left: 0;
+    list-style: none;
+}
+
+.search ul.search-results > li {
+    border: 1px solid var(--dark-color);
+}
+
+.search ul.search-results > li > a {
+    display: block;
+    background-color: var(--background-color);
+    color: currentcolor;
+    cursor: pointer;
+    height: 100%;
+}
+
+.search ul.search-results > li > a:hover,
+.search ul.search-results > li > a:focus {
+    text-decoration: none;
+}
+
+.search ul.search-results > li .search-result-title,
+.search ul.search-results > li p {
+    padding: 0 16px;
+}
+
+.search ul.search-results > li .search-result-title {
+    font-size: var(--body-font-size-m);
+    font-weight: normal;
+}
+
+.search ul.search-results > li .search-result-title a {
+    color: currentcolor;
+    text-decoration: none;
+}
+
+.search ul.search-results > li p {
+    font-size: var(--body-font-size-s);
+}
+
+.search ul.search-results > li .search-result-image {
+    aspect-ratio: 4 / 3;
+}
+
+.search ul.search-results > li picture img {
+    display: block;
+    width: 100%;
+    object-fit: cover;
+}
+
+/* no results */
+.search ul.search-results.no-results {
+    display: block;
+    padding-left: 32px;
+}
+
+.search ul.search-results.no-results > li {
+    border: none;
+}
+
+/* minimal variant */
+.search.minimal ul.search-results {
+    display: block;
+    padding-left: 32px;
+}
+
+.search.minimal ul.search-results > li {
+    position: relative;
+    border: none;
+}
+
+.search.minimal ul.search-results > li .search-result-title,
+.search.minimal ul.search-results > li p {
+    padding: unset;
+}
+
+.search.minimal ul.search-results > li .search-result-title a {
+    color: var(--link-color);
+}
+
+/* stylelint-disable no-descending-specificity */
+.search.minimal ul.search-results > li > a {
+    background-color: unset;
+}
+
+.search.minimal ul.search-results > li > a:hover a,
+.search.minimal ul.search-results > li > a:focus a {
+    text-decoration: underline;
+    color: var(--link-hover-color);
+}
+
+.search.minimal ul.search-results > li .search-result-image {
+    position: absolute;
+    top: 2px;
+    left: -32px;
+}
+
+.search.minimal ul.search-results > li picture img {
+    height: 24px;
+    width: 24px;
+    border-radius: 50%;
+}
diff --git a/best-cigars-guide/blocks/search/search.js b/best-cigars-guide/blocks/search/search.js
new file mode 100644
index 0000000..43d96d5
--- /dev/null
+++ b/best-cigars-guide/blocks/search/search.js
@@ -0,0 +1,269 @@
+import {
+    createOptimizedPicture,
+    decorateIcons,
+    fetchPlaceholders,
+} from '../../scripts/aem.js';
+
+const searchParams = new URLSearchParams(window.location.search);
+
+function findNextHeading(el) {
+    let preceedingEl = el.parentElement.previousElement || el.parentElement.parentElement;
+    let h = 'H2';
+    while (preceedingEl) {
+        const lastHeading = [...preceedingEl.querySelectorAll('h1, h2, h3, h4, h5, h6')].pop();
+        if (lastHeading) {
+            const level = parseInt(lastHeading.nodeName[1], 10);
+            h = level < 6 ? `H${level + 1}` : 'H6';
+            preceedingEl = false;
+        } else {
+            preceedingEl = preceedingEl.previousElement || preceedingEl.parentElement;
+        }
+    }
+    return h;
+}
+
+function highlightTextElements(terms, elements) {
+    elements.forEach((element) => {
+        if (!element || !element.textContent) return;
+
+        const matches = [];
+        const { textContent } = element;
+        terms.forEach((term) => {
+            let start = 0;
+            let offset = textContent.toLowerCase().indexOf(term.toLowerCase(), start);
+            while (offset >= 0) {
+                matches.push({ offset, term: textContent.substring(offset, offset + term.length) });
+                start = offset + term.length;
+                offset = textContent.toLowerCase().indexOf(term.toLowerCase(), start);
+            }
+        });
+
+        if (!matches.length) {
+            return;
+        }
+
+        matches.sort((a, b) => a.offset - b.offset);
+        let currentIndex = 0;
+        const fragment = matches.reduce((acc, { offset, term }) => {
+            if (offset < currentIndex) return acc;
+            const textBefore = textContent.substring(currentIndex, offset);
+            if (textBefore) {
+                acc.appendChild(document.createTextNode(textBefore));
+            }
+            const markedTerm = document.createElement('mark');
+            markedTerm.textContent = term;
+            acc.appendChild(markedTerm);
+            currentIndex = offset + term.length;
+            return acc;
+        }, document.createDocumentFragment());
+        const textAfter = textContent.substring(currentIndex);
+        if (textAfter) {
+            fragment.appendChild(document.createTextNode(textAfter));
+        }
+        element.innerHTML = '';
+        element.appendChild(fragment);
+    });
+}
+
+export async function fetchData(source) {
+    const response = await fetch(source);
+    if (!response.ok) {
+        // eslint-disable-next-line no-console
+        console.error('error loading API response', response);
+        return null;
+    }
+
+    const json = await response.json();
+    if (!json) {
+        // eslint-disable-next-line no-console
+        console.error('empty API response', source);
+        return null;
+    }
+
+    return json.data;
+}
+
+function renderResult(result, searchTerms, titleTag) {
+    const li = document.createElement('li');
+    const a = document.createElement('a');
+    a.href = result.path;
+    if (result.image) {
+        const wrapper = document.createElement('div');
+        wrapper.className = 'search-result-image';
+        const pic = createOptimizedPicture(result.image, '', false, [{ width: '375' }]);
+        wrapper.append(pic);
+        a.append(wrapper);
+    }
+    if (result.title) {
+        const title = document.createElement(titleTag);
+        title.className = 'search-result-title';
+        const link = document.createElement('a');
+        link.href = result.path;
+        link.textContent = result.title;
+        highlightTextElements(searchTerms, [link]);
+        title.append(link);
+        a.append(title);
+    }
+    if (result.description) {
+        const description = document.createElement('p');
+        description.textContent = result.description;
+        highlightTextElements(searchTerms, [description]);
+        a.append(description);
+    }
+    li.append(a);
+    return li;
+}
+
+function clearSearchResults(block) {
+    const searchResults = block.querySelector('.search-results');
+    searchResults.innerHTML = '';
+}
+
+function clearSearch(block) {
+    clearSearchResults(block);
+    if (window.history.replaceState) {
+        const url = new URL(window.location.href);
+        url.search = '';
+        searchParams.delete('q');
+        window.history.replaceState({}, '', url.toString());
+    }
+}
+
+async function renderResults(block, config, filteredData, searchTerms) {
+    clearSearchResults(block);
+    const searchResults = block.querySelector('.search-results');
+    const headingTag = searchResults.dataset.h;
+
+    if (filteredData.length) {
+        searchResults.classList.remove('no-results');
+        filteredData.forEach((result) => {
+            const li = renderResult(result, searchTerms, headingTag);
+            searchResults.append(li);
+        });
+    } else {
+        const noResultsMessage = document.createElement('li');
+        searchResults.classList.add('no-results');
+        noResultsMessage.textContent = config.placeholders.searchNoResults || 'No results found.';
+        searchResults.append(noResultsMessage);
+    }
+}
+
+function compareFound(hit1, hit2) {
+    return hit1.minIdx - hit2.minIdx;
+}
+
+function filterData(searchTerms, data) {
+    const foundInHeader = [];
+    const foundInMeta = [];
+
+    data.forEach((result) => {
+        let minIdx = -1;
+
+        searchTerms.forEach((term) => {
+            const idx = (result.header || result.title).toLowerCase().indexOf(term);
+            if (idx < 0) return;
+            if (minIdx < idx) minIdx = idx;
+        });
+
+        if (minIdx >= 0) {
+            foundInHeader.push({ minIdx, result });
+            return;
+        }
+
+        const metaContents = `${result.title} ${result.description} ${result.path.split('/').pop()}`.toLowerCase();
+        searchTerms.forEach((term) => {
+            const idx = metaContents.indexOf(term);
+            if (idx < 0) return;
+            if (minIdx < idx) minIdx = idx;
+        });
+
+        if (minIdx >= 0) {
+            foundInMeta.push({ minIdx, result });
+        }
+    });
+
+    return [
+        ...foundInHeader.sort(compareFound),
+        ...foundInMeta.sort(compareFound),
+    ].map((item) => item.result);
+}
+
+async function handleSearch(e, block, config) {
+    const searchValue = e.target.value;
+    searchParams.set('q', searchValue);
+    if (window.history.replaceState) {
+        const url = new URL(window.location.href);
+        url.search = searchParams.toString();
+        window.history.replaceState({}, '', url.toString());
+    }
+
+    if (searchValue.length < 3) {
+        clearSearch(block);
+        return;
+    }
+    const searchTerms = searchValue.toLowerCase().split(/\s+/).filter((term) => !!term);
+
+    const data = await fetchData(config.source);
+    const filteredData = filterData(searchTerms, data);
+    await renderResults(block, config, filteredData, searchTerms);
+}
+
+function searchResultsContainer(block) {
+    const results = document.createElement('ul');
+    results.className = 'search-results';
+    results.dataset.h = findNextHeading(block);
+    return results;
+}
+
+function searchInput(block, config) {
+    const input = document.createElement('input');
+    input.setAttribute('type', 'search');
+    input.className = 'search-input';
+
+    const searchPlaceholder = config.placeholders.searchPlaceholder || 'Search...';
+    input.placeholder = searchPlaceholder;
+    input.setAttribute('aria-label', searchPlaceholder);
+
+    input.addEventListener('input', (e) => {
+        handleSearch(e, block, config);
+    });
+
+    input.addEventListener('keyup', (e) => { if (e.code === 'Escape') { clearSearch(block); } });
+
+    return input;
+}
+
+function searchIcon() {
+    const icon = document.createElement('span');
+    icon.classList.add('icon', 'icon-search');
+    return icon;
+}
+
+function searchBox(block, config) {
+    const box = document.createElement('div');
+    box.classList.add('search-box');
+    box.append(
+        searchIcon(),
+        searchInput(block, config),
+    );
+
+    return box;
+}
+
+export default async function decorate(block) {
+    const placeholders = await fetchPlaceholders();
+    const source = block.querySelector('a[href]') ? block.querySelector('a[href]').href : '/query-index.json';
+    block.innerHTML = '';
+    block.append(
+        searchBox(block, { source, placeholders }),
+        searchResultsContainer(block),
+    );
+
+    if (searchParams.get('q')) {
+        const input = block.querySelector('input');
+        input.value = searchParams.get('q');
+        input.dispatchEvent(new Event('input'));
+    }
+
+    decorateIcons(block);
+}

From c7277d5fe90e65f1681d3ef848b17b15b501a14c Mon Sep 17 00:00:00 2001
From: Bryan Deffley <bdeffley@famous-smoke.com>
Date: Thu, 9 May 2024 15:04:54 -0400
Subject: [PATCH 2/9] switch query param from s to q

---
 best-cigars-guide/blocks/header/header.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/best-cigars-guide/blocks/header/header.js b/best-cigars-guide/blocks/header/header.js
index 0a9b00e..07b633c 100644
--- a/best-cigars-guide/blocks/header/header.js
+++ b/best-cigars-guide/blocks/header/header.js
@@ -153,7 +153,7 @@ export default async function decorate(block) {
   searchBox.innerHTML = `
   <form role="search" action="/best-cigars-guide/search" class="search search-header">
     <label for="header-search-term">Search</label>
-    <input type="search" id="header-search-term" maxlength="255" placeholder="Search" name="s" autocomplete="off">
+    <input type="search" id="header-search-term" maxlength="255" placeholder="Search" name="q" autocomplete="off">
     <button type="submit" class="search-submit" value="Submit" title="Submit">
       <span class="icon icon-search"><img data-icon-name="search" src="/best-cigars-guide/icons/search.svg" alt="Search" title="Search" loading="lazy"></span>
     </button>

From f454b33b8504759a06b79f1217470da36476a01b Mon Sep 17 00:00:00 2001
From: Bryan Deffley <bdeffley@famous-smoke.com>
Date: Thu, 9 May 2024 15:43:02 -0400
Subject: [PATCH 3/9] udpate crlf to lf

---
 best-cigars-guide/blocks/search/search.css | 244 +++++-----
 best-cigars-guide/blocks/search/search.js  | 538 ++++++++++-----------
 2 files changed, 391 insertions(+), 391 deletions(-)

diff --git a/best-cigars-guide/blocks/search/search.css b/best-cigars-guide/blocks/search/search.css
index 04351b1..472e789 100644
--- a/best-cigars-guide/blocks/search/search.css
+++ b/best-cigars-guide/blocks/search/search.css
@@ -1,122 +1,122 @@
-/* search box */
-.search .search-box {
-    display: grid;
-    grid-template-columns: 24px 1fr;
-    gap: 8px;
-    align-items: center;
-}
-
-.search .search-box input {
-    width: 100%;
-    border: 1px solid var(--dark-color);
-    padding: 5px 15px;
-    font: inherit;
-}
-
-/* search results */
-.search ul.search-results {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(278px, 1fr));
-    gap: 16px;
-    padding-left: 0;
-    list-style: none;
-}
-
-.search ul.search-results > li {
-    border: 1px solid var(--dark-color);
-}
-
-.search ul.search-results > li > a {
-    display: block;
-    background-color: var(--background-color);
-    color: currentcolor;
-    cursor: pointer;
-    height: 100%;
-}
-
-.search ul.search-results > li > a:hover,
-.search ul.search-results > li > a:focus {
-    text-decoration: none;
-}
-
-.search ul.search-results > li .search-result-title,
-.search ul.search-results > li p {
-    padding: 0 16px;
-}
-
-.search ul.search-results > li .search-result-title {
-    font-size: var(--body-font-size-m);
-    font-weight: normal;
-}
-
-.search ul.search-results > li .search-result-title a {
-    color: currentcolor;
-    text-decoration: none;
-}
-
-.search ul.search-results > li p {
-    font-size: var(--body-font-size-s);
-}
-
-.search ul.search-results > li .search-result-image {
-    aspect-ratio: 4 / 3;
-}
-
-.search ul.search-results > li picture img {
-    display: block;
-    width: 100%;
-    object-fit: cover;
-}
-
-/* no results */
-.search ul.search-results.no-results {
-    display: block;
-    padding-left: 32px;
-}
-
-.search ul.search-results.no-results > li {
-    border: none;
-}
-
-/* minimal variant */
-.search.minimal ul.search-results {
-    display: block;
-    padding-left: 32px;
-}
-
-.search.minimal ul.search-results > li {
-    position: relative;
-    border: none;
-}
-
-.search.minimal ul.search-results > li .search-result-title,
-.search.minimal ul.search-results > li p {
-    padding: unset;
-}
-
-.search.minimal ul.search-results > li .search-result-title a {
-    color: var(--link-color);
-}
-
-/* stylelint-disable no-descending-specificity */
-.search.minimal ul.search-results > li > a {
-    background-color: unset;
-}
-
-.search.minimal ul.search-results > li > a:hover a,
-.search.minimal ul.search-results > li > a:focus a {
-    text-decoration: underline;
-    color: var(--link-hover-color);
-}
-
-.search.minimal ul.search-results > li .search-result-image {
-    position: absolute;
-    top: 2px;
-    left: -32px;
-}
-
-.search.minimal ul.search-results > li picture img {
-    height: 24px;
-    width: 24px;
-    border-radius: 50%;
-}
+/* search box */
+.search .search-box {
+    display: grid;
+    grid-template-columns: 24px 1fr;
+    gap: 8px;
+    align-items: center;
+}
+
+.search .search-box input {
+    width: 100%;
+    border: 1px solid var(--dark-color);
+    padding: 5px 15px;
+    font: inherit;
+}
+
+/* search results */
+.search ul.search-results {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(278px, 1fr));
+    gap: 16px;
+    padding-left: 0;
+    list-style: none;
+}
+
+.search ul.search-results > li {
+    border: 1px solid var(--dark-color);
+}
+
+.search ul.search-results > li > a {
+    display: block;
+    background-color: var(--background-color);
+    color: currentcolor;
+    cursor: pointer;
+    height: 100%;
+}
+
+.search ul.search-results > li > a:hover,
+.search ul.search-results > li > a:focus {
+    text-decoration: none;
+}
+
+.search ul.search-results > li .search-result-title,
+.search ul.search-results > li p {
+    padding: 0 16px;
+}
+
+.search ul.search-results > li .search-result-title {
+    font-size: var(--body-font-size-m);
+    font-weight: normal;
+}
+
+.search ul.search-results > li .search-result-title a {
+    color: currentcolor;
+    text-decoration: none;
+}
+
+.search ul.search-results > li p {
+    font-size: var(--body-font-size-s);
+}
+
+.search ul.search-results > li .search-result-image {
+    aspect-ratio: 4 / 3;
+}
+
+.search ul.search-results > li picture img {
+    display: block;
+    width: 100%;
+    object-fit: cover;
+}
+
+/* no results */
+.search ul.search-results.no-results {
+    display: block;
+    padding-left: 32px;
+}
+
+.search ul.search-results.no-results > li {
+    border: none;
+}
+
+/* minimal variant */
+.search.minimal ul.search-results {
+    display: block;
+    padding-left: 32px;
+}
+
+.search.minimal ul.search-results > li {
+    position: relative;
+    border: none;
+}
+
+.search.minimal ul.search-results > li .search-result-title,
+.search.minimal ul.search-results > li p {
+    padding: unset;
+}
+
+.search.minimal ul.search-results > li .search-result-title a {
+    color: var(--link-color);
+}
+
+/* stylelint-disable no-descending-specificity */
+.search.minimal ul.search-results > li > a {
+    background-color: unset;
+}
+
+.search.minimal ul.search-results > li > a:hover a,
+.search.minimal ul.search-results > li > a:focus a {
+    text-decoration: underline;
+    color: var(--link-hover-color);
+}
+
+.search.minimal ul.search-results > li .search-result-image {
+    position: absolute;
+    top: 2px;
+    left: -32px;
+}
+
+.search.minimal ul.search-results > li picture img {
+    height: 24px;
+    width: 24px;
+    border-radius: 50%;
+}
diff --git a/best-cigars-guide/blocks/search/search.js b/best-cigars-guide/blocks/search/search.js
index 43d96d5..9b3dd14 100644
--- a/best-cigars-guide/blocks/search/search.js
+++ b/best-cigars-guide/blocks/search/search.js
@@ -1,269 +1,269 @@
-import {
-    createOptimizedPicture,
-    decorateIcons,
-    fetchPlaceholders,
-} from '../../scripts/aem.js';
-
-const searchParams = new URLSearchParams(window.location.search);
-
-function findNextHeading(el) {
-    let preceedingEl = el.parentElement.previousElement || el.parentElement.parentElement;
-    let h = 'H2';
-    while (preceedingEl) {
-        const lastHeading = [...preceedingEl.querySelectorAll('h1, h2, h3, h4, h5, h6')].pop();
-        if (lastHeading) {
-            const level = parseInt(lastHeading.nodeName[1], 10);
-            h = level < 6 ? `H${level + 1}` : 'H6';
-            preceedingEl = false;
-        } else {
-            preceedingEl = preceedingEl.previousElement || preceedingEl.parentElement;
-        }
-    }
-    return h;
-}
-
-function highlightTextElements(terms, elements) {
-    elements.forEach((element) => {
-        if (!element || !element.textContent) return;
-
-        const matches = [];
-        const { textContent } = element;
-        terms.forEach((term) => {
-            let start = 0;
-            let offset = textContent.toLowerCase().indexOf(term.toLowerCase(), start);
-            while (offset >= 0) {
-                matches.push({ offset, term: textContent.substring(offset, offset + term.length) });
-                start = offset + term.length;
-                offset = textContent.toLowerCase().indexOf(term.toLowerCase(), start);
-            }
-        });
-
-        if (!matches.length) {
-            return;
-        }
-
-        matches.sort((a, b) => a.offset - b.offset);
-        let currentIndex = 0;
-        const fragment = matches.reduce((acc, { offset, term }) => {
-            if (offset < currentIndex) return acc;
-            const textBefore = textContent.substring(currentIndex, offset);
-            if (textBefore) {
-                acc.appendChild(document.createTextNode(textBefore));
-            }
-            const markedTerm = document.createElement('mark');
-            markedTerm.textContent = term;
-            acc.appendChild(markedTerm);
-            currentIndex = offset + term.length;
-            return acc;
-        }, document.createDocumentFragment());
-        const textAfter = textContent.substring(currentIndex);
-        if (textAfter) {
-            fragment.appendChild(document.createTextNode(textAfter));
-        }
-        element.innerHTML = '';
-        element.appendChild(fragment);
-    });
-}
-
-export async function fetchData(source) {
-    const response = await fetch(source);
-    if (!response.ok) {
-        // eslint-disable-next-line no-console
-        console.error('error loading API response', response);
-        return null;
-    }
-
-    const json = await response.json();
-    if (!json) {
-        // eslint-disable-next-line no-console
-        console.error('empty API response', source);
-        return null;
-    }
-
-    return json.data;
-}
-
-function renderResult(result, searchTerms, titleTag) {
-    const li = document.createElement('li');
-    const a = document.createElement('a');
-    a.href = result.path;
-    if (result.image) {
-        const wrapper = document.createElement('div');
-        wrapper.className = 'search-result-image';
-        const pic = createOptimizedPicture(result.image, '', false, [{ width: '375' }]);
-        wrapper.append(pic);
-        a.append(wrapper);
-    }
-    if (result.title) {
-        const title = document.createElement(titleTag);
-        title.className = 'search-result-title';
-        const link = document.createElement('a');
-        link.href = result.path;
-        link.textContent = result.title;
-        highlightTextElements(searchTerms, [link]);
-        title.append(link);
-        a.append(title);
-    }
-    if (result.description) {
-        const description = document.createElement('p');
-        description.textContent = result.description;
-        highlightTextElements(searchTerms, [description]);
-        a.append(description);
-    }
-    li.append(a);
-    return li;
-}
-
-function clearSearchResults(block) {
-    const searchResults = block.querySelector('.search-results');
-    searchResults.innerHTML = '';
-}
-
-function clearSearch(block) {
-    clearSearchResults(block);
-    if (window.history.replaceState) {
-        const url = new URL(window.location.href);
-        url.search = '';
-        searchParams.delete('q');
-        window.history.replaceState({}, '', url.toString());
-    }
-}
-
-async function renderResults(block, config, filteredData, searchTerms) {
-    clearSearchResults(block);
-    const searchResults = block.querySelector('.search-results');
-    const headingTag = searchResults.dataset.h;
-
-    if (filteredData.length) {
-        searchResults.classList.remove('no-results');
-        filteredData.forEach((result) => {
-            const li = renderResult(result, searchTerms, headingTag);
-            searchResults.append(li);
-        });
-    } else {
-        const noResultsMessage = document.createElement('li');
-        searchResults.classList.add('no-results');
-        noResultsMessage.textContent = config.placeholders.searchNoResults || 'No results found.';
-        searchResults.append(noResultsMessage);
-    }
-}
-
-function compareFound(hit1, hit2) {
-    return hit1.minIdx - hit2.minIdx;
-}
-
-function filterData(searchTerms, data) {
-    const foundInHeader = [];
-    const foundInMeta = [];
-
-    data.forEach((result) => {
-        let minIdx = -1;
-
-        searchTerms.forEach((term) => {
-            const idx = (result.header || result.title).toLowerCase().indexOf(term);
-            if (idx < 0) return;
-            if (minIdx < idx) minIdx = idx;
-        });
-
-        if (minIdx >= 0) {
-            foundInHeader.push({ minIdx, result });
-            return;
-        }
-
-        const metaContents = `${result.title} ${result.description} ${result.path.split('/').pop()}`.toLowerCase();
-        searchTerms.forEach((term) => {
-            const idx = metaContents.indexOf(term);
-            if (idx < 0) return;
-            if (minIdx < idx) minIdx = idx;
-        });
-
-        if (minIdx >= 0) {
-            foundInMeta.push({ minIdx, result });
-        }
-    });
-
-    return [
-        ...foundInHeader.sort(compareFound),
-        ...foundInMeta.sort(compareFound),
-    ].map((item) => item.result);
-}
-
-async function handleSearch(e, block, config) {
-    const searchValue = e.target.value;
-    searchParams.set('q', searchValue);
-    if (window.history.replaceState) {
-        const url = new URL(window.location.href);
-        url.search = searchParams.toString();
-        window.history.replaceState({}, '', url.toString());
-    }
-
-    if (searchValue.length < 3) {
-        clearSearch(block);
-        return;
-    }
-    const searchTerms = searchValue.toLowerCase().split(/\s+/).filter((term) => !!term);
-
-    const data = await fetchData(config.source);
-    const filteredData = filterData(searchTerms, data);
-    await renderResults(block, config, filteredData, searchTerms);
-}
-
-function searchResultsContainer(block) {
-    const results = document.createElement('ul');
-    results.className = 'search-results';
-    results.dataset.h = findNextHeading(block);
-    return results;
-}
-
-function searchInput(block, config) {
-    const input = document.createElement('input');
-    input.setAttribute('type', 'search');
-    input.className = 'search-input';
-
-    const searchPlaceholder = config.placeholders.searchPlaceholder || 'Search...';
-    input.placeholder = searchPlaceholder;
-    input.setAttribute('aria-label', searchPlaceholder);
-
-    input.addEventListener('input', (e) => {
-        handleSearch(e, block, config);
-    });
-
-    input.addEventListener('keyup', (e) => { if (e.code === 'Escape') { clearSearch(block); } });
-
-    return input;
-}
-
-function searchIcon() {
-    const icon = document.createElement('span');
-    icon.classList.add('icon', 'icon-search');
-    return icon;
-}
-
-function searchBox(block, config) {
-    const box = document.createElement('div');
-    box.classList.add('search-box');
-    box.append(
-        searchIcon(),
-        searchInput(block, config),
-    );
-
-    return box;
-}
-
-export default async function decorate(block) {
-    const placeholders = await fetchPlaceholders();
-    const source = block.querySelector('a[href]') ? block.querySelector('a[href]').href : '/query-index.json';
-    block.innerHTML = '';
-    block.append(
-        searchBox(block, { source, placeholders }),
-        searchResultsContainer(block),
-    );
-
-    if (searchParams.get('q')) {
-        const input = block.querySelector('input');
-        input.value = searchParams.get('q');
-        input.dispatchEvent(new Event('input'));
-    }
-
-    decorateIcons(block);
-}
+import {
+    createOptimizedPicture,
+    decorateIcons,
+    fetchPlaceholders,
+} from '../../scripts/aem.js';
+
+const searchParams = new URLSearchParams(window.location.search);
+
+function findNextHeading(el) {
+    let preceedingEl = el.parentElement.previousElement || el.parentElement.parentElement;
+    let h = 'H2';
+    while (preceedingEl) {
+        const lastHeading = [...preceedingEl.querySelectorAll('h1, h2, h3, h4, h5, h6')].pop();
+        if (lastHeading) {
+            const level = parseInt(lastHeading.nodeName[1], 10);
+            h = level < 6 ? `H${level + 1}` : 'H6';
+            preceedingEl = false;
+        } else {
+            preceedingEl = preceedingEl.previousElement || preceedingEl.parentElement;
+        }
+    }
+    return h;
+}
+
+function highlightTextElements(terms, elements) {
+    elements.forEach((element) => {
+        if (!element || !element.textContent) return;
+
+        const matches = [];
+        const { textContent } = element;
+        terms.forEach((term) => {
+            let start = 0;
+            let offset = textContent.toLowerCase().indexOf(term.toLowerCase(), start);
+            while (offset >= 0) {
+                matches.push({ offset, term: textContent.substring(offset, offset + term.length) });
+                start = offset + term.length;
+                offset = textContent.toLowerCase().indexOf(term.toLowerCase(), start);
+            }
+        });
+
+        if (!matches.length) {
+            return;
+        }
+
+        matches.sort((a, b) => a.offset - b.offset);
+        let currentIndex = 0;
+        const fragment = matches.reduce((acc, { offset, term }) => {
+            if (offset < currentIndex) return acc;
+            const textBefore = textContent.substring(currentIndex, offset);
+            if (textBefore) {
+                acc.appendChild(document.createTextNode(textBefore));
+            }
+            const markedTerm = document.createElement('mark');
+            markedTerm.textContent = term;
+            acc.appendChild(markedTerm);
+            currentIndex = offset + term.length;
+            return acc;
+        }, document.createDocumentFragment());
+        const textAfter = textContent.substring(currentIndex);
+        if (textAfter) {
+            fragment.appendChild(document.createTextNode(textAfter));
+        }
+        element.innerHTML = '';
+        element.appendChild(fragment);
+    });
+}
+
+export async function fetchData(source) {
+    const response = await fetch(source);
+    if (!response.ok) {
+        // eslint-disable-next-line no-console
+        console.error('error loading API response', response);
+        return null;
+    }
+
+    const json = await response.json();
+    if (!json) {
+        // eslint-disable-next-line no-console
+        console.error('empty API response', source);
+        return null;
+    }
+
+    return json.data;
+}
+
+function renderResult(result, searchTerms, titleTag) {
+    const li = document.createElement('li');
+    const a = document.createElement('a');
+    a.href = result.path;
+    if (result.image) {
+        const wrapper = document.createElement('div');
+        wrapper.className = 'search-result-image';
+        const pic = createOptimizedPicture(result.image, '', false, [{ width: '375' }]);
+        wrapper.append(pic);
+        a.append(wrapper);
+    }
+    if (result.title) {
+        const title = document.createElement(titleTag);
+        title.className = 'search-result-title';
+        const link = document.createElement('a');
+        link.href = result.path;
+        link.textContent = result.title;
+        highlightTextElements(searchTerms, [link]);
+        title.append(link);
+        a.append(title);
+    }
+    if (result.description) {
+        const description = document.createElement('p');
+        description.textContent = result.description;
+        highlightTextElements(searchTerms, [description]);
+        a.append(description);
+    }
+    li.append(a);
+    return li;
+}
+
+function clearSearchResults(block) {
+    const searchResults = block.querySelector('.search-results');
+    searchResults.innerHTML = '';
+}
+
+function clearSearch(block) {
+    clearSearchResults(block);
+    if (window.history.replaceState) {
+        const url = new URL(window.location.href);
+        url.search = '';
+        searchParams.delete('q');
+        window.history.replaceState({}, '', url.toString());
+    }
+}
+
+async function renderResults(block, config, filteredData, searchTerms) {
+    clearSearchResults(block);
+    const searchResults = block.querySelector('.search-results');
+    const headingTag = searchResults.dataset.h;
+
+    if (filteredData.length) {
+        searchResults.classList.remove('no-results');
+        filteredData.forEach((result) => {
+            const li = renderResult(result, searchTerms, headingTag);
+            searchResults.append(li);
+        });
+    } else {
+        const noResultsMessage = document.createElement('li');
+        searchResults.classList.add('no-results');
+        noResultsMessage.textContent = config.placeholders.searchNoResults || 'No results found.';
+        searchResults.append(noResultsMessage);
+    }
+}
+
+function compareFound(hit1, hit2) {
+    return hit1.minIdx - hit2.minIdx;
+}
+
+function filterData(searchTerms, data) {
+    const foundInHeader = [];
+    const foundInMeta = [];
+
+    data.forEach((result) => {
+        let minIdx = -1;
+
+        searchTerms.forEach((term) => {
+            const idx = (result.header || result.title).toLowerCase().indexOf(term);
+            if (idx < 0) return;
+            if (minIdx < idx) minIdx = idx;
+        });
+
+        if (minIdx >= 0) {
+            foundInHeader.push({ minIdx, result });
+            return;
+        }
+
+        const metaContents = `${result.title} ${result.description} ${result.path.split('/').pop()}`.toLowerCase();
+        searchTerms.forEach((term) => {
+            const idx = metaContents.indexOf(term);
+            if (idx < 0) return;
+            if (minIdx < idx) minIdx = idx;
+        });
+
+        if (minIdx >= 0) {
+            foundInMeta.push({ minIdx, result });
+        }
+    });
+
+    return [
+        ...foundInHeader.sort(compareFound),
+        ...foundInMeta.sort(compareFound),
+    ].map((item) => item.result);
+}
+
+async function handleSearch(e, block, config) {
+    const searchValue = e.target.value;
+    searchParams.set('q', searchValue);
+    if (window.history.replaceState) {
+        const url = new URL(window.location.href);
+        url.search = searchParams.toString();
+        window.history.replaceState({}, '', url.toString());
+    }
+
+    if (searchValue.length < 3) {
+        clearSearch(block);
+        return;
+    }
+    const searchTerms = searchValue.toLowerCase().split(/\s+/).filter((term) => !!term);
+
+    const data = await fetchData(config.source);
+    const filteredData = filterData(searchTerms, data);
+    await renderResults(block, config, filteredData, searchTerms);
+}
+
+function searchResultsContainer(block) {
+    const results = document.createElement('ul');
+    results.className = 'search-results';
+    results.dataset.h = findNextHeading(block);
+    return results;
+}
+
+function searchInput(block, config) {
+    const input = document.createElement('input');
+    input.setAttribute('type', 'search');
+    input.className = 'search-input';
+
+    const searchPlaceholder = config.placeholders.searchPlaceholder || 'Search...';
+    input.placeholder = searchPlaceholder;
+    input.setAttribute('aria-label', searchPlaceholder);
+
+    input.addEventListener('input', (e) => {
+        handleSearch(e, block, config);
+    });
+
+    input.addEventListener('keyup', (e) => { if (e.code === 'Escape') { clearSearch(block); } });
+
+    return input;
+}
+
+function searchIcon() {
+    const icon = document.createElement('span');
+    icon.classList.add('icon', 'icon-search');
+    return icon;
+}
+
+function searchBox(block, config) {
+    const box = document.createElement('div');
+    box.classList.add('search-box');
+    box.append(
+        searchIcon(),
+        searchInput(block, config),
+    );
+
+    return box;
+}
+
+export default async function decorate(block) {
+    const placeholders = await fetchPlaceholders();
+    const source = block.querySelector('a[href]') ? block.querySelector('a[href]').href : '/query-index.json';
+    block.innerHTML = '';
+    block.append(
+        searchBox(block, { source, placeholders }),
+        searchResultsContainer(block),
+    );
+
+    if (searchParams.get('q')) {
+        const input = block.querySelector('input');
+        input.value = searchParams.get('q');
+        input.dispatchEvent(new Event('input'));
+    }
+
+    decorateIcons(block);
+}

From 5f2ba70cd9155478eb2b75a03d04f983e0c27d41 Mon Sep 17 00:00:00 2001
From: Bryan Deffley <bdeffley@famous-smoke.com>
Date: Thu, 9 May 2024 15:48:02 -0400
Subject: [PATCH 4/9] reformat

---
 best-cigars-guide/blocks/search/search.js | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/best-cigars-guide/blocks/search/search.js b/best-cigars-guide/blocks/search/search.js
index 9b3dd14..3b6a908 100644
--- a/best-cigars-guide/blocks/search/search.js
+++ b/best-cigars-guide/blocks/search/search.js
@@ -27,12 +27,12 @@ function highlightTextElements(terms, elements) {
         if (!element || !element.textContent) return;
 
         const matches = [];
-        const { textContent } = element;
+        const {textContent} = element;
         terms.forEach((term) => {
             let start = 0;
             let offset = textContent.toLowerCase().indexOf(term.toLowerCase(), start);
             while (offset >= 0) {
-                matches.push({ offset, term: textContent.substring(offset, offset + term.length) });
+                matches.push({offset, term: textContent.substring(offset, offset + term.length)});
                 start = offset + term.length;
                 offset = textContent.toLowerCase().indexOf(term.toLowerCase(), start);
             }
@@ -44,7 +44,7 @@ function highlightTextElements(terms, elements) {
 
         matches.sort((a, b) => a.offset - b.offset);
         let currentIndex = 0;
-        const fragment = matches.reduce((acc, { offset, term }) => {
+        const fragment = matches.reduce((acc, {offset, term}) => {
             if (offset < currentIndex) return acc;
             const textBefore = textContent.substring(currentIndex, offset);
             if (textBefore) {
@@ -90,7 +90,7 @@ function renderResult(result, searchTerms, titleTag) {
     if (result.image) {
         const wrapper = document.createElement('div');
         wrapper.className = 'search-result-image';
-        const pic = createOptimizedPicture(result.image, '', false, [{ width: '375' }]);
+        const pic = createOptimizedPicture(result.image, '', false, [{width: '375'}]);
         wrapper.append(pic);
         a.append(wrapper);
     }
@@ -166,7 +166,7 @@ function filterData(searchTerms, data) {
         });
 
         if (minIdx >= 0) {
-            foundInHeader.push({ minIdx, result });
+            foundInHeader.push({minIdx, result});
             return;
         }
 
@@ -178,7 +178,7 @@ function filterData(searchTerms, data) {
         });
 
         if (minIdx >= 0) {
-            foundInMeta.push({ minIdx, result });
+            foundInMeta.push({minIdx, result});
         }
     });
 
@@ -228,7 +228,11 @@ function searchInput(block, config) {
         handleSearch(e, block, config);
     });
 
-    input.addEventListener('keyup', (e) => { if (e.code === 'Escape') { clearSearch(block); } });
+    input.addEventListener('keyup', (e) => {
+        if (e.code === 'Escape') {
+            clearSearch(block);
+        }
+    });
 
     return input;
 }
@@ -255,7 +259,7 @@ export default async function decorate(block) {
     const source = block.querySelector('a[href]') ? block.querySelector('a[href]').href : '/query-index.json';
     block.innerHTML = '';
     block.append(
-        searchBox(block, { source, placeholders }),
+        searchBox(block, {source, placeholders}),
         searchResultsContainer(block),
     );
 

From 1d9fbd36d1a25cc3048755cae99757795c5206f3 Mon Sep 17 00:00:00 2001
From: Bryan Deffley <bdeffley@famous-smoke.com>
Date: Thu, 9 May 2024 16:07:43 -0400
Subject: [PATCH 5/9] reformat

---
 best-cigars-guide/blocks/search/search.js | 426 +++++++++++-----------
 1 file changed, 213 insertions(+), 213 deletions(-)

diff --git a/best-cigars-guide/blocks/search/search.js b/best-cigars-guide/blocks/search/search.js
index 3b6a908..34a149a 100644
--- a/best-cigars-guide/blocks/search/search.js
+++ b/best-cigars-guide/blocks/search/search.js
@@ -1,273 +1,273 @@
 import {
-    createOptimizedPicture,
-    decorateIcons,
-    fetchPlaceholders,
+  createOptimizedPicture,
+  decorateIcons,
+  fetchPlaceholders,
 } from '../../scripts/aem.js';
 
 const searchParams = new URLSearchParams(window.location.search);
 
 function findNextHeading(el) {
-    let preceedingEl = el.parentElement.previousElement || el.parentElement.parentElement;
-    let h = 'H2';
-    while (preceedingEl) {
-        const lastHeading = [...preceedingEl.querySelectorAll('h1, h2, h3, h4, h5, h6')].pop();
-        if (lastHeading) {
-            const level = parseInt(lastHeading.nodeName[1], 10);
-            h = level < 6 ? `H${level + 1}` : 'H6';
-            preceedingEl = false;
-        } else {
-            preceedingEl = preceedingEl.previousElement || preceedingEl.parentElement;
-        }
+  let preceedingEl = el.parentElement.previousElement || el.parentElement.parentElement;
+  let h = 'H2';
+  while (preceedingEl) {
+    const lastHeading = [...preceedingEl.querySelectorAll('h1, h2, h3, h4, h5, h6')].pop();
+    if (lastHeading) {
+      const level = parseInt(lastHeading.nodeName[1], 10);
+      h = level < 6 ? `H${ level + 1 }` : 'H6';
+      preceedingEl = false;
+    } else {
+      preceedingEl = preceedingEl.previousElement || preceedingEl.parentElement;
     }
-    return h;
+  }
+  return h;
 }
 
 function highlightTextElements(terms, elements) {
-    elements.forEach((element) => {
-        if (!element || !element.textContent) return;
-
-        const matches = [];
-        const {textContent} = element;
-        terms.forEach((term) => {
-            let start = 0;
-            let offset = textContent.toLowerCase().indexOf(term.toLowerCase(), start);
-            while (offset >= 0) {
-                matches.push({offset, term: textContent.substring(offset, offset + term.length)});
-                start = offset + term.length;
-                offset = textContent.toLowerCase().indexOf(term.toLowerCase(), start);
-            }
-        });
-
-        if (!matches.length) {
-            return;
-        }
-
-        matches.sort((a, b) => a.offset - b.offset);
-        let currentIndex = 0;
-        const fragment = matches.reduce((acc, {offset, term}) => {
-            if (offset < currentIndex) return acc;
-            const textBefore = textContent.substring(currentIndex, offset);
-            if (textBefore) {
-                acc.appendChild(document.createTextNode(textBefore));
-            }
-            const markedTerm = document.createElement('mark');
-            markedTerm.textContent = term;
-            acc.appendChild(markedTerm);
-            currentIndex = offset + term.length;
-            return acc;
-        }, document.createDocumentFragment());
-        const textAfter = textContent.substring(currentIndex);
-        if (textAfter) {
-            fragment.appendChild(document.createTextNode(textAfter));
-        }
-        element.innerHTML = '';
-        element.appendChild(fragment);
+  elements.forEach((element) => {
+    if (!element || !element.textContent) return;
+
+    const matches = [];
+    const {textContent} = element;
+    terms.forEach((term) => {
+      let start = 0;
+      let offset = textContent.toLowerCase().indexOf(term.toLowerCase(), start);
+      while (offset >= 0) {
+        matches.push({offset, term: textContent.substring(offset, offset + term.length)});
+        start = offset + term.length;
+        offset = textContent.toLowerCase().indexOf(term.toLowerCase(), start);
+      }
     });
-}
 
-export async function fetchData(source) {
-    const response = await fetch(source);
-    if (!response.ok) {
-        // eslint-disable-next-line no-console
-        console.error('error loading API response', response);
-        return null;
+    if (!matches.length) {
+      return;
     }
 
-    const json = await response.json();
-    if (!json) {
-        // eslint-disable-next-line no-console
-        console.error('empty API response', source);
-        return null;
+    matches.sort((a, b) => a.offset - b.offset);
+    let currentIndex = 0;
+    const fragment = matches.reduce((acc, {offset, term}) => {
+      if (offset < currentIndex) return acc;
+      const textBefore = textContent.substring(currentIndex, offset);
+      if (textBefore) {
+        acc.appendChild(document.createTextNode(textBefore));
+      }
+      const markedTerm = document.createElement('mark');
+      markedTerm.textContent = term;
+      acc.appendChild(markedTerm);
+      currentIndex = offset + term.length;
+      return acc;
+    }, document.createDocumentFragment());
+    const textAfter = textContent.substring(currentIndex);
+    if (textAfter) {
+      fragment.appendChild(document.createTextNode(textAfter));
     }
+    element.innerHTML = '';
+    element.appendChild(fragment);
+  });
+}
 
-    return json.data;
+export async function fetchData(source) {
+  const response = await fetch(source);
+  if (!response.ok) {
+    // eslint-disable-next-line no-console
+    console.error('error loading API response', response);
+    return null;
+  }
+
+  const json = await response.json();
+  if (!json) {
+    // eslint-disable-next-line no-console
+    console.error('empty API response', source);
+    return null;
+  }
+
+  return json.data;
 }
 
 function renderResult(result, searchTerms, titleTag) {
-    const li = document.createElement('li');
-    const a = document.createElement('a');
-    a.href = result.path;
-    if (result.image) {
-        const wrapper = document.createElement('div');
-        wrapper.className = 'search-result-image';
-        const pic = createOptimizedPicture(result.image, '', false, [{width: '375'}]);
-        wrapper.append(pic);
-        a.append(wrapper);
-    }
-    if (result.title) {
-        const title = document.createElement(titleTag);
-        title.className = 'search-result-title';
-        const link = document.createElement('a');
-        link.href = result.path;
-        link.textContent = result.title;
-        highlightTextElements(searchTerms, [link]);
-        title.append(link);
-        a.append(title);
-    }
-    if (result.description) {
-        const description = document.createElement('p');
-        description.textContent = result.description;
-        highlightTextElements(searchTerms, [description]);
-        a.append(description);
-    }
-    li.append(a);
-    return li;
+  const li = document.createElement('li');
+  const a = document.createElement('a');
+  a.href = result.path;
+  if (result.image) {
+    const wrapper = document.createElement('div');
+    wrapper.className = 'search-result-image';
+    const pic = createOptimizedPicture(result.image, '', false, [{width: '375'}]);
+    wrapper.append(pic);
+    a.append(wrapper);
+  }
+  if (result.title) {
+    const title = document.createElement(titleTag);
+    title.className = 'search-result-title';
+    const link = document.createElement('a');
+    link.href = result.path;
+    link.textContent = result.title;
+    highlightTextElements(searchTerms, [link]);
+    title.append(link);
+    a.append(title);
+  }
+  if (result.description) {
+    const description = document.createElement('p');
+    description.textContent = result.description;
+    highlightTextElements(searchTerms, [description]);
+    a.append(description);
+  }
+  li.append(a);
+  return li;
 }
 
 function clearSearchResults(block) {
-    const searchResults = block.querySelector('.search-results');
-    searchResults.innerHTML = '';
+  const searchResults = block.querySelector('.search-results');
+  searchResults.innerHTML = '';
 }
 
 function clearSearch(block) {
-    clearSearchResults(block);
-    if (window.history.replaceState) {
-        const url = new URL(window.location.href);
-        url.search = '';
-        searchParams.delete('q');
-        window.history.replaceState({}, '', url.toString());
-    }
+  clearSearchResults(block);
+  if (window.history.replaceState) {
+    const url = new URL(window.location.href);
+    url.search = '';
+    searchParams.delete('q');
+    window.history.replaceState({}, '', url.toString());
+  }
 }
 
 async function renderResults(block, config, filteredData, searchTerms) {
-    clearSearchResults(block);
-    const searchResults = block.querySelector('.search-results');
-    const headingTag = searchResults.dataset.h;
-
-    if (filteredData.length) {
-        searchResults.classList.remove('no-results');
-        filteredData.forEach((result) => {
-            const li = renderResult(result, searchTerms, headingTag);
-            searchResults.append(li);
-        });
-    } else {
-        const noResultsMessage = document.createElement('li');
-        searchResults.classList.add('no-results');
-        noResultsMessage.textContent = config.placeholders.searchNoResults || 'No results found.';
-        searchResults.append(noResultsMessage);
-    }
+  clearSearchResults(block);
+  const searchResults = block.querySelector('.search-results');
+  const headingTag = searchResults.dataset.h;
+
+  if (filteredData.length) {
+    searchResults.classList.remove('no-results');
+    filteredData.forEach((result) => {
+      const li = renderResult(result, searchTerms, headingTag);
+      searchResults.append(li);
+    });
+  } else {
+    const noResultsMessage = document.createElement('li');
+    searchResults.classList.add('no-results');
+    noResultsMessage.textContent = config.placeholders.searchNoResults || 'No results found.';
+    searchResults.append(noResultsMessage);
+  }
 }
 
 function compareFound(hit1, hit2) {
-    return hit1.minIdx - hit2.minIdx;
+  return hit1.minIdx - hit2.minIdx;
 }
 
 function filterData(searchTerms, data) {
-    const foundInHeader = [];
-    const foundInMeta = [];
-
-    data.forEach((result) => {
-        let minIdx = -1;
-
-        searchTerms.forEach((term) => {
-            const idx = (result.header || result.title).toLowerCase().indexOf(term);
-            if (idx < 0) return;
-            if (minIdx < idx) minIdx = idx;
-        });
-
-        if (minIdx >= 0) {
-            foundInHeader.push({minIdx, result});
-            return;
-        }
-
-        const metaContents = `${result.title} ${result.description} ${result.path.split('/').pop()}`.toLowerCase();
-        searchTerms.forEach((term) => {
-            const idx = metaContents.indexOf(term);
-            if (idx < 0) return;
-            if (minIdx < idx) minIdx = idx;
-        });
-
-        if (minIdx >= 0) {
-            foundInMeta.push({minIdx, result});
-        }
-    });
+  const foundInHeader = [];
+  const foundInMeta = [];
 
-    return [
-        ...foundInHeader.sort(compareFound),
-        ...foundInMeta.sort(compareFound),
-    ].map((item) => item.result);
-}
+  data.forEach((result) => {
+    let minIdx = -1;
 
-async function handleSearch(e, block, config) {
-    const searchValue = e.target.value;
-    searchParams.set('q', searchValue);
-    if (window.history.replaceState) {
-        const url = new URL(window.location.href);
-        url.search = searchParams.toString();
-        window.history.replaceState({}, '', url.toString());
+    searchTerms.forEach((term) => {
+      const idx = (result.header || result.title).toLowerCase().indexOf(term);
+      if (idx < 0) return;
+      if (minIdx < idx) minIdx = idx;
+    });
+
+    if (minIdx >= 0) {
+      foundInHeader.push({minIdx, result});
+      return;
     }
 
-    if (searchValue.length < 3) {
-        clearSearch(block);
-        return;
+    const metaContents = `${result.title} ${result.description} ${result.path.split('/').pop()}`.toLowerCase();
+    searchTerms.forEach((term) => {
+      const idx = metaContents.indexOf(term);
+      if (idx < 0) return;
+      if (minIdx < idx) minIdx = idx;
+    });
+
+    if (minIdx >= 0) {
+      foundInMeta.push({minIdx, result});
     }
-    const searchTerms = searchValue.toLowerCase().split(/\s+/).filter((term) => !!term);
+  });
 
-    const data = await fetchData(config.source);
-    const filteredData = filterData(searchTerms, data);
-    await renderResults(block, config, filteredData, searchTerms);
+  return [
+    ...foundInHeader.sort(compareFound),
+    ...foundInMeta.sort(compareFound),
+  ].map((item) => item.result);
+}
+
+async function handleSearch(e, block, config) {
+  const searchValue = e.target.value;
+  searchParams.set('q', searchValue);
+  if (window.history.replaceState) {
+    const url = new URL(window.location.href);
+    url.search = searchParams.toString();
+    window.history.replaceState({}, '', url.toString());
+  }
+
+  if (searchValue.length < 3) {
+    clearSearch(block);
+    return;
+  }
+  const searchTerms = searchValue.toLowerCase().split(/\s+/).filter((term) => !!term);
+
+  const data = await fetchData(config.source);
+  const filteredData = filterData(searchTerms, data);
+  await renderResults(block, config, filteredData, searchTerms);
 }
 
 function searchResultsContainer(block) {
-    const results = document.createElement('ul');
-    results.className = 'search-results';
-    results.dataset.h = findNextHeading(block);
-    return results;
+  const results = document.createElement('ul');
+  results.className = 'search-results';
+  results.dataset.h = findNextHeading(block);
+  return results;
 }
 
 function searchInput(block, config) {
-    const input = document.createElement('input');
-    input.setAttribute('type', 'search');
-    input.className = 'search-input';
+  const input = document.createElement('input');
+  input.setAttribute('type', 'search');
+  input.className = 'search-input';
 
-    const searchPlaceholder = config.placeholders.searchPlaceholder || 'Search...';
-    input.placeholder = searchPlaceholder;
-    input.setAttribute('aria-label', searchPlaceholder);
+  const searchPlaceholder = config.placeholders.searchPlaceholder || 'Search...';
+  input.placeholder = searchPlaceholder;
+  input.setAttribute('aria-label', searchPlaceholder);
 
-    input.addEventListener('input', (e) => {
-        handleSearch(e, block, config);
-    });
+  input.addEventListener('input', (e) => {
+    handleSearch(e, block, config);
+  });
 
-    input.addEventListener('keyup', (e) => {
-        if (e.code === 'Escape') {
-            clearSearch(block);
-        }
-    });
+  input.addEventListener('keyup', (e) => {
+    if (e.code === 'Escape') {
+      clearSearch(block);
+    }
+  });
 
-    return input;
+  return input;
 }
 
 function searchIcon() {
-    const icon = document.createElement('span');
-    icon.classList.add('icon', 'icon-search');
-    return icon;
+  const icon = document.createElement('span');
+  icon.classList.add('icon', 'icon-search');
+  return icon;
 }
 
 function searchBox(block, config) {
-    const box = document.createElement('div');
-    box.classList.add('search-box');
-    box.append(
-        searchIcon(),
-        searchInput(block, config),
-    );
-
-    return box;
+  const box = document.createElement('div');
+  box.classList.add('search-box');
+  box.append(
+    searchIcon(),
+    searchInput(block, config),
+  );
+
+  return box;
 }
 
 export default async function decorate(block) {
-    const placeholders = await fetchPlaceholders();
-    const source = block.querySelector('a[href]') ? block.querySelector('a[href]').href : '/query-index.json';
-    block.innerHTML = '';
-    block.append(
-        searchBox(block, {source, placeholders}),
-        searchResultsContainer(block),
-    );
-
-    if (searchParams.get('q')) {
-        const input = block.querySelector('input');
-        input.value = searchParams.get('q');
-        input.dispatchEvent(new Event('input'));
-    }
-
-    decorateIcons(block);
+  const placeholders = await fetchPlaceholders();
+  const source = block.querySelector('a[href]') ? block.querySelector('a[href]').href : '/query-index.json';
+  block.innerHTML = '';
+  block.append(
+    searchBox(block, {source, placeholders}),
+    searchResultsContainer(block),
+  );
+
+  if (searchParams.get('q')) {
+    const input = block.querySelector('input');
+    input.value = searchParams.get('q');
+    input.dispatchEvent(new Event('input'));
+  }
+
+  decorateIcons(block);
 }

From 764f920a74f71f6a5ff74ccc800bd71ac7693b84 Mon Sep 17 00:00:00 2001
From: Bryan Deffley <bdeffley@famous-smoke.com>
Date: Thu, 9 May 2024 16:12:00 -0400
Subject: [PATCH 6/9] reformat

---
 best-cigars-guide/blocks/search/search.js | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/best-cigars-guide/blocks/search/search.js b/best-cigars-guide/blocks/search/search.js
index 34a149a..71eba24 100644
--- a/best-cigars-guide/blocks/search/search.js
+++ b/best-cigars-guide/blocks/search/search.js
@@ -13,7 +13,7 @@ function findNextHeading(el) {
     const lastHeading = [...preceedingEl.querySelectorAll('h1, h2, h3, h4, h5, h6')].pop();
     if (lastHeading) {
       const level = parseInt(lastHeading.nodeName[1], 10);
-      h = level < 6 ? `H${ level + 1 }` : 'H6';
+      h = level < 6 ? `H${level + 1}` : 'H6';
       preceedingEl = false;
     } else {
       preceedingEl = preceedingEl.previousElement || preceedingEl.parentElement;
@@ -27,12 +27,12 @@ function highlightTextElements(terms, elements) {
     if (!element || !element.textContent) return;
 
     const matches = [];
-    const {textContent} = element;
+    const { textContent } = element;
     terms.forEach((term) => {
       let start = 0;
       let offset = textContent.toLowerCase().indexOf(term.toLowerCase(), start);
       while (offset >= 0) {
-        matches.push({offset, term: textContent.substring(offset, offset + term.length)});
+        matches.push({ offset, term: textContent.substring(offset, offset + term.length) });
         start = offset + term.length;
         offset = textContent.toLowerCase().indexOf(term.toLowerCase(), start);
       }
@@ -44,7 +44,7 @@ function highlightTextElements(terms, elements) {
 
     matches.sort((a, b) => a.offset - b.offset);
     let currentIndex = 0;
-    const fragment = matches.reduce((acc, {offset, term}) => {
+    const fragment = matches.reduce((acc, { offset, term }) => {
       if (offset < currentIndex) return acc;
       const textBefore = textContent.substring(currentIndex, offset);
       if (textBefore) {
@@ -90,7 +90,7 @@ function renderResult(result, searchTerms, titleTag) {
   if (result.image) {
     const wrapper = document.createElement('div');
     wrapper.className = 'search-result-image';
-    const pic = createOptimizedPicture(result.image, '', false, [{width: '375'}]);
+    const pic = createOptimizedPicture(result.image, '', false, [{ width: '375' }]);
     wrapper.append(pic);
     a.append(wrapper);
   }
@@ -166,7 +166,7 @@ function filterData(searchTerms, data) {
     });
 
     if (minIdx >= 0) {
-      foundInHeader.push({minIdx, result});
+      foundInHeader.push({ minIdx, result });
       return;
     }
 
@@ -178,7 +178,7 @@ function filterData(searchTerms, data) {
     });
 
     if (minIdx >= 0) {
-      foundInMeta.push({minIdx, result});
+      foundInMeta.push({ minIdx, result });
     }
   });
 
@@ -259,7 +259,7 @@ export default async function decorate(block) {
   const source = block.querySelector('a[href]') ? block.querySelector('a[href]').href : '/query-index.json';
   block.innerHTML = '';
   block.append(
-    searchBox(block, {source, placeholders}),
+    searchBox(block, { source, placeholders }),
     searchResultsContainer(block),
   );
 

From 11a7328817f87e529df8d55fb8fe6361f4d9ec47 Mon Sep 17 00:00:00 2001
From: Bryan Deffley <bdeffley@famous-smoke.com>
Date: Thu, 9 May 2024 16:57:42 -0400
Subject: [PATCH 7/9] add custom helix-query file

---
 helix-query.yaml | 37 +++++++++++++++++++++++++++++++++++++
 1 file changed, 37 insertions(+)
 create mode 100644 helix-query.yaml

diff --git a/helix-query.yaml b/helix-query.yaml
new file mode 100644
index 0000000..3bef47b
--- /dev/null
+++ b/helix-query.yaml
@@ -0,0 +1,37 @@
+.excludes: &excludes
+  - '**/drafts/**'
+  - '**/images/**'
+  - '**/icons/**'
+  - '**/fragments/**'
+
+version: 1
+indices:
+  default:
+    include:
+      - /**
+    exclude:
+      - '**/drafts/**'
+      - '**/images/**'
+      - '**/icons/**'
+      - '**/fragments/**'
+      - /best-cigars-guide/footer
+      - /best-cigars-guide/nav
+      - /best-cigars-guide/404
+      - /best-cigars-guide/search
+    target: /best-cigars-guide/index/query-index.json
+    properties:
+      title:
+        select: head > meta[property="og:title"]
+        value: attribute(el, "content")
+      image:
+        select: head > meta[property="og:image"]
+        value: match(attribute(el, "content"), "https:\/\/[^/]+(/.*)")
+      description:
+        select: head > meta[name="description"]
+        value: attribute(el, "content")
+      lastModified:
+        select: none
+        value: parseTimestamp(headers["last-modified"], "ddd, DD MMM YYYY hh:mm:ss GMT")
+      text:
+        select: main > div p
+        value: words(textContent(el), 0, 5000)
\ No newline at end of file

From 1981b6ca24ac8b3d406d8d95f85321e7df01f511 Mon Sep 17 00:00:00 2001
From: Bryan Deffley <bdeffley@famous-smoke.com>
Date: Thu, 9 May 2024 16:58:03 -0400
Subject: [PATCH 8/9] format css file

---
 best-cigars-guide/blocks/search/search.css | 96 +++++++++++-----------
 1 file changed, 48 insertions(+), 48 deletions(-)

diff --git a/best-cigars-guide/blocks/search/search.css b/best-cigars-guide/blocks/search/search.css
index 472e789..12d2e75 100644
--- a/best-cigars-guide/blocks/search/search.css
+++ b/best-cigars-guide/blocks/search/search.css
@@ -1,122 +1,122 @@
 /* search box */
 .search .search-box {
-    display: grid;
-    grid-template-columns: 24px 1fr;
-    gap: 8px;
-    align-items: center;
+  display: grid;
+  grid-template-columns: 24px 1fr;
+  gap: 8px;
+  align-items: center;
 }
 
 .search .search-box input {
-    width: 100%;
-    border: 1px solid var(--dark-color);
-    padding: 5px 15px;
-    font: inherit;
+  width: 100%;
+  border: 1px solid var(--dark-color);
+  padding: 5px 15px;
+  font: inherit;
 }
 
 /* search results */
 .search ul.search-results {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(278px, 1fr));
-    gap: 16px;
-    padding-left: 0;
-    list-style: none;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(278px, 1fr));
+  gap: 16px;
+  padding-left: 0;
+  list-style: none;
 }
 
 .search ul.search-results > li {
-    border: 1px solid var(--dark-color);
+  border: 1px solid var(--dark-color);
 }
 
 .search ul.search-results > li > a {
-    display: block;
-    background-color: var(--background-color);
-    color: currentcolor;
-    cursor: pointer;
-    height: 100%;
+  display: block;
+  background-color: var(--background-color);
+  color: currentcolor;
+  cursor: pointer;
+  height: 100%;
 }
 
 .search ul.search-results > li > a:hover,
 .search ul.search-results > li > a:focus {
-    text-decoration: none;
+  text-decoration: none;
 }
 
 .search ul.search-results > li .search-result-title,
 .search ul.search-results > li p {
-    padding: 0 16px;
+  padding: 0 16px;
 }
 
 .search ul.search-results > li .search-result-title {
-    font-size: var(--body-font-size-m);
-    font-weight: normal;
+  font-size: var(--body-font-size-m);
+  font-weight: normal;
 }
 
 .search ul.search-results > li .search-result-title a {
-    color: currentcolor;
-    text-decoration: none;
+  color: currentcolor;
+  text-decoration: none;
 }
 
 .search ul.search-results > li p {
-    font-size: var(--body-font-size-s);
+  font-size: var(--body-font-size-s);
 }
 
 .search ul.search-results > li .search-result-image {
-    aspect-ratio: 4 / 3;
+  aspect-ratio: 4 / 3;
 }
 
 .search ul.search-results > li picture img {
-    display: block;
-    width: 100%;
-    object-fit: cover;
+  display: block;
+  width: 100%;
+  object-fit: cover;
 }
 
 /* no results */
 .search ul.search-results.no-results {
-    display: block;
-    padding-left: 32px;
+  display: block;
+  padding-left: 32px;
 }
 
 .search ul.search-results.no-results > li {
-    border: none;
+  border: none;
 }
 
 /* minimal variant */
 .search.minimal ul.search-results {
-    display: block;
-    padding-left: 32px;
+  display: block;
+  padding-left: 32px;
 }
 
 .search.minimal ul.search-results > li {
-    position: relative;
-    border: none;
+  position: relative;
+  border: none;
 }
 
 .search.minimal ul.search-results > li .search-result-title,
 .search.minimal ul.search-results > li p {
-    padding: unset;
+  padding: unset;
 }
 
 .search.minimal ul.search-results > li .search-result-title a {
-    color: var(--link-color);
+  color: var(--link-color);
 }
 
 /* stylelint-disable no-descending-specificity */
 .search.minimal ul.search-results > li > a {
-    background-color: unset;
+  background-color: unset;
 }
 
 .search.minimal ul.search-results > li > a:hover a,
 .search.minimal ul.search-results > li > a:focus a {
-    text-decoration: underline;
-    color: var(--link-hover-color);
+  text-decoration: underline;
+  color: var(--link-hover-color);
 }
 
 .search.minimal ul.search-results > li .search-result-image {
-    position: absolute;
-    top: 2px;
-    left: -32px;
+  position: absolute;
+  top: 2px;
+  left: -32px;
 }
 
 .search.minimal ul.search-results > li picture img {
-    height: 24px;
-    width: 24px;
-    border-radius: 50%;
+  height: 24px;
+  width: 24px;
+  border-radius: 50%;
 }

From f3de76f0a15b0e14b055e7b60f6d3cbc2934758e Mon Sep 17 00:00:00 2001
From: Bryan Deffley <bdeffley@famous-smoke.com>
Date: Tue, 14 May 2024 08:49:46 -0400
Subject: [PATCH 9/9] add custom indexing

---
 helix-query.yaml | 32 ++++++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/helix-query.yaml b/helix-query.yaml
index 3bef47b..1f11ae4 100644
--- a/helix-query.yaml
+++ b/helix-query.yaml
@@ -18,6 +18,12 @@ indices:
       - /best-cigars-guide/nav
       - /best-cigars-guide/404
       - /best-cigars-guide/search
+      - /best-cigars-guide/best-cigars-by-country
+      - /best-cigars-guide/best-cigars-by-occasion
+      - /best-cigars-guide/best-cigars-by-food-drink-pairing
+      - /best-cigars-guide/best-cigars-by-shape-type-size
+      - /best-cigars-guide/best-cigars-by-year
+      - /best-cigars-guide/best-cigar-accessories
     target: /best-cigars-guide/index/query-index.json
     properties:
       title:
@@ -34,4 +40,30 @@ indices:
         value: parseTimestamp(headers["last-modified"], "ddd, DD MMM YYYY hh:mm:ss GMT")
       text:
         select: main > div p
+        value: words(textContent(el), 0, 5000)
+  categories:
+    include:
+      - /best-cigars-guide/best-cigars-by-country
+      - /best-cigars-guide/best-cigars-by-occasion
+      - /best-cigars-guide/best-cigars-by-food-drink-pairing
+      - /best-cigars-guide/best-cigars-by-shape-type-size
+      - /best-cigars-guide/best-cigars-by-year
+      - /best-cigars-guide/best-cigar-accessories
+    exclude: *excludes
+    target: /best-cigars-guide/index/category-index.json
+    properties:
+      title:
+        select: head > meta[property="og:title"]
+        value: attribute(el, "content")
+      image:
+        select: head > meta[property="og:image"]
+        value: match(attribute(el, "content"), "https:\/\/[^/]+(/.*)")
+      description:
+        select: head > meta[name="description"]
+        value: attribute(el, "content")
+      lastModified:
+        select: none
+        value: parseTimestamp(headers["last-modified"], "ddd, DD MMM YYYY hh:mm:ss GMT")
+      text:
+        select: div.article-list
         value: words(textContent(el), 0, 5000)
\ No newline at end of file