How to create Multilanguage component or layout?

[cawa-93]

I would like to create components or layouts that contain a certain translation inside, and are not drops by props.

I have layout that render header with lang switcher. I export the data as the documentation says, but the switchLang variable inside of the layout function is undefined

export const uk = {
    switchLang: 'Switch language'
}

export const en = {
    switchLang: 'Змінити мову'
}

export default ({children, comp, alternates, lang, switchLang}) => {
    const langLinkToDisplay = alternates.find(a => a.lang !== lang)
    console.log(switchLang) // undefined
    return (
        <>
            <header>
              <a href={langLinkToDisplay.url}>
                  <img src="..."  alt={switchLang}/>
              </a>
            </header>
            <main>
                {children}
            </main>
        </>
    );
}

[oscarotero]

The Multilanguage plugin doesn't transform the data from layouts or components, only pages. You can store this value in a _data file, so it's used by all pages and passed to the layout.

If you want to keep the copies in the layout file, you can do something like this:

export const copies = {
    uk: { switchLang: 'Switch language' },
    en: { switchLang: 'Змінити мову' },
};

export default ({children, comp, alternates, lang, copies}) => {
    const langLinkToDisplay = alternates.find(a => a.lang !== lang)
    const switchLang = copies[lang].switchLang;

    return (
        <>
            <header>
              <a href={langLinkToDisplay.url}>
                  <img src="..."  alt={switchLang}/>
              </a>
            </header>
            <main>
                {children}
            </main>
        </>
    );
}