Eleventy: Filtering Custom Collections

Today I needed to create more pages for the Farmer Frog site that I am building in Eleventy. The site has a group of categories that have one or more posts associated with each category. Having recently discovered the joys of the before: property, I teed it up to solve this issue.

The categories for each article are stored in the frontmatter:

    ---
    ...
    category:
      - Category 1
      - Category 2
      - etc.
    ...
    ---

The first step in the process was to create a custom collection of posts that had categories (no point in having any posts that don't have categories). I used the following code to do that:

---js
    eleventyConfig.addCollection("categories", function(collectionApi) {
        let myColl = [];
        let posts = collectionApi.getAllSorted();

        posts.forEach(post => {
            if(post.data.category !== undefined) {
                myColl.push(post);
            }
        });
        return myColl;
    });

The next step was to set up the frontmatter for each category page:

    ---js
    {
      title: ["Blog : Category : My Category"],
      permalink: "/categories/my-category//index.html",
      layout: "category.njk",
      breadcrumbs: [ {label: "Home", url: "/"}, {label: "Blog", url: "/blog/"}, {label: "My Category"}],
      pagination: {
        data: "collections.categories",
        size: 4,
        reverse: true,
        alias: "posts",
        before: function(data) { return data.filter(post => post.data.category.includes('my category') === true )}
      },
    }
    ---

There may be a much more elegant way to do this, and if I find one I'll write it up!

In any case, the lessons learned previously made the solution to this problem relatively effortless.