feat: add language picker

_data/languages.yml

@@ -0,0 +1,34 @@
+- code: en
+  name: English
+- code: fr
+  name: Français
+- code: de
+  name: Deutsch
+- code: es
+  name: Español
+- code: it
+  name: Italiano
+- code: ja
+  name: 日本語
+- code: ru
+  name: Русский
+- code: zh-cn
+  name: 中文 (简体)
+- code: zh-tw
+  name: 繁體中文
+- code: ko
+  name: 한국어
+- code: pt-br
+  name: Português
+- code: sk
+  name: Slovenčina
+- code: uk
+  name: Українська
+- code: uz
+  name: Oʻzbekcha
+- code: tr
+  name: Türkçe
+- code: th
+  name: ภาษาไทย
+- code: id
+  name: Indonesia

_includes/footer/footer-en.html

@@ -1,21 +1,15 @@
 <a id="top" href="#"><img src="/images/arrow.png"></a>
 
 <footer>
-  <section id="doc-langs">
-    Documentation translations provided by StrongLoop/IBM:
-    <a href="/fr/">French</a>, <a href="/de/">German</a>, <a href="/es/">Spanish</a>, <a href="/it/">Italian</a>, <a href="/ja/">Japanese</a>, <a href="/ru/">Russian</a>, <a href="/zh-cn/">Chinese</a>, <a href="/zh-tw/">Traditional Chinese</a>, <a href="/ko/">Korean</a>, <a href="/pt-br/">Portuguese</a>.
-    <br>
-    Community translation available for: <a href="/sk/">Slovak</a>, <a href="/uk/">Ukrainian</a>, <a href="/uz/">Uzbek</a>, <a href="/tr/">Turkish</a>, <a href="/th/">Thai</a> and <a href="/id/">Indonesian</a>.
-  </section>
   <section id="footer-content">
     <div id="footer-copyright">
-      <a href="https://openjsf.org/">   
+      <a href="https://openjsf.org/">
         <img src="https://raw.githubusercontent.com/openjs-foundation/artwork/main/openjs_foundation/openjs_foundation-logo-horizontal-color.svg" alt="OpenJS Foundation" width="125" height="39" class="hidden-dark"/>
         <img src="https://raw.githubusercontent.com/openjs-foundation/artwork/main/openjs_foundation/openjs_foundation-logo-horizontal-white.svg" alt="OpenJS Foundation" width="125" height="39" class="hidden-light"/>
       </a>
       <div id="footer-policy">
         <a href="https://terms-of-use.openjsf.org">Terms of Use</a>
-        <a href="https://privacy-policy.openjsf.org">Privacy Policy</a> 
+        <a href="https://privacy-policy.openjsf.org">Privacy Policy</a>
         <a id="coc" href="https://github.com/expressjs/express/blob/master/Code-Of-Conduct.md">Code of Conduct</a>
         <a href="https://trademark-policy.openjsf.org">Trademark Policy</a>
         <a id="security" href="https://github.com/expressjs/express/security/policy">Security Policy</a>

_includes/footer/footer-id.html

@@ -1,21 +1,15 @@
 <a id="top" href="#"><img src="/images/arrow.png"></a>
 
 <footer>
-  <section id="doc-langs">
-  Dokumentasi versi terjemahan yang disediakan oleh StrongLoop/IBM:
-  <a href="/fr/">French</a>, <a href="/de/">German</a>, <a href="/es/">Spanish</a>, <a href="/it/">Italian</a>, <a href="/ja/">Japanese</a>, <a href="/ru/">Russian</a>, <a href="/zh-cn/">Chinese</a>, <a href="/zh-tw/">Traditional Chinese</a>, <a href="/ko/">Korean</a>, <a href="/pt-br/">Portuguese</a>.
-  <br>
-  Terjemahan oleh komunitas tersedia untuk: <a href="/sk/">Slovak</a>, <a href="/uk/">Ukrainian</a>, <a href="/uz/">Uzbek</a>, <a href="/tr/">Turkish</a>, <a href="/th/">Thai</a> dan <a href="/id/">Bahasa Indonesia</a>.
-  </section>
   <section id="footer-content">
     <div id="footer-copyright">
-      <a href="https://openjsf.org/">   
+      <a href="https://openjsf.org/">
         <img src="https://raw.githubusercontent.com/openjs-foundation/artwork/main/openjs_foundation/openjs_foundation-logo-horizontal-color.svg" alt="OpenJS Foundation" width="125" height="39" class="hidden-dark"/>
         <img src="https://raw.githubusercontent.com/openjs-foundation/artwork/main/openjs_foundation/openjs_foundation-logo-horizontal-white.svg" alt="OpenJS Foundation" width="125" height="39" class="hidden-light"/>
       </a>
       <div id="footer-policy">
         <a href="https://terms-of-use.openjsf.org">Terms of Use</a>
