From 451a9b70c1be29a8277159ba8e07c7340b4204ce Mon Sep 17 00:00:00 2001
From: Vladimir Jimenez <allejo@me.com>
Date: Sun, 31 Oct 2021 19:39:48 -0700
Subject: [PATCH 1/3] Add start of navbar search field

---
 _config.yml                   |  3 +++
 _includes/navigation.html     | 13 ++++++++++++-
 _sass/components/_search.scss | 32 ++++++++++++++++++++++++++++++++
 assets/css/styles.scss        |  1 +
 4 files changed, 48 insertions(+), 1 deletion(-)
 create mode 100644 _sass/components/_search.scss

diff --git a/_config.yml b/_config.yml
index cdecbb9..8c91abd 100644
--- a/_config.yml
+++ b/_config.yml
@@ -13,6 +13,9 @@ license:
   docs: CC BY 3.0
   docs_url: https://creativecommons.org/licenses/by/3.0/
 
+search:
+  enabled: true
+
 links:
   header:
     - title: GitHub
diff --git a/_includes/navigation.html b/_includes/navigation.html
index df962f0..1d65617 100644
--- a/_includes/navigation.html
+++ b/_includes/navigation.html
@@ -44,7 +44,18 @@
                     {% endif %}
                 {% endfor %}
             </ul>
-            <ul class="navbar-nav ml-auto">
+            <div class="site-search ml-auto">
+                {% if site.search.enabled == true %}
+                    <form class="form-inline" action="/search" method="get">
+                        <label for="search-field">
+                            {% include fa-icon.html icon="search" %}
+                            <span class="sr-only">Search Website</span>
+                        </label>
+                        <input type="text" id="search-field" placeholder="Search" />
+                    </form>
+                {% endif %}
+            </div>
+            <ul class="navbar-nav">
                 {% for p in site.links.header %}
                     <li class="nav-item {% if page.title == p.title %}active{% endif %}">
                         <a
