commit f6517f60ce82cfbcdd7f2b894638ded4accfc129 Author: Cecylia Bocovich cohosh@torproject.org Date: Tue Oct 8 18:00:43 2019 -0400
Hook up localized messages.json to website
Right now we use the navigator language to determine localization and replace the website contents with translated strings. --- proxy/make.js | 2 ++ proxy/static/index.html | 5 +++-- proxy/static/index.js | 60 +++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 65 insertions(+), 2 deletions(-)
diff --git a/proxy/make.js b/proxy/make.js index bbaf0ca..defcf1f 100755 --- a/proxy/make.js +++ b/proxy/make.js @@ -94,6 +94,8 @@ task('build', 'build the snowflake proxy', function() { execSync(`cp -r ${STATIC}/ ${outDir}/`); copyTranslations(outDir); concatJS(outDir, 'badge', 'embed.js', availableLangs()); + writeFileSync(`${outDir}/index.js`, availableLangs(), 'utf8'); + execSync(`cat ${STATIC}/index.js >> ${outDir}/index.js`); console.log('Snowflake prepared.'); });
diff --git a/proxy/static/index.html b/proxy/static/index.html index ae17d42..3aa254b 100644 --- a/proxy/static/index.html +++ b/proxy/static/index.html @@ -1,5 +1,5 @@ <!doctype html> -<html lang="en"> +<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> @@ -18,7 +18,7 @@
<p class="diagram"><img src="https://trac.torproject.org/projects/tor/raw-attachment/wiki/doc/Snowflake/snowflake-schematic.png" alt="Diagram" /></p>
- <p data-mdgid="__MSG_websiteIntro__">Snowflake is a system to defeat internet censorship. People who are + <p data-msgid="__MSG_websiteIntro__">Snowflake is a system to defeat internet censorship. People who are censored can use Snowflake to access the internet. Their connection goes through Snowflake proxies, which are run by volunteers. For more detailed information about how Snowflake works see our @@ -96,5 +96,6 @@ </section>
</section> + <script src="index.js"></script> </body> </html> diff --git a/proxy/static/index.js b/proxy/static/index.js new file mode 100644 index 0000000..599b533 --- /dev/null +++ b/proxy/static/index.js @@ -0,0 +1,60 @@ +class Messages { + constructor(json) { + this.json = json; + } + getMessage(m, ...rest) { + if (this.json.hasOwnProperty(m)) { + let message = this.json[m].message; + return message.replace(/$(\d+)/g, (...args) => { + return rest[Number(args[1]) - 1]; + }); + } + } +} + + +defaultLang = "en_US"; + +var getLang = function() { + let lang = navigator.language || defaultLang; + lang = lang.replace(/-/g, '_'); + if (availableLangs.has(lang)) { + return lang; + } + lang = lang.split('_')[0]; + if (availableLangs.has(lang)) { + return lang; + } + return defaultLang; +} + +var fill = function(n, func) { + switch(n.nodeType) { + case 1: // Node.ELEMENT_NODE + const m = /^__MSG_([^_]*)__$/.exec(n.dataset.msgid); + if (m) { + val = func(m[1]); + if (val != undefined) { + n.innerHTML = val + } + } + n.childNodes.forEach(c => fill(c, func)); + break; + } +} + +console.log("Fetching", `./_locales/${getLang()}/messages.json`); + +fetch(`./_locales/${getLang()}/messages.json`) + .then((res) => { + if (!res.ok) { return; } + return res.json(); + }) + .then((json) => { + messages = new Messages(json); + console.log("Filling document body"); + fill(document.body, (m) => { + console.log("Filling ", m); + return messages.getMessage(m); + }); + });