Content search (elixir-europe#532)

* testing new search

* word fix

* no keywords

* multiple search fixes

* less in config

* better css

* doc update

* relative url search

* typo

* better scaling

* bigger result titles

* better css

* minify lunr

* small changes

* stronger drop shadow

* no relative url in results

Author: bedroesb

404.md

@@ -1,6 +1,6 @@
 ---
 title: Page Not Found
-search: exclude
+search_exclude: true
 ---  
 
 Sorry, but the page you were trying to view does not exist. Try searching for it or looking at the URL to see if it looks correct.

CODE_OF_CONDUCT.md

@@ -1,7 +1,7 @@
 ---
 title: Code of Conduct
 sidebar: contribute
-search: exclude
+search_exclude: true
 toc: false
 ---
 

_config.yml

@@ -31,6 +31,8 @@ exclude:
   - var/
   - README.md
   - vendor
+  - Gemfile*
+  - LICENSE
 
 feedback_subject_line: RDMkit feedback
 

_includes/contributor-carousel.html

@@ -4,7 +4,7 @@
 {%- assign allcontributors = include.custom | split: ", " | sort %}
 {%- else %}
 {%- for page in site.pages %}
-{%- if page.contributors and page.search != "exclude" %}
+{%- if page.contributors and page.search_exclude != "true" %}
 {%- assign pagecontr = page.contributors | join: ", " %}
 {%- if allcontrstr %}
 {%- assign allcontrstr = allcontrstr | append: ", " | append: pagecontr %}

_includes/contributor-page.html

@@ -3,7 +3,7 @@
 {%- assign allcontributors = include.custom | split: ", " | sort %}
 {%- else %}
 {%- for page in site.pages %}
-{%- if page.contributors and page.search != "exclude" %}
+{%- if page.contributors and page.search_exclude != "true" %}
 {%- assign pagecontr = page.contributors | join: ", " %}
 {%- if allcontrstr %}
 {%- assign allcontrstr = allcontrstr | append: ", " | append: pagecontr %}

_includes/head.html

@@ -9,7 +9,7 @@
     <meta name="apple-mobile-web-app-title" content="RDMkit">
     <meta name="msapplication-TileColor" content="#c23669">
     <meta name="theme-color" content="#c23669">
-    {%- if page.search == "exclude" %}
+    {%- if page.search_exclude == "true" %}
     <meta name="robots" content="noindex" />
     {%- endif %}
     <title>{%- if page.title %}{{ page.title }} | {{ site.site_title }}{%- else %}{{ site.site_title }}{%- endif %}</title>
@@ -27,6 +27,7 @@
     <!-- JavaScript  -->
     <script src="{{ 'assets/js/popper.min.js' | relative_url }}"></script>
     <script src="{{ 'assets/js/jquery-3.5.1.min.js' | relative_url }}"></script>
+    <script src="{{ 'assets/js/lunr.min.js' | relative_url }}"></script>
     <script src="{{ 'assets/js/bootstrap.min.js' | relative_url }}"></script>
     <script src="{{ 'assets/js/anchor.min.js' | relative_url }}"></script>
     <script src="{{ 'assets/js/toc.js' | relative_url }}"></script>

_includes/topnav.html

@@ -14,23 +14,23 @@
                     {%- for entry in topnav.topnav -%}
                     {%- for item in entry.items -%}
                     {%- if item.external_url -%}
-                    <li class="nav-item ms-0 ms-lg-3 mt-2 mt-lg-0">
+                    <li class="nav-item ms-0 ms-lg-3">
                         <a class="nav-link ps-2" href="{{item.external_url}}" target="_blank" rel="noopener">{{item.title}}</a>
                     </li>
                     {% elsif page.url contains item.url %}
-                    <li class="nav-item ms-0 ms-lg-3 mt-2 mt-lg-0">
+                    <li class="nav-item ms-0 ms-lg-3">
                         <a class="nav-link ps-2 active" aria-current="page" href="{{item.url | relative_url }}">{{item.title}}</a>
                     </li>
                     {% else %}
-                    <li class="nav-item ms-0 ms-lg-3 mt-2 mt-lg-0">
+                    <li class="nav-item ms-0 ms-lg-3">
                         <a class="nav-link ps-2" href="{{item.url | relative_url }}">{{item.title}}</a>
                     </li>
                     {% endif %}
                     {%- endfor %}
                     {%- endfor %}
                     <!--start Feedback button-->
                     {%- unless site.feedback_disable %}
-                    <li class="nav-item ms-0 ms-lg-3 mt-2 mt-lg-0">
+                    <li class="nav-item ms-0 ms-lg-3">
                         {%- if site.feedback_text -%}
                         {%- assign feedback_text = site.feedback_text -%}
                         {%- else -%}
@@ -44,23 +44,12 @@
                     </li>
                     {% endunless %}
                     <!--start search-->
-                    <li class="nav-item ms-0 ms-lg-3 mt-2 mt-lg-0">
-                        <form autocomplete="off" class="form-inline">
-                            <input class="form-control" type="text" id="search-input" placeholder="Search..." aria-label="Search">
-                            <ul id="results-container"></ul>
-                            <script src="{{ 'assets/js/simple-jekyll-search.min.js' | relative_url }}"></script>
-                            <script type="text/javascript">
-                                var sjs = SimpleJekyllSearch({
-                                searchInput: document.getElementById('search-input'),
-                                resultsContainer: document.getElementById('results-container'),
-                                json: "{{ 'search.json' | relative_url }}",
-                                searchResultTemplate: '<li><a href="{url}" title="{{page.title | escape }}">{title}</a></li>',
-                                noResultsText: '<li><a href=""">No results found...</a></li>',
-                                limit: 10
-                                })
-                            </script>
-                            
-                        </form>
+                    <li class="nav-item ms-0 ms-lg-3">
+                        <div class="search">
+                            <form class="d-flex">
+                                <input type="search" id="search-input" class="search-input form-control" tabindex="0" placeholder="Search {{ site.site_title }}" aria-label="Search {{ site.site_title }}" autocomplete="off">
+                            <div id="search-results" class="search-results"></div>
+                        </div>
                     </li>
                     <!--end search-->
                 </ul>

assets/css/main.css

@@ -188,7 +188,6 @@ pre code {
 /*-----Search box top navigation-----*/
 
 #search-input {
-    width: 15em;
     border: 1px solid var(--nav-bg);
 }
 
@@ -197,32 +196,106 @@ pre code {
     border-color: var(--primary-theme-color);
 }
 
-ul#results-container {
-    background-color: var(--main-bg-color);
+.search {
+    position: relative;
+    z-index: 2;
+}
+
+.search-results {
     position: absolute;
-    top: 61px;
+    right: 0;
+    top: 100%;
+    display: none;
+    width: 36em;
+    max-height: calc(90vh - 200%) !important;
+    overflow-y: auto;
+    background-color: var(--white);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 20%), 0 3px 10px rgba(0, 0, 0, 15%);
     border-radius: 4px;
-    z-index: 1000;
-    width: 15em;
-    padding-left: 0;
 }
 
