HandlebaRss is a JavaScript based RSS viewer that uses handlebars templates for easy customization. It's really easy to use and is a great way to display RSS feeds on static sites.

First some links

Demo site

HandlebaRss On GitHub

Installation

First include the dependncies on your page.

<!-- include dependencies -->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="handlebars-v1.3.0.js"></script>

<!-- include HandlebaRss -->
<script type="text/javascript" src="src/HandlebaRss.js"></script>

Rendering Feeds

Rendering feeds is very easy. You just pass one or more feed URLs to HandlebaRss along with a selector for your destination div and your template.

Single feeds

Include a placeholder where the feeds should be displayed, and a handlebars template that should be rendered.

<!-- the place where the feed should be rendered -->
<div id="destination"></div>

<!-- the handlebars template for the feed -->
<script id="feed-template" type="text/x-handlebars-template">
  <h1>{{title}}</h1>
  {{#each entries}}
    <h2><a href="{{link}}">{{title}}</a></h2>
    <p>{{contentSnippet}}</p>
  {{/each}}
</script>

 // now create a HandlebaRss instance and call init() 
  rss = new HandlebaRss("http://www.octolabs.com/blogs/octoblog/feed.xml",
                        "#feed-template","#destination");
  rss.init();

For single feeds the context of the handlebars template is a JSON representation of a feed object.

{
  "author" : "Jeremy Green",
  "description" : "",
  "feedUrl" : "http://www.octolabs.com/blogs/octoblog/feed.xml",
  "link" : "http://www.octolabs.com/blogs/octoblog",
  "title" : "OctoBlog",
  "type" : "atom10",
  "entries" : [{...},{...}]
}

Multiple feeds

For multiple feeds, just pass an array of URLs as the first argument. You can optionally pass an integer as the last argument to limit the number of articles per feed.

<!-- the place where the feed should be rendered -->
<div id="destination"></div>

<!-- the handlebars template for the feed -->
<script id="feed-template" type="text/x-handlebars-template">
  {{#each entries}}
    <h2><a href="{{link}}">{{title}}</a></h2>
    <p>From {{feed.title}}</p>
  {{/each}}
</script>

  // now create a HandlebaRss instance and call init()
  rss = new HandlebaRss([
    "http://www.octolabs.com/blogs/octoblog/feed.xml",
    "http://datachomp.com/atom.xml",
    "http://geekindulgence.com/feed/"
  ],"#feed-template","#destination",5);
  rss.init();

gv For multiple feeds the context of the handlebars template is a JSON object that contains an entries array of the combined and sorted entries from all of the feeds. Each entry has a feed property that contains the data from the top level feed that the entry belongs to (author,description,feedUrl, etc…). In the template you can access these with something like {{feed.author}}.

{
  "entries" : [{...},{...},...]
}

If you use HandlebaRss anywhere I'd love to hear about it, and if you make any modifications I'm a big fan of pull requests (wink, wink).