✨ feat(i18n): display lcode in language switcher (#565)

Co-authored-by: welpo <welpo@users.noreply.github.com>

config.toml

@@ -108,6 +108,9 @@ skin = ""
 browser_theme_color = "#087e96"
 # browser_theme_color = ["#ffffff", "#000000"]  # Example of light/dark colours.
 
+# For multilingual sites: show current language code on the language switcher.
+show_selected_language_code_in_language_switcher = false
+
 # List additional stylesheets to load site-wide.
 # These stylesheets should be located in your site's `static` directory.
 # Example: stylesheets = ["extra1.css", "path/extra2.css"]

content/blog/faq-languages/index.ca.md

@@ -1,7 +1,7 @@
 +++
 title = "Lost in Translation? Explora les capacitats multilingües de tabi"
 date = 2023-09-12
-updated = 2025-08-07
+updated = 2025-09-14
 description = "Descobreix com tabi t'ajuda a connectar amb una audiència global gràcies a les seves funcions multilingües. Aprèn a canviar la llengua per defecte, afegir més llengües i aportar les teves pròpies traduccions."
 
 [taxonomies]
@@ -147,3 +147,7 @@ Si ho vas fer, hauràs d'actualitzar manualment les traduccions. Pots fer-ho cop
 ## tabi tradueix el meu contingut?
 
 No. tabi només tradueix les cadenes de text del tema. Hauràs de traduir el teu contingut tu mateix.
+
+## Com puc mostrar el codi de l'idioma actual al commutador d'idioma?
+
+Afegeix `show_selected_language_code_in_language_switcher = true` a la secció `[extra]` del teu `config.toml`.

content/blog/faq-languages/index.es.md

@@ -1,7 +1,7 @@
 +++
 title = "¿Lost in Translation? Explora las capacidades multilingües de tabi"
 date = 2023-09-12
-updated = 2025-08-07
+updated = 2025-09-14
 description = "Descubre cómo tabi te ayuda a conectar con una audiencia global gracias a sus funciones multilingües. Aprende a cambiar el idioma por defecto, añadir más idiomas y aportar tus propias traducciones."
 
 [taxonomies]
@@ -147,3 +147,7 @@ Si lo hiciste, tendrás que actualizar manualmente las traducciones. Puedes hace
 ## ¿tabi traduce el contenido de mi sitio?
 
 No. tabi sólo traduce el tema. Los posts deberás traducirlos tú mismo.
+
+## ¿Cómo puedo mostrar el código del idioma actual en el conmutador de idioma?
+
+Añade `show_selected_language_code_in_language_switcher = true` en la sección `[extra]` de tu `config.toml`.

content/blog/faq-languages/index.md

@@ -1,7 +1,7 @@
 +++
 title = "Lost in Translation? Not with tabi's Multilingual Capabilities"
 date = 2023-09-12
-updated = 2025-08-07
+updated = 2025-09-14
 description = "Master the art of serving a global audience through tabi's built-in multilingual features. Learn how to change the default language, add multilingual support, and contribute your own translations."
 
 [taxonomies]
@@ -148,3 +148,7 @@ If you did, you will need to manually update the translations. You can do this b
 ## Does tabi translate my content?
 
 No. tabi only translates the theme's text strings. You will need to translate your content yourself.
+
+# How to show current language code on the language switcher?
+
+Add `show_selected_language_code_in_language_switcher = true` in your config extras.

sass/parts/_header.scss

@@ -125,6 +125,28 @@ header {
             background: var(--meta-color);
         }
     }
+
+    .language-switcher-icon-with-code {
+        margin-inline-end: 0.3rem;
+        width: 0.7rem;
+        height: 0.7rem;
+    }
+}
+
+.language-switcher-icon-code {
+    position: absolute;
+    top: -0.15rem;
+    z-index: 10;
+    inset-inline-start: 0.7rem;
+    width: 100%;
+    height: 100%;
+    color: var(--text-color);
+    font-size: 0.5rem;
+    text-transform: uppercase;
+
+    &:hover {
+        color: var(--meta-color);
+    }
 }
 
 .dropdown {

templates/partials/language_switcher.html

@@ -1,7 +1,12 @@
 <li class="language-switcher">
     <details class="dropdown">
         <summary role="button" aria-haspopup="true" title="{{ macros_translate::translate(key="language_selection", default="Language selection", language_strings=language_strings) }}" aria-label="{{ macros_translate::translate(key="language_selection", default="Language selection", language_strings=language_strings) }}">
+            {%- if config.extra.show_selected_language_code_in_language_switcher -%}
+            <div class="language-switcher-icon language-switcher-icon-with-code"></div>
+            <div class="language-switcher-icon-code">{{lang}}</div>
+            {%- else -%}
             <div class="language-switcher-icon"></div>
+            {%- endif -%}
         </summary>
         <div class="dropdown-content" role="menu">
             {#- Display the current language first in the dropdown -#}

theme.toml

@@ -56,6 +56,9 @@ skin = ""
 # browser_theme_color = "#087e96"  # Example of single value.
 # browser_theme_color = ["#ffffff", "#000000"]  # Example of light/dark colours.
 
+# Show current language code on the language switcher
+show_selected_language_code_in_language_switcher = false
+
 # List additional stylesheets to load site-wide.
 # These stylesheets should be located in your site's `static` directory.
 # Example: stylesheets = ["extra1.css", "path/extra2.css"]