diff --git a/_sass/components/_search.scss b/_sass/components/_search.scss
new file mode 100644
index 0000000..3e33d44
--- /dev/null
+++ b/_sass/components/_search.scss
@@ -0,0 +1,32 @@
+.site-search {
+    label {
+        cursor: pointer;
+    }
+
+    input[type="text"] {
+        appearance: none;
+        background-color: transparent;
+        border: 0;
+        color: currentColor;
+        margin: 0;
+        outline: none;
+        padding: 0;
+        transition: margin 0.5s, width 0.5s;
+        width: 0;
+    }
+
+    &:focus-within {
+        input[type="text"] {
+            @include themer(border-bottom-color, (
+                'dark': $site-ui-brand-dark,
+                'light': $site-ui-brand-light,
+            ));
+
+            border-bottom-width: 1px;
+            border-bottom-style: solid;
+            margin-left: 0.5rem;
+            padding: 0 0.25rem;
+            width: 200px;
+        }
+    }
+}
diff --git a/assets/css/styles.scss b/assets/css/styles.scss
index df1f905..d9b9910 100644
--- a/assets/css/styles.scss
+++ b/assets/css/styles.scss
@@ -36,6 +36,7 @@ $site-ui-masthead-color-light: {{ site.ui.masthead.color.light | default: '#fff'
 @import 'components/highlight';
 @import 'components/masthead';
 @import 'components/mobile-toc';
+@import 'components/search';
 @import 'components/sidebar';
 
 // Utilities

From 52d34a91d81eba14838cf571fb202ad24a760557 Mon Sep 17 00:00:00 2001
From: Vladimir Jimenez <allejo@me.com>
Date: Wed, 31 May 2023 22:49:28 -0700
Subject: [PATCH 2/3] Add start of a functional search feature

---
 _includes/navigation.html     | 10 +---
 _includes/search-index.html   | 11 +++++
 _includes/search.html         | 88 +++++++++++++++++++++++++++++++++++
 _sass/components/_search.scss | 22 +++++++++
 assets/js/search-index.js     |  6 +++
 5 files changed, 129 insertions(+), 8 deletions(-)
 create mode 100644 _includes/search-index.html
 create mode 100644 _includes/search.html
 create mode 100644 assets/js/search-index.js

diff --git a/_includes/navigation.html b/_includes/navigation.html
index 1d65617..b4429fa 100644
--- a/_includes/navigation.html
+++ b/_includes/navigation.html
@@ -44,15 +44,9 @@
                     {% endif %}
                 {% endfor %}
             </ul>
-            <div class="site-search ml-auto">
+            <div class="ml-auto">
                 {% if site.search.enabled == true %}
-                    <form class="form-inline" action="/search" method="get">
-                        <label for="search-field">
-                            {% include fa-icon.html icon="search" %}
-                            <span class="sr-only">Search Website</span>
-                        </label>
-                        <input type="text" id="search-field" placeholder="Search" />
-                    </form>
+                    {% include search.html %}
                 {% endif %}
             </div>
             <ul class="navbar-nav">
diff --git a/_includes/search-index.html b/_includes/search-index.html
new file mode 100644
index 0000000..758fa65
--- /dev/null
+++ b/_includes/search-index.html
@@ -0,0 +1,11 @@
+{% assign count = 0 %}
+
+{% for page in site.pages %}
+    {
+        id: {{ count }},
+        title: "{{ page.title }}",
+        content: "{{ page.content | strip_html | strip_newlines | escape }}",
+        permalink: "{{ page.url | relative_url }}",
+    },
+    {% assign count = count | plus: 1 %}
+{% endfor %}
diff --git a/_includes/search.html b/_includes/search.html
new file mode 100644
index 0000000..6e90e90
--- /dev/null
+++ b/_includes/search.html
@@ -0,0 +1,88 @@
+<script src="{{ '/assets/js/search-index.js' | relative_url }}"></script>
+<script src="https://unpkg.com/flexsearch@0.7.31/dist/flexsearch.bundle.js"></script>
+<script type="module">
+    import { Application, Controller } from "https://unpkg.com/@hotwired/stimulus@3.2.1/dist/stimulus.js";
+
+    window.Stimulus = Application.start();
+
+    Stimulus.register('search', class extends Controller {
+        static targets = ['form', 'input', 'results'];
+
+        connect() {
+            this.element.addEventListener('focusout', this.onFocusLost);
+            this.formTarget.addEventListener('submit', this.onFormSubmit);
+            this.inputTarget.addEventListener('keyup', this.onSearchFilter);
+
+            this.searchIndex = new FlexSearch.Document({
+                document: {
+                    id: 'id',
+                    index: [
+                        'title',
+                        'content'
+                    ]
+                }
+            });
+            SearchIndex.forEach(document => {
+                this.searchIndex.add(document.id, document);
+            });
+        }
+
+        disconnect() {
+            this.element.removeEventListener('focusout', this.onFocusLost);
+            this.formTarget.removeEventListener('submit', this.onFormSubmit);
+            this.inputTarget.removeEventListener('keyup', this.onSearchFilter);
+        }
+
+        onFormSubmit = (event) => event.preventDefault();
+
+        onSearchFilter = (event) => {
+            const query = event.target.value;
+            const searchResults = this.searchIndex.search(query, 10);
+
+            let output = '';
+            searchResults.forEach(searchResult => {
+                const contentItems = searchResult.result.map(id => SearchIndex[id]);
+
+                contentItems.forEach(contentItem => {
+                    output += `
+                        <li class="search-result">
+                            <a href="${contentItem.permalink}">
+                                <p><strong>${contentItem.title}</strong></p>
+                                <p>${contentItem.content}</p>
+                            </a>
+                        </li>
+                    `;
+                });
+            });
+
+            this.resultsTarget.innerHTML = output;
+
+            console.log('search query', query, "--", searchResults);
+        }
+
+        onFocusLost = (focusEvent) => {
+            if (focusEvent.currentTarget.contains(focusEvent.relatedTarget)) {
+                return;
+            }
+
+            this.resultsTarget.innerHTML = '';
+        };
+    });
+</script>
+
+<div class="site-search" data-controller="search">
+    <form class="form-inline" data-search-target="form">
+        <label for="search-field">
+            {% include fa-icon.html icon="search" %}
+            <span class="sr-only">Search Website</span>
+        </label>
+
+        <input
+            type="text"
+            id="search-field"
+            placeholder="Search"
+            data-search-target="input"
+        />
+    </form>
+    <ul class="search-results" data-search-target="results"></ul>
+</div>
diff --git a/_sass/components/_search.scss b/_sass/components/_search.scss
index 3e33d44..b34c183 100644
--- a/_sass/components/_search.scss
+++ b/_sass/components/_search.scss
@@ -1,4 +1,6 @@
 .site-search {
+    position: relative;
+
     label {
         cursor: pointer;
     }
@@ -30,3 +32,23 @@
         }
     }
 }
