Add simple post search overlay to nav

Gruntfile.js

@@ -9,7 +9,7 @@ module.exports = function(grunt) {
       all: [
         'Gruntfile.js',
         'assets/js/*.js',
-        '!assets/js/plugins/*.js',
+        'assets/js/plugins/*.js',
         '!assets/js/scripts.min.js'
       ]
     },

_config.yml

@@ -3,6 +3,7 @@ description:      Describe your website here.
 logo:             site-logo.png
 disqus_shortname: 
 #Comment out url when working locally to resolve base urls correctly
+search:           true
 url:              http://your-website.com
 
 # Owner/author information

_includes/navigation.html

@@ -10,11 +10,20 @@
 				{% endif %} 
 			</li>
 	        {% endfor %}
-	        <li><a href="{{ site.url }}/feed.xml" title="Atom/RSS feed"><i class="icon-rss"></i> Feed</a>
+	        <li><a href="{{ site.url }}/feed.xml" title="Atom/RSS feed"><i class="icon-rss"></i> Feed</a></li>
+	        {% if site.search %}<li class="dosearch"><i class="icon-search"></i> Search</li>{% endif %}
 	    </ul>
 	</nav>
 </div><!-- /.navigation-wrapper -->
 
+{% if site.search %}<div class="search-wrapper">
+	<form role="search">
+		<input type="search" name="s" id="s" class="search-field" placeholder="Search...">
+		<i class="icon-remove-sign icon-2x"></i>
+		<ul class="search-results post-list"></ul><!-- /.search-results -->
+	</form>
+</div><!-- ./search-wrapper -->{% endif %}
+
 {% if page.image.feature %}<header class="masthead" itemscope itemtype="http://schema.org/Organization">
 	<div class="wrap">
 		<a href="{{ site.url }}" class="site-logo" rel="home" title="{{ site.title }}" itemprop="url"><img src="{{ site.url }}/images/{{ site.logo }}" width="200" height="200" alt="{{ site.title }} logo" class="animated bounceInDown" itemprop="logo"></a>

assets/js/_main.js

