Rendering react-intl strings to static html

[cedricdelpoux]

The generated html has untranslated keys instead generated ones.

<span>footer.subscribe_newsletter</span>

So if javascript is disabled, there is no text on my website.
It's very problematic for the seo.

[MoOx]

Pretty sure it's due to your react-intl configuration and default locale used. I don't see how Phenomic can be responsible this kind of issue (but I may miss something).

[dab]

I think we need to rename this issue 😄
Rendering react-intl strings to static html
If I understand it correctly.

[cedricdelpoux]

Ok thank you. I did. I will take a look around react-intl configuration. But it mean that I can generate only one language right ?

[MoOx]

Obviously yes. That's why I recommended you to use distinct page for each languages.

Eg: / is the same as /en/ (you can use a link canonical or something for seo) and /fr/ is french homepage.

[MoOx]

*Yes for HTML. But for JS you can adjust like you want. That said, I won't play with that as sharing an url that can change the content is not a good idea to me.

[cedricdelpoux]

The problem is in initialState.

https://github.com/MoOx/phenomic/blob/master/docs/content/docs/usage/intl.md#create-intl-reducer

If I replace it with some data

const initialState = {
  locale: "en",
  messages: {
    "footer.subscribe_newsletter": "Newsletter",
  },
  formats: null,
  defaultLocale: "en",
}

Then my generated html have translated content.

So :

• I have differents url,
• I have differents markdowns files with locale metadata.

My question is how can I generate some pages with fr translations and some other pages with en translations ?

Should I use two webpack configs and define a variable with the webpack DefinePlugin to use it in my javascript to set initialState ?

Do you recommend other options ?

I don't see how to handle this using one webpack config.

[MoOx]

On putaindecode.io, we initilize locale by first looking in the url. You should keep a simple solution like that.

[cedricdelpoux]

Thank you. I succeed to generate right translations for my /fr/ and /nl/ routes. I kept react-intl and I remove redux things so I could update the documentation.

[MoOx]

Be my guest!

[cedricdelpoux]

PR opened