Generating "Categories" from data file, show content per category that has category in front matter

[madsem]

I'm trying to add categories (named Topics) to my site, to assign a topics to a peace of content I am using Netlify CMS.
The way I've set it up so far:

I created a data file in _data/topics.js:

module.exports = [
  "Lifestyle",
  "Business",
  ...
  ...
];

This file is is then imported in a Netlify CMS relation widget, so that in the UI a writer can select (1) topic for the content they are writing.

Then I've created a collection through my .eleventy.js:

const topics = require("./site/_data/topics");
// Topics collection
  config.addCollection("topics", () => {
    const list = new Set();

    topics.forEach((topic) => {
      list.add(topic);
    });

    return Array.from(list).sort();
  });

Now things became a bit blurry in my head, in regards as to how to use these Topics throughout the site as category navigation, as well we how to create a page for each Topic which would then list all of the content under it.

So I created a topics folder:

── topics
│   ├── index.md
│   └── topic
│       └── index.md

// topics/index.md
---
layout: page
meta_title: topics
meta_description: Browse all topics
hide_from_sitemap: true
robots: noindex,follow
title: topics
permalink: /topics/
---

<ul class="leading-loose">
 {% for topic in collections.topics %}
  <li><a href="{{ topic | slug | url }}">{{ topic | capitalize }}</a></li>
 {% endfor %}
</ul>

// topics/topic/index.md
---
layout: topic
eleventyComputed:
  title: Category "{{ topic }}"
  meta_title: Category {{ topic }}
  meta_description: The "{{ topic }}" topic page
---

As well as a topic.njk:

---
layout: page
pagination:
  data: collections.products
  size: 1
  alias: topic
permalink: /topics/{{ topic }}/
hide_from_sitemap: true
---

<ul class="topic-{{ topic }} leading-loose">
  {% for post in collections.products %}
     <li><a href="{{ post.url }}">{{ post.data.title }}</a></li>
  {% endfor %}
</ul>

<p class="text-400">Back to <a href="/topics/">all topics</a></p>

Topics, can only be assigned to content in the products collection, so I created a small test file under site/products/mattresses.md as well:

---
layout: "listicle"
topic: "Lifestyle"
title: "Cool Mattresses"
---

Now this entire setup kind of works, when I look into my output folder,
I see that the /topics dir was created, but it does not have a topics/lifestyle subdirectory.
Instead there is a topics/[object Object] dir in there, with this html built:

<article id="container-center" class="column center">
          <header class="page-header">
            <h1 class="page-title">Category &quot;[object Object]&quot;</h1>
          </header>
          <div class="content flow">
            <ul class="topic-[object Object] leading-loose">
              <li><a href="/mattresses">Cool Mattresses</a></li>
            </ul>
            <p class="text-400">Back to <a href="/topics/">all topics</a></p>
          </div>
        </article>

I'm sure this is a small issue, most likely due to my limited 11ty knowledge (or JS knowledge for that matter).
Any idea where I am going wrong here? :)

[pdehaan]

Re: collection... Not sure I'm following it completely. It seems to just be a sorted copy of the global data file.

  const topics = require("./site/_data/topics");

  // Topics collection
  config.addCollection("topics", () => {
    const list = new Set();

    topics.forEach((topic) => {
      list.add(topic);
    });

    return Array.from(list).sort();
  });

I believe you can initialize a Set with an array, so this could probably almost be reduced to:

const list = new Set(topics);
return Array.from(list).sort();

But then why bother convert from an Array to a Set then back to an Array [which is sorted]?

So why not:

return topics.sort();

Then we can just question why we need a global data file AND a collection if they're both just an Array, or if we can just use the global data file. If you just wanted to sort it, you can do that from the global data file like:

module.exports = [
  "Lifestyle",
  "Business",
  ...
  ...
-];
+].sort();

---

// topics/topic/index.md
---
layout: topic
eleventyComputed:
  title: Category "{{ topic }}"
  meta_title: Category {{ topic }}
  meta_description: The "{{ topic }}" topic page
---

Not sure where {{ topic }} is coming from here… I don't see it defined in front matter or pagination alias. File location seems specific enough that it isn't being included in another template.

---

---
# topic.njk
layout: page
pagination:
  data: collections.products
  size: 1
  alias: topic
permalink: /topics/{{ topic }}/
hide_from_sitemap: true
---

