Language redirector

_includes/header.html

@@ -19,6 +19,7 @@
     <script src="{{ site.baseurl }}/assets/js/libs/jquery.js"></script>
     <script src="{{ site.baseurl }}/assets/js/libs/jquery.dropdown.js"></script>
     <script src="{{ site.baseurl }}/assets/js/scripts.js"></script>
+    <script src="{{ site.baseurl }}/assets/js/langRedirector.js" defer async></script>
 </head>
 {% if page.lang == 'ar' or page.lang == 'fa' %}
     {% assign rtl = true %}

_pages/cat.html → _pages/ca.html

@@ -1,4 +1,4 @@
 ---
 layout: default
-lang: cat
+lang: ca
 ---

_pages/pt_br.html → _pages/pt-BR.html

@@ -1,4 +1,4 @@
 ---
 layout: default
-lang: pt_br
+lang: pt-BR
 ---

_pages/zh-cn.html → _pages/zh-CN.html

@@ -1,4 +1,4 @@
 ---
 layout: default
-lang: zh-cn
+lang: zh-CN
 ---

_pages/zh-tw.html → _pages/zh-TW.html

@@ -1,4 +1,4 @@
 ---
 layout: default
-lang: zh-tw
+lang: zh-TW
 ---

assets/css/style.css

@@ -41,7 +41,7 @@ nav {
 }
 
 .dropdown .ar a,    .ar a    { background-image: url(../icons/flags/ar16.png); }
-.dropdown .cat a,   .cat a   { background-image: url(../icons/flags/cat16.png); }
+.dropdown .ca a,    .ca a    { background-image: url(../icons/flags/ca16.png); }
 .dropdown .de a,    .de a    { background-image: url(../icons/flags/de16.png); }
 .dropdown .en a,    .en a    { background-image: url(../icons/flags/en16.png); }
 .dropdown .es a,    .es a    { background-image: url(../icons/flags/es16.png); }
@@ -52,19 +52,19 @@ nav {
 .dropdown .it a,    .it a    { background-image: url(../icons/flags/it16.png); }
 .dropdown .nl a,    .nl a    { background-image: url(../icons/flags/nl16.png); }
 .dropdown .pl a,    .pl a    { background-image: url(../icons/flags/pl16.png); }
-.dropdown .pt_br a, .pt_br a { background-image: url(../icons/flags/pt_br16.png); }
+.dropdown .pt-BR a, .pt-BR a { background-image: url(../icons/flags/pt-BR16.png); }
 .dropdown .ro a,    .ro a    { background-image: url(../icons/flags/ro16.png); }
 .dropdown .ru a,    .ru a    { background-image: url(../icons/flags/ru16.png); }
 .dropdown .sk a,    .sk a    { background-image: url(../icons/flags/sk16.png); }
 .dropdown .sr a,    .sr a    { background-image: url(../icons/flags/sr16.png); }
 .dropdown .th a,    .th a    { background-image: url(../icons/flags/th16.png); }
 .dropdown .tr a,    .tr a    { background-image: url(../icons/flags/tr16.png); }
 .dropdown .vi a,    .vi a    { background-image: url(../icons/flags/vi16.png); }
-.dropdown .zh-cn a, .zh-cn a { background-image: url(../icons/flags/cn16.png); }
-.dropdown .zh-tw a, .zh-tw a { background-image: url(../icons/flags/tw16.png); }
+.dropdown .zh-CN a, .zh-CN a { background-image: url(../icons/flags/zh-CN16.png); }
+.dropdown .zh-TW a, .zh-TW a { background-image: url(../icons/flags/zh-TW16.png); }
 
 #ar    { background-image: url(../icons/flags/ar24.png); }
-#cat   { background-image: url(../icons/flags/cat24.png); }
+#ca    { background-image: url(../icons/flags/ca24.png); }
 #de    { background-image: url(../icons/flags/de24.png); }
 #en    { background-image: url(../icons/flags/en24.png); }
 #es    { background-image: url(../icons/flags/es24.png); }
@@ -75,16 +75,16 @@ nav {
 #it    { background-image: url(../icons/flags/it24.png); }
 #nl    { background-image: url(../icons/flags/nl24.png); }
 #pl    { background-image: url(../icons/flags/pl24.png); }
-#pt_br { background-image: url(../icons/flags/pt_br24.png); }
+#pt-BR { background-image: url(../icons/flags/pt-BR24.png); }
 #ro    { background-image: url(../icons/flags/ro24.png); }
 #ru    { background-image: url(../icons/flags/ru24.png); }
 #sk    { background-image: url(../icons/flags/sk24.png); }
 #sr    { background-image: url(../icons/flags/sr24.png); }
 #th    { background-image: url(../icons/flags/th24.png); }
 #tr    { background-image: url(../icons/flags/tr24.png); }
 #vi    { background-image: url(../icons/flags/vi24.png); }
-#zh-cn { background-image: url(../icons/flags/cn24.png); }
-#zh-tw { background-image: url(../icons/flags/tw24.png); }
+#zh-CN { background-image: url(../icons/flags/zh-CN24.png); }
+#zh-TW { background-image: url(../icons/flags/zh-TW24.png); }
 
 nav a {
     color: black;

assets/js/langRedirector.js

@@ -0,0 +1,36 @@
+// Wrap all this to not pollute global namespace
+{
+    // Generate an array of languages from page
+    const JDM_LANGS = [...document.querySelectorAll('#language-dropdown > ul > li')].map(el => el.classList[0]);
+
+
+    function redirectTo(lang) {
+        const link = document.querySelector(`#language-dropdown > ul > li.${lang} > a`);
+        if (link)
+            link.click();
+    }
+
+
+    function guessedTranslation() {
+        const langs = navigator.languages;
+        for (let i=0; i < langs.length; i++) {
+            let lang = langs[i];
+
+            if (JDM_LANGS.includes(lang))
+                return lang;
+
+            // Test 'ru' in addition to 'ru-RU'
+            lang = lang.slice(0,2);
+            if (JDM_LANGS.includes(lang))
+                return lang;
+        }
+        return null;
+    }
+
+
+    // Do redirection only one time
+    if (!localStorage.getItem('langRedirectionHasDone')) {
+        localStorage.setItem('langRedirectionHasDone', true);
+        redirectTo(guessedTranslation());
+    }
+}