[OPTIONAL] - Newssite - updates to support different languages / html direction in the future #248
Conversation
|
At least Japanese version has a lot of weird translations. Also, what are before/after numbers? Are the numbers for en content? |
Weird translations was my goal 😄 (translated some English dummy text and lorem ipsum into Japanese). The before / after numbers are comparing current build in main (before) with this update (after), using english translation to ensure the same language is used. |
flashdesignory
changed the title
|
this pr could also be used if we just want a RTL workload (independent from languages discussions) |
|
We discussed landing a first version with only the code refactoring and then handling the actual translations / workload changes separately |
Thanks @bgrins - translations have been removed. |
flashdesignory
changed the title
| const defaultLanguage = "en"; | ||
| const urlParams = new URLSearchParams(window.location.search); | ||
| const lang = urlParams.get("lang") ?? "en"; | ||
| const dir = urlParams.get("dir") ?? "ltr"; |
There was a problem hiding this comment.
This could be work for later, but in our project we're infering the direction from the language directly: https://github.com/firefox-devtools/profiler/blob/8ab31e7e35f0075ea93ef76784697f84185de9f1/src/app-logic/l10n.js#L53-L57
Might be worth doing the same thing here.
There was a problem hiding this comment.
let's do that one later....
There was a problem hiding this comment.
Yeah, we can do it once we add an actual RTL language.
| const dir = urlParams.get("dir") ?? "ltr"; | ||
|
|
||
| document.documentElement.setAttribute("dir", dir); | ||
| document.documentElement.setAttribute("lang", defaultLanguage); |
There was a problem hiding this comment.
| document.documentElement.setAttribute("lang", defaultLanguage); | |
| document.documentElement.setAttribute("lang", lang); |
| export const DataContextProvider = ({ children }) => { | ||
| const defaultLanguage = "en"; | ||
| const urlParams = new URLSearchParams(window.location.search); | ||
| const lang = urlParams.get("lang") ?? "en"; |
There was a problem hiding this comment.
| const lang = urlParams.get("lang") ?? "en"; | |
| const lang = urlParams.get("lang") ?? defaultLanguage; |
| const contentImport = { en: contentEn }; | ||
| const settingsImport = { en: settingsEn }; | ||
| const footerImport = { en: footerEn }; | ||
| const buttonsImport = { en: buttonsEn }; | ||
| const linksImport = { en: linksEn }; |
There was a problem hiding this comment.
I think I'd rather do a structure such as:
const strings = {
en: {
content: contentEn,
settings: settingsEn,
footer: footerEn,
buttons: buttonsEn,
links: linksEn,
},
};Because it makes it straightforward to check for the existence of the locale later, that is instead of:
const lang = urlParams.get("lang") ?? defaultLanguage;we'd have
const langFromUrl = urlParams.get("lang");
const lang = langFromUrl && langFromUrl in strings ? langFromUrl : defaultLanguage;and then get rid of the condition in the return value:
const value = {
lang,
dir,
...strings[lang],
};What do you think?
There was a problem hiding this comment.
I like it - changed.
| const data = useDataContext(); | ||
| const { settings } = data; |
There was a problem hiding this comment.
nit:
| const data = useDataContext(); | |
| const { settings } = data; | |
| const { settings } = useDataContext(); |
rebuild to support en, jp & ar languages. This re-uses one set of source files.
@rniwa - selecting more than one of these, causes the security error in safari to appear again (history.replaceState).
But it's here for opinions...
Chrome:
before:
after:
Safari
before:
after:
Firefox:
before:
after:
Standalone previews:
English: https://flashdesignory.github.io/news-site-next-static/index.html
Japanese: https://flashdesignory.github.io/news-site-next-static/index.html?lang=jp
Arabic: https://flashdesignory.github.io/news-site-next-static/index.html?lang=ar&dir=rtl
@kara