<ul class="topic-{{ topic }} leading-loose">
  {% for post in collections.products %}
     <li><a href="{{ post.url }}">{{ post.data.title }}</a></li>
  {% endfor %}
</ul>

<p class="text-400">Back to <a href="/topics/">all topics</a></p>

This is where you're starting to lose me. Now we're looping over the collections.products collection, but aliasing to topic. I'll assume a "product" in the products collection is a template and a complex object, vs the simple strings in the topics array/collection. So I think that might explain [object Object]. Plus, you'll probably want to slugify the {{ topic }} in the permalink (and ul>class's topic-{{topic}} (but that might give you some CSS selectors like topic-somethign_with_a_space).

[madsem]

@pdehaan apologies about the confusion, the problem is I'm still trying to wrap my head around 11ty and how it even all works, plus my javascript is also not very good.

So everything you see there, can without a doubt be improved, or is even totally unnecessary :D

What I'm trying to do, essentially, is very easy. (In theory for me)

I have an array of topics which is supposed to act as categories site-wide, and only posts in the Product collection are supposed to have a Topic assigned.

When you click on a Topic, all of the products assigned to this Topic should be listed & paginated.

When you then click on a product, the Product detail would be displayed along with related articles & reviews.

PS: So I created a collection, because I thought 11ty needs that so that it builds html files for everything. And the global data file, this one I can at least explain: I use this, so that I can import the array into Netlify CMS settings where I use it for a select field. This field then saves topic: "Lifestyle" or whatever in the frontmatter of a product.

[pdehaan]

OK, sounds right...
Curious if you need a concept of a "topic", or if we can also set a "tag" with that topic so it will put all products with a topic into a collection for you.

So I think the current problem is:

"How can I set a topic for a product, so that it appears in a collection [which we can paginate, etc]"

I can think of a couple possible solutions, ranging from "lazy" to "tricky".

posts in the Product collection are supposed to have a Topic assigned

So, if we paginate over the global _data/topics data file (which will create a page-per-topic string), we can then loop over the collections.products collection and display the product if it's topic matches the currently paginated topic name. (I'll call that "lazy but easy"; and a fine solution -- but might get slow if you have thousands of products eventually since each topic page would loop, say, 5000× to filter topic-specific items).

The "tricky yet complex" solution is almost inverted where we loop over the topics in your .eleventy.js config file and for each topic loop over all content tagged with "products" (or whatever) and then add it to a custom collection if currentTopic equals page.data.topic front matter value.

Third option might be using tags to auto-create collections:

---
layout: "listicle"
topic: "Lifestyle"
+tags: ["lifestyle"]
title: "Cool Mattresses"
---

Now I think you should just be able to loop over collections.lifestyle. I like it as a solution (although having a similar topic and tag might be confusing, and not sure how well that'd play with Netlify CMS).

[madsem]

Ok yes, that makes a lot more sense now. I'm still not entirely sure which files are needed to create all of this. But that is the part where i'm not experienced enough with 11ty as a tool :)

I honestly didn't think of just adding the tags... That should be easy enough, have the select field in Netlify CMS simply add tags, instead of topic: ...

Would I now need a markdown file for every topic?! So that i can loop over the named collections?

I can't picture it in my head yet, let me play around with all this and post my solution.

The thing with JS and me is, after a day of really hard thinking, JS sometimes starts looking just like random characters to me and i have trouble following the code haha. Hopefully that gets better with time, I actually start enjoying writing it and see the power it holds when combined with Node.

[madsem]

Okay! Now we're talking :)

I went with your third suggestion, it just made the most sense to me.
Wasn't sure how it would all fit together etc, but in the end all I needed was to create a topics.njk in my site root:

---
pagination:
  data: collections
  filter:
  - all
  - products
  - authors
  - articles
  - reviews
  - pages
  size: 1
  alias: topic
  addAllPagesToCollections: true
layout: page
permalink: "/{{ topic | slug }}/"
---

<ul class="topic-{{ topic }} leading-loose">
  {% for post in collections[ topic ] %}
     <li><a href="{{ post.url }}">{{ post.data.title }}</a></li>
  {% endfor %}
</ul>

And on the Netlify CMS side, I have a select widget, that let's me select one topic from my list,
saves it under tags: ["something"]

{
      label: "Select a Topic",
      name: "tags",
      widget: "select",
      multiple: false,
      hint: "Select Landing Page Topic. Topics act as categories.",
      options: topicsList,
    }

And nothing else was needed, no .eleventy.js black magic. It just works now