Our current website is available in different languages, so we'll need to support that in the new site too.
This falls apart in three aspects:
Routing
Translation of content
Translation of the interface
Routing
Languages are currently determined by a language code in the URL, with the default (en) not using a code. For example /about/ is English, whereas /fr/about/ is the French version of that same page.
Routing should take this into account. Links to /about/ should switch to /fr/about if the user is browsing the French site.
We could/should detect the language requested by the browser, and serve that language (if we have it)
Going to /en/about/ should also work (here we could just redirect to /about/)
When you're on /about and you change your language to French, we should probably send you to /fr/about.
When /about is not translated, people visiting /fr/about should get to see the English version with a notice that this content is not available in French. However, we should not redirect them to /about as that would change the interface language.
Unfortunately, while there is an i18n plugin for Gatsby, it doesn't seem to be all that great and this might require some work.
Translation of content
This is relatively straightforward. /about can be an English markdown page, and /fr/about a French one.
Translation of the interface
Here, there's a number of options. We can use a fully-featured package such as react-intl or implement something more minimalistic.
A few requirements from the top of my head:
Support for loading translations from YAML files (as that's what our translators are used to)
Support for purals, date formatting, and variable interpolation (this would suggest we're better of with react-inlt)
I think we've covered everything. There might be some more subtle issues, but I'm closing this as the current site is working with multi-lingual markdown content, and react-intl for translation
Our current website is available in different languages, so we'll need to support that in the new site too. This falls apart in three aspects:
Routing
Languages are currently determined by a language code in the URL, with the default (
en
) not using a code. For example/about/
is English, whereas/fr/about/
is the French version of that same page./about
/ should switch to/fr/about
if the user is browsing the French site./en/about/
should also work (here we could just redirect to/about/
)/about
and you change your language to French, we should probably send you to/fr/about
./about
is not translated, people visiting/fr/about
should get to see the English version with a notice that this content is not available in French. However, we should not redirect them to/about
as that would change the interface language.Unfortunately, while there is an i18n plugin for Gatsby, it doesn't seem to be all that great and this might require some work.
Translation of content
This is relatively straightforward.
/about
can be an English markdown page, and/fr/about
a French one.Translation of the interface
Here, there's a number of options. We can use a fully-featured package such as react-intl or implement something more minimalistic. A few requirements from the top of my head: