How to create a drafts page for an 11ty blog
One of the challenges with a statically-generated blog is content management based on properties. Everything is a set of flat files and I’m limited to folders and file names, because that’s what shows up in the terminal or the sidebar of my editor. And I don’t use a drafts folder, so keeping track of drafts is tough.
To make things easier I set up a page that lists a collection of drafts using 11ty’s Collection API. If my post is a draft, I update my frontmatter to include draft: true
.
---
title: How to create a drafts page for an 11ty blog
date: 2023-09-13T20:42:26-05:00
tags:
- 11ty
- javascript
draft: true
---
In eleventy.config.js
, I created a new collection that gets all collection items and then filters the collection to return just the ones with the draft
property set to true
. Then it sorts the collection from newest to oldest.
eleventyConfig.addCollection("drafts", function (collectionApi) {
return collectionApi
.getAll()
.filter(item => item.data.draft)
.sort((a, b) => b.date - a.date);
});
Next, I created a drafts page where I can view a list of links to all my drafts. I’m using JavaScript templates for this blog.
content/drafts.11ty.js
/**
* @file Template for the drafts page.
*/
/**
* Frontmatter and markup
* @see {@link https://www.11ty.dev/docs/data-frontmatter/ 11ty docs}
* @see {@link https://www.11ty.dev/docs/languages/javascript/#optional-data-method 11ty docs}
*/
exports.data = {
title: "Drafts",
layout: "layouts/page.11ty.js",
tags: "page",
eleventyExcludeFromCollections: true
};
exports.render = function (data) {
let posts = data.collections.drafts;
return `
<ul>
${posts
.map((post) => `<li><a href="${post.url}">${post.data.title}</a></li>`)
.join("")}
</ul>`;
}
This is the finished result:
