feat: Improve language picker UI with icons

_includes/language-picker-mobile.html

@@ -1,20 +1,23 @@
 <div id="mobile-menu">
-  <div id="language-picker-button" class="button">
-    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6" width="24" height="24" style="margin-top: 5px;">
-      <path stroke-linecap="round" stroke-linejoin="round" d="m10.5 21 5.25-11.25L21 21m-9-3h7.5M3 5.621a48.474 48.474 0 0 1 6-.371m0 0c1.12 0 2.233.038 3.334.114M9 5.25V3m3.334 2.364C11.176 10.658 7.69 15.08 3 17.502m9.334-12.138c.896.061 1.785.147 2.666.257m-4.589 8.495a18.023 18.023 0 0 1-3.827-5.802" />
-    </svg>
+  <div id="language-picker-button" class="button" aria-haspopup="menu" aria-label="Change language">
+    {% include icons/i18n.svg %}
   </div>
 </div>
 <div id="language-picker-menu">
-  <div id="navbar">
-    <ul id="navmenu">
+  <div id="langbar">
+    <ul id="langmenu">
       {% assign url_parts = page.url | split: '/' %}
-
       {% assign url_remainder = url_parts | slice: 2, url_parts.size | join: '/' %}
-
+      {% assign current_lang = page.lang %}
       {% for lang in site.data.languages %}
       <li class="submenu">
-        <a href="/{{ lang.code }}/{{ url_remainder }}">{{ lang.name }}</a>
+        <a href="/{{ lang.code }}/{{ url_remainder }}">
+          {% if lang.code == current_lang %}
+            <strong>{{ lang.name }}</strong>
+          {% else %}
+            {{ lang.name }}
+          {% endif %}
+        </a>
       </li>
       {% endfor %}
     </ul>

_includes/language-picker.html

@@ -1,8 +1,12 @@
 <div class="desktop-lang-switcher">
 {% assign url_parts = page.url | split: '/' %}
 {% assign url_remainder = url_parts | slice: 2, url_parts.size | join: '/' %}
-{% assign current_lang = page.lang %}
+{% assign current_lang = url_parts[1] %}
+{% if current_lang == nil or page.layout == 'post' or page.layout == 404 %}
+  {% assign current_lang = 'en' %}
+{% endif %}
 <button class="lang-btn" type="button" aria-haspopup="menu" aria-label="Change language">
+  {% include icons/i18n.svg %} 
   <span id="current-lang"></span>
 </button>
 <ul class="lang-list submenu-content" aria-labelledby="current-lang" >

_posts/2024-07-16-welcome-post.md

@@ -1,4 +1,5 @@
 ---
+layout: post
 title: Welcome to The Express Blog!
 description: Introducing the new Express blog — a primary platform for announcements, updates, and communication from the Express technical committee.
 tags: site-admin

_posts/2024-09-29-security-releases.md

@@ -1,4 +1,5 @@
 ---
+layout: post
 title: September 2024 Security Releases
 description: Security releases for Express, body-parser, send, serve-static, and path-to-regexp have been published. We recommend that all users upgrade as soon as possible.
 tags: security vulnerabilities

_posts/2024-10-01-HeroDevs-partnership-announcement.md

@@ -1,4 +1,5 @@
 ---
+layout: post
 title: Express Never Ending Support Launched by HeroDevs and Express.js
 description: The Express.js team is pleased to announce a partnership with HeroDevs to launch Express Never-Ending Support (NES), providing long-term support for applications built with legacy Express. This collaboration ensures that developers relying on older versions of the framework will continue to receive critical security and compatibility updates, allowing them to maintain and scale their applications securely, even after the framework's official end-of-life.
 tags: partnerships announcements

_posts/2024-10-15-v5-release.md

@@ -1,4 +1,5 @@
 ---
+layout: post
 title: "Introducing Express v5: A New Era for the Node.js Framework"
 tags: releases
 authors:

_posts/2024-10-22-security-audit-milestone-achievement.md

@@ -1,4 +1,5 @@
 ---
+layout: post
 title: "Express.js Security Audit: A Milestone Achievement"
 tags: security audit releases
 authors:

_posts/2025-01-09-rewind-2024-triumphs-and-2025-vision.md

@@ -1,4 +1,5 @@
 ---
+layout: post
 title: "A New Chapter for Express.js: Triumphs of 2024 and an ambitious 2025"
 tags: news rewind 2024
 authors:

_posts/2025-03-31-v5-1-latest-release.md

@@ -1,4 +1,5 @@
 ---
+layout: post
 title: "[email protected]: Now the Default on npm with LTS Timeline"
 tags: news release
 authors:

_posts/2025-05-16-express-cleanup-legacy-packages.md

@@ -1,4 +1,5 @@
 ---
+layout: post
 title: "Spring Cleaning in Express.js: Deprecations and the Path Ahead"
 tags: news
 authors:

_posts/2025-05-19-security-releases.md

@@ -1,4 +1,5 @@
 ---
+layout: post
 title: May 2025 Security Releases
 description: Security release for Multer has been published. We recommend that all users upgrade as soon as possible.
 tags: security vulnerabilities

css/style.css

