Unable to select component based on site locale #2190

alexlibby · 2022-01-25T20:56:59Z

alexlibby
Jan 25, 2022

I'm trying to create a localized version of an Eleventy site, into English and French.

I have a base template, \_includes\layouts\base.njk, which looks like this - I've taken out parts that are not relevant to this issue:

<!doctype html>
<html lang="{{ locale }}">
  <head>
  ....
  </head>
  <body>  
    **{% set localeHeader = site[locale].header %}       <---- AFFECTED CODE
    {% include localeHeader %}**

    <main>
      {{ content | safe }}
    </main>

    {% include "../components/footer.njk" %}
  </body>
</html>

In the same _includes folder, I have \components\en and components\fr folders - I have a site.js file in a _data folder, that contains a reference to the location, like this:

name: "Creative42",
  baseUrl: "http://localhost:8080/",
  en: {
...
    componentsFolder: "../components/en/header.njk"
  },
  fr: {
...
    componentsFolder: "../components/fr/header.njk"
  },
};

I'm trying to set the base.njk file to point to the relevant header, depending on which site is running - the site URL is http://localhost:8080/en (for English), or http://localhost:8080/fr (for French).

The code I've marked in bold (just after the opening <body> tag) produces this error:

`TemplateWriterWriteError` was thrown
> (./_includes/layouts/base.njk) [Line 12, Column 17]
  parseAggregate: expected colon after dict key

`Template render error` was thrown:
    Template render error: (./_includes/layouts/base.njk) [Line 12, Column 17]
      parseAggregate: expected colon after dict key
        at Object._prettifyError (C:\myblog-localized\node_modules\nunjucks\src\lib.js:36:11)
        at Template.render (C:\myblog-localized\node_modules\nunjucks\src\environment.js:538:21)
        at C:\myblog-localized\node_modules\@11ty\eleventy\src\Engines\Nunjucks.js:236:14
        at C:\myblog-localized\node_modules\@11ty\eleventy\src\Engines\Nunjucks.js:236:14
        at new Promise (<anonymous>)
        at C:\myblog-localized\node_modules\@11ty\eleventy\src\Engines\Nunjucks.js:235:14        at TemplateLayout.render (C:\myblog-localized\node_modules\@11ty\eleventy\src\TemplateLayout.js:152:31)
        at processTicksAndRejections (node:internal/process/task_queues:96:5)        at async Template.renderPageEntry (C:\myblog-localized\node_modules\@11ty\eleventy\src\Template.js:603:17)        at async Template.writeMapEntry (C:\myblog-localized\node_modules\@11ty\eleventy\src\Template.js:616:21)
        at async Promise.all (index 5)

Can anyone point me in the direction of how the affected code should be written to point to the right header component, based on locale, please? I've tried various ways to do it, but so far with no joy...

Answered by pdehaan

Jan 26, 2022

@alexlibby This worked for me: https://github.com/pdehaan/11ty-2190

A few notes:

Make sure your src/_data/site.js has en.header and fr.header keys. I copy/pasted the code above, but noticed the data only included en.componentsFolder reference which pointed to a header template.
Not sure what "(./_includes/layouts/base.njk) [Line 12, Column 17] parseAggregate: expected colon after dict key" error means. I'm guessing you have some invalid frontmatter in that file which is throwing an error.

But feel free to check out my repo, which should have a working copy of the sample code above.

