Having trouble when creating anew collection

[cat-a-flame]

Hi there lovely people!
I want to build my blog by using eleventy, and, so far, everything works as expected, only one thing I can't get my head around: I wanted to create a collection named Category. Each post will have their own, similar to tags, but there is only one category per post. Since they are the same, I've copied the tags collection, and everything works, except the single category page, the categories list is fine. I can't figure out why, I don't have errors, only a 404 page when I click the category to see what other posts in there.

eleventy.config.js

eleventyConfig.addFilter("getAllCategories", collection => {
    let categorySet = new Set();
    for(let item of collection) {
        (item.data.categories || []).forEach(category => categorySet.add(category));
    }
    return Array.from(categorySet);
});

eleventyConfig.addFilter("filterCategoryList", function filterCategoryList(categories) {
    return (categories || []).filter(category => ["all", "nav", "post", "posts"].indexOf(category) === -1);
});

categories-list.njk

---
permalink: /categories/
layout: layouts/home.njk
---
<h1>Categories</h1>

<ul>
{% for category in collections.all | getAllCategories | filterCategoryList %}
    {% set categoryUrl %}/categories/{{ category | slugify }}/{% endset %}
        <li><a href="{{ categoryUrl }}" class="post-tag">{{ category }}</a></li>
    {% endfor %}
</ul>

categories.njk:

---
pagination:
  data: collections
  size: 1
  alias: category
  filter:
    - all
    - post
    - posts
    - categoryList
  addAllPagesToCollections: true
layout: layouts/home.njk
eleventyComputed:
  title: Tagged “{{ category }}”
permalink: /categories/{{ category | slugify }}/
---
<h1>Tagged “{{ category }}”</h1>

{% set postslist = collections[ category ] %}
{% include "postslist.njk" %}

<p>See <a href="/categories/">all tags</a>.</p>

blog.11tydata.js

module.exports = {
    tags: [
        "posts"
    ],
    categories: [
        "posts"
    ],
    "layout": "layouts/post.njk",
};

[pdehaan]

I… I think I'm a bit lost.

1. How does categories[] differ from tags[]? In the example, both are a generic "posts", unless each template (not shown) is overriding those values.
2. In categories.njk, you're paginating over collections which should loop over the names of the collections, meaning, probably looping over the tags[] [but you're aliasing it as category which might be confusing].

I'm guessing the bug/issue is in categories.njk where you probably need to use the before hook to extract all the distinct categories from collections.all and paginate over that instead.

Alternatively, you could try creating a custom collection named categories which uses collectionApi.getAll() or collectionApi.getAllByTag("posts") and basically just calls your getAllCategories and filterCategoryList filters and returns your desired array which you can paginate over.

[pdehaan]

Took a rough stab at it in https://github.com/pdehaan/11ty-2865
Still not sure I understand the distinction between categories and tags but maybe gets you closer.

[cat-a-flame]

I think I messed up :D Though copying tags and renaming should work, but I can see what went wrong. Yeah, I'm not a power user, yet!

[cat-a-flame]

Checked your code and first of all, thanks! Half way there, but still missing something. I'll try to add more details of what I want to achieve here: I have a blog, and my blog has tags and a category. The category is similar to the tags: every post has one, if I click one, it displays the rest of the posts with the same category. If I open the categories page, I can find all of my categories there.
Only difference from tags is that there is maximum 1 for each post, not more.

I thought, by copying the tags mechanism might work, but well, it didn't. I suppose this is a new collection? I'm not familiar with the terminology yet.

[pdehaan]

Yeah, it's tricky. Setting tags in Eleventy will auto create collections for each tag.
Setting categories or category will do nothing special since it has no special meaning, so you'll have to do all the logic yourself.

So you'll need to:

1. Set an optional category for each blog post.
2. Generate a list of all unique categories from all the blog posts.
3. Locate all the posts for each category. Since categories don't auto-create collections, you'll have to find all posts for each category.