Loop over localized collections not working as expected

[madsem]

I'm trying to display collections on my homepage, in the current pages locale.
If I simply do collections.all I get output, but in all languages.

Been trying various things but nothing I try actually even displayed anything...

module.exports = {
  layout: "page",
  tags: ["products_{{ locale }}"],
  permalink: "{{ locale }}/{{ slug or page.fileSlug }}/",
};

I'm trying to create Collections by localizing the tag associated with each collection.
This is then the code I have on my homepage atm:

<div class="content flow">

        {% set posts = collections["products_" + locale] %}
        {% for post in posts %}
        {{ locale }}
        <strong>{{post.data.title}}</strong>
        {% endfor %}

    </div>

The above leads to no output at all, whereas when I remove the locale from the tags in my datafile, and also from the loop, the following is output (which is also expected):

// english homepage
<div class="content flow">en <strong>Cool List</strong> en <strong>Coole Liste</strong></div>

// german homepage
<div class="content flow">de <strong>Cool List</strong> de <strong>Coole Liste</strong></div>

This shows that the locale setup works, but my brain not so much :D

Expected result would be though:

// english homepage
<div class="content flow">en <strong>Cool List</strong></div>

// german homepage
<div class="content flow">de <strong>Coole Liste</strong></div>

Ideally, what I would like to achieve is to re-use all my layouts and have 11ty automatically spit out the content only for the currently processed language.

[pdehaan]

I have 3 very rough debugging ideas.

But first, a couple little filters:

eleventyConfig.addFilter("inspect", require("util").inspect);
eleventyConfig.addFilter("keys", (obj) => Object.keys(obj).sort());

1. Create a new page and add something like {{ collections | keys | inspect }}. That should hopefully tell us which collection names are currently created. My guess is that there isn't a collections.products_en created.
2. Put {{ tags | inspect }} on one of your pages to make sure that it's doing what you think it's doing.
3. Put {{ posts | inspect }} right after {% set posts = collections["products_" + locale] %} and confirm that it returns an array of some products. I'm guessing the value is an empty array or some falsy value, which I have some therories on.

[madsem]

Thanks @pdehaan

I've done all the above on my home.njk layout, with this code:

{% set posts = collections["products_" + locale] %}
        {{ posts | inspect }}
        {% for post in posts %}
        <strong>{{post.data.title}}</strong>
        {% endfor %}
        

        {{ collections | keys | inspect }}

        {{ tags | inspect }}

And this is the output on the page:

undefined [ 'all', 'pages', 'products_{{ locale }}' ] undefined

I would have expected at least some other tags to exist, because i'm also setting tags in other pages:

module.exports = {
  layout: "page",
  tags: ["pages"],
  permalink: "{{ locale }}/{{ page.fileSlug }}/",
};

But in regards to the localization, this is indeed all undefined and / or not substituted.

[pdehaan]

Yeah, I think we're seeing the same thing:

tree src

src/
└── products/
    ├── de/
    │   ├── de.11tydata.js
    │   └── hello_world.njk
    ├── en/
    └── products.11tydata.js

3 directories, 3 files

My src/products/products.11tydata.js looks like this:

module.exports = {
  // layout: "page",
  tags: ["products_{{ locale }}"],
  permalink: "{{ locale }}/{{ slug or page.fileSlug }}/",
};

My src/products/de/hello_world.njk looks like this:

---
title: Sample Page!
---

locale={{ locale }}
tags={{ tags }}
collections={{ collections | keys | inspect | safe }}

OUTPUT

locale=de
tags=products_{{ locale }}
collections=[ 'all', 'products_{{ locale }}' ]

So that is telling me that the tags key iin the products.11tydata.js file doesn't substitute the locale (which isn't entirely surprising… permalink is special, I think for everything else you have to use eleventyComputed).

---

Now if I switch my products.11tydata.js file to use eleventyComputed I'm seeing the correct tag values, but...

module.exports = {
  "permalink": "{{ locale }}/{{ slug or page.fileSlug }}/",
  eleventyComputed: {
    tags(data) {
      return [`products_${ data.locale }`];
    }
  }
};

OUTPUT

locale=de
tags=products_de
collections=[ 'all' ]

