Language picker implemented

build.js

@@ -53,6 +53,15 @@ function i18nJSON (lang) {
   return defaultsDeep({}, templateJSON, defaultJSON)
 }
 
+// This function imports language file for each given locale in array 'localesList'
+// and based on it generating locales data, which includes full language name, english language name, locale and link
+function generateLocalesData (localesList) {
+  return localesList.map(localeEl => {
+    const { language, languageEnglishVersion, locale, url } = require(`./locale/${localeEl}/site.json`)
+    return { language, locale, url, languageEnglishVersion }
+  })
+}
+
 // This is the function where the actual magic happens. This contains the main
 // Metalsmith build cycle used for building a locale subsite, such as the
 // english one.
@@ -63,7 +72,11 @@ function buildLocale (source, locale, opts) {
   const metalsmith = Metalsmith(__dirname)
   metalsmith
   // Sets global metadata imported from the locale's respective site.json.
-    .metadata({ site: i18nJSON(locale), project: source.project })
+    .metadata({
+      site: i18nJSON(locale),
+      project: source.project,
+      locales: opts.localesData
+    })
   // Sets the build source as the locale folder.
     .source(path.join(__dirname, 'locale', locale))
     .use(withPreserveLocale(opts && opts.preserveLocale))
@@ -307,10 +320,11 @@ function fullBuild (opts) {
 
     // Executes the build cycle for every locale.
     fs.readdir(path.join(__dirname, 'locale'), (e, locales) => {
-      locales.filter(file => junk.not(file) && (selectedLocales ? selectedLocales.includes(file) : true))
-        .forEach((locale) => {
-          buildLocale(source, locale, { preserveLocale })
-        })
+      const filteredLocales = locales.filter(file => junk.not(file) && (selectedLocales ? selectedLocales.includes(file) : true))
+      const localesData = generateLocalesData(filteredLocales)
+      filteredLocales.forEach((locale) => {
+        buildLocale(source, locale, { preserveLocale, localesData })
+      })
     })
   })
 }

layouts/css/page-modules/_header.styl

@@ -1,6 +1,7 @@
 header
   background-color $node-gray
   text-align center
+  position relative
 
   > .container
     overflow visible
@@ -23,6 +24,46 @@ header
     a:hover
       background-color transparent
       text-decoration underline
+
+  #lang-picker-toggler
+    position absolute
+    right 0
+    bottom 0
+    height 20%
+    fill $light-gray2
+    cursor pointer
+    padding 12px
+
+  .lang-picker
+    position absolute
+    right 0
+    top 100%
+    min-height 100%
+    max-height 200%
+    overflow auto
+    background $node-gray
+
+    &.hidden
+      display none
+
+    a
+      color $light-gray2
+
+    > ul
+      padding 0
+      margin 0
+
+      > li
+        padding 0.5em 1em
+        text-transform uppercase
+        font-size 14px
+        color $light-gray2 !important
+        cursor pointer
+        list-style none
+
+        &:hover
+          background-color $node-green
+          text-decoration underline
 
 // Special format for external 'Foundation' link in main navigation
 .nav-foundation
@@ -78,6 +119,15 @@ header
     a:active
       padding 0
 
+    #lang-picker-toggler
+      position relative
+      height 1.5em
+      padding 0
+
+    .lang-picker
+      > ul > li
+        padding 0.5em 0
+
 #logo
   display block
   border none

layouts/partials/header.hbs

@@ -23,5 +23,39 @@
       </ul>
     </nav>
 