-        <a href="https://privacy-policy.openjsf.org">Privacy Policy</a> 
+        <a href="https://privacy-policy.openjsf.org">Privacy Policy</a>
         <a id="coc" href="https://github.com/expressjs/express/blob/master/Code-Of-Conduct.md">Code of Conduct</a>
         <a href="https://trademark-policy.openjsf.org">Trademark Policy</a>
         <a id="security" href="https://github.com/expressjs/express/security/policy">Security Policy</a>

_includes/header/header-de.html

@@ -106,8 +106,12 @@
           </li>
       </ul>
   </div>
-  <div id="theme-icon-container" class="theme-toggle default-theme" title="toggle darkmode">
-    <i class="fa fa-moon-o fa-2x hidden-dark"></i>
-    <span class="sun-icon hidden-light"></span>
+  <div class="header-right">
+    <div id="theme-icon-container" class="theme-toggle default-theme" title="toggle darkmode">
+      <i class="fa fa-moon-o fa-2x hidden-dark"></i>
+      <span class="sun-icon hidden-light"></span>
+    </div>
+    {% include language-picker.html %}
+    {% include language-picker-mobile.html %}
   </div>
 </header>

_includes/header/header-en.html

@@ -131,20 +131,24 @@
                   <a href="{{site.posts.first.url}}"{% if page.menu == 'blog' %} class="active"{% endif %}>Blog</a>
                       <ul class="submenu-content">
                           <li>
-                            <a href="{{site.posts.first.url}}">Latest post</a> 
+                            <a href="{{site.posts.first.url}}">Latest post</a>
                           </li>
                           <li>
-                            <a href="/{{ page.lang }}/blog/posts.html">All posts</a> 
-                          </li>                          
+                            <a href="/{{ page.lang }}/blog/posts.html">All posts</a>
+                          </li>
                           <li>
                             <a href="/{{ page.lang }}/blog/write-post.html">Write a Post</a>
                           </li>
                       </ul>
-                  </li>
-      </ul>
-  </div>
-  <div id="theme-icon-container" class="theme-toggle default-theme" title="toggle darkmode">
-    <i class="fa fa-moon-o fa-2x hidden-dark"></i>
-    <span class="sun-icon hidden-light"></span>
-  </div>
+          </li>
+        </ul>
+      </div>
+      <div class="header-right">
+        <div id="theme-icon-container" class="theme-toggle default-theme" title="toggle darkmode">
+          <i class="fa fa-moon-o fa-2x hidden-dark"></i>
+          <span class="sun-icon hidden-light"></span>
+        </div>
+        {% include language-picker.html %}
+        {% include language-picker-mobile.html %}
+      </div>
 </header>

_includes/header/header-es.html

@@ -107,8 +107,13 @@
           </li>
       </ul>
   </div>
-  <div id="theme-icon-container" class="theme-toggle default-theme" title="toggle darkmode">
-    <i class="fa fa-moon-o fa-2x hidden-dark"></i>
-    <span class="sun-icon hidden-light"></span>
-  </div> 
+  <div class="header-right">
+    <div id="theme-icon-container" class="theme-toggle default-theme" title="toggle darkmode">
+      <i class="fa fa-moon-o fa-2x hidden-dark"></i>
+      <span class="sun-icon hidden-light"></span>
+    </div>
+    {% include language-picker.html %}
+    {% include language-picker-mobile.html %}
+
+  </div>
 </header>

_includes/header/header-fr.html

@@ -108,8 +108,12 @@
           </li>
       </ul>
   </div>
-  <div id="theme-icon-container" class="theme-toggle default-theme" title="toggle darkmode">
-    <i class="fa fa-moon-o fa-2x hidden-dark"></i>
+  <div class="header-right">
+    <div id="theme-icon-container" class="theme-toggle default-theme" title="toggle darkmode">
+      <i class="fa fa-moon-o fa-2x hidden-dark"></i>
       <span class="sun-icon hidden-light"></span>
-  </div> 
+    </div>
+    {% include language-picker.html %}
+    {% include language-picker-mobile.html %}
+  </div>
 </header>

_includes/header/header-id.html

@@ -128,9 +128,12 @@
             </li>
         </ul>
     </div>
