Add automatic generation of translates nav to simplify addition of future translates, add De

gulpfile.js

@@ -6,41 +6,23 @@ const colors = require(`colors/safe`);
 const del = require(`del`);
 const mustache = require(`gulp-mustache`);
 const rename = require(`gulp-rename`);
+const getL10n = require(`./src/helpers/getLocalizations.js`).default;
 
 const SERVER_ROOT = `build/`;
+const TRANSLATES_PATH = `./src/translate/`;
 
-const translates = [
-  {
-    dest: SERVER_ROOT,
-    url: `./src/translate/en.json`
-  },
-  {
-    dest: `${SERVER_ROOT}pt`,
-    url: `./src/translate/pt.json`
-  },
-  {
-    dest: `${SERVER_ROOT}ru`,
-    url: `./src/translate/ru.json`
-  },
-  {
-    dest: `${SERVER_ROOT}zh-cn`,
-    url: `./src/translate/zh-cn.json`
-  },
-  {
-    dest: `${SERVER_ROOT}zh-tw`,
-    url: `./src/translate/zh-tw.json`
-  },
-  {
-    dest: `${SERVER_ROOT}tr`,
-    url: `./src/translate/tr.json`
-  }
-];
+const {languages, translates} = getL10n(SERVER_ROOT, TRANSLATES_PATH);
 
 // TEMPLATES