+    <svg id="lang-picker-toggler" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+      <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"/>
+      <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"/>
+    </svg>
+
+    <div class="lang-picker hidden">
+      <ul>
+        {{#each locales}}
+          <li
+            data-lang="{{locale}}"
+            title="{{languageEnglishVersion}}"
+          >
+            {{language}}
+          </li>
+        {{/each}}
+      </ul>
+    </div>
+
   </div>
 </header>
+<script type="text/javascript">
+  const langPickerElement = document.querySelector('.lang-picker')
+  const langElements = langPickerElement.querySelectorAll('li')
+  const langPickerTogglerElement = document.querySelector('#lang-picker-toggler')
+
+  langElements.forEach(el => 
+    el.addEventListener('click', (e) => {
+      const newLocale =  (e.target && e.target.dataset && e.target.dataset.lang) || "en";
+      window.location.replace(window.location.pathname.replace(/\/[a-zA-Z-]+/, `/${newLocale}`))
+    })
+  )
+
+  langPickerTogglerElement.addEventListener('click', () => {
+    langPickerElement.classList.toggle('hidden')
+  })
+</script>

locale/ar/site.json

@@ -3,6 +3,8 @@
   "author": "Node.js Foundation",
   "url": "https://nodejs.org/ar/",
   "locale": "ar",
+  "language": "العربية",
+  "languageEnglishVersion": "Arabic",
   "rtl": true,
   "scrollToTop": "إنتقل إلى الأعلى",
   "reportNodeIssue": "Node.js أبلغ عن عطل في",

locale/ca/site.json

@@ -3,6 +3,8 @@
   "author": "Fundació Node.js",
   "url": "https://nodejs.org/ca/",
   "locale": "ca",
+  "language": "Catalan",
+  "languageEnglishVersion": "Catalan",
   "scrollToTop": "Torna al començament",
   "reportNodeIssue": "Informe d'un problema de Node.js",
   "reportWebsiteIssue": "Informe d'un problema al lloc web",

locale/de/site.json

@@ -3,6 +3,8 @@
   "author": "Node.js Foundation",
   "url": "https://nodejs.org/de/",
   "locale": "de",
+  "language": "Deutsch",
+  "languageEnglishVersion": "German",
   "scrollToTop": "Zum Seitenanfang",
   "reportNodeIssue": "Node.js-Fehler melden",
   "reportWebsiteIssue": "Webseitenfehler melden",

locale/en/site.json

@@ -3,6 +3,8 @@
   "author": "Node.js Foundation",
   "url": "https://nodejs.org/en/",
   "locale": "en",
+  "language": "English",
+  "languageEnglishVersion": "English",
   "scrollToTop": "Scroll to top",
   "reportNodeIssue": "Report Node.js issue",
   "reportWebsiteIssue": "Report website issue",

locale/es/site.json

@@ -4,6 +4,8 @@
   "author": "Fundación de Node.js",
   "url": "https://nodejs.org/es/",
   "locale": "es",
+  "language": "Español",
+  "languageEnglishVersion": "Spanish",
   "scrollToTop": "Vuelve al comienzo",
   "reportNodeIssue": "Informe de un problema con Node.js",
   "reportWebsiteIssue": "Informe de un problema con el sitio",

locale/fa/site.json

@@ -3,6 +3,8 @@
   "author": "Node.js بنیاد",
   "url": "https://nodejs.org/fa/",
   "locale": "fa",
+  "language": "زبان فارسی",
+  "languageEnglishVersion": "Persian",
   "rtl": true,
   "scrollToTop": "رفتن به بالا",
   "reportNodeIssue": "را گزارش کنید Node.js مشکلی در",

locale/fr/site.json

@@ -3,6 +3,8 @@
   "author": "Node.js Foundation",
   "url": "https://nodejs.org/fr/",
   "locale": "fr",
+  "language": "Français",
+  "languageEnglishVersion": "French",
   "scrollToTop": "Faire défiler en haut",
   "reportNodeIssue": "Rapporter un problème Node.js",
   "reportWebsiteIssue": "Rapporter un problème sur le site web",

locale/gl/site.json

@@ -3,6 +3,8 @@
   "author": "Fundación de Node.js",
   "url": "https://nodejs.org/gl/",
   "locale": "gl",
+  "language": "Galego",
+  "languageEnglishVersion": "Galician",
   "scrollToTop": "Volta ao principio",
   "reportNodeIssue": "Informar dun problema con Node.js",
   "reportWebsiteIssue": "Informar dun problema co sitio",

locale/it/site.json

@@ -3,6 +3,8 @@
   "author": "Node.js Foundation",
   "url": "https://nodejs.org/en/",
   "locale": "it",
+  "language": "Italiano",
+  "languageEnglishVersion": "Italian",
   "scrollToTop": "Portami all'inizio",
   "reportNodeIssue": "Segnala un problema di Node.js",
   "reportWebsiteIssue": "Segnala un problema del sito",

locale/ja/site.json

@@ -4,6 +4,8 @@
   "author": "Node.js 財団",
   "url": "https://nodejs.org/ja/",
   "locale": "ja",
+  "language": "日本語",
+  "languageEnglishVersion": "Japanese",
   "scrollToTop": "上部へスクロールする",
   "reportNodeIssue": "Node.js の不具合を報告",
   "reportWebsiteIssue": "サイトの不具合を報告",

locale/ko/site.json

@@ -3,6 +3,8 @@
   "author": "Node.js 재단",
   "url": "https://nodejs.org/ko/",
   "locale": "ko",
+  "language": "한국어",
+  "languageEnglishVersion": "Korean",
   "scrollToTop": "맨 위로",
   "reportNodeIssue": "Node.js 이슈 보고",
   "reportWebsiteIssue": "웹사이트 이슈 보고",

locale/pt-br/site.json

@@ -3,6 +3,8 @@
   "author": "Node.js Foundation",
   "url": "https://nodejs.org/pt-br/",
   "locale": "pt-br",
+  "language": "Português do Brasil",
+  "languageEnglishVersion": "Portuguese, Brazilian",
   "scrollToTop": "Retorne ao começo",
   "reportNodeIssue": "Reporte um problema do Node.js",
   "reportWebsiteIssue": "Reporte um problema do Website",

locale/ru/site.json

@@ -3,6 +3,8 @@
   "author": "Node.js Foundation",
   "url": "https://nodejs.org/ru/",
   "locale": "ru",
+  "language": "Русский",
+  "languageEnglishVersion": "Russian",
   "scrollToTop": "Вверх",
   "reportNodeIssue": "Проблемы с Node.js",
   "reportWebsiteIssue": "Проблемы с сайтом",

locale/uk/about/community.md

@@ -53,4 +53,4 @@ layout: about.hbs
 
 В разі виникнення розбіжностей, CommComm слідує наступній [моделі пошуку консенсусу](https://en.wikipedia.org/wiki/Consensus-seeking_decision-making), для їх вирішення.
 
-Коли пункт порядку денного виявився досягнутим консенсусу, модератор запитає: "Чи хто-небудь заперечує?", як останній заклик до незгоди з консенсусом. Якщо не може бути досягнуто беззаперечного консенсусу, питання виноситься на голосування, в якому перемагає більшість голосів. Очікується, що більшість рішень, прийнятих CommComm, здійснюється через процес пошуку консенсусу і що голосування використовується лише як останній засіб.
+Коли пункт порядку денного виявився досягнутим консенсусу, модератор запитає: "Чи хто-небудь заперечує?", як останній заклик до незгоди з консенсусом. Якщо не може бути досягнуто беззаперечного консенсусу, питання виноситься на голосування, в якому перемагає більшість голосів. Очікується, що більшість рішень, прийнятих CommComm, здійснюється через процес пошуку консенсусу і що голосування використовується лише як останній засіб.

locale/uk/site.json

@@ -3,6 +3,8 @@
   "author": "Node.js Foundation",
   "url": "https://nodejs.org/uk/",
   "locale": "uk",
+  "language": "Українська",
+  "languageEnglishVersion": "Ukrainian",
   "scrollToTop": "Вгору",
   "reportNodeIssue": "Проблеми з Node.js",
   "reportWebsiteIssue": "Проблеми з сайтом",

locale/zh-cn/site.json

@@ -4,6 +4,8 @@
   "author": "Node.js 基金会",
   "url": "https://nodejs.org/zh-cn/",
   "locale": "zh-cn",
+  "language": "中文(简体)",
+  "languageEnglishVersion": "Chinese Simplified",
   "scrollToTop": "回到页顶",
   "reportNodeIssue": "报告 Node.js 问题 ",
   "reportWebsiteIssue": "报告网站问题",

locale/zh-tw/site.json

@@ -4,6 +4,8 @@
   "author": "Node.js 基金會",
   "url": "https://nodejs.org/zh-tw/",
   "locale": "zh-tw",
+  "language": "中文(繁體)",
+  "languageEnglishVersion": "Chinese Traditional",
   "scrollToTop": "回到頁首",
   "reportNodeIssue": "回報 Node.js 問題 ",
   "reportWebsiteIssue": "回報 Node.js 網站問題",