... but we see that adding dynamic computed tags doesn't automatically add them into a collection. There should be a bunch of issues and potential solutions in the GitHub issues, but I can't immediately think of something that magically worked in every scenario. Not sure if you could manually create the collections via .eleventy.js and .addCollection() since you have a predictable file structure. But that would mean generating a custom collection for each product and locale pair. Might not be too difficult to do a nested loop though.

  // .eleventy.js snippet
  for (const category of ["products", "articles", "campaigns", "reviews"]) {
    for (const locale of ["de", "en", "es", "fr"]) {
      const key = `${category}_${locale}`;
      eleventyConfig.addCollection(key, collectionApi => collectionApi.getFilteredByTag(key));
    }
  }

I can think of a few obvious potential bugs in my approach though (what if not all categories support all locales, etc). You could further refine by creating some map or object which might be more elegant — if you don't expect all locales to have the same content).

const collectionMap = [
  {category: "products", locales: ["de", "en"]},
  {category: "articles", locales: ["en", "fr"]},
  ...
];

[pdehaan]

Seemed to work…

  const collectionMap = [
    {category: "products", locales: ["de", "en"]},
    {category: "cats", locales: ["es", "fr"]}
  ];

  for (const {category, locales} of collectionMap) {
    for (const locale of locales) {
      const key = `${category}_${locale}`;
      eleventyConfig.addCollection(key, collectionApi => collectionApi.getFilteredByTag(key));
    }
  }

{{ collections | keys | inspect | safe }}

OUTPUT

[ 'all', 'cats_es', 'cats_fr', 'products_de', 'products_en' ]

I only have one template in the products_de collection, so the rest of my collections should be empty. 🤷

[madsem]

This "kinda" works haha :)

I am a little bit lost myself now, what you came up with gives us the desired result of multi-lingual collections.
But it seems I still would need to somehow create the tags dynamically (Which wasn't possible).

To elaborate, I added the following to my .eleventy.js just for testing:

const locales = ["de", "en", "es", "fr"];
  const collectionMap = [
    {category: "products", locales: locales},
    {category: "articles", locales: locales},
    {category: "reviews", locales: locales}
  ];

  for (const {category, locales} of collectionMap) {
    for (const locale of locales) {
      const key = `${category}_${locale}`;
      config.addCollection(key, collectionApi => collectionApi.getFilteredByTag(key));
    }
  }

Then added this to my home.njk which is supposed to display all kinds of items from collections, in the language the visitor is currently viewing:

       {{ collections | keys | inspect | safe }}
        {% for lander in collections["products_" + locale] %}
        <strong>{{lander.data.title}}</strong>
        {% endfor %}

Then I removed the tags property from all my directory data files like products.11tydata.js:

module.exports = {
  layout: "page",
  permalink: "{{ locale }}/{{ slug or page.fileSlug }}/",
};

And the result displayed on my homepage was just this:

[ 'all', 'articles_de', 'articles_en', 'articles_es', 'articles_fr', 'pages', 'products_de', 'products_en', 'products_es', 'products_fr', 'reviews_de', 'reviews_en', 'reviews_es', 'reviews_fr' ]

I then tried adding the tags property back, with a hardcoded locale:

module.exports = {
  layout: "page",
  tags: ["products_de"],
  permalink: "{{ locale }}/{{ slug or page.fileSlug }}/",
};

And this time the actual output on the German homepage was what I would expect (Minus the fact that now obvs. all collections are hardcoded to be "products_de").
The homepages of other locales, were only showing the debug output, not any of the collections (Which again, is the expected result in this test case)

<div class="content flow">[ 'all', 'articles_de', 'articles_en', 'articles_es', 'articles_fr', 'pages', 'products_de', 'products_en', 'products_es', 'products_fr', 'reviews_de', 'reviews_en', 'reviews_es', 'reviews_fr' ]
 <strong>Cool List</strong> 
<strong>Coole Liste</strong>
</div>

I'm totally confused now, I thought that 11ty creates Collections one of two ways:

• By adding tags in frontmatter or datafile(s)
• By using addCollection() method.

Now, we used the addCollection() method, I'd expected it to already work, without adding tags...
But now it does work only if I ALSO add tags, and then also only if I hardcode the tags with locale.

I'm totally in love with 11ty, but it seems there is still a lot I don't know.

[madsem]

And PS:

On the site I am creating, all content/collections/pages etc support all languages we've used here.
It is possible though that the content is different on some pages, or that some locales don't have content that another locale has.

[madsem]

Ahh, sorry! I re-read what you wrote before, and realized you already posted the answer to what confused me :)
Dynamically created tags do not create collections for some reason, so we have to A: dynamically create tags using eleventyComputed, and B: add those to a collection.