-ul#results-container li {
+@media (max-width: 992px) {
+    .search-results{
+        width: 100%;
+    }
+}
+
+.search-results ul {
+    padding-left: 0;
     list-style: none;
 }
 
-ul#results-container li a {
+.search-results a {
+    display: block;
+    padding: 0.5rem 0.75rem;
+}
+
+.search-results a:hover, .search-results a.active {
+    background-color: var(--light-grey);
+}
+
+.search-result-title {
+    display: inline-block;
+    width: 40%;
+    padding: 0.5rem 0.5rem 0.5rem 0;
+    vertical-align: top;
+}
+
+.search-result-doc {
+    display: flex;
+    align-items: center;
+    word-wrap: break-word;
+}
+
+.search-result-doc.search-result-doc-parent {
+    font-size: 12px !important;
+    font-weight: 600;
+}
+
+.search-result-doc .search-result-doc-title {
+    overflow: auto;
     color: var(--main-text-color);
-    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
-    padding: 7px 11px;
-    text-decoration: none;
+}
+
+.search-result-section {
+    word-wrap: break-word;
+    color: var(--primary-theme-color)
+}
+
+.search-result-rel-url {
     display: block;
+    overflow: hidden;
+    color: var(--hover-grey);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 10px !important;
 }
 
-ul#results-container li a:hover {
-    color: var(--white-text);
-    background-color: var(--primary-theme-color);
-    border-radius: 4px;
+.search-result-previews {
+    display: inline-block;
+    width: 60%;
+    padding: 0.5rem 0 0.5rem 0.5rem;
+    color: var(--hover-grey);
+    word-wrap: break-word;
+    border-left: 1px solid var(--light-grey);
+    font-size: 12px !important;
+    vertical-align: top;
+}
+
+.search-result-preview+.search-result-preview {
+    margin-top: 0.25rem;
+}
+
+.search-result-highlight {
+    font-weight: bold;
+}
+
+.search-no-result {
+    padding: 0.5rem 0.75rem;
+}
+
+.search-active .search-results {
+    display: block;
 }
 
 /*-----Images-----*/
@@ -330,8 +403,6 @@ figcaption {
     content: '+';
 }
 
-
-
 /*-----Summary under page title-----*/
 
 .summary {