Twitter: raymondcamden


Address: Lafayette, LA, USA

Two Harp.js Recipes: Limiting a list of blog entries by count and by date

02-13-2014 2,021 views HTML5 Comments

Here are two simple recipes for a Harp.js blog. Both are built using EJS but could be ported to Jade pretty easily. As I hate Jade I will not be the person doing it. ;) First, let's look at the sample data - a set of blog entries defined in _data.json.

{
	"aaa": {
		"title":"All about AAA",
		"published":"February 13, 2014"
	}, 
	"bbb": {
		"title":"Something else",
		"published":"February 12, 2014"
	},
	"bbb2": {
		"title":"Something else 2",
		"published":"February 10, 2014"
	},
	"bbb3": {
		"title":"Something else 3",
		"published":"January 12, 2014"
	},
	"bbb4": {
		"title":"Something else 4",
		"published":"January 11, 2014"
	},
	"bbb5": {
		"title":"Something else 5",
		"published":"January 11, 2014"
	},
	"bbb6": {
		"title":"Something else 6",
		"published":"January 10, 2014"
	},
	"bbb7": {
		"title":"Something else 7",
		"published":"January 9, 2014"
	},
	"bbb8": {
		"title":"Something else 8",
		"published":"January 8, 2014"
	},
	"bbb9": {
		"title":"Something else 9",
		"published":"January 7, 2014"
	},
	"bbb10": {
		"title":"Something else 10",
		"published":"January 6, 2014"
	},
	"bbb11": {
		"title":"Something else 11",
		"published":"January 4, 2014"
	}
}

So yeah, not the most imaginative titles, but you get the idea. So first, let's look at just printing everything:

<h2>All</h2>

<ol>
<% for(article in public.articles._data) { %>
	<li><a href="/articles/<%- article %>.html"><%- public.articles._data[article].title %></a></li>
<% } %>
</ol>

Which gives us:

Now let's consider an example that limits the display to 10 entries. All I did was switch to a for loop that iterates from 1 to 10 (or the number of entries if it is less than 10):

<h2>Last 10</h2>

<ol>
<% 
	var keys = Object.keys(public.articles._data);
	for(var i=0; i<Math.min(10,keys.length); i++) {
%>
	<li><a href="/articles/<%- keys[i] %>.html"><%- public.articles._data[keys[i]].title %></a></li>
<% } %>
</ol>

Which gives us:

I should note that I am not convinced this strategy will always work since I don't believe the order is guaranteed to be in a particular order. Also, it assumes you enter your posts in a particular order. Keep that in mind. Now let's look at how to filter by "current" posts. In this case, items in the last 7 days.

<h2>Last Week</h2>

<% 
	//credit: http://stackoverflow.com/a/7763364/52160
	function daysDifferent(d1,d2) {
		var t2 = d2.getTime();
        var t1 = d1.getTime();

        return parseInt((t2-t1)/(24*3600*1000));
	}

	var now = new Date();
							 
	for(article in public.articles._data) {
		var articleOb = public.articles._data[article];
		var d = new Date(articleOb.published);
		if(daysDifferent(d, now) <= 7) {
%>
	<li><a href="/articles/<%- article %>.html"><%- articleOb.title %></a></li>
<% 
		}
	} 
%>

All I've done here is use a simple function (stolen, I mean borrowed, from StackOverflow) to get the date difference between two dates. I compare when the blog entry was written to the current date and display it if the value is less than or equal to 7. And this returns:

Of course, this solution has an interesting side effect - it won't work if you output Harp to a static site. You could create a build process that runs this daily and saves the output to your server. I'd imagine that if you have even a semi-active blog (a few entries per week) then it would be less of an issue, especially if you don't say in the HTML what "Current" means. So for example, if my list in the screen shot above ends up getting a bit stale because I haven't blogged a bit, it is still not terribly old.

0 Comments

Post Reply

Please refrain from posting large blocks of code as a comment. Use Pastebin or Gists instead. Text wrapped in asterisks (*) will be bold and text wrapped in underscores (_) will be italicized.

Leave this field empty