Set Up French Version of Website

[mekkim]

@mekkim can do the translations of all the page contents to French, once the back-end/front-end structure to have a dual-language website needs are set up. Apparently the core React structure the site was built upon does have multi-language support. If we can get that up and running, the French domain names can then be pointed to the French pages.

[humphd]

Such a great idea! One process suggestion for this. Start by extracting all the strings from the code for English. That is, localize for en-CA to start, and when that works, we can add fr-CA.

[mekkim]

When you say "extract all the strings from the code", could you explain a bit more how to do this? I'm happy to get started.

[humphd]

The process usually goes like this:

• pick an internationalization framework. There are a few for React. Choosing this will help to determine how to do the next steps. Often you have a directory of JSON files for each lang, so our first one could be for English
• add some localized routing to handle picking the correct language choice, either from the browser, headers, or URL.
• extract the existing strings from the React code, and replace them with key/value pair lookups from the language file. Once the English strings are all moved out of the React code and into these JSON files, adding French will Just Work for the most part

There are some nice tools to help with this process, once the strings are extracted into JSON. You can focus on translating vs. doing it as code.

This can also be done bit-at-a-time vs. doing the whole site. Especially if you start by localizing the English strings, it makes it easier to roll out, since the rest of the site still works while that happens.

[humphd]

I can't do more with the French than say merci after you do it, but I can work on the infrastructure to support the work. I'll file some issues.

[mekkim]

Ok. What would really help me is a dummy syntax example (I learn best with examples) of how to do this. i.e., let's say I come across "<English text A1>" in the code, what do I replace it with? What's the syntax for the reference?

And then for the dereference, in the JSON file, what's the key:pair syntax? i.e., is it {"English": {"A1":"<English text A1>", "A2": "<English text A2>"}} and so on?

I'm good at chipping away at stuff like this so long as I know what format it needs to be in. I can rapidly do it for all the text, both English and French equivalents.