// ./src/_data/site.js
module.exports = {
  name: "Creative42",
  baseUrl: "http://localhost:8080/",
  en: {…

View full answer

pdehaan · 2022-01-26T03:25:46Z

pdehaan
Jan 26, 2022
Collaborator

@alexlibby This worked for me: https://github.com/pdehaan/11ty-2190

A few notes:

Make sure your src/_data/site.js has en.header and fr.header keys. I copy/pasted the code above, but noticed the data only included en.componentsFolder reference which pointed to a header template.
Not sure what "(./_includes/layouts/base.njk) [Line 12, Column 17] parseAggregate: expected colon after dict key" error means. I'm guessing you have some invalid frontmatter in that file which is throwing an error.

But feel free to check out my repo, which should have a working copy of the sample code above.

// ./src/_data/site.js
module.exports = {
  name: "Creative42",
  baseUrl: "http://localhost:8080/",
  en: {
    componentsFolder: "components/en",
    header: "components/en/header.njk",
  },
  fr: {
    componentsFolder: "components/fr",
    header: "components/fr/header.njk",
  },
};

Fun aside if you're bored…

If your template doesn't specify a locale property, this code fails pretty quickly:

{% set localeHeader = site[locale].header %}
{% include localeHeader %}

Nunjucks seems to handle the site[locale].header pretty good if locale is undefined (and doesn't throw an error on the trying to access a property on an undefined Object error.
But the {% include localeHeader %} should through an error on trying to include an undefined file.

I added some debugging code with my French template, with the fr locale defined:

locale='fr'
site[locale]={
  componentsFolder: 'components/fr',
  header: 'components/fr/header.njk'
}
site[locale].header='components/fr/header.njk'
localeHeader='components/fr/header.njk'
...
{% include 'components/fr/header.njk' %}

But if I comment out the locale in my en/en.11tydata.js directory data file, this is the output:

locale=undefined
site[locale]=undefined
site[locale].header=undefined
localeHeader=undefined
...
{% include undefined %}

locale is undefined, so therefore site[undefined] will be undefined, which means site[undefined].header will be undefined, which then sets localeHeader is undefined.

So my /en/index.njk (with an undefined locale) will give me the following Eleventy error when trying to build my site (because we're calling {% include undefined %}:

TemplateWriterWriteError` was thrown
[11ty] > (./src/_includes/layouts/base.njk)
  Error: template names must be a string: undefined

Nunjucks does have a very useful "ignore missing" option to suppress errors if a template does not exist: https://mozilla.github.io/nunjucks/templating.html#include
But it doesn't seem to help us here since it fails on parsing an undefined filename before trying to ignore the missing file.

One workaround is to default the localeHeader filename to some obviously incorrect value (or a valid fallback value):

{% set localeHeader = site[locale].header or "_missing_file_" %}
{% include localeHeader ignore missing %}

Or you could use the Nunjucks built-in default filter (with a fallback header option if the localized header isn't found; assuming you have a generic _includes/default-header.njk file):

{% set localeHeader = site[locale].header | default("default-header.njk") %}
{% include localeHeader ignore missing %}

0 replies

alexlibby · 2022-01-26T21:47:31Z

alexlibby
Jan 26, 2022
Author

Hi pdehaan,

Many thanks for taking the time to go through and get it working - I've run up a copy of your repo, and it does indeed seem to do as I was looking for, so will try to transcribe that into my code over the next couple of days.

In terms of the locale in the second half of your reply: the code I have was based on having something like

en:
  label1: value1,
  label2: value2, 
  ...
fr:
  label1: value1,
  label2: value2,
  ...

...and so on. However, when I tried to specify a locale, I don't have an explicity site[locale] value in my code, so guess that would be why it was failing. In addition, I was referencing site.js as my data dictionary from the root of the site, and not from within the en folder - could this be why I was getting nothing back when trying to concatenate values together, as it was expecting to get the locale from the same level, not a level higher?

4 replies

pdehaan Jan 26, 2022
Collaborator

Yeah, I was setting the locale in the /en/ folder using a directory data file; ./src/en/en.11tydata.js (which would be available to all templates and subfolders of /src/en/**).

module.exports = {
  locale: "en",
  layout: "layouts/base.njk",
};

And I have a similar /src/fr/fr.11tydata.js file which sets locale: "fr".
This way I didn't need to set it in each template (and probably forget or spell it incorrectly, etc).

You could possibly do something similar w/ the other "en" specific values as well. So in your ./src/en/en.11tydata.js file set the componentsFolder or header there to use for the templates/layouts. Then you could probably just do something like {% include header %} and it'd find the data property in your directory data file (or you could override it per template/subfolder too).

    // set these in en.11tydata.js instead of global data file?
    componentsFolder: "components/en",
    header: "components/en/header.njk",

So if you have an /src/en/blog/ folder, you could create a blog.11tydata.js directory data file and override the header value with a blog-specific header, while still inheriting all the values from /src/en/en.11tydata.js and /src/src.11tydata.js.

Or if values are shared between /en/ and /fr/ templates, you could create a generic "./src/src.11tydata.js" file and set values there. Probably a lot of ways to do it, each with pros and cons.

alexlibby Jan 29, 2022
Author

Thanks for your comments - it's taken me a day or so to get my head around them, but they do make sense. I've been through your repo and managed to successfully transcribe the code within to my demo; it works a treat! One thing that is bugging me though: I've been scouring the internet and have found little on the subject of internationalizing/localizing Eleventy. Could this be something that should be added to the main Eleventy site docs?

pdehaan Jan 29, 2022
Collaborator

@alexlibby I think there are a few plugins for Eleventy internationalization (i18n): https://github.com/adamduncan/eleventy-plugin-i18n

Eleventy plugin to assist with internationalization and dictionary translations.
What's in the box? A contextually-aware i18n filter, with smarts and dynamic string interpolation.

Not sure how well it'd fit in the core docs, since I assume most sites would have very specific i18n/l10n requirements (.ftl files, .po files, etc). But feel free to submit an issue/request in https://github.com/11ty/11ty-website/search?q=i18n&type=code repo.
In fact, a quick search there shows the following resources:

[plugin] eleventy-plugin-i18n: "will add a clever i18n universal filter to assist with internationalization and dictionary translations."
[plugin] eleventy-plugin-i18n-gettext: "adds i18n support with Gettext string translation and moment.js date and times localization."
[tutorial] Multilingual sites with Eleventy (i18n, Internationalization) by Jérôme Coupé
[tutorial] Language switcher for multilingual JAMstack sites (i18n, Internationalization) by Jérôme Coupé

pdehaan Jan 29, 2022
Collaborator

@alexlibby I think there are a few plugins for Eleventy internationalization (i18n): https://github.com/adamduncan/eleventy-plugin-i18n

Eleventy plugin to assist with internationalization and dictionary translations.
What's in the box? A contextually-aware i18n filter, with smarts and dynamic string interpolation.

Not sure how well it'd fit in the core docs, since I assume most sites would have very specific i18n/l10n requirements (.ftl files, .po files, etc). But feel free to submit an issue/request in https://github.com/11ty/11ty-website/search?q=i18n&type=code repo.
In fact, a quick search there shows the following resources:

[plugin] eleventy-plugin-i18n: "will add a clever i18n universal filter to assist with internationalization and dictionary translations."
[plugin] eleventy-plugin-i18n-gettext: "adds i18n support with Gettext string translation and moment.js date and times localization."
[tutorial] Multilingual sites with Eleventy (i18n, Internationalization) by Jérôme Coupé
[tutorial] Language switcher for multilingual JAMstack sites (i18n, Internationalization) by Jérôme Coupé

https://www.11ty.dev/docs/plugins/
https://www.11ty.dev/docs/tutorials/

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Unable to select component based on site locale #2190

{{title}}

Replies: 2 comments 4 replies

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

Unable to select component based on site locale #2190

alexlibby Jan 25, 2022

Replies: 2 comments · 4 replies

pdehaan Jan 26, 2022 Collaborator

alexlibby Jan 26, 2022 Author

pdehaan Jan 26, 2022 Collaborator

alexlibby Jan 29, 2022 Author

pdehaan Jan 29, 2022 Collaborator

pdehaan Jan 29, 2022 Collaborator

alexlibby
Jan 25, 2022

Replies: 2 comments 4 replies

pdehaan
Jan 26, 2022
Collaborator

alexlibby
Jan 26, 2022
Author

pdehaan Jan 26, 2022
Collaborator

alexlibby Jan 29, 2022
Author

pdehaan Jan 29, 2022
Collaborator

pdehaan Jan 29, 2022
Collaborator