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

gulpfile.js

@@ -6,37 +6,60 @@ const colors = require(`colors/safe`);
 const del = require(`del`);
 const mustache = require(`gulp-mustache`);
 const rename = require(`gulp-rename`);
+const fs = require(`fs`);
+const path = require(`path`);
 
 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-tw`,
-    url: `./src/translate/zh-tw.json`
-  },
-  {
-    dest: `${SERVER_ROOT}tr`,
-    url: `./src/translate/tr.json`
+// GENERATE TRANSLATES
+const translates = [];
+const translateFiles = fs.readdirSync(TRANSLATES_PATH);
+const languages = [];
+
+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: `..`
+    })
   }
-];
+});
+
+console.log(translates, languages);
 
 // 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/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,12 +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-tw\">Tc</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,12 +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-tw\">Tc</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,12 +19,5 @@
   "black": "черный",
   "projectOn": "Проект на",
   "twitter": "yoksel",
-  "langs": [
-    "<a href=\"../\">En</a>",
-    "<a href=\"../pt\">Br</a>",
-    "<a>Рус</a>",
-    "<a href=\"../zh-tw\">Tc</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,12 +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-tw\">Tc</a>",
-    "<a>Tr</a>"
-  ],
   "decodeTip": "Dönüştürülmüş SVG kodunuzu eski haline çevirmek için buraya yapıştırabilirsiniz"
 }

src/translate/zh-tw.json

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