WIP: Add start of navbar search field

_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

_includes/navigation.html

@@ -44,7 +44,12 @@
                     {% endif %}
                 {% endfor %}
             </ul>
-            <ul class="navbar-nav ml-auto">
+            <div class="ml-auto">
+                {% if site.search.enabled == true %}
+                    {% include search.html %}
+                {% endif %}
+            </div>
+            <ul class="navbar-nav">
                 {% for p in site.links.header %}
                     <li class="nav-item {% if page.title == p.title %}active{% endif %}">
                         <a

_includes/search-index.html

@@ -0,0 +1,12 @@
+{% assign count = 0 %}
+
+{% for page in site.pages %}
+    {
+        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 %}
+{% endfor %}

_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-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>
+                    `;
+                });
+            });
+
+            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>

_sass/components/_search.scss

@@ -0,0 +1,91 @@
+.site-search {
+    position: relative;
+
+    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;
+        }
+    }
+}
+
+.search-results {
+    @include themer(background-color, (
+        'dark': $background-color-dark,
+        'light': $background-color-light,
+    ));
+
+    border-radius: 5px;
+    list-style: none;
+    margin: 0;
+    max-height: 400px;
+    max-width: 600px;
+    min-width: 400px;
+    padding: 0;
+    position: absolute;
+    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;
+    }
+}

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

assets/js/search-index.js

@@ -0,0 +1,6 @@
+---
+---
+
+const SearchIndex = [
+    {% include search-index.html %}
+];