Add english localization (fix #11)

    It's based on browser preferred language
    Default language if french
parent 646dfb80
Pipeline #1457 passed with stage
in 37 seconds
{
"Soutenez La Quadrature du Net !": "Support La Quadrature du Net!",
"CHOISIR AU HASARD": "RANDOMIZE",
"ÉTAPE SUIVANTE": "NEXT STEP",
"Choisissez 2 couleurs": "Choose 2 colors",
"Choisissez la couleur de fond": "Choose the background color",
"Choisissez la couleur du texte": "Choose the text color",
"Remplissez le texte à trou": "Fill the blanked text",
"(90 caractères maximum)": "(90 characters max)",
"Choisissez votre police": "Choose your font",
"Choisissez votre icône": "Choose your icon",
"Signez votre création ! (optionnel)": "Sign your creation! (optional)",
"Pas de javascript ? Pas de problème !<br />Ce générateur fonctionne parfaitement sans javascript, seule la prévisualisation du rendu dans le navigateur est désactivée.": "No javascript? No problem! <br /> This generator is working perfectly without javscript. The only missing feature is the preview of the rendered image.",
"Tweet": "Tweet",
"Partager": "Share",
"Enregistrer": "Save",
"Crédits :": "Credits:",
"Les polices utilisées viennnent de": "Used fonts come from",
"par": "by",
"et": "and",
"Site hébergé par": "Website hosted by",
"Code source du site :": "Website source code:"
}
...@@ -7,11 +7,13 @@ const Canvas = require('canvas'); ...@@ -7,11 +7,13 @@ const Canvas = require('canvas');
const Image = Canvas.Image; const Image = Canvas.Image;
const app = express(); const app = express();
const config = require('./config.json'); const config = require('./config.json');
const enLocale = require('./locale/en.json');
app.set('x-powered-by', false); app.set('x-powered-by', false);
app.set('view engine', 'ejs'); app.set('view engine', 'ejs');
app.use(express.static('./static')); app.use(express.static('./static'));
// {name: filepath} // {name: filepath}
let fonts = { let fonts = {
'FiraSans': 'FiraSans-Regular.otf', 'FiraSans': 'FiraSans-Regular.otf',
...@@ -149,11 +151,28 @@ app.get('/generate.png', function (req, res) { ...@@ -149,11 +151,28 @@ app.get('/generate.png', function (req, res) {
}) })
}); });
let i18n = (function(){
let _locale = 'en';
this._ = function(str) {
return _locale == 'en' ? enLocale[str] || str : str;
}
this.setLocale = function(locale) {
_locale = locale;
}
return this;
})();
app.get('/', function(req, res) { app.get('/', function(req, res) {
let locale = req.headers['accept-language'] || '';
i18n.setLocale(locale.indexOf('en') !== -1 && locale.indexOf('en') < locale.indexOf('fr') ? 'en' : 'fr');
res.render('index', {protocol: req.protocol, res.render('index', {protocol: req.protocol,
host: req.headers.host, host: req.headers.host,
imageParams: req._parsedUrl.query, imageParams: req._parsedUrl.query,
subdir: config.subdir}); subdir: config.subdir,
_: i18n._});
}) })
app.listen(process.env.PORT || config.port || 80); app.listen(process.env.PORT || config.port || 80);
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
<meta property="og:type" content="website" /> <meta property="og:type" content="website" />
<link rel="stylesheet" href="./font-awesome.min.css" /> <link rel="stylesheet" href="./font-awesome.min.css" />
<link rel="stylesheet" href="./style.css" /> <link rel="stylesheet" href="./style.css" />
<title>Soutenez La Quadrature du Net !</title> <title><%= _('Soutenez La Quadrature du Net !') %></title>
</head> </head>
<body> <body>
<form action="./generate.png" target="_blank"> <form action="./generate.png" target="_blank">
...@@ -28,10 +28,10 @@ ...@@ -28,10 +28,10 @@
<aside id="inputs"> <aside id="inputs">
<div id="step1"> <div id="step1">
<div class="randomize-button-container"> <div class="randomize-button-container">
<button type="submit" name="target" value="randomize" class="randomize white-button">CHOISIR AU HASARD <span class="fa fa-random"></span></button> <button type="submit" name="target" value="randomize" class="randomize white-button"><%= _('CHOISIR AU HASARD') %> <span class="fa fa-random"></span></button>
</div> </div>
<h2 class="title-small">Choisissez 2 couleurs</h2> <h2 class="title-small"><%= _('Choisissez 2 couleurs') %></h2>
<h2 class="title-big">Choisissez la couleur de fond</h2> <h2 class="title-big"><%= _('Choisissez la couleur de fond') %></h2>
<div class="colorpicker"> <div class="colorpicker">
<input type="radio" name="bg-color" value="#f54358" id="bg-red" checked/> <input type="radio" name="bg-color" value="#f54358" id="bg-red" checked/>
<label for="bg-red"> <label for="bg-red">
...@@ -62,7 +62,7 @@ ...@@ -62,7 +62,7 @@
<span style="background-color: #000"></span> <span style="background-color: #000"></span>
</label> </label>
</div> </div>
<h2 class="title-big">Choisissez la couleur du texte</h2> <h2 class="title-big"><%= _('Choisissez la couleur du texte') %></h2>
<div class="colorpicker"> <div class="colorpicker">
<input type="radio" name="fg-color" value="#f54358" id="fg-red" /> <input type="radio" name="fg-color" value="#f54358" id="fg-red" />
<label for="fg-red"> <label for="fg-red">
...@@ -98,25 +98,25 @@ ...@@ -98,25 +98,25 @@
</label> </label>
</div> </div>
<div class="navButtons"> <div class="navButtons">
<a href="#step2" class="blue-button">ÉTAPE SUIVANTE &rsaquo;</a> <a href="#step2" class="blue-button"><%= _('ÉTAPE SUIVANTE') %> &rsaquo;</a>
</div> </div>
</div> </div>
<div id="step2"> <div id="step2">
<div class="randomize-button-container"> <div class="randomize-button-container">
<button type="submit" name="target" value="randomize" class="randomize white-button">CHOISIR AU HASARD <span class="fa fa-random"></span></button> <button type="submit" name="target" value="randomize" class="randomize white-button"><%= _('CHOISIR AU HASARD') %> <span class="fa fa-random"></span></button>
</div> </div>
<h2>Remplissez le texte à trou</h2> <h2><%= _('Remplissez le texte à trou') %></h2>
<textarea placeholder="(90 caractères maximum)" rows="8" id="step2value" name="text" maxlength="90"></textarea> <textarea placeholder="<%= _('(90 caractères maximum)') %>" rows="8" id="step2value" name="text" maxlength="90"></textarea>
<div class="navButtons"> <div class="navButtons">
<a href="#step1" class="white-button">&lsaquo;</a> <a href="#step1" class="white-button">&lsaquo;</a>
<a href="#step3" class="blue-button">ÉTAPE SUIVANTE &rsaquo;</a> <a href="#step3" class="blue-button"><%= _('ÉTAPE SUIVANTE') %> &rsaquo;</a>
</div> </div>
</div> </div>
<div id="step3"> <div id="step3">
<div class="randomize-button-container"> <div class="randomize-button-container">
<button type="submit" name="target" value="randomize" class="randomize white-button">CHOISIR AU HASARD <span class="fa fa-random"></span></button> <button type="submit" name="target" value="randomize" class="randomize white-button"><%= _('CHOISIR AU HASARD') %> <span class="fa fa-random"></span></button>
</div> </div>
<h2>Choisissez votre police</h2> <h2><%= _('Choisissez votre police') %></h2>
<div class="fontpicker"> <div class="fontpicker">
<input type="radio" id="radio-font-1" name="font" value="bilbo-inc" /><label for="radio-font-1" style="font-family: bilbo-inc">Bilbo inc</label> <input type="radio" id="radio-font-1" name="font" value="bilbo-inc" /><label for="radio-font-1" style="font-family: bilbo-inc">Bilbo inc</label>
<input type="radio" id="radio-font-2" name="font" value="bluu-next" checked/><label for="radio-font-2" style="font-family: bluu-next">Bluu Next</label> <input type="radio" id="radio-font-2" name="font" value="bluu-next" checked/><label for="radio-font-2" style="font-family: bluu-next">Bluu Next</label>
...@@ -131,14 +131,14 @@ ...@@ -131,14 +131,14 @@
</div> </div>
<div class="navButtons"> <div class="navButtons">
<a href="#step2" class="white-button">&lsaquo;</a> <a href="#step2" class="white-button">&lsaquo;</a>
<a href="#step4" class="blue-button">ÉTAPE SUIVANTE &rsaquo;</a> <a href="#step4" class="blue-button"><%= _('ÉTAPE SUIVANTE') %> &rsaquo;</a>
</div> </div>
</div> </div>
<div id="step4"> <div id="step4">
<div class="randomize-button-container"> <div class="randomize-button-container">
<button type="submit" name="target" value="randomize" class="randomize white-button">CHOISIR AU HASARD <span class="fa fa-random"></span></button> <button type="submit" name="target" value="randomize" class="randomize white-button"><%= _('CHOISIR AU HASARD') %> <span class="fa fa-random"></span></button>
</div> </div>
<h2>Choisissez votre icône</h2> <h2><%= _('Choisissez votre icône') %></h2>
<div class="iconpicker"> <div class="iconpicker">
<input type="radio" id="radio-icon-1" name="icon" value="1" checked/> <input type="radio" id="radio-icon-1" name="icon" value="1" checked/>
<label for="radio-icon-1"></label> <label for="radio-icon-1"></label>
...@@ -215,34 +215,34 @@ ...@@ -215,34 +215,34 @@
</div> </div>
<div class="navButtons"> <div class="navButtons">
<a href="#step3" class="white-button">&lsaquo;</a> <a href="#step3" class="white-button">&lsaquo;</a>
<a href="#step5" class="blue-button">ÉTAPE SUIVANTE &rsaquo;</a> <a href="#step5" class="blue-button"><%= _('ÉTAPE SUIVANTE') %> &rsaquo;</a>
</div> </div>
</div> </div>
<div id="step5"> <div id="step5">
<div class="randomize-button-container"> <div class="randomize-button-container">
<button type="submit" name="target" value="randomize" class="randomize white-button">CHOISIR AU HASARD <span class="fa fa-random"></span></button> <button type="submit" name="target" value="randomize" class="randomize white-button"><%= _('CHOISIR AU HASARD') %> <span class="fa fa-random"></span></button>
</div> </div>
<h2>Signez votre création ! (optionnel)</h2> <h2><%= _('Signez votre création ! (optionnel)') %></h2>
<input type="text" id="signature" name="signature" /> <input type="text" id="signature" name="signature" />
<div class="navButtons"> <div class="navButtons">
<a href="#step4" class="white-button">&lsaquo;</a> <a href="#step4" class="white-button">&lsaquo;</a>
<button type="submit" name="target" value="download" formtarget="_self" class="blue-button">GÉNÉRER</button> <button type="submit" name="target" value="download" formtarget="_self" class="blue-button"><%= _('GÉNÉRER') %></button>
</div> </div>
</div> </div>
</aside> </aside>
<main> <main>
<div> <div>
<noscript>Pas de javascript ? Pas de problème !<br />Ce générateur fonctionne parfaitement sans javascript, seule la prévisualisation du rendu dans le navigateur est désactivée.</noscript> <noscript><%= _('Pas de javascript ? Pas de problème !<br />Ce générateur fonctionne parfaitement sans javascript, seule la prévisualisation du rendu dans le navigateur est désactivée.') %></noscript>
<canvas id="output" width="600" height="413"></canvas> <canvas id="output" width="600" height="413"></canvas>
<button type="submit" name="target" value="randomize" class="randomize white-button"><span class="fa fa-random"></span></button> <button type="submit" name="target" value="randomize" class="randomize white-button"><span class="fa fa-random"></span></button>
<button type="submit" id="tweet-button" name="target" value="twitter" class="blue-button"><span class="text">Tweet </span><span class="fa fa-twitter"></span></button> <button type="submit" id="tweet-button" name="target" value="twitter" class="blue-button"><span class="text"><%= _('Tweet') %> </span><span class="fa fa-twitter"></span></button>
<button type="submit" id="fb-button" name="target" value="facebook" class="blue-button"><span class="text">Partager </span><span class="fa fa-facebook-square"></span></button> <button type="submit" id="fb-button" name="target" value="facebook" class="blue-button"><span class="text"><%= _('Partager') %> </span><span class="fa fa-facebook-square"></span></button>
<button type="submit" name="target" value="download" formtarget="_self" id="save-image" class="white-button"><span class="text">Enregistrer </span><span class="fa fa-save"></span></button> <button type="submit" name="target" value="download" formtarget="_self" id="save-image" class="white-button"><span class="text"><%= _('Enregistrer') %> </span><span class="fa fa-save"></span></button>
</div> </div>
<div id="credits"> <div id="credits">
<p><strong>Site hébergé par <a href="https://laquadrature.net">La Quadrature du Net</a></strong></p> <p><strong><%= _('Site hébergé par') %> <a href="https://laquadrature.net">La Quadrature du Net</a></strong></p>
<p><strong>Crédits :</strong> Les polices utilisées viennnent de <strong><a href="https://www.velvetyne.fr/">Velvetyne Type Foundry</a></strong>. Bluu par Jean Baptiste Morizot, Bilbo Inc par Hélène Marian Srodogora, Boeticher par Charles Paille, Combat par Martin Desinde, Gulax par Morgan Gilbert, Lineal par Frank Adebiaye, Resistance par Collective, Savate par Wech, Solide Mirage par Jérémy Landes-Nones, Steps mono par Jean Baptiste Morizot, Terminal par Rapaël Bastide et Jérémy Landes-Nones.</p> <p><strong><%= _('Crédits :') %></strong> <%= _('Les polices utilisées viennnent de') %> <strong><a href="https://www.velvetyne.fr/">Velvetyne Type Foundry</a></strong>. Bluu <%= _('par') %> Jean Baptiste Morizot, Bilbo Inc <%= _('par') %> Hélène Marian Srodogora, Boeticher <%= _('par') %> Charles Paille, Combat <%= _('par') %> Martin Desinde, Gulax <%= _('par') %> Morgan Gilbert, Lineal <%= _('par') %> Frank Adebiaye, Resistance <%= _('par') %> Collective, Savate <%= _('par') %> Wech, Solide Mirage <%= _('par') %> Jérémy Landes-Nones, Steps mono <%= _('par') %> Jean Baptiste Morizot, Terminal <%= _('par') %> Rapaël Bastide <%= _('et') %> Jérémy Landes-Nones.</p>
<p><strong>Code source du site :</strong><br /> <p><strong><%= _('Code source du site :') %></strong><br />
<a href="https://git.laquadrature.net/lqdn-interne/generateur-slogans/">https://git.laquadrature.net</a> <a href="https://git.laquadrature.net/lqdn-interne/generateur-slogans/">https://git.laquadrature.net</a>
</p> </p>
</div> </div>
......
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