Add localization for server-side image generation

parent 8530189c
Pipeline #1461 passed with stage
in 37 seconds
...@@ -19,5 +19,12 @@ ...@@ -19,5 +19,12 @@
"par": "by", "par": "by",
"et": "and", "et": "and",
"Site hébergé par": "Website hosted by", "Site hébergé par": "Website hosted by",
"Code source du site :": "Website source code:" "Code source du site :": "Website source code:",
"Internet,": "Internet,",
"et libertés.": "and freedom.",
"Faites comme ": "Just like ",
"outenez ": "upport ",
"moi\t": "me\t",
"les gens sympas\t": "nice people\t",
"les gens biens\t": "cool people\t"
} }
...@@ -42,7 +42,7 @@ function buildUrl(req) { ...@@ -42,7 +42,7 @@ function buildUrl(req) {
+ querystring.stringify(req.query); + querystring.stringify(req.query);
} }
function randomize(req) { function randomize(req, _) {
let bgColors = ['#f54358', '#ee0088', '#ff9146', '#ffd201', '#39d0b7', '#2f5189', '#000']; let bgColors = ['#f54358', '#ee0088', '#ff9146', '#ffd201', '#39d0b7', '#2f5189', '#000'];
let fgColors = ['#f54358', '#ee0088', '#ff9146', '#ffd201', '#39d0b7', '#2f5189', '#000', '#fff']; let fgColors = ['#f54358', '#ee0088', '#ff9146', '#ffd201', '#39d0b7', '#2f5189', '#000', '#fff'];
let sampleTexts = ["arachnides", "bicyclette", "bidule", "bilboquet", "biscuit", "bitcoins", "bitte", "bollard", "cantine", "casserole", "chausse-pied", "chaloupe", "chalutier", "champignons", "chignon", "chouchen", "couleurs moches", "coton-tige", "cucurbitacée", "culotte", "démocratie", "élastique", "enzyme", "fonte", "frigogidaire", "germanium", "gousse", "gousset", "hurluberlu", "hypocondrie", "loquet", "mammouth", "marmite", "Michel Sardou", "musaraigne", "narcotype", "ornythorinque", "palette", "parc de stationnement", "pelle à tarte", "perpendicularité", "plat à tarte", "poêle", "pogne", "poireau", "polochon", "pop-corn", "poulpe", "poutrelle", "prolétariat", "protozoaire", "rateau", "sabot", "sabre laser", "semi-remorque", "soulier", "taquet", "tartenpion", "tartignol", "téléportation", "tentacules", "tractopelle", "trou noir", "vérité", "zeste"]; let sampleTexts = ["arachnides", "bicyclette", "bidule", "bilboquet", "biscuit", "bitcoins", "bitte", "bollard", "cantine", "casserole", "chausse-pied", "chaloupe", "chalutier", "champignons", "chignon", "chouchen", "couleurs moches", "coton-tige", "cucurbitacée", "culotte", "démocratie", "élastique", "enzyme", "fonte", "frigogidaire", "germanium", "gousse", "gousset", "hurluberlu", "hypocondrie", "loquet", "mammouth", "marmite", "Michel Sardou", "musaraigne", "narcotype", "ornythorinque", "palette", "parc de stationnement", "pelle à tarte", "perpendicularité", "plat à tarte", "poêle", "pogne", "poireau", "polochon", "pop-corn", "poulpe", "poutrelle", "prolétariat", "protozoaire", "rateau", "sabot", "sabre laser", "semi-remorque", "soulier", "taquet", "tartenpion", "tartignol", "téléportation", "tentacules", "tractopelle", "trou noir", "vérité", "zeste"];
...@@ -57,14 +57,18 @@ function randomize(req) { ...@@ -57,14 +57,18 @@ function randomize(req) {
do { do {
req.query['fg-color'] = bgColors[Math.floor(Math.random() * fgColors.length)]; req.query['fg-color'] = bgColors[Math.floor(Math.random() * fgColors.length)];
} while (req.query['fg-color'] === req.query['bg-color']); } while (req.query['fg-color'] === req.query['bg-color']);
req.query['text'] = sampleTexts[Math.floor(Math.random() * sampleTexts.length)]; req.query['text'] = _(sampleTexts[Math.floor(Math.random() * sampleTexts.length)]);
req.query['font'] = _fonts[Math.floor(Math.random() * _fonts.length)]; req.query['font'] = _fonts[Math.floor(Math.random() * _fonts.length)];
req.query['icon'] = Math.floor(Math.random() * 36); req.query['icon'] = Math.floor(Math.random() * 36);
req.query['signature'] = sampleSignatures[Math.floor(Math.random() * sampleSignatures.length)]; req.query['signature'] = _(sampleSignatures[Math.floor(Math.random() * sampleSignatures.length)]);
return req; return req;
} }
app.get('/generate.png', function (req, res) { app.get('/generate.png', function (req, res) {
let locale = req.headers['accept-language'] || '';
i18n.setLocale(locale.indexOf('en') !== -1 && locale.indexOf('en') < locale.indexOf('fr') ? 'en' : 'fr');
_: i18n._;
if (req.query.target === 'facebook') { if (req.query.target === 'facebook') {
return res.redirect('https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(buildUrl(req))); return res.redirect('https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(buildUrl(req)));
} }
...@@ -72,7 +76,7 @@ app.get('/generate.png', function (req, res) { ...@@ -72,7 +76,7 @@ app.get('/generate.png', function (req, res) {
return res.redirect('https://twitter.com/intent/tweet?text=Soutenez La Quadrature du Net ! ' + encodeURIComponent(buildUrl(req))); return res.redirect('https://twitter.com/intent/tweet?text=Soutenez La Quadrature du Net ! ' + encodeURIComponent(buildUrl(req)));
} }
else if (req.query.target === 'randomize') { else if (req.query.target === 'randomize') {
req = randomize(req); req = randomize(req, _);
} }
else if (req.query.target === 'download') { else if (req.query.target === 'download') {
res.set("Content-Disposition", "attachment;filename=lqdn_slogan.png"); res.set("Content-Disposition", "attachment;filename=lqdn_slogan.png");
...@@ -101,8 +105,8 @@ app.get('/generate.png', function (req, res) { ...@@ -101,8 +105,8 @@ app.get('/generate.png', function (req, res) {
ctx.font = fontSize + 'pt FiraSans'; ctx.font = fontSize + 'pt FiraSans';
ctx.fillStyle = 'white'; ctx.fillStyle = 'white';
ctx.textBaseline = 'top'; ctx.textBaseline = 'top';
ctx.fillText('Internet,', width * 0.08, height * 0.2); ctx.fillText(_('Internet,'), width * 0.08, height * 0.2);
ctx.fillText('et libertés.', width * 0.08, height * 0.2 + fontSize * 2.8); ctx.fillText(_('et libertés.'), width * 0.08, height * 0.2 + fontSize * 2.8);
ctx.font = fontSize + 'pt ' + font; ctx.font = fontSize + 'pt ' + font;
ctx.fillStyle = fgColor; ctx.fillStyle = fgColor;
ctx.fillText(fillText, width * 0.08, height * 0.2 + fontSize * 1.4); ctx.fillText(fillText, width * 0.08, height * 0.2 + fontSize * 1.4);
...@@ -115,8 +119,8 @@ app.get('/generate.png', function (req, res) { ...@@ -115,8 +119,8 @@ app.get('/generate.png', function (req, res) {
ctx.fillStyle = '#497ed5'; ctx.fillStyle = '#497ed5';
let offset = height * 0.05; let offset = height * 0.05;
if (signature) { if (signature) {
ctx.fillText('Faites comme ', offset, height * 0.9); ctx.fillText(_('Faites comme '), offset, height * 0.9);
offset += ctx.measureText('Faites comme ').width; offset += ctx.measureText(_('Faites comme ')).width;
ctx.font = 'bold 12pt FiraSans'; ctx.font = 'bold 12pt FiraSans';
ctx.fillText(signature, offset, height * 0.9); ctx.fillText(signature, offset, height * 0.9);
offset += ctx.measureText(signature).width; offset += ctx.measureText(signature).width;
...@@ -127,8 +131,8 @@ app.get('/generate.png', function (req, res) { ...@@ -127,8 +131,8 @@ app.get('/generate.png', function (req, res) {
ctx.fillText('S', offset, height * 0.9); ctx.fillText('S', offset, height * 0.9);
offset+= ctx.measureText('S').width; offset+= ctx.measureText('S').width;
} }
ctx.fillText('outenez ', offset, height * 0.9); ctx.fillText(_('outenez '), offset, height * 0.9);
offset += ctx.measureText('outenez ').width; offset += ctx.measureText(_('outenez ')).width;
ctx.font = 'bold 12pt FiraSans'; ctx.font = 'bold 12pt FiraSans';
ctx.fillText('La Quadrature du Net !', offset, height * 0.9); ctx.fillText('La Quadrature du Net !', offset, height * 0.9);
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment