Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Language redirector #503

Closed
wants to merge 8 commits into from
Closed

Language redirector #503

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
8aaca25
Add simple redirector
AHOHNMYC May 14, 2020
84d0f77
Fix after renaming and including new redirector script
AHOHNMYC May 14, 2020
222b4e8
Fix trailing space
AHOHNMYC May 14, 2020
1fcc422
Fix English in comment
AHOHNMYC May 15, 2020
c6f8b59
Rewrite redirector to simplify it
AHOHNMYC May 15, 2020
4106fa7
Replace tab with space
AHOHNMYC May 15, 2020
49c47e9
Rewrite language-guessing heuristics
AHOHNMYC May 16, 2020
b9fae2e
Do all the tests firstly on first languages
AHOHNMYC May 16, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
494 changes: 247 additions & 247 deletions _data/sites.json
View file
Open in desktop

Large diffs are not rendered by default.

0 _data/trans/cat.json → _data/trans/ca.json
View file
Open in desktop
File renamed without changes.
0 _data/trans/pt_br.json → _data/trans/pt-BR.json
View file
Open in desktop
File renamed without changes.
0 _data/trans/zh-cn.json → _data/trans/zh-CN.json
View file
Open in desktop
File renamed without changes.
0 _data/trans/zh-tw.json → _data/trans/zh-TW.json
View file
Open in desktop
File renamed without changes.
1 change: 1 addition & 0 deletions _includes/header.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand Down
2 changes: 1 addition & 1 deletion _pages/cat.html → _pages/ca.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
---
layout: default
lang: cat
lang: ca
---
2 changes: 1 addition & 1 deletion _pages/pt_br.html → _pages/pt-BR.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
---
layout: default
lang: pt_br
lang: pt-BR
---
2 changes: 1 addition & 1 deletion _pages/zh-cn.html → _pages/zh-CN.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
---
layout: default
lang: zh-cn
lang: zh-CN
---
2 changes: 1 addition & 1 deletion _pages/zh-tw.html → _pages/zh-TW.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
---
layout: default
lang: zh-tw
lang: zh-TW
---
16 changes: 8 additions & 8 deletions assets/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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); }
Expand All @@ -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); }
Expand All @@ -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;
Expand Down
0 assets/icons/flags/cat16.png → assets/icons/flags/ca16.png
View file
Open in desktop
File renamed without changes
0 assets/icons/flags/cat24.png → assets/icons/flags/ca24.png
View file
Open in desktop
File renamed without changes
0 assets/icons/flags/pt_br16.png → assets/icons/flags/pt-BR16.png
View file
Open in desktop
File renamed without changes
0 assets/icons/flags/pt_br24.png → assets/icons/flags/pt-BR24.png
View file
Open in desktop
File renamed without changes
0 assets/icons/flags/cn16.png → assets/icons/flags/zh-CN16.png
View file
Open in desktop
File renamed without changes
0 assets/icons/flags/cn24.png → assets/icons/flags/zh-CN24.png
View file
Open in desktop
File renamed without changes
0 assets/icons/flags/tw16.png → assets/icons/flags/zh-TW16.png
View file
Open in desktop
File renamed without changes
0 assets/icons/flags/tw24.png → assets/icons/flags/zh-TW24.png
View file
Open in desktop
File renamed without changes
49 changes: 49 additions & 0 deletions assets/js/langRedirector.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
// 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]);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Define this as a global constant via <script> block in Jekyll instead of parsing languages out of a query selector of language dropdown links.



function redirectTo(lang) {
const link = document.querySelector(`#language-dropdown > ul > li.${lang} > a`);
if (link)
link.click();
Comment on lines +8 to +10
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since our language URL is very simple, I'd rather set window.location to perform this redirection.

Suggested change
const link = document.querySelector(`#language-dropdown > ul > li.${lang} > a`);
if (link)
link.click();
if (lang) {
window.location = `${(new URL(window.location)).origin}/${lang}`;
}

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not as simple. At least, we have en that points to /:

Suggested change
const link = document.querySelector(`#language-dropdown > ul > li.${lang} > a`);
if (link)
link.click();
if (lang) {
let path = lang;
if (lang === 'en')
path = '';
location = location.origin+'/'+path;
}

}


function guessedTranslation() {
const langs = navigator.languages;

for (let i=0; i < langs.length; i++) {
let lang = langs[i];

// user has: 'pt-BR'
// we have: 'pt-BR'
if (JDM_LANGS.includes(lang))
return lang;

// user has: 'ru-RU'
// we have: 'ru'
lang = lang.slice(0,2);
if (JDM_LANGS.includes(lang))
return lang;

// user has: 'pt-AO' or 'pt'
// we have: 'pt-BR'
for (let j=0; j < JDM_LANGS.length; j++) {
let jdm_lang = JDM_LANGS[j];
if (jdm_lang.slice(0,2) === lang)
return jdm_lang;
}
}

return null;
}
Comment on lines +14 to +41
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
function guessedTranslation() {
const langs = navigator.languages;
for (let i=0; i < langs.length; i++) {
let lang = langs[i];
// user has: 'pt-BR'
// we have: 'pt-BR'
if (JDM_LANGS.includes(lang))
return lang;
// user has: 'ru-RU'
// we have: 'ru'
lang = lang.slice(0,2);
if (JDM_LANGS.includes(lang))
return lang;
// user has: 'pt-AO' or 'pt'
// we have: 'pt-BR'
for (let j=0; j < JDM_LANGS.length; j++) {
let jdm_lang = JDM_LANGS[j];
if (jdm_lang.slice(0,2) === lang)
return jdm_lang;
}
}
return null;
}
function exactLangMatch(lang) {
// user has: 'pt-BR'
// we have: 'pt-BR'
return (JDM_LANGS.includes(lang) ? lang : null);
}
function partialLangMatch(lang) {
// user has: 'ru-RU'
// we have: 'ru'
lang = lang.slice(0,2);
return exactLangMatch(lang);
}
function roughLangMatch(lang) {
// user has: 'pt-AO' or 'pt'
// we have: 'pt-BR'
for (let j=0; j < JDM_LANGS.length; j++) {
let jdm_lang = JDM_LANGS[j];
if (jdm_lang.slice(0,2) === lang)
return jdm_lang;
}
return null;
}
function guessedTranslation() {
const langs = navigator.languages;
for (let i=0; i < langs.length; i++) {
let lang = langs[i];
let exactLang = exactLangMatch(lang);
if (exactLang !== null)
return exactLang;
let partialLang = partialLangMatch(lang);
if (partialLang !== null)
return partialLang;
let roughLang = roughLangMatch(lang.slice(0,2));
if (roughLang !== null)
return roughLang;
}
return null;
}

I'd suggest extracting each of the matches into a function. For the second one we can actually reuse the first and it moves the comments there. I don't particularly like all the if !== null, but I think overall it's clearer. Let me know what you guys think.



// Do redirection only one time
if (!localStorage.getItem('langRedirectionHasDone')) {
localStorage.setItem('langRedirectionHasDone', true);
redirectTo(guessedTranslation());
Comment on lines +46 to +47
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
localStorage.setItem('langRedirectionHasDone', true);
redirectTo(guessedTranslation());
redirectTo(guessedTranslation());
localStorage.setItem('langRedirectionHasDone', true);

I guess I'd swap the order here, it seems more legit hahah

}
}