Initial work to internationalize the front-end (see #124), please don't merge this yet. NOTE: this only localizes the footer component into English, and includes the file for French as well.
The way this works is as follows:
In your JSX you import the t() (i.e., translate) hook, and optionally include some namespaces (e.g., app): const { t } = useTranslation("app");
You access your strings via a key, which holds the string for the current langauge: <div className="copyright">{t("footer.copyright")}</div>
You create JSON files with deeply nested objects that contain the string values for each language. I haven't actually translated the strings for fr, but the file is there for it to be done.
The browser will try to determine the language using a number of built-in methods, but you can also override it for testing using?lng=LANGUAGE, for example ?lng=fr. We could also add a manual language switcher, but if you do things via domains, we can probably skip this?
This process will expose a bunch of issues. Strings in different languages have different lengths, and will require tweaks to the UI/CSS os that it works in all cases. Also, some components are currently using classes, which won't work with hooks (i.e., the navbar needs to be converted to a functional component). Also, some strings are used all over the place, and we'll need to separate the translations out into different JSON files for improved loading.
I'm in the process of redoing the 'Buy' page right now, so I'd like to finish major updates to the UI before pushing ahead with this (i.e., it's easier to not have a lot of churn on the UI when you are pulling the strings out into JSON files); but I wanted to show you what it looks like to do this work.
We can also do this bit at a time vs. waiting for the whole thing to be translated.
Initial work to internationalize the front-end (see #124), please don't merge this yet. NOTE: this only localizes the footer component into English, and includes the file for French as well.
The way this works is as follows:
t()(i.e., translate) hook, and optionally include some namespaces (e.g.,app):const { t } = useTranslation("app");<div className="copyright">{t("footer.copyright")}</div>fr, but the file is there for it to be done.?lng=LANGUAGE, for example?lng=fr. We could also add a manual language switcher, but if you do things via domains, we can probably skip this?This process will expose a bunch of issues. Strings in different languages have different lengths, and will require tweaks to the UI/CSS os that it works in all cases. Also, some components are currently using classes, which won't work with hooks (i.e., the navbar needs to be converted to a functional component). Also, some strings are used all over the place, and we'll need to separate the translations out into different JSON files for improved loading.
I'm in the process of redoing the 'Buy' page right now, so I'd like to finish major updates to the UI before pushing ahead with this (i.e., it's easier to not have a lot of churn on the UI when you are pulling the strings out into JSON files); but I wanted to show you what it looks like to do this work.
We can also do this bit at a time vs. waiting for the whole thing to be translated.
Resources: