Skip to content

Commit ffc4bf3

Browse files
alexandrtovmachSEWeiTung
alexandrtovmach
authored and
SEWeiTung
committed
Language picker implemented (#2294)
Implemented simple language picker #806, to make better UX on the website How it looks you can check here: https://www.loom.com/share/9022dba48c1d42a486df212e4acabbdf
1 parent e913adb commit ffc4bf3

File tree

20 files changed

+136
-6
lines changed

20 files changed

+136
-6
lines changed

‎build.js

+19-5
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,15 @@ function i18nJSON (lang) {
5353
return defaultsDeep({}, templateJSON, defaultJSON)
5454
}
5555

56+
// This function imports language file for each given locale in array 'localesList'
57+
// and based on it generating locales data, which includes full language name, english language name, locale and link
58+
function generateLocalesData (localesList) {
59+
return localesList.map(localeEl => {
60+
const { language, languageEnglishVersion, locale, url } = require(`./locale/${localeEl}/site.json`)
61+
return { language, locale, url, languageEnglishVersion }
62+
})
63+
}
64+
5665
// This is the function where the actual magic happens. This contains the main
5766
// Metalsmith build cycle used for building a locale subsite, such as the
5867
// english one.
@@ -63,7 +72,11 @@ function buildLocale (source, locale, opts) {
6372
const metalsmith = Metalsmith(__dirname)
6473
metalsmith
6574
// Sets global metadata imported from the locale's respective site.json.
66-
.metadata({ site: i18nJSON(locale), project: source.project })
75+
.metadata({
76+
site: i18nJSON(locale),
77+
project: source.project,
78+
locales: opts.localesData
79+
})
6780
// Sets the build source as the locale folder.
6881
.source(path.join(__dirname, 'locale', locale))
6982
.use(withPreserveLocale(opts && opts.preserveLocale))
@@ -307,10 +320,11 @@ function fullBuild (opts) {
307320

308321
// Executes the build cycle for every locale.
309322
fs.readdir(path.join(__dirname, 'locale'), (e, locales) => {
310-
locales.filter(file => junk.not(file) && (selectedLocales ? selectedLocales.includes(file) : true))
311-
.forEach((locale) => {
312-
buildLocale(source, locale, { preserveLocale })
313-
})
323+
const filteredLocales = locales.filter(file => junk.not(file) && (selectedLocales ? selectedLocales.includes(file) : true))
324+
const localesData = generateLocalesData(filteredLocales)
325+
filteredLocales.forEach((locale) => {
326+
buildLocale(source, locale, { preserveLocale, localesData })
327+
})
314328
})
315329
})
316330
}

‎layouts/css/page-modules/_header.styl

+50
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
header
22
background-color $node-gray
33
text-align center
4+
position relative
45

56
> .container
67
overflow visible
@@ -23,6 +24,46 @@ header
2324
a:hover
2425
background-color transparent
2526
text-decoration underline
27+
28+
#lang-picker-toggler
29+
position absolute
30+
right 0
31+
bottom 0
32+
height 20%
33+
fill $light-gray2
34+
cursor pointer
35+
padding 12px
36+
37+
.lang-picker
38+
position absolute
39+
right 0
40+
top 100%
41+
min-height 100%
42+
max-height 200%
43+
overflow auto
44+
background $node-gray
45+
46+
&.hidden
47+
display none
48+
49+
a
50+
color $light-gray2
51+
52+
> ul
53+
padding 0
54+
margin 0
55+
56+
> li
57+
padding 0.5em 1em
58+
text-transform uppercase
59+
font-size 14px
60+
color $light-gray2 !important
61+
cursor pointer
62+
list-style none
63+
64+
&:hover
65+
background-color $node-green
66+
text-decoration underline
2667

2768
// Special format for external 'Foundation' link in main navigation
2869
.nav-foundation
@@ -78,6 +119,15 @@ header
78119
a:active
79120
padding 0
80121

122+
#lang-picker-toggler
123+
position relative
124+
height 1.5em
125+
padding 0
126+
127+
.lang-picker
128+
> ul > li
129+
padding 0.5em 0
130+
81131
#logo
82132
display block
83133
border none

