Creating Next/Previous Links in HarpJS

This post is more than 2 years old.

Before I start - a quick apology. I know that this particular topic has been covered before, but I'm having a heck of a time finding the article. I wanted to build a quick example for a friend anyway so I thought I'd share. In this example, I've got a HarpJS site with a list of articles. For fun I also added a main image for each article. Here is the data source.

{
	"article1":{
		"title":"Article One",
		"img":"/img/k1.jpg"
	},
	"article2":{
		"title":"Article Two",
		"img":"/img/k2.jpg"
	},
	"article3":{
		"title":"Article Three",
		"img":"/img/k3.jpg"
	}
}

Next I whipped up a quick index page to list my articles. Notice that I'm also including a thumbnail (via CSS) version of the image in the list as well. This is me being fancy - I hope you are impressed.

<h2>Articles</h2>

<% 
	for(articleKey in public.articles._data) {
		article = public.articles._data[articleKey];
%>
	<p>
	<img src="<%- article.img %>" class="articleImageList"> 
	<a href="/articles/<%- articleKey %>.html"><%- article.title %></a>
	</p>
	<br clear="left">
<% } %>

A screen shot - I didn't include the source of the CSS but the entire application is posted as an attachment to this entry.

Ok, now lets talk Next/Previous links. I created three article files and pasted in some random text (thank you Cajun Ipsum). In order to simplify article display, I put a header and footer partial in each file. (Note - this is because HarpJS does not support nested layouts. There is a workaround for this that I'll show later.) Here is a sample article, minus some of the boilerplate text.


<%- partial("_articleheader") %>

<p>
Boiled crawfish pecan pie food etoufee andouille football. Envie levee andouille bisque couillon beignet envie yams. Praline jambalaya tasso sa fait chaud sugar cane hot sauce remoulade po-boy boiled crawfish. Boudreaux pirogue sa fait chaud boucherie smoked sausage Boudreaux interstate bourre andouille. Sa fait chaud bourre trail ride viens ci mirliton. Turducken fais do do bread pudding coffee bisque Acadiana turducken coffee pirogue alligator. Viens ci boudin bourre sa fait chaud praline canaille levee macque choux gumbo bonjour. Couillon fried catfish bisque canaille bbq. 
</p>

<%- partial("_articlefooter") %>

Don't worry about the article header. All it does is output the title and the image. The footer is where the magic is. For my example, I decided to always include text for previous and next links, but to simply disable the link when you were at the beginning or end of the list. It would take a few seconds to modify the code to not display anything instead in those situations. Here is my partial.


<%
var pos, prevLink, nextLink;
var articles = Object.keys(public.articles._data);

if(articles[0] != current.source) {
	pos = articles.indexOf(current.source);
	prevLink = "<a href='/articles/" + articles[pos-1] + ".html'>Previous Article</a>";
} else prevLink = "Previous Article";

if(articles[articles.length-1] != current.source) {
	pos = articles.indexOf(current.source);
	nextLink = "<a href='/articles/" + articles[pos+1] + ".html'>Next Article</a>";
} else nextLink = "Next Article";

%>

<%- prevLink %> / <%- nextLink %>

<br clear="left"/>

Not exactly rocket science, right? I simply get the keys from the data and see if I'm currently at the start or end. (Remember HarpJS supports passing data about where you are currently.) And that's it. Here is a screen shot from the first article as an example.

You can download the source for this demo below.

Download attached file.

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by Ryan LeTulle posted on 2/26/2014 at 8:08 PM

Sweet!

Comment 2 by Raymond Camden posted on 2/27/2014 at 12:04 AM

The other example I knew I had seen: https://github.com/sintaxi/...

Comment 3 by Debbie Jones posted on 7/4/2016 at 10:22 AM

Hi Raymond,
Thank you for writing this! I am new to HarpJs and this really helped me out (like all your other blog posts).

I just have a question, how would I be able to paginate my main articles page? So I can show say 5 blog posts per page and with a simple "next" and "previous" link to show 5 more blog posts? I am moving away from WP and this is something I would love to implement but now show how?! :-/ at the moment I just list all of my blog posts and it looks wrong.

Keep up the superb work Raymond!
Best regards,
Debbie

Comment 4 (In reply to #3) by Raymond Camden posted on 7/4/2016 at 1:30 PM

Unfortunately, this is something that HarpJS does *not* provide out of the box. Harp requires a physical page for each URL, so if you wanted /page2.html, /page3.html, etc for your history, you would need to physically make those. Now -at that point it is trivial to write the logic to show the right page, but you still need physical files.

Jekyll does this out of the box and handles it well. (By the way, I don't mean that to say Harp is horrible and you should never use it, just that this is one place where it fails compared to other products.)