Add search functionality for docs

_includes/navigation.html.twig

@@ -20,6 +20,33 @@
 
             <nav class="col-lg site-navigation">
                 <ul id="navigation" class="site-navigation__links">
+                    <li class="site-search">
+                        <form
+                            class="site-search__form"
+                            action="{{ url(pages['Search']) }}"
+                            method="get"
+                        >
+                            <label for="global-search" class="site-search__label">
+                                <img
+                                    src="{{ url('/assets/images/magnifying-glass.svg') }}"
+                                    alt="Search icon"
+                                    class="site-search__icon"
+                                    aria-hidden="true"
+                                >
+                                <span class="sr-only">Search Site</span>
+                            </label>
+
+                            <input
+                                type="text"
+                                name="query"
+                                id="global-search"
+                                class="site-search__input"
+                                autocomplete="off"
+                                placeholder="Search terms..."
+                            >
+                        </form>
+                    </li>
+
                     {% for link in data.navigation.links %}
                         {%- set url = link.url[0] == '/' ? url(link.url) : link.url -%}
                         <li>

_layouts/page-sidebar.html.twig

@@ -12,6 +12,23 @@
                     <div class="position-sticky position-top-1 scrollable-sidebar">
                         {% block aside %}{% endblock %}
 
+                        {% if not this.disableSearch %}
+                            <div class="c-search-widget border-t pt-2 my-3 hide-xs show-lg">
+                                <form action="{{ url(pages['Search']) }}" method="get">
+                                    <label for="search-form" class="strong">
+                                        Search Docs
+                                    </label>
+                                    <input
+                                        type="text"
+                                        name="query"
+                                        id="search-form"
+                                        class="c-form__input w-100"
+                                        autocomplete="off"
+                                    >
+                                </form>
+                            </div>
+                        {% endif %}
+
                         {% if this.navigation.prev %}
                             {% set target = pages[this.navigation.prev] %}
 

_layouts/page.html.twig

@@ -1,7 +1,7 @@
 {% extends '_layouts/base.html.twig' %}
 
 {% block content_root %}
-    <main class="container background-dark s-documentation">
+    <main class="container background-dark {% if not this.disableDocScope %}s-documentation{% endif %}">
         <div class="py-3 px-md-3">
             {% block content %}{% endblock %}
         </div>

_pages/credits.html.twig

