Data from the API available in the eleventy.config

[raduchiriac]

I have a headless CMS with internationalization that will eventually feed my eleventy with data at build time.

The structure of the JSON below.
I created the file: _data/headless.mjs who fetches that from the external API.

{
"events": [ {"title": "One"}, {"title": "Two"}, {"title": "Next"} ],
"news": [],
"settings": {},
"translations": {"en": {"home": "Home"}, "fr": {"home": "Accueil"}}
}

I generate my pages using the pagination like this and all works amazingly

pagination:
  data: headless.events
  size: 1
  alias: currentEvent

I got stuck at writing something like:
<a href="#">{{ getTranslation("en", "home") }}</a>

eleventy.config.js

config.addNunjucksGlobal("getTranslation", (language, label) => {
    return headless.translations?[language]?[label] && headless.translations[language][label] || `missing translation for ${label} in ${language}`
});

which is a lot cleaner and easier to manage than:
<a href="#">{{ headless.translations.en.home | default('missing') }}</a>

[dwkns]

I'm not sure you can. addNunjucksGlobal is not async friendly which is likely why you are seeing the error you are.

Can I ask why you need to use it in a addNunjucksGlobal? Any context might help us understand the problem you are trying to solve.

[raduchiriac]

thanks for looking into it. I updated my original post

[dwkns]

Ahhhh. I understand now.
Take a look at Shortcodes these are async friendly and supported in JavaScript, Liquid, Nunjucks templates. And then take a look at this issue for an undocumented trick.

You'll be able to do something like:

eleventyConfig.addShortcode("getTranslation", function ( language, label ) {
     let data = this.ctx.headless
     return   return data.translations?[language]?[label] && data.translations[language][label] || `missing translation for ${label} in ${language}`
})

And then something like this in your template:

{% getTranslation "en", "home" %}

Note that your function when you add the shortcode has to be function() NOT an arrow function ()=>{} because arrow functions don't have access to this.

If you don't want to use this.ctx you can always pass headless into your shortcode along with language & label.

[raduchiriac]

What a great idea.
It works almost all the time but in my templates I import Macros from other files and pass data to them.

{% macro Header(title, text) %}
...
{% endmacro %}

{{ Header(headless.translations.en.home, headless.translations.en.home_text) }}

What is the syntax to use shortcodes within the curly brackets?
FIY: In my templates I use dozens of calls to these macros: Button, Form, Photo_Gallery etc.