-const tmplTasks = translates.map(({ dest, url }) => {
+const tmplTasks = translates.map(({ dest, content }) => {
   return (done) => {
+    // ATTACH RESPECTIVE LANG NAV
+    const langs = languages.map(lang => ({
+      ...lang,
+      isActive: lang.name === content.langName
+    }));
     gulp.src(`./src/index-src.html`)
-      .pipe(mustache(url))
+      .pipe(mustache({...content, langs}))
       .pipe(rename(`index.html`))
       .pipe(gulp.dest(dest))
       .pipe(reload({ stream: true }));

src/helpers/getLocalizations.js

@@ -0,0 +1,42 @@
+const fs = require(`fs`);
+const path = require(`path`);
+
+exports.default = (SERVER_ROOT, TRANSLATES_PATH) => {
+    // GENERATE TRANSLATES
+    const translateFiles = fs.readdirSync(TRANSLATES_PATH);
+    const languages = [];
+    const translates = [];
+
+    translateFiles.forEach(translateFile => {
+    const fileUrl = TRANSLATES_PATH + translateFile;
+    const lang = path.basename(fileUrl, `.json`);
+    const content = JSON.parse(fs.readFileSync(fileUrl, `utf8`));
+
+    if (lang === `en`) {
+        // EN needs a different path and also has to be in first place of array
+        languages.unshift({
+        name: content.langName,
+        code: null,
+        });
+
+        translates.unshift({
+        content: content,
+        dest: SERVER_ROOT,
+        path: `.`
+        })
+    } else {
+        languages.push({
+        name: content.langName,
+        code: lang,
+        });
+
+        translates.push({
+        content: content,
+        dest: SERVER_ROOT + lang,
+        path: `..`
+        })
+    }
+    });
+
+    return {languages, translates}
+};

src/index-src.html

@@ -11,7 +11,12 @@ <h1>{{title}}</h1>
         <ul class="langs">
           {{#langs}}
           <li class="langs__item">
-            {{{.}}}
+            {{^isActive}}
+              <a href="{{ path }}/{{ code }}">{{ name }}</a>
+            {{/isActive}}
+            {{#isActive}}
+              <span>{{ name }}</span>
+            {{/isActive}}
           </li>
           {{/langs}}
         </ul>

src/translate/de.json

@@ -0,0 +1,23 @@
+{
+  "path": "..",
+  "langName": "De",
+  "title": "URL-Kodierer für SVG",
+  "quotes": "Anführungszeichen",
+  "single": "einfach",
+  "double": "doppelt",
+  "aboutTitle": "Über das Tool",
+  "aboutText": "<p>Wir können ein SVG in CSS über Daten-URI verwenden, aber ohne kodierung funktioniert es nur in Webkit-basierten Browsern. Wenn das SVG mit <code>encodeURIComponent()</code> kodiert wird, funktioniert es überall.</p><p>Das SVG muss das Attribut <strong>xmlns</strong> wie folgt besitzen: <code>xmlns='http: //www.w3.org/2000/svg'</code>. Falls es nicht vorhanden ist, wird es automatisch hinzugefügt.</p><p>Das kodierte SVG kann anschließend als <code>background</code>, als <code>border-image</code> oder auch als <code>mask</code> verwendet werden. (<a href='https://codepen.io/yoksel/full/WNrLpYW'>Live-Demo</a>).</p>",
+  "insertSVG": "SVG einfügen",
+  "example": "Beispiel",
+  "takeEncoded": "Kodiert verwenden",
+  "copy": "Kopieren",
+  "readyForCSS": "Vorbereitet für CSS",
+  "preview": "Vorschau",
+  "background": "Hintergrund",
+  "white": "weiß",
+  "silver": "grau",
+  "black": "schwarz",
+  "projectOn": "Projekt auf",
+  "twitter": "yoksel_en",
+  "decodeTip": "Du kannst ein kodiertes SVG hier einfügen, um es wieder zu dekodieren"
+}

src/translate/en.json

@@ -1,5 +1,6 @@
 {
   "path": ".",
+  "langName": "En",
   "title": "URL-encoder for SVG",
   "quotes": "External quotes",
   "single": "single",
@@ -18,13 +19,5 @@
   "black": "black",
   "projectOn": "Project on",
   "twitter": "yoksel_en",
-  "langs": [
-    "<a>En</a>",
-    "<a href=\"../pt\">Br</a>",
-    "<a href=\"../ru\">Рус</a>",
-    "<a href=\"../zh-cn\">简中</a>",
-    "<a href=\"../zh-tw\">繁中</a>",
-    "<a href=\"../tr\">Tr</a>"
-  ],
   "decodeTip": "You may place encoded SVG here to decode it back"
 }

src/translate/pt.json

@@ -1,5 +1,6 @@
 {
   "path": "..",
+  "langName": "Br",
   "title": "Codificador de URL para SVG",
   "quotes": "Aspas externas",
   "single": "simples",
@@ -18,13 +19,5 @@
   "black": "Preto",
   "projectOn": "Repositório no",
   "twitter": "yoksel_en",
-  "langs": [
-    "<a href=\"../\">En</a>",
-    "<a>Br</a>",
-    "<a href=\"../ru\">Рус</a>",
-    "<a href=\"../zh-cn\">简中</a>",
-    "<a href=\"../zh-tw\">繁中</a>",
-    "<a href=\"../tr\">Tr</a>"
-  ],
   "decodeTip": "Você pode colocar um SVG codificado aqui para decodificar de volta."
 }

src/translate/ru.json

@@ -1,5 +1,6 @@
 {
   "path": "..",
+  "langName": "Рус",
   "title": "URL-encoder для SVG",
   "quotes": "Внешние кавычки",
   "single": "oдинарные",
@@ -18,13 +19,5 @@
   "black": "черный",
   "projectOn": "Проект на",
   "twitter": "yoksel",
-  "langs": [
-    "<a href=\"../\">En</a>",
-    "<a href=\"../pt\">Br</a>",
-    "<a>Рус</a>",
-    "<a href=\"../zh-cn\">简中</a>",
-    "<a href=\"../zh-tw\">繁中</a>",
-    "<a href=\"../tr\">Tr</a>"
-  ],
   "decodeTip": "Сюда можно вставить закодированный SVG, чтобы раскодировать его обратно"
 }

src/translate/tr.json

@@ -1,5 +1,6 @@
 {
   "path": "..",
+  "langName": "Tr",
   "title": "SVG için URL oluşturucu",
   "quotes": "Tırnak Kullanımı",
   "single": "tek",
@@ -18,13 +19,5 @@
   "black": "Siyah",
   "projectOn": "Bu proje",
   "twitter": "yoksel_en",
-  "langs": [
-    "<a href=\"../\">En</a>",
-    "<a href=\"../pt\">Br</a>",
-    "<a href=\"../ru\">Рус</a>",
-    "<a href=\"../zh-cn\">简中</a>",
-    "<a href=\"../zh-tw\">繁中</a>",
-    "<a>Tr</a>"
-  ],
   "decodeTip": "Dönüştürülmüş SVG kodunuzu eski haline çevirmek için buraya yapıştırabilirsiniz"
 }

src/translate/zh-cn.json

@@ -1,5 +1,6 @@
 {
   "path": "..",
+  "langName": "简中",
   "title": "用于 SVG 的 URL-encoder",
   "quotes": "引号 ",
   "single": "单引号",
@@ -18,13 +19,5 @@
   "black": "黑色",
   "projectOn": "查看项目于 ",
   "twitter": "yoksel_en",
-  "langs": [
-    "<a href=\"../\">En</a>",
-    "<a href=\"../pt\">Br</a>",
-    "<a href=\"../ru\">Рус</a>",
-    "<a>简中</a>",
-    "<a href=\"../zh-tw\">繁中</a>",
-    "<a href=\"../tr\">Tr</a>"
-  ],
   "decodeTip": "您可将编码后的 SVG 粘贴到此处以解码"
 }

src/translate/zh-tw.json

@@ -1,5 +1,6 @@
 {
   "path": "..",
+  "langName": "繁中",
   "title": "給 SVG 使用的 URL-encoder",
   "quotes": "引號 ",
   "single": "單個",
@@ -18,13 +19,5 @@
   "black": "黑色",
   "projectOn": "項目在 ",
   "twitter": "yoksel_en",
-  "langs": [
-    "<a href=\"../\">En</a>",
-    "<a href=\"../pt\">Br</a>",
-    "<a href=\"../ru\">Рус</a>",
-    "<a href=\"../zh-cn\">简中</a>",
-    "<a>繁中</a>",
-    "<a href=\"../tr\">Tr</a>"
-  ],
   "decodeTip": "您可以將編碼後的 SVG 放在此處以將其解碼回去"
 }