+
+.search-results {
+    @include themer(background-color, (
+        'dark': $background-color-dark,
+        'light': $background-color-light,
+    ));
+
+    left: 0;
+    list-style: none;
+    margin: 0;
+    max-width: 400px;
+    padding: 0;
+    position: absolute;
+    top: 0;
+    z-index: 10;
+
+    .search-result {
+        padding: 1em;
+    }
+}
diff --git a/assets/js/search-index.js b/assets/js/search-index.js
new file mode 100644
index 0000000..a9b3ffe
--- /dev/null
+++ b/assets/js/search-index.js
@@ -0,0 +1,6 @@
+---
+---
+
+const SearchIndex = [
+    {% include search-index.html %}
+];

From 9d007aed038c3a7a3c96ea5f5650e02e51a8f0e2 Mon Sep 17 00:00:00 2001
From: Vladimir Jimenez <allejo@me.com>
Date: Wed, 14 Jun 2023 15:36:15 -0700
Subject: [PATCH 3/3] Start stylizing the search results

---
 _includes/search-index.html   |  1 +
 _includes/search.html         |  8 +++----
 _sass/components/_search.scss | 43 ++++++++++++++++++++++++++++++++---
 3 files changed, 45 insertions(+), 7 deletions(-)

diff --git a/_includes/search-index.html b/_includes/search-index.html
index 758fa65..42f03d5 100644
--- a/_includes/search-index.html
+++ b/_includes/search-index.html
@@ -5,6 +5,7 @@
         id: {{ count }},
         title: "{{ page.title }}",
         content: "{{ page.content | strip_html | strip_newlines | escape }}",
+        summary: "{{ page.content | strip_html | strip_newlines | truncatewords: 20 }}",
         permalink: "{{ page.url | relative_url }}",
     },
     {% assign count = count | plus: 1 %}
diff --git a/_includes/search.html b/_includes/search.html
index 6e90e90..3599d1b 100644
--- a/_includes/search.html
+++ b/_includes/search.html
@@ -45,10 +45,10 @@
 
                 contentItems.forEach(contentItem => {
                     output += `
-                        <li class="search-result">
-                            <a href="${contentItem.permalink}">
-                                <p><strong>${contentItem.title}</strong></p>
-                                <p>${contentItem.content}</p>
+                        <li class="search-result-container">
+                            <a class="search-result" href="${contentItem.permalink}">
+                                <p class="search-result-title"><strong>${contentItem.title}</strong></p>
+                                <p class="search-result-summary">${contentItem.summary}</p>
                             </a>
                         </li>
                     `;
diff --git a/_sass/components/_search.scss b/_sass/components/_search.scss
index b34c183..ec648a3 100644
--- a/_sass/components/_search.scss
+++ b/_sass/components/_search.scss
@@ -39,16 +39,53 @@
         'light': $background-color-light,
     ));
 
-    left: 0;
+    border-radius: 5px;
     list-style: none;
     margin: 0;
-    max-width: 400px;
+    max-height: 400px;
+    max-width: 600px;
+    min-width: 400px;
     padding: 0;
     position: absolute;
-    top: 0;
+    right: 0;
+    top: calc(100% + 1rem);
     z-index: 10;
 
+    &:not(:empty) {
+        border: 3px solid #a2a2a2;
+    }
+
+    .search-result-container {
+        &:focus,
+        &:hover {
+            background-color: rgba(255, 255, 255, 0.1);
+        }
+
+        &:not(:hover):nth-child(odd) {
+            background-color: rgba(255, 255, 255, 0.05);
+        }
+    }
+
     .search-result {
+        display: block;
         padding: 1em;
     }
+
+    .search-result-title,
+    .search-result-summary {
+        @include themer(color, (
+            'dark': $color-dark,
+            'light': $color-light,
+        ));
+
+        margin-bottom: 0;
+    }
+
+    .search-result-title {
+        margin-bottom: 0.25rem;
+    }
+
+    .search-result-summary {
+        font-size: 0.85rem;
+    }
 }