+  <div class="header-right">
     <div id="theme-icon-container" class="theme-toggle default-theme" title="toggle darkmode">
       <i class="fa fa-moon-o fa-2x hidden-dark"></i>
       <span class="sun-icon hidden-light"></span>
     </div>
+    {% include language-picker.html %}
+    {% include language-picker-mobile.html %}
+  </div>
   </header>
-

_includes/header/header-it.html

@@ -104,8 +104,12 @@
           </li>
       </ul>
   </div>
-  <div id="theme-icon-container" class="theme-toggle default-theme" title="toggle darkmode">
-    <i class="fa fa-moon-o fa-2x hidden-dark"></i>
-    <span class="sun-icon hidden-light"></span>
+  <div class="header-right">
+    <div id="theme-icon-container" class="theme-toggle default-theme" title="toggle darkmode">
+      <i class="fa fa-moon-o fa-2x hidden-dark"></i>
+      <span class="sun-icon hidden-light"></span>
+    </div>
+    {% include language-picker.html %}
+    {% include language-picker-mobile.html %}
   </div>
 </header>

_includes/header/header-ja.html

@@ -107,8 +107,12 @@
           </li>
       </ul>
   </div>
-  <div id="theme-icon-container" class="theme-toggle default-theme" title="toggle darkmode">
-    <i class="fa fa-moon-o fa-2x hidden-dark"></i>
-    <span class="sun-icon hidden-light"></span>
-  </div> 
+  <div class="header-right">
+    <div id="theme-icon-container" class="theme-toggle default-theme" title="toggle darkmode">
+      <i class="fa fa-moon-o fa-2x hidden-dark"></i>
+      <span class="sun-icon hidden-light"></span>
+    </div>
+    {% include language-picker.html %}
+    {% include language-picker-mobile.html %}
+  </div>
 </header>

_includes/header/header-ko.html

@@ -107,8 +107,12 @@
           </li>
       </ul>
   </div>
-  <div id="theme-icon-container" class="theme-toggle default-theme" title="toggle darkmode">
-    <i class="fa fa-moon-o fa-2x hidden-dark"></i>
-    <span class="sun-icon hidden-light"></span>
-  </div> 
+  <div class="header-right">
+    <div id="theme-icon-container" class="theme-toggle default-theme" title="toggle darkmode">
+      <i class="fa fa-moon-o fa-2x hidden-dark"></i>
+      <span class="sun-icon hidden-light"></span>
+    </div>
+    {% include language-picker.html %}
+    {% include language-picker-mobile.html %}
+  </div>
 </header>

_includes/header/header-pt-br.html

@@ -107,8 +107,12 @@
           </li>
       </ul>
   </div>
-  <div id="theme-icon-container" class="theme-toggle default-theme" title="toggle darkmode">
-    <i class="fa fa-moon-o fa-2x hidden-dark"></i>
-    <span class="sun-icon hidden-light"></span>
+  <div class="header-right">
+    <div id="theme-icon-container" class="theme-toggle default-theme" title="toggle darkmode">
+      <i class="fa fa-moon-o fa-2x hidden-dark"></i>
+      <span class="sun-icon hidden-light"></span>
+    </div>
+    {% include language-picker.html %}
+    {% include language-picker-mobile.html %}
   </div>
 </header>

_includes/header/header-ru.html

@@ -107,8 +107,12 @@
           </li>
       </ul>
   </div>
-  <div id="theme-icon-container" class="theme-toggle default-theme" title="toggle darkmode">
-    <i class="fa fa-moon-o fa-2x hidden-dark"></i>
-    <span class="sun-icon hidden-light"></span>
+  <div class="header-right">
+    <div id="theme-icon-container" class="theme-toggle default-theme" title="toggle darkmode">
+      <i class="fa fa-moon-o fa-2x hidden-dark"></i>
+      <span class="sun-icon hidden-light"></span>
+    </div>
+    {% include language-picker.html %}
+    {% include language-picker-mobile.html %}
   </div>
 </header>

_includes/header/header-sk.html

@@ -107,8 +107,12 @@
             </li>
         </ul>
     </div>
+  <div class="header-right">
     <div id="theme-icon-container" class="theme-toggle default-theme" title="toggle darkmode">
-        <i class="fa fa-moon-o fa-2x hidden-dark"></i>
-        <span class="sun-icon hidden-light"></span>
+      <i class="fa fa-moon-o fa-2x hidden-dark"></i>
+      <span class="sun-icon hidden-light"></span>
     </div>
+    {% include language-picker.html %}
+    {% include language-picker-mobile.html %}
+  </div>
 </header>