@@ -20,6 +20,7 @@ permalink: /credits/
         - [Book by Deemak Daksina](https://thenounproject.com/icon/1230262/) from the Noun Project - CC-BY 3.0 US License
         - [FAQ by ProSymbols](https://thenounproject.com/icon/790491/) from the Noun Project - CC-BY 3.0 US License
         - [chat icon](https://thenounproject.com/icon/888687/) from the Starter Icons Collection from the Noun Project - Public Domain
+        - [Magnifying Glass](https://thenounproject.com/icon/888719/) from the Starter Icons Collection from the Noun Project - Public Domain
         - [Apple by zidney](https://thenounproject.com/term/apple/1426926/) from the Noun Project - CC-BY 3.0 US License
         - [Windows Logo](https://commons.wikimedia.org/wiki/File:Windows_logo_-_2012.svg) - Public Domain
         - Operating system logos are copyright and/or trademark their respective owners.
@@ -29,6 +30,7 @@ permalink: /credits/
         - [PhotoSwipe](http://photoswipe.com/) by Dmitry Semenov - MIT License (with one exception: "Do not create a public WordPress plugin based on it")
         - [Plyr](https://github.com/selz/plyr) - MIT License
         - [getOS function](https://stackoverflow.com/a/38241481) by [Vladyslav Turak](https://stackoverflow.com/users/4815056/vladyslav-turak) - CC BY-SA 3.0 Unported
+        - [FlexSearch](https://github.com/nextapps-de/flexsearch/) - Apache License 2.0
 
         ## CSS/SCSS
 

_pages/search/index.html.twig

@@ -0,0 +1,53 @@
+---
+permalink: /search/
+disableDocScope: true
+title: Search
+---
+
+{% extends '_layouts/page.html.twig' %}
+
+{% block content %}
+    <h1>Search</h1>
+
+    <noscript>
+        <div class="c-alert c-alert--error">
+            <p class="c-alert__title">
+                <strong>JavaScript Required</strong>
+            </p>
+            <p>Oops. This page requires you have JavaScript enabled.</p>
+        </div>
+    </noscript>
+
+    <div class="show-js">
+        <form action="{{ url(this) }}" method="get">
+            <label for="search-field" class="sr-only">
+                Enter the terms you wish to search for
+            </label>
+            <input
+                type="text"
+                name="query"
+                id="search-field"
+                class="c-form__input w-100"
+                autocomplete="off"
+            >
+        </form>
+    </div>
+
+    <div id="search-results"></div>
+
+    <template id="search-result">
+        <article class="c-search-result">
+            <p class="c-search-result__title">
+                <a href=""></a>
+            </p>
+            <p class="c-search-result__permalink"></p>
+            <p class="c-search-result__description"></p>
+        </article>
+    </template>
+{% endblock %}
+
+{% block scripts %}
+    <script src="{{ url(pages['Search Index']) }}"></script>
+    <script src="{{ url('/assets/js/flexsearch.min.js') }}"></script>
+    <script src="{{ url('/assets/js/search.js') }}"></script>
+{% endblock %}

_pages/search/index.js.twig

@@ -0,0 +1,19 @@
+---
+title: Search Index
+permalink: /search/index.js
+---
+
+const SearchIndex = [
+    {% set uid = 0 %}
+    {% for collection in site.collections %}
+        {% for item in collections[collection.name] %}
+            {
+                id: {{ uid }},
+                title: '{{ item.title }}',
+                content: "{{ item.content | striptags | replace({'\n': ' '}) | escape('js') }}",
+                permalink: '{{ url(item) }}'
+            },
+            {%- set uid = uid + 1 -%}
+        {% endfor %}
+    {% endfor %}
+];

_sass/abstracts/_mixins.scss

@@ -115,3 +115,36 @@
 @mixin text-muted($important: false) {
     opacity: 0.7 if($important, !important, null);
 }
+
+///
+/// Make text accessible to screen readers but invisible to sighted users.
+///
+/// @access public
+///
+@mixin sr-only() {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+}
+
+///
+/// Make an element visible when its in focus.
+///
+/// @access public
+///
+@mixin sr-only-focusable() {
+    &:active,
+    &:focus {
+        position: static;
+        width: auto;
+        height: auto;
+        overflow: visible;
+        clip: auto;
+        white-space: normal;
+    }
+}

_sass/components/_alert.scss

@@ -0,0 +1,51 @@
+.c-alert {
+    @include padding(x, 3);
+    @include padding(y, 2);
+
+    border: 2px solid rgba(#fff, 0.3);
+    border-radius: $border-radius;
+
+    p:last-child {
+        margin-bottom: 0;
+    }
+}
+
+.c-alert__title {
+    @include margin(b, 2);
+
+    &::before {
+        @include margin(r, 2);
+    }
+}
+
+.c-alert--error {
+    background-color: rgba(187, 0, 0, 0.7);
+
+    .c-alert__title::before {
+        content: '\2715';
+    }
+}
+
+.c-alert--warning {
+    background-color: rgba(187, 137, 0, 0.7);
+
+    .c-alert__title::before {
+        content: '\26A0';
+    }
+}
+
+.c-alert--success {
+    background-color: rgba(18, 98, 0, 0.7);
+
+    .c-alert__title::before {
+        content: '\2713';
+    }
+}
+
+.c-alert--info {
+    background-color: rgba(0, 134, 187, 0.7);
+
+    .c-alert__title::before {
+        content: '\2139'
+    }
+}

_sass/components/_form.scss

@@ -0,0 +1,9 @@
+.c-form__input {
+    @include padding(x, 2);
+    @include padding(y, 1);
+
+    background-color: $color-primary;
+    border: $border-default;
+    border-radius: $border-radius;
+    color: $color-text-primary;
+}

_sass/components/_search-result.scss

@@ -0,0 +1,29 @@
+.c-search-result {
+    @include margin(y, 3);
+
+    border-bottom: $border-default;
+
+    &:last-of-type {
+        border-bottom: none;
+    }
+
+    span {
+        font-weight: bold;
+    }
+}
+
+.c-search-result__title {
+    font-size: map-get($font-sizes, h4);
+    margin-bottom: 0;
+}
+
+.c-search-result__permalink {
+    @include text-muted();
+
+    font-size: map-get($font-sizes, small);
+    margin-bottom: 0;
+}
+
+.c-search-result__description {
+    @include margin(t, 3);
+}

_sass/layout/_navigation.scss

@@ -10,7 +10,8 @@ $_default-nav-breakpoint: 'lg';
     }
 
     &[aria-expanded='true'] ~ nav .site-navigation__links {
-        display: block;
+        display: -ms-flexbox;
+        display: flex;
     }
 }
 
@@ -19,33 +20,35 @@ $_default-nav-breakpoint: 'lg';
 }
 
 .site-navigation__links {
+    display: -ms-flexbox;
+    display: flex;
+    justify-content: flex-end;
     list-style: none;
     margin: 0;
     padding: 0;
 
     @include respond-down($_default-nav-breakpoint) {
-        margin-top: 15px;
+        -ms-flex-direction: column;
+        flex-direction: column;
         text-align: left;
     }
 
     @include respond-up($_default-nav-breakpoint) {
-        display: block !important;
+        display: flex !important;
     }
 
     li {
         @include respond-down($_default-nav-breakpoint) {
-            border-top: $border-default;
+            &:nth-child(n+2) {
+                border-top: $border-default;
+            }
         }
 
         @include respond-up($_default-nav-breakpoint) {
             display: inline-block;
             font-size: 1.1em;
             margin-left: 15px;
         }
-
-        &:first-child {
-            margin-left: 0;
-        }
     }
 
     a {