feat: add language picker

expressjs · Nov 23, 2024 · 2685347 · 2685347
1 parent 7b74c10
commit 2685347
Show file tree

Hide file tree

Showing 21 changed files with 205 additions and 73 deletions.
diff --git a/_data/languages.yml b/_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
diff --git a/_includes/header/header-de.html b/_includes/header/header-de.html
@@ -106,8 +106,11 @@
           </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 %}
   </div>
 </header>
diff --git a/_includes/header/header-en.html b/_includes/header/header-en.html
@@ -131,20 +131,23 @@
                   <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 %}
+      </div>
 </header>
diff --git a/_includes/header/header-es.html b/_includes/header/header-es.html
@@ -107,8 +107,11 @@
           </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 %}
+  </div>
 </header>
diff --git a/_includes/header/header-fr.html b/_includes/header/header-fr.html
@@ -108,8 +108,11 @@
           </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 %}
+  </div>
 </header>
diff --git a/_includes/header/header-id.html b/_includes/header/header-id.html
@@ -128,9 +128,11 @@
             </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 %}
+  </div>
   </header>
-
diff --git a/_includes/header/header-it.html b/_includes/header/header-it.html
@@ -104,8 +104,11 @@
           </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 %}
   </div>
 </header>
diff --git a/_includes/header/header-ja.html b/_includes/header/header-ja.html
@@ -107,8 +107,11 @@
           </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 %}
+  </div>
 </header>
diff --git a/_includes/header/header-ko.html b/_includes/header/header-ko.html
@@ -107,8 +107,11 @@
           </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 %}
+  </div>
 </header>
diff --git a/_includes/header/header-pt-br.html b/_includes/header/header-pt-br.html
@@ -107,8 +107,11 @@
           </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 %}
   </div>
 </header>
diff --git a/_includes/header/header-ru.html b/_includes/header/header-ru.html
@@ -107,8 +107,11 @@
           </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 %}
   </div>
 </header>
diff --git a/_includes/header/header-sk.html b/_includes/header/header-sk.html
@@ -107,8 +107,11 @@
             </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 %}
+  </div>
 </header>
diff --git a/_includes/header/header-th.html b/_includes/header/header-th.html
@@ -119,8 +119,11 @@
           </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 %}
   </div>
 </header>
diff --git a/_includes/header/header-tr.html b/_includes/header/header-tr.html
@@ -120,8 +120,11 @@
           </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 %}
   </div>
 </header>
diff --git a/_includes/header/header-uk.html b/_includes/header/header-uk.html
@@ -105,8 +105,11 @@
           </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 %}
   </div>
 </header>
diff --git a/_includes/header/header-uz.html b/_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,11 @@
           </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 %}
   </div>
 </header>
diff --git a/_includes/header/header-zh-cn.html b/_includes/header/header-zh-cn.html
@@ -107,8 +107,11 @@
           </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 %}
   </div>
 </header>
diff --git a/_includes/header/header-zh-tw.html b/_includes/header/header-zh-tw.html
@@ -107,8 +107,11 @@
           </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 %}
   </div>
 </header>
diff --git a/_includes/language-picker.html b/_includes/language-picker.html
@@ -0,0 +1,28 @@
+<div id="navbar">
+  <ul id="navmenu">
+    {% assign url_parts = page.url | split: '/' %}
+
+    {% assign url_remainder = url_parts | slice: 2, url_parts.size | join: '/' %}
+
+    <li class="submenu">
+      <div id="current-lang" class="current-lang"></div>
+      <div id="languageData"
+      data-languages='{{ site.data.languages | jsonify }}'
+      style="display:none;">
+      </div>
+      <ul class="submenu-content">
+        {% for lang in site.data.languages %}
+        <li>
+          <a href="/{{ lang.code }}/{{ url_remainder }}">
+            {% if lang.code | to_s == current_lang | to_s %}
+              <strong>{{ lang.name }}</strong>
+            {% else %}
+              {{ lang.name }}
+            {% endif %}
+          </a>
+        </li>
+        {% endfor %}
+      </ul>
+    </li>
+  </ul>
+</div>