I did exactly that now, and low and behold: All homepages display the content in their own language/or are empty if there is no content for that language.

Perfect :) Thanks so much for your help.

I'm curious if this will all just work now when I start adding localized categories.

[pdehaan]

  config.addFilter("i18n_url", function(url, locale) {
    return locale + "/" + url
  });

Nice!
A couple quick suggestions:

1. Probably safest to prefix that with a / so the links are all absolute instead of relative (in case pages live at different depths, you wouldn't oddly end up with "/de/de/cool-list".

   return `/${locale}/${url}`;

   Or maybe not. After re-re-reading your a href I see a / prefix before the {{topic|...}}. Although it might be pretty easy to forget to add that / on a page, and it's safer to keep the logic in the custom filter. 🤷

2. Not sure if you want a default value for the locale attribute (or throw some error on a missing locale attribute). Currently if you forget to specify the locale, it will almost certainly be a 404:

   {{ topic | slug | i18n_url }}"

   Since that would link to something like /privacy-policy (or //privacy-policy if you do the leading backslash suggestion above).
   Possibly safest to default to English, although that could be weird if you're on a German page and suddenly the site switches locales because somebody forgot to add (locale) at the end of the i18n_url filter.

   -config.addFilter("i18n_url", function(url, locale) {
   +config.addFilter("i18n_url", function(url, locale="en") {
     return locale + "/" + url
   });

   I guess it's a balance of better to 404 or better to switch locales. On one hand, 404s are a terrible user experience, but easier to catch with a link checking tool. Whereas switching locales is arguably the better of two poor user experiences but much more difficult to catch with a link checker. We could not add a default locale attribute value, display an error message if the locale is undefined and then return (locale || "en") + "/" + url; to default it to English anyways, but that might be unhelpful too since I don't think filters have any context of which page/template they're being run on, so you'd be console logging "Missing 'locale' for ${url}. Defaulting to '/en/'." and then you have to go through each of your templates to find where you called the i18n_url filter without a locale.

3. Wondering if there is a way to call the slug filter from within the i18n_url filter automatically so you have less filter chaining. Might be as easy as:

   config.addFilter("i18n_url", function(url, locale="en") {
     const slugFn = config.getFilter("slug");
     return `/${locale}/${slugFn(url)}`;
   });

   But that might somewhat simplify your usage to <a href="{{ topic | i18n_url(locale) }}"

[madsem]

And translations can now easily be done like

 {% for topic in topics[locale] %}
                <li><a href="/{{ topic | slug | i18n_url(locale) }}" class="mt-300 mb-300 color-primary weight-regular hover-color-secondary box-block">{{ topic }}</a></li>
                {% endfor %}

I would just have to adjust the data file for topics, and would then even be able to have internationalized url slugs.
But what I'm still entirely in the dark about, is how to display the content that is assigned to a topic.

I assume I will need to create a file for that, but how would that be connected with the topics data file.
I think I might've forgotten some very important step here haha, or better: I don't know one important step here.

[madsem]

Yes, thanks! Your version is much better :)
I was thinking about these forward slashes in the theme as well, your way is better.

[madsem]

My head probably doesn't work so well anymore at the end of my day over here haha, but isn't the solution to displaying content under certain topics, to create a collection in the eleventy configuration.

Then create a nunjucks template file with collection: topics

And there i can simply loop and paginate over content for each topic.

So in the end there's one page for every topic, with a list of content?

[madsem]

actually, just got word that internationalization is postponed and i just have to integrate US english haha jesus.

Thanks for all the help @pdehaan if you're ever in Germany or Houston drop me a line, would love to invite you to beers 🍻 :) Or non-alcoholic beverages of course also!

I think I will continue to play around with the i18n version though and release it as a theme.