Jekyll Live Search with AngularJS (blog)

angular_app.js

/**
 * Setup Module with `highlight` filter
 */

var JekyllApp = angular.module('JekyllApp', [], function($routeProvider) {
});

JekyllApp.filter('highlight', function() {
  return function(text, filter) {
    if (filter === undefined) {
      return text;
    } else {
      return text.replace(new RegExp(filter, 'gi'), '<span class="match">$&</span>');
    };
  };
});

/**
 * Inject $http Object into our Controller
 */
  
JekyllSearchController.$inject = ['$scope', '$http'];

function JekyllSearchController($scope, $http) {
  var posts = $scope.posts = [];
  $http.get('/feed.xml').success(function(response) {
    var feed = angular.element(response);
    var entries = feed.children('entries');
    angular.forEach(entries, function(entry) {
      var children = angular.element(entry).children();
      if (children.length === 5) {
        posts.push({
          title : children[0].innerHTML,
          url   : children[1].href,
          date  : children[2].innerHTML
        });
      };
    });
  }).error(function() {
    console.error('xhr issue retreiving your feed!')
  });
};

clone.sh

$ git clone git@github.com:edwardhotchkiss/edwardhotchkiss.com.git

config.yml

leftCurleys: "{{"
rightCurleys: "}}"

link_to.html

<script type="text/javascript" src="http://code.angularjs.org/1.0.0rc2/angular-1.0.0rc2.min.js"></script>

search_html.html

<div id="search-container" class="entrance" ng-app="JekyllApp" ng-controller="JekyllSearchController">
  <div class="entrance-item">
    <h2>Error 404, Engineer Gone Rogue!</h2>
    <p><input id="searchText" type="search" placeholder="Live Search Posts..." ng-model-instant ng-model="searchText" /> 
    or <a href="mailto:edwardhotchkiss@me.com">Email Me</a></p>
  </div>
  <div class="entrance-item">
    <h2>Blog Posts</h2>
    <ul>
      <li ng-repeat="post in posts | filter:searchText">
        - <span ng-bind-html="post.date | highlight:filterBy"></span> &raquo; 
        <a href="{{ site.leftCurleys }} post.url {{ site.rightCurleys }}" ng-bind-html="post.title | highlight:searchText"></a>
      </li>
    </ul>
  </div>
</div>

style.css

#searchText {
  line-height:22px;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset;
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset;
  border: 1px solid #ccc;
  color: #999;
  padding: 6px 15px 6px 15px;
  -webkit-border-radius:15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
  margin-right: 15px;
}

.match {
  background-color: #f9ffa1;
  -webkit-animation-name: pop;
  -webkit-animation-duration: 0.3s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;    
}