Tom's Two-up Two-down | 11ty Collections Tags Scheme

11ty Collections Tags Scheme

I use 11ty's collections tags to organise my blog content. In each blog post's front matter, I assign values to the tags key. All blog entries have a tags key of "post," and I break out posts into three different letterbox tags: article, note, and card.

articles are letters to the world about code, work, or the ultimate question of life
notes are code tips/tricks/snippets that are worth noting, progress reports on my projects, and other correspondence that are shorter than a letter but longer than a postcard
postcards provide titbits of content, such as quotes, thoughts, ideas, and images

The letterbox tags have sub-tags that I use to manage similar content.

articles: code, life, work
notes: code, life, report, work
postcards: idea, image, quote, thought

Here is the front matter of the Markdown file for this blog post showing its tags values:

---
title: 11ty Collections Tags Scheme
description: Scheme for organising my blog posts using Eleventy's collections tags
tags: ['post', 'note', 'code']
date: 2019-10-28
updated: 2019-10-29
layout: layouts/post.njk
---

I use Nunjucks to loop through a collection of all items with "post" tags (for post in collections.post) to populate my template. See my code here. 11ty collections gives me access to the following keys for each item (a "post"):

post.inputPath - path to the source input file (./src/posts/tags-scheme.md)
post.fileSlug - mapped from the input file name (tags-scheme)
post.outputPath - path to the output file to be written for this content (dist/posts/tags-scheme/index.html)
post.url - url used to link to this piece of content (/posts/tags-scheme/)
post.date - the resolved date used for sorting (creation date default / front matter date replaces default)
post.data: all data for this piece of content (e.g. post.data.tags)
post.templateContent: the rendered content of this template

I then clip each post with an 11ty filter (see below). The clip goes on my Front Room page, and I provide a link to the full post via post.url, which takes the user to an individual post page. 11ty requires slightly different language to access data in a page:

page.inputPath
page.fileSlug
page.outputPath
page.url
page.date
content (not page.templateContent)

There is no page.data. Instead, we only use the data key from the front matter. For example, I can use the keys: title, description, or tags.

11ty provides a way to parse excerpts from page content, but this does not work for an item's templateContent. I wrote a filter for my .eleventy.js config file to create a clip from a post. In my post Markdown files, I add <!END clip> where I want my clip to end. Then I use post.templateContent | clipPost | safe in my template where I want my clip to display.

module.exports = function(eleventyConfig) {
  eleventyConfig.addFilter('clipPost', (templateContent) => {
    if (!templateContent) return;

    let clipEnd = `<!END`;
    let clipping = templateContent.slice(0, templateContent.indexOf(clipEnd));
    return clipping;
  });
};

I break out posts into three different letterbox `tags`: article, note, and card.

<!END clip>

- articles are letters to the world about code or the ultimate question of life

There is more information about collection item data structure in the 11ty documentation. And here is the Nunjucks documentation describing a for block.

28 Oct 2019
#note
#code

Letterbox

11ty Collections Tags Scheme