mirror of
https://github.com/PretendoNetwork/website.git
synced 2026-03-21 17:24:28 -05:00
Add auto locale detection and custom locale selection (preference saved to cookie)
This commit is contained in:
montylion
parent
1d3f42eb5c
commit
8e0a40079c
33
package-lock.json
generated
33
package-lock.json
generated
|
|
@ -10,8 +10,10 @@
|
|||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"colors": "^1.4.0",
|
||||
"cookie-parser": "^1.4.5",
|
||||
"express": "^4.17.1",
|
||||
"express-handlebars": "^4.0.4",
|
||||
"express-locale": "^2.0.0",
|
||||
"fs-extra": "^9.1.0",
|
||||
"ioredis": "^4.26.0",
|
||||
"morgan": "^1.10.0",
|
||||
|
|
@ -156,6 +158,18 @@
|
|||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/cookie-parser": {
|
||||
"version": "1.4.5",
|
||||
"resolved": "https://registry.npmjs.org/cookie-parser/-/cookie-parser-1.4.5.tgz",
|
||||
"integrity": "sha512-f13bPUj/gG/5mDr+xLmSxxDsB9DQiTIfhJS/sqjrmfAWiAN+x2O4i/XguTL9yDZ+/IFDanJ+5x7hC4CXT9Tdzw==",
|
||||
"dependencies": {
|
||||
"cookie": "0.4.0",
|
||||
"cookie-signature": "1.0.6"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/cookie-signature": {
|
||||
"version": "1.0.6",
|
||||
"resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
|
||||
|
|
@ -287,6 +301,11 @@
|
|||
"node": ">=0.10"
|
||||
}
|
||||
},
|
||||
"node_modules/express-locale": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/express-locale/-/express-locale-2.0.0.tgz",
|
||||
"integrity": "sha512-SUwsgOTV8lplAkgyfKSwKH3ZVSKUrAa+b48acPGXpwWX211WZ/BYWX2WcZO57+xLOqPYb6rSNpWCFnhGrt0moA=="
|
||||
},
|
||||
"node_modules/finalhandler": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz",
|
||||
|
|
@ -1114,6 +1133,15 @@
|
|||
"resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.0.tgz",
|
||||
"integrity": "sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg=="
|
||||
},
|
||||
"cookie-parser": {
|
||||
"version": "1.4.5",
|
||||
"resolved": "https://registry.npmjs.org/cookie-parser/-/cookie-parser-1.4.5.tgz",
|
||||
"integrity": "sha512-f13bPUj/gG/5mDr+xLmSxxDsB9DQiTIfhJS/sqjrmfAWiAN+x2O4i/XguTL9yDZ+/IFDanJ+5x7hC4CXT9Tdzw==",
|
||||
"requires": {
|
||||
"cookie": "0.4.0",
|
||||
"cookie-signature": "1.0.6"
|
||||
}
|
||||
},
|
||||
"cookie-signature": {
|
||||
"version": "1.0.6",
|
||||
"resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
|
||||
|
|
@ -1224,6 +1252,11 @@
|
|||
"promise": "^8.1.0"
|
||||
}
|
||||
},
|
||||
"express-locale": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/express-locale/-/express-locale-2.0.0.tgz",
|
||||
"integrity": "sha512-SUwsgOTV8lplAkgyfKSwKH3ZVSKUrAa+b48acPGXpwWX211WZ/BYWX2WcZO57+xLOqPYb6rSNpWCFnhGrt0moA=="
|
||||
},
|
||||
"finalhandler": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz",
|
||||
|
|
|
|||
|
|
@ -18,8 +18,10 @@
|
|||
"homepage": "https://github.com/PretendoNetwork/website#readme",
|
||||
"dependencies": {
|
||||
"colors": "^1.4.0",
|
||||
"cookie-parser": "^1.4.5",
|
||||
"express": "^4.17.1",
|
||||
"express-handlebars": "^4.0.4",
|
||||
"express-locale": "^2.0.0",
|
||||
"fs-extra": "^9.1.0",
|
||||
"ioredis": "^4.26.0",
|
||||
"morgan": "^1.10.0",
|
||||
|
|
|
|||
|
|
@ -80,6 +80,9 @@ header nav a {
|
|||
text-decoration: none;
|
||||
}
|
||||
|
||||
.locale-dropdown {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
/* Misc */
|
||||
.purple-circle {
|
||||
|
|
|
|||
11
public/assets/js/locale-dropdown-handler.js
Normal file
11
public/assets/js/locale-dropdown-handler.js
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
function setFormDefaultLocale(localeString) {
|
||||
try {
|
||||
document.querySelector(`option[value=${localeString}`).selected = true;
|
||||
} catch {} // If the locale isn't listed
|
||||
}
|
||||
|
||||
function localeFormHandler() {
|
||||
const selectedLocale = document.querySelector("#locale-dropdown").value;
|
||||
document.cookie = `preferredLocale=${selectedLocale};max-age=31536000`;
|
||||
window.location.reload();
|
||||
}
|
||||
|
|
@ -5,12 +5,16 @@ const router = new Router();
|
|||
const { getTrelloCache } = require('../trello');
|
||||
|
||||
router.get('/', async (request, response) => {
|
||||
const tmpLocale = util.getLocale('US', 'en');
|
||||
|
||||
const reqLocale = request.locale
|
||||
const locale = util.getLocale(reqLocale.region, reqLocale.language);
|
||||
|
||||
const cache = await getTrelloCache();
|
||||
|
||||
response.render('home', {
|
||||
layout: 'main',
|
||||
locale: tmpLocale,
|
||||
locale,
|
||||
localeString: reqLocale.toString(),
|
||||
featuredFeatureList: cache.sections[0]
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -5,12 +5,18 @@ const router = new Router();
|
|||
const { getTrelloCache } = require('../trello');
|
||||
|
||||
router.get('/', async (request, response) => {
|
||||
const tmpLocale = util.getLocale('US', 'en');
|
||||
|
||||
const reqLocale = request.locale
|
||||
const locale = util.getLocale(reqLocale.region, reqLocale.language);
|
||||
|
||||
const localeString = reqLocale.toString()
|
||||
|
||||
const cache = await getTrelloCache();
|
||||
|
||||
response.render('progress', {
|
||||
layout: 'main',
|
||||
locale: tmpLocale,
|
||||
locale,
|
||||
localeString,
|
||||
progressLists: cache
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -3,6 +3,8 @@ process.title = 'Pretendo - Website';
|
|||
const express = require('express');
|
||||
const handlebars = require('express-handlebars');
|
||||
const morgan = require('morgan');
|
||||
const expressLocale = require('express-locale');
|
||||
const cookieParser = require('cookie-parser')
|
||||
const logger = require('./logger');
|
||||
const util = require('./util');
|
||||
const config = require('../config.json');
|
||||
|
|
@ -23,6 +25,27 @@ const routers = {
|
|||
progress: require('./routers/progress')
|
||||
};
|
||||
|
||||
app.use(cookieParser())
|
||||
|
||||
// Locale express middleware setup
|
||||
app.use(expressLocale({
|
||||
"priority": ["cookie", "accept-language", "map", "default"],
|
||||
cookie: {name: 'preferredLocale'},
|
||||
// fallbacks for browsers that don't send a region code, but only a language
|
||||
map: {
|
||||
de: 'de-DE',
|
||||
es: 'es-ES',
|
||||
fr: 'fr-FR',
|
||||
it: 'it-IT',
|
||||
ko: 'ko-KR',
|
||||
ru: 'ru-RU',
|
||||
},
|
||||
"default": "en-US"
|
||||
}))
|
||||
|
||||
|
||||
|
||||
|
||||
app.use('/', routers.home);
|
||||
app.use('/faq', routers.faq);
|
||||
app.use('/progress', routers.progress);
|
||||
|
|
|
|||
|
|
@ -40,5 +40,8 @@
|
|||
</div>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.2/chart.min.js"></script>
|
||||
<script src="/assets/js/progress-charts.js"></script>
|
||||
<script src="/assets/js/locale-dropdown-handler.js"></script>
|
||||
<script>setFormDefaultLocale("{{localeString}}")</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -30,4 +30,11 @@
|
|||
<a href="/#credits">{{ locale.nav.credits }}</a>
|
||||
<a href="/progress" class="keep-on-mobile">{{ locale.nav.progress }}</a>
|
||||
</nav>
|
||||
|
||||
<select id="locale-dropdown" name="locale-dropdown" class="locale-dropdown" onchange="localeFormHandler()">
|
||||
<option value="en-US">🇺🇸 English</option>
|
||||
<option value="it-IT">🇮🇹 Italiano</option>
|
||||
<option value="ru-RU">🇷🇺 Pусский</option>
|
||||
</select>
|
||||
|
||||
</header>
|
||||
Loading…
Reference in New Issue
Block a user