Creating tags from a specific collection

[alexlibby]

I've been playing with Eleventy over the last few weeks, and love what I see - I do however have one niggling problem I can't seem to solve! It's a bit complicated, so here goes:

Aim: I'm looking to generate tags based on posts in a specific collection, not across all collections.

Reason: I'm trying to internationalize a demo Eleventy site, with English and French language support. I've seen examples of how to create tags, such as this:

  function filterTagList(tags) {
    return (tags || []).filter(tag => ["all", "nav", "post", "posts", "pages_en", "pages_fr"].indexOf(tag) === -1);
  }

  eleventyConfig.addFilter("filterTagList", filterTagList);

  // Create an array of all tags
  eleventyConfig.addCollection("tagList", function (collection) {
    let tagSet = new Set();
    collection.getAll().forEach(item => {
      (item.data.tags || []).forEach(tag => tagSet.add(tag));
    });

    return filterTagList([...tagSet]);
  });

While this works very well, it does operate across all collections only - in an internationalized site, this wouldn't be practical, as we would end up with (in this case) English and French content appearing! It's for this reason I need to work out how to perform a similar task, but across one collection only.

I've been able to create a collection each for English and French posts - this is the English version:

  # create collection based on posts in en folder at root of project
  eleventyConfig.addCollection("posts_en", function (collection) {
    return collection.getFilteredByGlob("./en/posts/*.md");
  });

I'm looking for something like this:

  # filter out irrelevant tags
  function filterTagList(tags) {
    return (tags || []).filter(tag => ["all", "nav", "post", "posts", "pages_en", "pages_fr"].indexOf(tag) === -1);
  }

  eleventyConfig.addFilter("filterTagList", filterTagList);

  // Create an array of all tags
  eleventyConfig.addCollection("tagList_en", function (collection) {
    let tagSet = new Set();
    let engPosts = collection.posts_en;
    engPosts.forEach(item => {
      (item.data.tags || []).forEach(tag => tagSet.add(tag));
    });

    return filterTagList([...tagSet]);
  });

Trouble is, I know the above code doesn't work - it comes back with this error:

Problem writing Eleventy templates: (more in DEBUG output)
> Cannot read properties of undefined (reading 'forEach')

`TypeError` was thrown:
    TypeError: Cannot read properties of undefined (reading 'forEach')
        at Object.tagList_en (C:\myblog-localized\.eleventy.js:50:14)
        at TemplateMap.getUserConfigCollection (C:\myblog-localized\node_modules\@11ty\eleventy\src\TemplateMap.js:453:47)

Is anyone able to help put me back on the straight and narrow please? I'm happy to duplicate code to cover the French equivalent of the above, as long as I can get the English version working first!

[pdehaan]

TypeError: Cannot read properties of undefined (reading 'forEach')

Where the .forEach() in question is most likely this line:

engPosts.forEach(item => {
  ...
});

Which means the engPosts [array] is undefined.
Where we are setting the engPosts array on the previous line:

let engPosts = collection.posts_en;

Except the collection API doesn't exactly work that way in this context (even though thats how you reference them in templates).
Start with these docs: https://www.11ty.dev/docs/collections/#advanced-custom-filtering-and-sorting
And probably more specifically this section: https://www.11ty.dev/docs/collections/#getfilteredbytag(-tagname-)

// Via https://www.11ty.dev/docs/collections/#getfilteredbytag(-tagname-)
collectionApi.getFilteredByTag("post");

Or in your case, something probably closer to this:

let engPosts = collection.getFilteredByTag("posts_en");
// or maybe `collection.getFilteredByGlob("./en/posts/*.md")`, based on your snippet above.

[alexlibby]

Sorry for the delay in replying - I did (eventually) manage to figure out something that works

Thankyou for the links: as it so happens, I had already seen them, but not delved into the getFilterByTag one in any detail. It turned out that it's sister method, getFilteredByTags was what I needed - I was able to produce this:

  eleventyConfig.addCollection("tagList_en", function (collection) {
    let tagSet_en = new Set();
    collection.getFilteredByTags("en").forEach(item => {
      (item.data.tags || []).forEach(tag => tagSet_en.add(tag));
    })

    return filterTagList([...tagSet_en]);
  });

The trick to making it work was to tag the relevant posts with something that Eleventy could target when creating the collection; I use a filterTagList method (as above) to then filter out these entries once the collection is created, so that it retains only those entries that I need. It may not be elegant, but it does the job!