[ELY-2394] Add the ability to search for blog posts on the Elytron Blogs Page

_includes/search.html

@@ -0,0 +1,141 @@
+<script src="{{ '/assets/javascript/lunr.js' | relative_url }}"></script>
+
+<script>
+    {% assign counter = 0 %}
+
+    var documents = [{% for page in site.posts %}{
+        "id": {{counter}},
+        "url": "{{ site.baseurl }}{{ page.url }}",
+        "link": "{{ page.link }}",
+        "title": "{{ page.title }}",
+        "author": "{{ page.author }}",
+        "postDate": "{{ page.date | date: '%B %d, %Y'}}",
+        "body": "{{ page.content | markdownify | replace: '.', '. ' | replace: '</h2>', ': ' | replace: '</h3>', ': ' | replace: '</h4>', ': ' | replace: '</p>', ' ' | strip_html | strip_newlines | replace: '  ', ' ' | replace: '"', ' ' }}" 
+        {% assign counter = counter | plus: 1 %}
+    } {% if forloop.last %} {% else %}, {% endif %} {% endfor %}];
+
+    var idx = lunr(function () {
+        this.ref('id')
+        this.field('title')
+        this.field('body')
+        documents.forEach(function (doc) {
+            this.add(doc)
+        }, this)
+    });
+
+    function lunr_search(terms) {
+
+        document.getElementById('lunrsearchresults').innerHTML = '<div></div>';
+
+        if (terms) {
+
+            document.getElementById('lunrsearchresults').innerHTML = document.getElementById('lunrsearchresults').innerHTML + "<p>Search results for '" + terms + "'</p>";
+            document.getElementById('lunrsearchresults').innerHTML = document.getElementById('lunrsearchresults').innerHTML + "<ul class=search-result></ul>";
+
+            mountResultHtml(terms);
+        } else {
+            location.assign(window.location.pathname);
+        }
+
+        return false;
+    }
+
+    function getLunrSearchQuery(query) {
+        const searchTerms = query.split(" ");
+        if(searchTerms.length === 1) {
+            return query;
+        }
+
+        query = "";
+
+        for(const term of searchTerms) {
+            query += ` +${term}`
+        }
+
+        return query.trim();
+    }
+
+    function mountResultHtml(terms) {
+
+        const originalQuery = terms;
+
+        var query = getLunrSearchQuery(originalQuery);
+
+        var results = idx.search(query);
+
+        results = results.length ? results : query != originalQuery ? idx.search(originalQuery) : []
+
+        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 link = documents[ref]['link'];
+                var body = documents[ref]['body'].substring(0, 75) + '...';
+                var postDate = documents[ref]['postDate'];
+                var realUrl = link == '' ? url : link;
+
+                document.querySelectorAll('#lunrsearchresults ul')[0].innerHTML = document.querySelectorAll('#lunrsearchresults ul')[0].innerHTML +
+                    "<div class='lunrsearchresult'>" +
+                    "<span class='post-title grid__item width-12-12'>" +
+                    "<a href= '" + realUrl + "'>" + title + "</a>" +
+                    "</span>" +
+                    "</div>";
+
+                document.querySelector("#posts-div").innerHTML = "";
+            }
+        } else {
+            document.querySelectorAll('#lunrsearchresults ul')[0].innerHTML = "<li class='lunrsearchresult'>No results found...</li>";
+        }
+    }
+
+    function checkSearchTerm(term) {
+        if (term == "") {
+            location.assign(window.location.pathname);
+        }
+    }
+
+</script>
+
+<style>
+    #lunrsearchresults {
+        padding-top: 0.2rem;
+    }
+
+    .lunrsearchresult {
+        padding-bottom: 1rem;
+    }
+
+    .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 onSubmit="return lunr_search(document.getElementById('lunrsearch').value);" class="grid__item">
+    <p><input type="text" class="form-control search-input" onkeyup="checkSearchTerm(this.value)" id="lunrsearch"
+            name="q" value="" placeholder="Search..." /></p>
+</form>
+<div id="lunrsearchresults">
+    <ul id="search-result" name="search-result" class="search-result"></ul>
+</div>

_layouts/blog.html

@@ -8,49 +8,55 @@
   <div class="grid__item width-1-12 align-self-center"></div>
 
   <div class="grid__item width-8-12 width-12-12-m">
