Previously and nextly

To make it easier to find articles, let’s add to our posts links to the next and previous post.

Link and linking

Web pages are an example of hypertext and links in hypertext is one of those things that is lavishly defined by hypertext architects and in practice only used on their simplest form.

We’re used to the one-directional links that traditionally start with underlined text in one document and which target another HTML document, or a location within another document, or another location within the current document. In HTML these are represented by a (anchor) tags, as in <a href=…>…</a>.

Both HTTP and HTML define ways to link between documents. These links have URLs as source and target, and also a property rel (relationship) that indicates what the link means. For example,

In the HTTP headers for https://mismiy.dev/2024-05-30-tz.html this would look like

Link: <https://mismiy.dev/2024-06-16-pages.html>; rel=next; title="Pages that are not posts"

Since we lack the control over the web server to implement this we will use the HTML method: in the head element of the HTML, the link tag:

<link rel="next" href="https://mismiy.dev/2024-06-16-pages.html"
    title="Pages that are not posts">

There is a list of conventional values for rel in HTML Living Standard §4.6.7 Link types.

The downside with these document-level links is that they are invisible in most web browsers (there was once some browser experiments with having next and prev buttons in the toolbar but they are easily confused with the more-important back button). So generally we will want to have a way to create a tags to duplicate the document-level links, so for Mismiy we want to make this easy to do in templates.

Linking in Mismiy

In fact we already have links: the index page of the blog links to the Atom feed using a link with rel=alternate. This is achieved through a links field in the template context that has a list of objects with rel, href, and title elements. This field is used in the header of the page and post templates.

We extend this in two ways.

First, posts now have prev and next links added automatically.

Second, as well as a list of links, the context for page templates has links_by_rel, which has the same links but turned in to an object with the rel values as their field names. This means a template can render a selection of links like so:

{{#links_by_rel}}
<nav class="links">
    {{#prev}}
    <li>Previous post: <a href={{href}}>{{title}}</a></li>
    {{/prev}}
    {{#next}}
    <li>Next post: <a href={{href}}>{{title}}</a></li>
    {{/next}}
</nav>
{{/links_by_rel}}

The way Mustache templates works means the prev link and its label will be omitted automatically when it is not present in the links for the page. There should not be no links (unless you only have one post) but when that is the case the whole nav element will be omitted.