From 9c8b914884c650977c9231986de484deda6160ef Mon Sep 17 00:00:00 2001
From: zloylinux <alex@tenkoff.ru>
Date: Thu, 18 Sep 2025 20:30:15 +0700
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(i18n):=20display=20lcode=20in?=
 =?UTF-8?q?=20language=20switcher=20(#565)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 config.toml                                   |  2 ++
 themes/tabi/sass/parts/_header.scss           | 22 +++++++++++++++++++
 .../templates/partials/language_switcher.html |  5 +++++
 themes/tabi/theme.toml                        |  3 +++
 4 files changed, 32 insertions(+)

diff --git a/config.toml b/config.toml
index d7d79ad..202072d 100644
--- a/config.toml
+++ b/config.toml
@@ -200,6 +200,8 @@ fediverse_creator = { handle = "zloy_linux", domain = "zlinux.ru" }
 show_previous_next_article_links = true
 invert_previous_next_article_links = true
 
+# For multilingual sites: show current language code on the language switcher.
+show_selected_language_code_in_language_switcher = false
 
 # Enable iine like buttons on all posts: https://iine.to/
 # Can be set at page or section levels, following the hierarchy: page > section > config. See: https://welpo.github.io/tabi/blog/mastering-tabi-settings/#settings-hierarchy
diff --git a/themes/tabi/sass/parts/_header.scss b/themes/tabi/sass/parts/_header.scss
index ec00420..a16bcef 100644
--- a/themes/tabi/sass/parts/_header.scss
+++ b/themes/tabi/sass/parts/_header.scss
@@ -126,6 +126,28 @@ header {
     }
 }
 
+    .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 {
     display: inline-block;
     position: relative;
diff --git a/themes/tabi/templates/partials/language_switcher.html b/themes/tabi/templates/partials/language_switcher.html
index 83cf61f..212bb98 100644
--- a/themes/tabi/templates/partials/language_switcher.html
+++ b/themes/tabi/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 -#}
diff --git a/themes/tabi/theme.toml b/themes/tabi/theme.toml
index 4ad162e..b680e1f 100644
--- a/themes/tabi/theme.toml
+++ b/themes/tabi/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"]