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

_includes/search.html

@@ -0,0 +1,20 @@
+<!-- Html Elements for Search -->
+<div id="search-container" class="grid__item">
+
+  <input type="text" id="search-input"  class="search-input" placeholder="Search...">
+
+  <ul id="results-container" class="search-result"></ul>
+
+</div>
+
+  <!-- Script pointing to search-script.js -->
+  <script src="{{ '/assets/javascript/search-script.js' | relative_url }}" type="text/javascript"></script>
+
+  <!-- Configuration -->
+  <script>
+  SimpleJekyllSearch({
+    searchInput: document.getElementById('search-input'),
+    resultsContainer: document.getElementById('results-container'),
+    json: '{{ "" | prepend: site.baseurl | append: "/search.json" }}'
+  })
+  </script>

_layouts/blog.html

@@ -1,13 +1,17 @@
 ---
 layout: default
 ---
+
 <div class="blog-page grid-wrapper">
 
   <div class="grid__item width-12-12"></div>
 
   <div class="grid__item width-1-12 align-self-center"></div>
 
   <div class="grid__item width-8-12 width-12-12-m">
+
+    {% include search.html %}
+
     {% for post in paginator.posts %}
       {% assign author = site.data.authors[post.author] %}
       <div class="blog-list-item grid-wrapper">

_sass/layouts/search.scss

@@ -0,0 +1,15 @@
+.search-input {
+    color: #000000;
+    font-family: "Titillium Web", sans-serif;
+    width: 100%;
+}
+
+ul.search-result {        
+    margin-top: 0;
+    background: #fff;
+    position: absolute;
+    background-color: #DCDCDC;
+    list-style-type: none;
+    list-style-position: unset;
+    min-width: 50%;
+}

assets/css/styles.scss

@@ -4,6 +4,7 @@
 @import "main";
 @import "core/grid";
 @import "core/asciidoc";
+@import "layouts/search";
 @import "layouts/blog";
 @import "layouts/guides";
 @import "layouts/community";

search.json

@@ -0,0 +1,19 @@
+---
+---
+[
+  {% for post in site.posts %}
+    {
+
+      "title"    : "{{ post.title | escape }}",
+      {% if post.link %}
+      "url"      : "{{ post.link }}",
+      {% else %}
+      "url"      : "{{ site.baseurl }}{{ post.url }}",
+      {% endif %}
+      "category" : "{{ post.synopsis }}",
+      "tags"     : "{{ post.tags | join: ', ' }}",
+      "date"     : "{{ post.date }}"
+
+    } {% unless forloop.last %},{% endunless %}
+  {% endfor %}
+]