Created
July 9, 2012 12:18
-
-
Save RainerAtSpirit/3076150 to your computer and use it in GitHub Desktop.
Adding AngularJS search in Jekyll blog
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{% if page.title == 'Search'%} | |
<script type="text/javascript" src="http://code.angularjs.org/angular-1.0.1.min.js"></script> | |
<script type="text/javascript" src="/js/JekyllApp.js"></script> | |
{% endif %} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Setup Module with `highlight` filter | |
*/ | |
var JekyllApp = angular.module('JekyllApp', [], function ($routeProvider, $locationProvider) { | |
$locationProvider.html5Mode(false); | |
}); | |
JekyllApp.filter('highlight', function () { | |
return function (text, filter) { | |
if (filter === '') { | |
return text; | |
} | |
else { | |
return text.replace(new RegExp(filter, 'gi'), '<span class="match">$&</span>'); | |
} | |
}; | |
}); | |
/** | |
* Inject required $objects into our Controller | |
*/ | |
JekyllSearchController.$inject = ['$scope', '$location', '$window']; | |
function JekyllSearchController($scope, $location, $window) { | |
// Optionally passing in a search term via q=XXX | |
// $location.search won't work without html5Mode false using window.location.search instead | |
// $scope.searchText = $location.search().q || ""; | |
// Todo: Consider switching back to $location.search once it supports html5Mode false | |
$scope.searchText = ''; | |
var search = window.location.search; | |
if (search.indexOf('?q=') > -1 || search.indexOf('&q=') > -1) { | |
var params = {}; | |
angular.forEach(search.split('?')[1].split('&'), function (param) { | |
params[param.split('=')[0]] = param.split('=')[1]; | |
}); | |
$scope.searchText = params.q || ''; | |
} | |
$scope.externalLink = function () { | |
// Todo: Figure out the correct AngularJS way for a page reload on href click | |
// https://github.com/angular/angular.js/issues/1102 | |
$window.location.href = this.post.url; | |
}; | |
$scope.posts = JekyllApp.posts; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
[{% for post in site.posts %} | |
{"title" : "{{ post.title }}", "url" : "{{ post.url }}","date" : "{{ post.date | date_to_string }}", | |
"content" : "{{ post.content | strip_html | truncate : 120 }}"}{% if forloop.rindex0 != 0 %},{% endif %}{% endfor %} | |
]; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
--- | |
layout: page | |
title: Search | |
header: Search | |
group: navigation | |
--- | |
{% include JB/setup %} | |
<script type="text/javascript"> | |
// Using liquid to populate JeykllApp.posts array | |
JekyllApp.posts = {% include Helper/JekyllAppPosts %} | |
</script> | |
<div id="search-container" class="entrance" ng-app="JekyllApp" ng-controller="JekyllSearchController"> | |
<div class="entrance-item"> | |
<p><input id="searchText" type="search" placeholder="Live Search Posts..." ng-model-instant ng-model="searchText" /> | |
</div> | |
<div class="entrance-item"> | |
<ul> | |
<li ng-repeat="post in posts | filter:searchText"> | |
<span ng-bind-html-unsafe="post.date | date:'MMM d, y' | highlight:searchText"></span> » | |
<a ng-href="{{ '{{ post.url ' }}}}" ng-click="externalLink()" | |
ng-bind-html-unsafe="post.title | highlight:searchText"></a> | |
<div class="preview" ng-bind-html-unsafe="post.content | highlight:searchText"></div> | |
</li> | |
</ul> | |
</div> | |
</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This was super helpful, thank you so much for this.
One note: i was building the json object in-line in the html, and my content was throwing errors and breaking the json – i added a
strip_newlines
after thestrip_html
and the browser was happy again.