Add Lunr Search (#1353)

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

Close #1011
This commit is contained in:
Nick Garlis 2017-11-15 21:43:31 +02:00 committed by Michael Rose
parent 7978376df0
commit cc3b21bc86
7 changed files with 154 additions and 0 deletions

View file

@ -11,5 +11,10 @@
<script src="{{ '/assets/js/main.min.js' | absolute_url }}"></script> <script src="{{ '/assets/js/main.min.js' | absolute_url }}"></script>
{% endif %} {% 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 analytics.html %}
{% include /comments-providers/scripts.html %} {% include /comments-providers/scripts.html %}

30
_layouts/search.html Normal file
View file

@ -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>

View file

@ -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%;
}

92
assets/js/lunr-en.js Normal file
View file

@ -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);
}
});
});

7
assets/js/lunr.min.js vendored Normal file

File diff suppressed because one or more lines are too long

5
docs/_pages/search.md Normal file
View file

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

5
test/_pages/search.md Normal file
View file

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