How do I generate Eleventy and display tags from a localized version of a collection file?

Question

I'm new to Eleventy and working on a personal project - most of it is working fine, but I need help with generating and filtering tags based on posts stored in separate folders (as part of internationalizing/localizing my site).

I have two folders: en and ff. Inside each folder, I have a folder called posts - this contains a handful of posts.

I'm trying to work out a way to create a set of tags from just the en/posts folder or the fr/posts folder - each would be in a separate collection, not as one global collection.

I currently have this to generate an array of tags across all pages:

  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]);
  });

(filterTagList is a separate filter that excludes certain redundant tags)

I can create a collection based on posts within the en/posts folder called posts_en, using this:

  eleventyConfig.addCollection("posts_en", function (collection) {
    return collection.getFilteredByGlob("./en/posts/*.md");
  });

...which works fine to display English posts. I've also been able to create a collection that picks up posts in the en/posts folder, if I add posts_en as a tag to the post:

  eleventyConfig.addCollection("tagGroup", function (collection) {
    console.log(">>>> TAGGROUP:", collection.getFilteredByTags("posts_en"));
    return collection.getFilteredByTags("posts_en");
  });

(I've checked the console.log statement in this code extract - it renders all of the posts I tag with posts_en, but I'm not sure if this will keep the other tags as well? The collection needs to only contain English posts with their appropriate tags, but no French content (and vice-versa, for the FR content).

My problem is that I've been unable to adapt the original tagList method only to contain posts in the en folder (or the fr folder).

I've tried changing tagList to tagList_en, and adapting collection.getAll() to only reference the posts_en collection - this compiled, but gave zero results on my Tags page. I've scoured across SO and various posts on the Web, but so far, no joy - can anyone help advise, please? I'm happy to duplicate the solution from English to a French equivalent - as long as I can get something working for English content!

Answer 1

If your posts_en collection works as expected, then it should be possible to adapt the tagList collection to only show tags from English posts by replacing collection.getAll() with collection.getFilteredByGlob("./en/posts/*.md").

// Create an array of all tags
eleventyConfig.addCollection("tagList", function (collection) {
  let tagSet = new Set();

  collection.getFilteredByGlob("./en/posts/*.md").forEach(item => {
    (item.data.tags || []).forEach(tag => tagSet.add(tag));
  });

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

This will set collections.tagList to an array of strings (the tags from English posts).