-    {% for post in paginator.posts %}
-      {% assign author = site.data.authors[post.author] %}
-      <div class="blog-list-item grid-wrapper">
-        <div class="post-title grid__item width-12-12">
-          <a href="{% if post.link %}{{ post.link }}{% else %}{{ post.url | relative_url }}{% endif %}">{{ post.title }}</a>
-        </div>
-        <div class="grid__item width-8-12 width-12-12-m byline-wrapper">
-          {% if author.emailhash %}
-            <img class="headshot" src="https://www.gravatar.com/avatar/{{ author.emailhash }}">
-          {% endif %}
-          <p class="byline">By <a href="{{ author.bio }}">{{ author.name }}</a>
-            <br/>
-            <small>{{ post.date | date: '%B %d, %Y' }} |
-              {% if post.tags %}
-                {% for tag in post.tags %}
-                  <a class="tags" href="{{site.baseurl}}/blog/tag/{{tag | downcase | replace: '.', '-'}}"> #{{ tag | downcase }}</a>
-                {% endfor %}
+
+    {% include search.html %}
+
+    <div id="posts-div" name="posts-div">
+      {% for post in paginator.posts %}
+        {% assign author = site.data.authors[post.author] %}
+        <div class="blog-list-item grid-wrapper">
+          <div class="post-title grid__item width-12-12">
+            <a href="{% if post.link %}{{ post.link }}{% else %}{{ post.url | relative_url }}{% endif %}">{{ post.title }}</a>
+          </div>
+          <div class="grid__item width-8-12 width-12-12-m byline-wrapper">
+            {% if author.emailhash %}
+              <img class="headshot" src="https://www.gravatar.com/avatar/{{ author.emailhash }}">
+            {% endif %}
+            <p class="byline">By <a href="{{ author.bio }}">{{ author.name }}</a>
+              <br/>
+              <small>{{ post.date | date: '%B %d, %Y' }} |
+                {% if post.tags %}
+                  {% for tag in post.tags %}
+                    <a class="tags" href="{{site.baseurl}}/blog/tag/{{tag | downcase | replace: '.', '-'}}"> #{{ tag | downcase }}</a>
+                  {% endfor %}
+              {% endif %}
+              </small>
+            </p>
+          </div>
+          {% capture post_url %}{% if post.link %}{{ post.link }}{% else %}{{ site.url }}{{ post.url | relative_url }}{% endif %}{% endcapture %}
+          <div class="grid__item width-4-12 width-12-12-m">{% include share-page.html title=post.title url=post_url %}</div>
+          <div class="grid__item width-12-12">
+            {% if post.synopsis %}
+              <p>{{ post.synopsis | strip_html }}</p>
+            {% else %}
+              <p>{{ post.content | strip_html | truncatewords: 75 }}</p>
             {% endif %}
-            </small>
-          </p>
+          </div>
+          <div class="grid__item width-12-12"><a href="{% if post.link %}{{ post.link }}{% else %}{{ post.url | relative_url }}{% endif %}">{% if post.link contains 'youtube' %}Watch Video &rsaquo;{% else %}Read More &rsaquo;{% endif %}</a></div>
         </div>
-        {% capture post_url %}{% if post.link %}{{ post.link }}{% else %}{{ site.url }}{{ post.url | relative_url }}{% endif %}{% endcapture %}
-        <div class="grid__item width-4-12 width-12-12-m">{% include share-page.html title=post.title url=post_url %}</div>
-        <div class="grid__item width-12-12">
-          {% if post.synopsis %}
-            <p>{{ post.synopsis | strip_html }}</p>
-          {% else %}
-            <p>{{ post.content | strip_html | truncatewords: 75 }}</p>
+      {% endfor %}
+      {% if paginator.total_pages > 1 %}
+        <div class="paginator-btns">
+          {% if paginator.previous_page %}
+            <a href="{{ paginator.previous_page_path | relative_url }}" class="button-cta secondary">Newer Posts</a>
           {% endif %}
+          {% if paginator.next_page %}
+            <a href="{{ paginator.next_page_path | relative_url }}" class="button-cta secondary">Older Posts</a>
+            {% endif %}
         </div>
-        <div class="grid__item width-12-12"><a href="{% if post.link %}{{ post.link }}{% else %}{{ post.url | relative_url }}{% endif %}">{% if post.link contains 'youtube' %}Watch Video &rsaquo;{% else %}Read More &rsaquo;{% endif %}</a></div>
-      </div>
-    {% endfor %}
-    {% if paginator.total_pages > 1 %}
-      <div class="paginator-btns">
-        {% if paginator.previous_page %}
-          <a href="{{ paginator.previous_page_path | relative_url }}" class="button-cta secondary">Newer Posts</a>
-        {% endif %}
-        {% if paginator.next_page %}
-          <a href="{{ paginator.next_page_path | relative_url }}" class="button-cta secondary">Older Posts</a>
-          {% endif %}
-      </div>
       {% endif %}
+    </div>
+
   </div>
 
   <div class="grid__item width-1-12 width-12-12-m"></div>

_sass/layouts/blog.scss

@@ -118,3 +118,13 @@ body.post {
     width: auto;
 }
 
+.search-input {
+  width: 100%;
+}
+
+.search-result {        
+  margin-top: 0;
+  list-style-type: none;
+  list-style-position: unset;
+  min-width: 50%;
+}