lunr search template

search.html

---
layout: page
title: Search
noindex: true
---

<script src="https://unpkg.com/lunr/lunr.js"></script>

<script>
  const BUFFER = 30 // Number of characters to show for kwic-results
  const MAX_KWIC = 3 // Maximum number of KWIC results to show per page
  var documents = [];
  $.getJSON("/search/search.json", function (responseObject) {
    documents = responseObject
    idx = lunr(function () {
      this.ref('id');
      this.field('title');
      this.field('body');
      this.metadataWhitelist = ['position']

      documents.forEach(function (doc) {
        this.add(doc)
      }, this)
    });
  })

  function lunr_search(term) {
    document.getElementById('lunrsearchresults').innerHTML = '<ul></ul>';
    if (term) {
      document.getElementById('lunrsearchresults').innerHTML = "<p>Search results for '" + term + "'</p>" + document.getElementById('lunrsearchresults').innerHTML;
      var results = idx.search(term);
      if (results.length > 0) {
        for (var i = 0; i < results.length; i++) {
          var ref = results[i]['ref'];
          var url = documents[ref]['url'];
          var title = documents[ref]['title'];
          var text_body = documents[ref]['body']
          var search_keys = Object.keys(results[i].matchData.metadata)
          var inner_results = search_keys.map(function (token) {
            var all_positions = results[i].matchData.metadata[token].body.position
            var grouped_kwic = all_positions.slice(0, MAX_KWIC).map(function (pos) {
              var loc1 = pos[0]
              var loc2 = loc1 + pos[1]
              var rendered_text = "<p>... " + text_body.substring(loc1 - BUFFER, loc1) + "<strong>" + text_body.substring(loc1, loc2) + "</strong>" + text_body.substring(loc2, loc2 + BUFFER) + "...</p>"
              return rendered_text
            }).join("")
            return grouped_kwic
          }).join("")
          document.querySelectorAll('#lunrsearchresults ul')[0].innerHTML = document.querySelectorAll('#lunrsearchresults ul')[0].innerHTML + "<li class='lunrsearchresult list-group-item'><span class='title'><a href='" + url + "'>" + title + "</a></span><span>" + inner_results + "</span><span class='url'><a href='" + url + "'>" + url + "</span></a></li>";
        }
      } else {
        document.querySelectorAll('#lunrsearchresults ul')[0].innerHTML = "<li class='lunrsearchresult list-group-item'>No results found...</li>";
      }
    }
    return false;
  }
</script>
<style>
  .lunrsearchresult .title {
    color: #d9230f;
  }

  .lunrsearchresult .url {
    color: silver;
  }

  .lunrsearchresult a {
    display: block;
    color: #777;
  }

  .lunrsearchresult a:hover,
  .lunrsearchresult a:focus {
    text-decoration: none;
  }

  .lunrsearchresult a:hover .title {
    text-decoration: underline;
  }

</style>

<form>
  <p><input type="text" class="form-control" id="lunrsearch" name="q" maxlength="255" value=""
      placeholder="Search via Lunr.js" onInput="return lunr_search(document.getElementById('lunrsearch').value);" /></p>
</form>

<div id="lunrsearchresults">
  <ul class="list-group"></ul>
</div>

search.json

---
---


[
{% assign corpus = site.pages | where: "layout", "lesson" | where: "lang", "en" %}
{% for page in corpus %}
{% capture search_block %}
{{ page.title }}
{{ page.content | markdownify }}
{{ page.abstract | markdownify }}
{% endcapture %}
{
  "id": {% increment counter %},
  "url": {{ page.url | absolute_url | jsonify }},
  "title": {{ page.title  | jsonify }},
  "body": {{ search_block | strip_html | jsonify }},
  "noindex": {{ page.noindex }}
}{% if forloop.last %}{% else %},{% endif %}
{% endfor %}
]