Add auto locale detection and custom locale selection (preference saved to cookie)

package-lock.json

@@ -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",

package.json

@@ -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",

public/assets/css/main.css

@@ -80,6 +80,9 @@ header nav a {
 	text-decoration: none;
 }
 
+.locale-dropdown {
+	margin-left: auto;
+}
 
 /* Misc */
 .purple-circle {

public/assets/js/locale-dropdown-handler.js

@@ -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();
+}

src/routers/home.js

@@ -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]
 	});
 });

src/routers/progress.js

@@ -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
 	});
 });

src/server.js

@@ -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);

views/layouts/main.handlebars

@@ -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>

views/partials/header.handlebars

@@ -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>