@@ -778,19 +778,7 @@ button.lang-btn {
   display: flex;
   justify-content: center;
   align-items: center;
-  gap: 1rem;
-
-  &::after {
-    content: "";
-    display: block;
-    width: 0.8em;
-    height: 0.5em;
-    background-color: var(--card-fg);
-    clip-path: polygon(100% 0%, 0 0%, 50% 100%);
-    cursor: pointer;
-    pointer-events: none;
-    transition: transform 0.2s ease-in-out;
-  }
+  gap: 0.5rem;
 }
 
 div.desktop-lang-switcher {
@@ -823,43 +811,44 @@ div.desktop-lang-switcher {
       visibility: visible;
     }
     li  a {
-      display: block;
-      padding: 5px 20px 5px 20px;
+      display: flex;
+      padding: 5px 10px 5px 10px;
       text-decoration: none;
       color: var(--card-fg);
+      gap: 0.3rem;
       &:is(:hover, :focus) {
         background: var(--hover-bg);
       }
     }
   }
-
-  /* rotate arrow */
-  &:is(:hover,:focus-within) button.lang-btn::after {
-    transform: rotate(180deg);
-  }
 }
 
 /* navigation */
-#navbar {
+#navbar,
+#langbar {
   line-height: 30px;
   display: flex;
   align-items: center;
 }
 
-#navbar a {
+#navbar a,
+#langbar a {
   color: var(--card-fg);
   text-decoration: none;
 }
 
-#navbar a.active {
+#navbar a.active,
+#langbar a.active {
   font-weight: bold;
 }
 
-#navbar ul {
+#navbar ul,
+#langbar ul {
   list-style: none;
 }
 
-#navmenu {
+#navmenu,
+#langmenu {
   display: flex;
   gap: 20px;
 }
@@ -907,7 +896,8 @@ div.desktop-lang-switcher {
   display: initial;
 }
 
-#navmenu {
+#navmenu,
+#langmenu {
   padding: 0;
   margin: 0;
   right: 0px;
@@ -1297,11 +1287,7 @@ h2 a {
     margin-right: -10px;
   }
 
-  #language-picker-menu #navmenu>li:first-child {
-    display: flex;
-  }
-
-  #language-picker-menu #navmenu {
+  #language-picker-menu #langmenu {
     max-height: 70vh;
     overflow-y: auto;
     scrollbar-width: thin;
@@ -1406,12 +1392,6 @@ h2 a {
 }
 
 
-@media all and (max-width: 540px) {
-  #boxes {
-    grid-template-columns: 1fr;
-  }
-}
-
 @media all and (max-width: 420px) {
   #app-settings-property {
     width: auto;
@@ -1660,17 +1640,15 @@ blockquote {
     display: none !important;
   }
 
-  #navbar {
+  #navbar,
+  #langbar {
     padding: 0;
     top: 1px;
     position: static;
   }
 
-  #navmenu>li:first-child {
-    display: none;
-  }
-
-  #navmenu>li {
+  #navmenu>li,
+  #langmenu>li {
     border-bottom: 1px solid var(--border);
     margin: 0;
     min-height: 47px;
@@ -1680,17 +1658,20 @@ blockquote {
     align-items: center;
   }
 
-  #navmenu>li.open:hover {
+  #navmenu>li.open:hover,
+  #langmenu>li.open:hover {
     background: var(--card-bg);
   }
-  #navmenu>li:hover {
+  #navmenu>li:hover,
+  #langmenu>li:hover {
     background: var(--hover-bg);
     & ul {
       background-color: var(--card-bg);
     }
   }
 
-  #navmenu {
+  #navmenu,
+  #langmenu {
     left: 0;
     padding: 0;
     top: 57px;
@@ -1699,7 +1680,8 @@ blockquote {
     display: none;
   }
 
-  #navmenu.opens {
+  #navmenu.opens,
+  #langmenu.opens {
     display: block;
   }
 
@@ -1711,7 +1693,18 @@ blockquote {
     padding-left: 5%;
   }
 
-  #navbar .submenu.open {
+  #langbar a {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+    text-wrap: nowrap;
+    min-width: 100vw;
+    min-height: inherit;
+    padding-left: 43.5vw;
+  }
+
+  #navbar .submenu.open,
+  #langbar .submenu.open {
     flex-direction: column;
     align-items: initial;
     > a {
@@ -1773,3 +1766,9 @@ blockquote {
     border-bottom: 1px solid var(--border);
   }
 }
+
+@media all and (max-width: 540px) {
+  #boxes {
+    grid-template-columns: 1fr;
+  }
+}

css/variables.css

@@ -49,4 +49,4 @@
     /* support page related */
   --supported-fg:#299009;
   --eol-fg: #ff1a1a;
-}
+}

js/menu.js

@@ -64,8 +64,8 @@ for (const el of itemsMenu) {
 // Mobile Menu and Language Picker
 
 const linkItemsMenu = document.querySelectorAll(".submenu > a");
-const languageItems = document.querySelectorAll("#language-picker-menu > #navbar > #navmenu > .submenu > a");
-const languagePickerMenu = document.querySelector("#language-picker-menu > #navbar > #navmenu");
+const languageItems = document.querySelectorAll("#language-picker-menu > #langbar > #langmenu > .submenu > a");
+const languagePickerMenu = document.querySelector("#language-picker-menu > #langbar > #langmenu");
 const menu = document.querySelector("#navmenu");
 const overlay = document.querySelector("#overlay");
 const navButton = document.querySelector("#nav-button");