Day 6 - Building the archive

Last time, we added the content to the index page. But that list will grow longer and longer and really, we want to sort and arrange our content in collections like we spoke about yesterday.

I want the archive page to be a list of tags so that users can drill down into specific subjects and then a paginated list of content.

What might also be a nice idea is to add in an description so that the archive page is more than just a title & post date.

Lets start by creating a new archive page called archive.md and filling out the front matter. We won't need tags or date for this page, just a title and layout.

We're going to have a fairly similar for loop to the front page. Except, we don't want the if loop in there which limits the posts. We want to display all posts for the moment.

Perhaps when the length of posts gets too much, we'll look into pagination.

<ul>
{%- for post in collections.post | reverse -%}
  <li><a href="{{ post.url }}">{{ post.data.title }} <time class="post-date" datetime={{ post.data.date | htmlDateString }}>&mdash; {{ post.data.date | readableDate }}</time></a></li>
{%- endfor -%}
</ul>

So now when we look at our archive page, we'll see a list of posts along with a readable date. Nice... except it's not telling our reader anything about each post. We're totally reliant on the title of the page being descriptive enough that our reader knows what they're diving in to.

Wouldn't it be nice if we could add a description here?

Custom data

When we look at our front matter, we're basically feeding in some custom data like the title and the date and then parsing that as part of our content. 11ty is able to utilise these values as custom fields.

The best part is, we can have as many as we want. So I've added a description as part of my front matter

---
layout: _main.njk
title: Day 6 - Building the archive
description: Lets make the archive actually usable with a list of all posts.
date: 2020-10-19
update: 20th Oct 2020
tags: ['post', '11ty']
---

We've added a description followed by some content that will act our excerpt or description of each post. Once that's part of the front matter, we can slip it into our archive.md loop using {{ post.data.description }}.

{%- if post.data.description -%}
  <p class="archive__postdesc">
    {{ post.data.description }}
  </p>
{%- endif -%}

I've wrapped the description tag in an if query so that it will only display the paragraph tags if the description exists for that post.

Now when we view our archive page, we should have a full list of posts showing their titles, posted date along with a description of what each post relates to.

I'm really enjoying 11ty.