[snowflake/master] Hook up localized messages.json to website - tor-commits

16 Oct 2019

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);
+    });
+  });

    