_includes/header/header-th.html

@@ -119,8 +119,12 @@
           </li>
       </ul>
   </div>
-  <div id="theme-icon-container" class="theme-toggle default-theme" title="toggle darkmode">
-    <i class="fa fa-moon-o fa-2x hidden-dark"></i>
-    <span class="sun-icon hidden-light"></span>
+  <div class="header-right">
+    <div id="theme-icon-container" class="theme-toggle default-theme" title="toggle darkmode">
+      <i class="fa fa-moon-o fa-2x hidden-dark"></i>
+      <span class="sun-icon hidden-light"></span>
+    </div>
+    {% include language-picker.html %}
+    {% include language-picker-mobile.html %}
   </div>
 </header>

_includes/header/header-tr.html

@@ -120,8 +120,12 @@
           </li>
       </ul>
   </div>
-  <div id="theme-icon-container" class="theme-toggle default-theme" title="toggle darkmode">
-    <i class="fa fa-moon-o fa-2x hidden-dark"></i>
-    <span class="sun-icon hidden-light"></span>
+  <div class="header-right">
+    <div id="theme-icon-container" class="theme-toggle default-theme" title="toggle darkmode">
+      <i class="fa fa-moon-o fa-2x hidden-dark"></i>
+      <span class="sun-icon hidden-light"></span>
+    </div>
+    {% include language-picker.html %}
+    {% include language-picker-mobile.html %}
   </div>
 </header>

_includes/header/header-uk.html

@@ -105,8 +105,12 @@
           </li>
       </ul>
   </div>
-  <div id="theme-icon-container" class="theme-toggle default-theme" title="toggle darkmode">
-    <i class="fa fa-moon-o fa-2x hidden-dark"></i>
-    <span class="sun-icon hidden-light"></span>
+  <div class="header-right">
+    <div id="theme-icon-container" class="theme-toggle default-theme" title="toggle darkmode">
+      <i class="fa fa-moon-o fa-2x hidden-dark"></i>
+      <span class="sun-icon hidden-light"></span>
+    </div>
+    {% include language-picker.html %}
+    {% include language-picker-mobile.html %}
   </div>
 </header>

_includes/header/header-uz.html

@@ -13,7 +13,7 @@
                       <ul class="submenu-content">
                           <li>
                             <a href="/{{ page.lang }}/starter/installing.html">
-                             O'rnatish 
+                             O'rnatish
                             </a>
                           </li>
                           <li>
@@ -23,7 +23,7 @@
                           </li>
                           <li>
                           <a href="/{{ page.lang }}/starter/generator.html">
-                            Express generator 
+                            Express generator
                           </a>
                           </li>
                           <li>
@@ -92,7 +92,7 @@
                           </li>
                           <li><a href="/{{ page.lang }}/advanced/best-practice-performance.html">Performance best practices</a>
                           </li>
-                      </ul>                  
+                      </ul>
           </li>
           <li id="resources-menu" class="submenu">
                   <a href="/{{ page.lang }}/resources/glossary.html"{% if page.menu == 'resources' %} class="active"{% endif %}>Resources</a>
@@ -107,8 +107,12 @@
           </li>
       </ul>
   </div>
-  <div id="theme-icon-container" class="theme-toggle default-theme" title="toggle darkmode">
-    <i class="fa fa-moon-o fa-2x hidden-dark"></i>
-    <span class="sun-icon hidden-light"></span>
+  <div class="header-right">
+    <div id="theme-icon-container" class="theme-toggle default-theme" title="toggle darkmode">
+      <i class="fa fa-moon-o fa-2x hidden-dark"></i>
+      <span class="sun-icon hidden-light"></span>
+    </div>
+    {% include language-picker.html %}
+    {% include language-picker-mobile.html %}
   </div>
 </header>

_includes/header/header-zh-cn.html

@@ -107,8 +107,12 @@
           </li>
       </ul>
   </div>
-  <div id="theme-icon-container" class="theme-toggle default-theme" title="toggle darkmode">
-    <i class="fa fa-moon-o fa-2x hidden-dark"></i>
-    <span class="sun-icon hidden-light"></span>
+  <div class="header-right">
+    <div id="theme-icon-container" class="theme-toggle default-theme" title="toggle darkmode">
+      <i class="fa fa-moon-o fa-2x hidden-dark"></i>
+      <span class="sun-icon hidden-light"></span>
+    </div>
+    {% include language-picker.html %}
+    {% include language-picker-mobile.html %}
   </div>
 </header>