diff --git a/README.md b/README.md index 1eb57f5..539e8a4 100644 --- a/README.md +++ b/README.md @@ -11,12 +11,14 @@ http://yoksel.github.io/url-encoder Demo: https://codepen.io/yoksel/full/WNrLpYW. -## How to add translate +## How to run the project + +1. Run `npm i` to install all dependecies for development +2. Run `npm start` to start the process (will atomatically open up a new browser tab) + + +## How to add a translation 1. Create translation file (use `src/translate/en.json` as example) and place it to `src/translate/` -2. Add new language to section `langs` in all translation files -3. Add item with your language to section `translates` in `gulpfile.js`. -4. Run `npm start` in console (wait until project will be opened in browser) and check all pages: - * Link to new page must appear in all pages - * In the page with new translate new language in list must looks like current (bold and black) -5. Send pull request +2. Run the project locally and check the newly language page for any translation mistakes +3. Send pull request \ No newline at end of file diff --git a/gulpfile.js b/gulpfile.js index 6d3004e..a413bdf 100644 --- a/gulpfile.js +++ b/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 })); diff --git a/package.json b/package.json index 3f85721..71a32f8 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,10 @@ "version": "1.0.1", "description": "http://yoksel.github.io/url-encoder", "main": ".eslintrc.js", + "engines": { + "node": ">=16.0.0", + "npm": ">=7.0.0" + }, "scripts": { "start": "gulp clean && gulp serve", "build": "gulp clean && gulp build", diff --git a/src/helpers/getLocalizations.js b/src/helpers/getLocalizations.js new file mode 100644 index 0000000..811a8c9 --- /dev/null +++ b/src/helpers/getLocalizations.js @@ -0,0 +1,41 @@ +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`)); + const isEnglish = lang === 'en'; + const insertionMethod = isEnglish ? 'unshift' : 'push'; + + const language_data = { + name: content.langName, + code: lang, + }; + + const content_data = { + content: content, + dest: SERVER_ROOT + lang, + path: `..` + } + + if (isEnglish) { + // EN needs a different path and also has to be in first place of array + language_data['code'] = null; + content_data['dest'] = SERVER_ROOT; + content_data['path'] = `.`; + } + + languages[insertionMethod](language_data); + translates[insertionMethod](content_data) + + }); + + return {languages, translates} +}; \ No newline at end of file diff --git a/src/index-src.html b/src/index-src.html index d76d85c..738f1c2 100644 --- a/src/index-src.html +++ b/src/index-src.html @@ -11,7 +11,12 @@

{{title}}

diff --git a/src/translate/de.json b/src/translate/de.json new file mode 100644 index 0000000..5717ab9 --- /dev/null +++ b/src/translate/de.json @@ -0,0 +1,22 @@ +{ + "langName": "De", + "title": "URL-Kodierer für SVG", + "quotes": "Anführungszeichen", + "single": "einfach", + "double": "doppelt", + "aboutTitle": "Über das Tool", + "aboutText": "

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 encodeURIComponent() kodiert wird, funktioniert es überall.

Das SVG muss das Attribut xmlns wie folgt besitzen: xmlns='http: //www.w3.org/2000/svg'. Falls es nicht vorhanden ist, wird es automatisch hinzugefügt.

Das kodierte SVG kann anschließend als background, als border-image oder auch als mask verwendet werden. (Live-Demo).

", + "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" +} diff --git a/src/translate/en.json b/src/translate/en.json index 681cb3a..2235905 100644 --- a/src/translate/en.json +++ b/src/translate/en.json @@ -1,5 +1,5 @@ { - "path": ".", + "langName": "En", "title": "URL-encoder for SVG", "quotes": "External quotes", "single": "single", @@ -18,13 +18,5 @@ "black": "black", "projectOn": "Project on", "twitter": "yoksel_en", - "langs": [ - "En", - "Br", - "Рус", - "简中", - "繁中", - "Tr" - ], "decodeTip": "You may place encoded SVG here to decode it back" } diff --git a/src/translate/pt.json b/src/translate/pt.json index 98e4b2e..eaf8286 100644 --- a/src/translate/pt.json +++ b/src/translate/pt.json @@ -1,5 +1,5 @@ { - "path": "..", + "langName": "Br", "title": "Codificador de URL para SVG", "quotes": "Aspas externas", "single": "simples", @@ -18,13 +18,5 @@ "black": "Preto", "projectOn": "Repositório no", "twitter": "yoksel_en", - "langs": [ - "En", - "Br", - "Рус", - "简中", - "繁中", - "Tr" - ], "decodeTip": "Você pode colocar um SVG codificado aqui para decodificar de volta." } diff --git a/src/translate/ru.json b/src/translate/ru.json index d627d73..644c5ff 100644 --- a/src/translate/ru.json +++ b/src/translate/ru.json @@ -1,5 +1,5 @@ { - "path": "..", + "langName": "Рус", "title": "URL-encoder для SVG", "quotes": "Внешние кавычки", "single": "oдинарные", @@ -18,13 +18,5 @@ "black": "черный", "projectOn": "Проект на", "twitter": "yoksel", - "langs": [ - "En", - "Br", - "Рус", - "简中", - "繁中", - "Tr" - ], "decodeTip": "Сюда можно вставить закодированный SVG, чтобы раскодировать его обратно" } diff --git a/src/translate/tr.json b/src/translate/tr.json index e252615..505c84e 100644 --- a/src/translate/tr.json +++ b/src/translate/tr.json @@ -1,5 +1,5 @@ { - "path": "..", + "langName": "Tr", "title": "SVG için URL oluşturucu", "quotes": "Tırnak Kullanımı", "single": "tek", @@ -18,13 +18,5 @@ "black": "Siyah", "projectOn": "Bu proje", "twitter": "yoksel_en", - "langs": [ - "En", - "Br", - "Рус", - "简中", - "繁中", - "Tr" - ], "decodeTip": "Dönüştürülmüş SVG kodunuzu eski haline çevirmek için buraya yapıştırabilirsiniz" } diff --git a/src/translate/zh-cn.json b/src/translate/zh-cn.json index 01d8e68..15e29ff 100644 --- a/src/translate/zh-cn.json +++ b/src/translate/zh-cn.json @@ -1,5 +1,5 @@ { - "path": "..", + "langName": "简中", "title": "用于 SVG 的 URL-encoder", "quotes": "引号 ", "single": "单引号", @@ -18,13 +18,5 @@ "black": "黑色", "projectOn": "查看项目于 ", "twitter": "yoksel_en", - "langs": [ - "En", - "Br", - "Рус", - "简中", - "繁中", - "Tr" - ], "decodeTip": "您可将编码后的 SVG 粘贴到此处以解码" } diff --git a/src/translate/zh-tw.json b/src/translate/zh-tw.json index 6a41524..5f1fe67 100644 --- a/src/translate/zh-tw.json +++ b/src/translate/zh-tw.json @@ -1,5 +1,5 @@ { - "path": "..", + "langName": "繁中", "title": "給 SVG 使用的 URL-encoder", "quotes": "引號 ", "single": "單個", @@ -18,13 +18,5 @@ "black": "黑色", "projectOn": "項目在 ", "twitter": "yoksel_en", - "langs": [ - "En", - "Br", - "Рус", - "简中", - "繁中", - "Tr" - ], "decodeTip": "您可以將編碼後的 SVG 放在此處以將其解碼回去" }