Add Lunr Search (#1353)

* Add `search.html` layout and JavaScript
* Move `{{ content }}` before search input
* Add spaces for consistency

Close #1011

_includes/scripts.html

@@ -11,5 +11,10 @@
   <script src="{{ '/assets/js/main.min.js' | absolute_url }}"></script>
 {% endif %}
 
+{% if page.layout == 'search' %}
+  <script src="{{ '/assets/js/lunr.min.js' | absolute_url }}"></script>
+  <script src="{{ '/assets/js/lunr-en.js' | absolute_url }}"></script>
+{% endif %}
+
 {% include analytics.html %}
 {% include /comments-providers/scripts.html %}

_layouts/search.html

@@ -0,0 +1,30 @@
+---
+layout: default
+---
+
+{% if page.header.overlay_color or page.header.overlay_image or page.header.image %}
+  {% include page__hero.html %}
+{% endif %}
+
+{% if page.url != "/" and site.breadcrumbs %}
+  {% unless paginator %}
+    {% include breadcrumbs.html %}
+  {% endunless %}
+{% endif %}
+
+<div id="main" role="main">
+  {% include sidebar.html %}
+
+  <div class="archive">
+    {% unless page.header.overlay_color or page.header.overlay_image %}
+      <h1 class="page__title">{{ page.title }}</h1>
+    {% endunless %}
+
+    {{ content }}
+
+    <input placeholder="Search..." type="search" id="search" class="search-input">
+    <div id="results"></div>
+
+
+  </div>
+</div>

_sass/minimal-mistakes/_search.scss

@@ -0,0 +1,10 @@
+.search-input {
+  -webkit-appearance: none;
+  border: 0;
+  border-radius: .25em;
+  font-family: inherit;
+  font-size: 1.25em;
+  margin: 2em auto 1em;
+  padding: .5em;
+  width: 100%;
+}

assets/js/lunr-en.js

@@ -0,0 +1,92 @@
+---
+
+---
+var idx = lunr(function () {
+  this.field('title', {boost: 10})
+  this.field('excerpt')
+  this.field('categories')
+  this.field('tags')
+  this.ref('id')
+});
+
+{% assign count = 0 %}
+{% for c in site.collections %}
+  {% assign docs = c.docs %}
+  {% for doc in docs %}
+    idx.add({
+      title: {{ doc.title | jsonify }},
+      excerpt: {{ doc.excerpt | strip_html | truncatewords: 20 | jsonify }},
+      categories: {{ doc.categories | jsonify }},
+      tags: {{ doc.tags | jsonify }},
+      id: {{ count }}
+    });
+    {% assign count = count | plus: 1 %}
+  {% endfor %}
+{% endfor %}
+
+console.log( jQuery.type(idx) );
+
+var store = [
+  {% for c in site.collections %}
+    {% if forloop.last %}
+      {% assign l = true %}
+    {% endif %}
+    {% assign docs = c.docs %}
+    {% for doc in docs %}
+      {% if doc.header.teaser %}
+        {% capture teaser %}{{ doc.header.teaser }}{% endcapture %}
+      {% else %}
+        {% assign teaser = site.teaser %}
+      {% endif %}
+      {
+        "title": {{ doc.title | jsonify }},
+        "url": {{ doc.url | absolute_url | jsonify }},
+        "excerpt": {{ doc.content | strip_html | truncatewords: 20 | jsonify }},
+        "teaser":
+          {% if teaser contains "://" %}
+            {{ teaser | jsonify }}
+          {% else %}
+            {{ teaser | absolute_url | jsonify }}
+          {% endif %}
+      }{% unless forloop.last and l %},{% endunless %}
+    {% endfor %}
+  {% endfor %}]
+
+$(document).ready(function() {
+  $('input#search').on('keyup', function () {
+    var resultdiv = $('#results');
+    var query = $(this).val();
+    var result = idx.search(query);
+    resultdiv.empty();
+    resultdiv.prepend('<p>'+result.length+' Result(s) found</p>');
+    for (var item in result) {
+      var ref = result[item].ref;
+      if(store[ref].teaser){
+        var searchitem =
+          '<div>'+
+            '<article class="archive__item" itemscope itemtype="http://schema.org/CreativeWork">'+
+              '<div class="archive__item-teaser">'+
+                '<img src="'+store[ref].teaser+'" alt="">'+
+              '</div>'+
+              '<h2 class="archive__item-title" itemprop="headline">'+
+                '<a href="'+store[ref].url+'" rel="permalink">'+store[ref].title+'</a>'+
+              '</h2>'+
+              '<p class="archive__item-excerpt" itemprop="description">'+store[ref].excerpt+'</p>'+
+            '</article>'+
+          '</div>';
+      }
+      else{
+    	  var searchitem =
+          '<div>'+
+            '<article class="archive__item" itemscope itemtype="http://schema.org/CreativeWork">'+
+              '<h2 class="archive__item-title" itemprop="headline">'+
+                '<a href="'+store[ref].url+'" rel="permalink">'+store[ref].title+'</a>'+
+              '</h2>'+
+              '<p class="archive__item-excerpt" itemprop="description">'+store[ref].excerpt+'</p>'+
+            '</article>'+
+          '</div>';
+      }
+      resultdiv.append(searchitem);
+    }
+  });
+});

docs/_pages/search.md

@@ -0,0 +1,5 @@
+---
+layout: search
+title: "Search"
+permalink: /search/
+---

test/_pages/search.md

@@ -0,0 +1,5 @@
+---
+layout: search
+title: "Search"
+permalink: /search/
+---