@@ -18,3 +18,36 @@ var navigation = responsiveNav("#site-nav", { // Selector: The ID of the wrapper
 $(function() {
 	$("article").fitVids();
 });
+
+// Simple Jekyll Search options
+$(document).ready(function() {
+    $('.search-field').simpleJekyllSearch({
+        searchResults : '.search-results',
+        template : '<li><article><a href="{url}">{title} <span class="entry-date"><time datetime="{date}">{shortdate}</time></span></a></article></li>',
+        noResults: '<p>Nothing found.</p>'
+      });
+});
+
+(function( $, window, undefined ) {
+  
+   var bs = {
+        close: $(".icon-remove-sign"),
+        searchform: $("form"),
+        canvas: $("body"),
+        dothis: $('.dosearch')
+    };
+  
+  bs.dothis.on('click', function() {
+    $('.search-wrapper').css({ display: "block" });
+    bs.searchform.toggleClass('active');
+    bs.searchform.find('input').focus();
+    bs.canvas.toggleClass('search-overlay');
+  });
+  
+    bs.close.on('click', function() {
+      $('.search-wrapper').css({ display: "hidden" });
+      bs.searchform.toggleClass('active');
+      bs.canvas.removeClass('search-overlay');
+  });
+    
+})( jQuery, window );

assets/js/plugins/simpleJekyllSearch.js

@@ -0,0 +1,96 @@
+/*global jQuery */
+/*!
+* Simple Jekyll Search
+* Christian Fei - https://github.com/christian-fei/Simple-Jekyll-Search *
+*
+*/
+
+(function($) {
+    $.fn.simpleJekyllSearch = function(options) {
+        var settings = $.extend({
+            jsonFile        : '/search.json',
+            jsonFormat      : 'title,category,desc,url,date,shortdate',
+            template        : '<a href="{url}" title="{title}">{title}</a>',
+            searchResults   : '.results',
+            searchResultsTitle   : '<h4>Search results</h4>',
+            limit           : '10',
+            noResults       : '<p>Oh shucks<br/><small>Nothing found :(</small></p>'
+        }, options);
+
+        var properties = settings.jsonFormat.split(',');
+        
+        var jsonData = [],
+            origThis = this,
+            searchResults = $(settings.searchResults);
+
+        if(settings.jsonFile.length && searchResults.length){
+            $.ajax({
+                type: "GET",
+                url: settings.jsonFile,
+                dataType: 'json',
+                success: function(data, textStatus, jqXHR) {
+                    jsonData = data;
+                    registerEvent();
+                },
+                error: function(x,y,z) {
+                    console.log("***ERROR in simpleJekyllSearch.js***");
+                    console.log(x);
+                    console.log(y);
+                    console.log(z);
+                    // x.responseText should have what's wrong
+                }
+            });
+        }
+
+
+        function registerEvent(){
+            origThis.keyup(function(e){
+                if($(this).val().length){
+                    writeMatches( performSearch($(this).val()) );
+                }else{
+                    clearSearchResults();
+                }
+            });
+        }
+
+        function performSearch(str){
+            var matches = [];
+
+            $.each(jsonData,function(i,entry){
+                for(var i=0;i<properties.length;i++)
+                    if(entry[properties[i]] !== undefined && entry[properties[i]].toLowerCase().indexOf(str.toLowerCase()) > 1){
+                        matches.push(entry);
+                        i=properties.length;
+                    }
+            });
+            return matches;
+
+        }
+
+        function writeMatches(m){
+            clearSearchResults();
+            searchResults.append( $(settings.searchResultsTitle) );
+
+            if(m.length){
+                $.each(m,function(i,entry){
+                    if(i<settings.limit){
+                        var output=settings.template;
+                        for(var i=0;i<properties.length;i++){
+                            var regex = new RegExp("\{" + properties[i] + "\}", 'g');
+                            output = output.replace(regex, entry[properties[i]]);
+                        }
+                        searchResults.append($(output));
+                    }
+                });
+            }else{
+                searchResults.append( settings.noResults );
+            }
+
+
+        }
+
+        function clearSearchResults(){
+            searchResults.children().remove();
+        }
+    }
+}(jQuery));

assets/less/forms.less

@@ -230,3 +230,98 @@ select:focus {
 	float : left;
 	margin-left : 0;
 	margin-right : 3px; }
+
+// Jekyll Simple Search
+// -------------------------------------------------
+.dosearch {
+  padding: 6px 10px;
+  cursor: pointer;
+  display: block;
+  color: @white;
+  .rounded(4px);
+  &:hover {
+	.box-shadow(@shadow: inset 0 0 1px @white);
+  	background-color: lighten(@black, 10);
+  }
+}
+form[role="search"] {
+	width: 100%;
+	position: relative;
+	opacity: 0;
+	transition: all 200ms 100ms cubic-bezier(0, 0.6, 0.4, 1);
+	top: 0;
+	left: -200px;
+	z-index: 9002;
+	input[type="search"] {
+		-webkit-appearance: none;
+		border: none;
+		width: 100%;
+		color: @white;
+		border: none;
+		border-bottom: 1px solid lighten(@white, 20);
+		background-color: transparent;
+		box-shadow: none;
+		border-radius: 0;
+		background-clip: padding-box;
+		.font-rem(32);
+		&:focus {
+			box-shadow: none;
+			outline: none;
+		}
+	}
+	&.active {
+		opacity: 1;
+		top: 0;
+		left: 0;
+	}
+	&.hidden {
+		display: none;
+	}
+	::-webkit-input-placeholder {
+		.font-rem(32);
+	}
+	.icon-remove-sign {
+		position: absolute;
+		top: .6rem;
+		right: 1rem;
+		display: block;
+		cursor: pointer;
+		text-align: center;
+		color: @white;
+		z-index: 1;
+		cursor: pointer;
+	}
+	input[type="search"]::-webkit-search-decoration,
+	input[type="search"]::-webkit-search-cancel-button,
+	input[type="search"]::-webkit-search-results-button,
+	input[type="search"]::-webkit-search-results-decoration {
+		display: none;
+	}
+	.post-list {
+		position: absolute;
+		width: 100%;
+		h4, li, p, a {
+			color: @white;
+		}
+		li {
+			border-bottom: 1px solid lighten(@white,20);
+		}
+	}
+}
+body.search-overlay {
+	overflow: hidden;
+}
+body.search-overlay:after {
+	content: '';
+	background: fade(@black,95);
+	width: 100%;
+	min-height: 100%;
+	height: 100%;
+	position: absolute;
+	top: 0;
+	left: 0;
+	z-index: 9001;
+}
+.no-js .dosearch {
+	display: none;
+}

assets/less/page.less

@@ -375,7 +375,16 @@ span + .entry-title {
 		}
 	}
 }
-
+// Search
+// --------------------------------------------------
+.search-wrapper {
+	display: none;
+	position: absolute;
+	width: 90%;
+	padding-right: 5%;
+	padding-left: 5%;
+	.clearfix();
+}
 // Footer
 // --------------------------------------------------
 .footer-wrapper {

search.json

@@ -0,0 +1,13 @@
+---
+---
+[
+	{% for post in site.posts %}
+		{
+		  "title"      : "{{ post.title | escape }}",
+		  "category"   : "{{ post.category }}",
+		  "url"        : "{{ post.url }}",
+		  "date"       : "{{ post.date }}",
+		  "shortdate"  : "{{ post.date | date: '%B %d, %Y' }}"
+		} {% if forloop.last %}{% else %},{% endif %}
+	{% endfor %}
+]