‎layouts/partials/header.hbs

+34
Original file line numberDiff line numberDiff line change
@@ -23,5 +23,39 @@
2323
</ul>
2424
</nav>
2525

26+
<svg id="lang-picker-toggler" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
27+
<path d="M217.982 201.586h-64.499c-5.537 0-10.026 4.489-10.026 10.026s4.489 10.026 10.026 10.026h53.547c-4.72 25.263-26.935 44.446-53.547 44.446-30.037 0-54.473-24.436-54.473-54.473s24.436-54.473 54.473-54.473c14.55 0 28.229 5.667 38.518 15.955 3.916 3.916 10.264 3.916 14.178 0 3.916-3.916 3.916-10.264 0-14.178-14.077-14.077-32.791-21.829-52.697-21.829-41.094 0-74.525 33.431-74.525 74.525 0 41.094 33.431 74.525 74.525 74.525s74.525-33.431 74.525-74.525c.001-5.536-4.488-10.025-10.025-10.025z"/>
28+
<path d="M470.331 92.24H269.728l-26.935-81.355a10.025 10.025 0 0 0-9.518-6.875H41.669C18.693 4.01 0 22.703 0 45.679v332.412c0 22.976 18.693 41.669 41.669 41.669h203.145l27.073 81.369a10.026 10.026 0 0 0 9.513 6.861h188.932c22.976 0 41.669-18.693 41.669-41.669V133.909c-.001-22.976-18.694-41.669-41.67-41.669zM41.669 399.708c-11.919 0-21.616-9.697-21.616-21.616V45.679c0-11.919 9.697-21.616 21.616-21.616h184.364l70.691 213.516a.366.366 0 0 0 .015.043l53.664 162.086H41.669zm295.78-116.433c.805 1.11 10.824 14.877 26.355 34.066-4.377 5.756-9.015 11.474-13.91 17.036l-29.712-89.74h87.441c-6.196 13.031-16.938 33.813-31.692 55.736-13.553-16.921-22.069-28.622-22.249-28.87-3.251-4.482-9.519-5.481-14.002-2.23-4.482 3.25-5.48 9.518-2.231 14.002zM265.946 419.76h75.162l-55.503 59.084-19.659-59.084zm226.002 46.561c0 11.919-9.697 21.616-21.616 21.616H304.575l67.015-71.339-.004-.003c.293-.312.571-.64.823-.991a10.025 10.025 0 0 0 1.39-9.022l-16.688-50.402c7.073-7.406 13.68-15.143 19.805-22.965 13.299 15.772 29.037 33.446 45.778 50.187 1.957 1.957 4.524 2.937 7.089 2.937s5.132-.979 7.089-2.937c3.916-3.916 3.916-10.264 0-14.178-17.461-17.461-34.013-36.244-47.687-52.632 21.251-30.503 35.033-59.504 40.535-71.954h21.454c5.537 0 10.026-4.489 10.026-10.026s-4.489-10.026-10.026-10.026h-66.173v-18.047c0-5.537-4.489-10.026-10.026-10.026s-10.026 4.489-10.026 10.026v18.046h-51.406l-37.178-112.292H470.33c11.919 0 21.616 9.697 21.616 21.616v332.412z"/>
29+
</svg>
30+
31+
<div class="lang-picker hidden">
32+
<ul>
33+
{{#each locales}}
34+
<li
35+
data-lang="{{locale}}"
36+
title="{{languageEnglishVersion}}"
37+
>
38+
{{language}}
39+
</li>
40+
{{/each}}
41+
</ul>
42+
</div>
43+
2644
</div>
2745
</header>
46+
<script type="text/javascript">
47+
const langPickerElement = document.querySelector('.lang-picker')
48+
const langElements = langPickerElement.querySelectorAll('li')
49+
const langPickerTogglerElement = document.querySelector('#lang-picker-toggler')
50+
51+
langElements.forEach(el =>
52+
el.addEventListener('click', (e) => {
53+
const newLocale = (e.target && e.target.dataset && e.target.dataset.lang) || "en";
54+
window.location.replace(window.location.pathname.replace(/\/[a-zA-Z-]+/, `/${newLocale}`))
55+
})
56+
)
57+
58+
langPickerTogglerElement.addEventListener('click', () => {
59+
langPickerElement.classList.toggle('hidden')
60+
})
61+
</script>

‎locale/ar/site.json

+2
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@
33
"author": "Node.js Foundation",
44
"url": "https://nodejs.org/ar/",
55
"locale": "ar",
6+
"language": "العربية",
7+
"languageEnglishVersion": "Arabic",
68
"rtl": true,
79
"scrollToTop": "إنتقل إلى الأعلى",
810
"reportNodeIssue": "Node.js أبلغ عن عطل في",

‎locale/ca/site.json

+2
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@
33
"author": "Fundació Node.js",
44
"url": "https://nodejs.org/ca/",
55
"locale": "ca",
6+
"language": "Catalan",
7+
"languageEnglishVersion": "Catalan",
68
"scrollToTop": "Torna al començament",
79
"reportNodeIssue": "Informe d'un problema de Node.js",
810
"reportWebsiteIssue": "Informe d'un problema al lloc web",

‎locale/de/site.json

+2
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@
33
"author": "Node.js Foundation",
44
"url": "https://nodejs.org/de/",
55
"locale": "de",
6+
"language": "Deutsch",
7+
"languageEnglishVersion": "German",
68
"scrollToTop": "Zum Seitenanfang",
79
"reportNodeIssue": "Node.js-Fehler melden",
810
"reportWebsiteIssue": "Webseitenfehler melden",

‎locale/en/site.json

+2
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@
33
"author": "Node.js Foundation",
44
"url": "https://nodejs.org/en/",
55
"locale": "en",
6+
"language": "English",
7+
"languageEnglishVersion": "English",
68
"scrollToTop": "Scroll to top",
79
"reportNodeIssue": "Report Node.js issue",
810
"reportWebsiteIssue": "Report website issue",

‎locale/es/site.json

+2
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44
"author": "Fundación de Node.js",
55
"url": "https://nodejs.org/es/",
66
"locale": "es",
7+
"language": "Español",
8+
"languageEnglishVersion": "Spanish",
79
"scrollToTop": "Vuelve al comienzo",
810
"reportNodeIssue": "Informe de un problema con Node.js",
911
"reportWebsiteIssue": "Informe de un problema con el sitio",

‎locale/fa/site.json

+2
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@
33
"author": "Node.js بنیاد",
44
"url": "https://nodejs.org/fa/",
55
"locale": "fa",
6+
"language": "زبان فارسی",
7+
"languageEnglishVersion": "Persian",
68
"rtl": true,
79
"scrollToTop": "رفتن به بالا",
810
"reportNodeIssue": "را گزارش کنید Node.js مشکلی در",

‎locale/fr/site.json

+2
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@
33
"author": "Node.js Foundation",
44
"url": "https://nodejs.org/fr/",
55
"locale": "fr",
6+
"language": "Français",
7+
"languageEnglishVersion": "French",
68
"scrollToTop": "Faire défiler en haut",
79
"reportNodeIssue": "Rapporter un problème Node.js",
810
"reportWebsiteIssue": "Rapporter un problème sur le site web",

‎locale/gl/site.json

+2
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@
33
"author": "Fundación de Node.js",
44
"url": "https://nodejs.org/gl/",
55
"locale": "gl",
6+
"language": "Galego",
7+
"languageEnglishVersion": "Galician",
68
"scrollToTop": "Volta ao principio",
79
"reportNodeIssue": "Informar dun problema con Node.js",
810
"reportWebsiteIssue": "Informar dun problema co sitio",

‎locale/it/site.json

+2
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@
33
"author": "Node.js Foundation",
44
"url": "https://nodejs.org/en/",
55
"locale": "it",
6+
"language": "Italiano",
7+
"languageEnglishVersion": "Italian",
68
"scrollToTop": "Portami all'inizio",
79
"reportNodeIssue": "Segnala un problema di Node.js",
810
"reportWebsiteIssue": "Segnala un problema del sito",

‎locale/ja/site.json

+2
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44
"author": "Node.js 財団",
55
"url": "https://nodejs.org/ja/",
66
"locale": "ja",
7+
"language": "日本語",
8+
"languageEnglishVersion": "Japanese",
79
"scrollToTop": "上部へスクロールする",
810
"reportNodeIssue": "Node.js の不具合を報告",
911
"reportWebsiteIssue": "サイトの不具合を報告",

‎locale/ko/site.json

+2
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@
33
"author": "Node.js 재단",
44
"url": "https://nodejs.org/ko/",
55
"locale": "ko",
6+
"language": "한국어",
7+
"languageEnglishVersion": "Korean",
68
"scrollToTop": "맨 위로",
79
"reportNodeIssue": "Node.js 이슈 보고",
810
"reportWebsiteIssue": "웹사이트 이슈 보고",

‎locale/pt-br/site.json

+2
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@
33
"author": "Node.js Foundation",
44
"url": "https://nodejs.org/pt-br/",
55
"locale": "pt-br",
6+
"language": "Português do Brasil",
7+
"languageEnglishVersion": "Portuguese, Brazilian",
68
"scrollToTop": "Retorne ao começo",
79
"reportNodeIssue": "Reporte um problema do Node.js",
810
"reportWebsiteIssue": "Reporte um problema do Website",

‎locale/ru/site.json

+2
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@
33
"author": "Node.js Foundation",
44
"url": "https://nodejs.org/ru/",
55
"locale": "ru",
6+
"language": "Русский",
7+
"languageEnglishVersion": "Russian",
68
"scrollToTop": "Вверх",
79
"reportNodeIssue": "Проблемы с Node.js",
810
"reportWebsiteIssue": "Проблемы с сайтом",

‎locale/uk/about/community.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -53,4 +53,4 @@ layout: about.hbs
5353

5454
В разі виникнення розбіжностей, CommComm слідує наступній [моделі пошуку консенсусу](https://en.wikipedia.org/wiki/Consensus-seeking_decision-making), для їх вирішення.
5555

56-
Коли пункт порядку денного виявився досягнутим консенсусу, модератор запитає: "Чи хто-небудь заперечує?", як останній заклик до незгоди з консенсусом. Якщо не може бути досягнуто беззаперечного консенсусу, питання виноситься на голосування, в якому перемагає більшість голосів. Очікується, що більшість рішень, прийнятих CommComm, здійснюється через процес пошуку консенсусу і що голосування використовується лише як останній засіб.
56+
Коли пункт порядку денного виявився досягнутим консенсусу, модератор запитає: "Чи хто-небудь заперечує?", як останній заклик до незгоди з консенсусом. Якщо не може бути досягнуто беззаперечного консенсусу, питання виноситься на голосування, в якому перемагає більшість голосів. Очікується, що більшість рішень, прийнятих CommComm, здійснюється через процес пошуку консенсусу і що голосування використовується лише як останній засіб.

‎locale/uk/site.json

+2
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@
33
"author": "Node.js Foundation",
44
"url": "https://nodejs.org/uk/",
55
"locale": "uk",
6+
"language": "Українська",
7+
"languageEnglishVersion": "Ukrainian",
68
"scrollToTop": "Вгору",
79
"reportNodeIssue": "Проблеми з Node.js",
810
"reportWebsiteIssue": "Проблеми з сайтом",

‎locale/zh-cn/site.json

+2
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44
"author": "Node.js 基金会",
55
"url": "https://nodejs.org/zh-cn/",
66
"locale": "zh-cn",
7+
"language": "中文(简体)",
8+
"languageEnglishVersion": "Chinese Simplified",
79
"scrollToTop": "回到页顶",
810
"reportNodeIssue": "报告 Node.js 问题 ",
911
"reportWebsiteIssue": "报告网站问题",

‎locale/zh-tw/site.json

+2
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44
"author": "Node.js 基金會",
55
"url": "https://nodejs.org/zh-tw/",
66
"locale": "zh-tw",
7+
"language": "中文(繁體)",
8+
"languageEnglishVersion": "Chinese Traditional",
79
"scrollToTop": "回到頁首",
810
"reportNodeIssue": "回報 Node.js 問題 ",
911
"reportWebsiteIssue": "回報 Node.js 網站問題",

0 commit comments

Comments
 (0)