[rulkc] [PATCH v2 6/7] themes: landau-hacker: Add languadge switcher

[Nikita Shubin <nikita.shubin@maquefel•me>]

Add languadge switcher to support switching between translations.

Signed-off-by: Nikita Shubin <nikita.shubin@maquefel•me>
---
 themes/landau-hacker/layouts/_default/baseof.html  | 15 ++++--
 .../layouts/partials/language-switcher.html        | 36 +++++++++++++
 themes/landau-hacker/static/css/hacker.css         | 62 +++++++++++++++++++++-
 3 files changed, 107 insertions(+), 6 deletions(-)

diff --git a/themes/landau-hacker/layouts/_default/baseof.html b/themes/landau-hacker/layouts/_default/baseof.html
index 57080b5..1fa8cfb 100644
--- a/themes/landau-hacker/layouts/_default/baseof.html
+++ b/themes/landau-hacker/layouts/_default/baseof.html
@@ -20,11 +20,16 @@
 </head>
 <body>
   <header>
-    <div class="container">
-      <a id="a-title" href="{{ "/" | relURL }}">
-        <h1>{{ site.Title }}</h1>
-      </a>
-      <h2>{{ site.Params.description }}</h2>
+    <div class="container header-flex">
+      <div class="header-left">
+        <a id="a-title" href="{{ "/" | relURL }}">
+          <h1>{{ site.Title }}</h1>
+        </a>
+        <h2>{{ site.Params.description }}</h2>
+      </div>
+      <div class="header-right">
+        {{ partial "language-switcher" . }}
+      </div>
     </div>
   </header>
 
diff --git a/themes/landau-hacker/layouts/partials/language-switcher.html b/themes/landau-hacker/layouts/partials/language-switcher.html
new file mode 100644
index 0000000..4c73ff5
--- /dev/null
+++ b/themes/landau-hacker/layouts/partials/language-switcher.html
@@ -0,0 +1,36 @@
+<div class="language-switcher">
+  {{ range .Site.Languages }}
+    {{ $lang := .Lang }}
+    {{ $isCurrent := eq $lang $.Site.Language.Lang }}
+    {{ $flag := "" }}
+    {{ if eq $lang "ru" }}{{ $flag = "🇷🇺" }}{{ else if eq $lang "en" }}{{ $flag = "🇬🇧" }}{{ else }}{{ $flag = "🌐" }}{{ end }}
+
+    {{ $translation := false }}
+    {{ if $.IsTranslated }}
+      {{ range $.Translations }}
+        {{ if eq .Language.Lang $lang }}
+          {{ $translation = . }}
+        {{ end }}
+      {{ end }}
+    {{ end }}
+
+    {{ if $isCurrent }}
+      <span class="active" hreflang="{{ $lang }}" lang="{{ $lang }}">
+        {{ $flag }}
+        <span class="code">{{ .LanguageName }}</span>
+      </span>
+    {{ else }}
+      {{ if $translation }}
+        <a href="{{ $translation.Permalink }}" hreflang="{{ $lang }}" lang="{{ $lang }}">
+          {{ $flag }}
+          <span class="code">{{ .LanguageName }}</span>
+        </a>
+      {{ else }}
+        <a href="{{ relLangURL "" }}" hreflang="{{ $lang }}" lang="{{ $lang }}">
+          {{ $flag }}
+          <span class="code">{{ .LanguageName }}</span>
+        </a>
+      {{ end }}
+    {{ end }}
+  {{ end }}
+</div>
\ No newline at end of file
diff --git a/themes/landau-hacker/static/css/hacker.css b/themes/landau-hacker/static/css/hacker.css
index 736bb29..400f7d1 100644
--- a/themes/landau-hacker/static/css/hacker.css
+++ b/themes/landau-hacker/static/css/hacker.css
@@ -94,6 +94,66 @@ header h2 {
   margin: 0;
 }
 
+/* Language switcher (LANDAU addition); not part of upstream pages-themes/hacker)  */
+.language-switcher {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  justify-content: flex-end;
+  font-size: 0.9rem;
+  margin-top: 5px;
+}
+
+.language-switcher a,
+.language-switcher .active {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  padding: 0.2rem 0.5rem;
+  border-radius: 4px;
+  text-decoration: none;
+  transition: background 0.2s, opacity 0.2s;
+}
+
+.language-switcher a {
+  color: #b8b8b8;
+  background: transparent;
+}
+
+.language-switcher a:hover {
+  background: rgba(255, 255, 255, 0.1);
+  color: #fff;
+}
+
+.language-switcher .active {
+  color: #b5e853;
+  background: rgba(181, 232, 83, 0.1);
+  cursor: default;
+  font-weight: bold;
+}
+
+.language-switcher .lang-code {
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+@media (max-width: 600px) {
+  .language-switcher {
+    justify-content: center;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+  }
+  .language-switcher a,
+  .language-switcher .active {
+    padding: 0.1rem 0.3rem;
+    font-size: 0.8rem;
+  }
+  .language-switcher .lang-code {
+    display: none;
+  }
+}
+
 /* Main Content */
 
 #main_content {
@@ -287,4 +347,4 @@ footer .version {
 .highlight .nt, .highlight .nn, .highlight .nc, .highlight .no            { color: #f4bf75; }
 .highlight .na                                                            { color: #6a9fb5; }
 .highlight .m, .highlight .mf, .highlight .mh, .highlight .mi, .highlight .il, .highlight .mo, .highlight .mb, .highlight .mx { color: #90a959; }
-.highlight .ss                                                            { color: #90a959; }
+.highlight .ss                                                            { color: #90a959; }
\ No newline at end of file

-- 
2.54.0


_______________________________________________
rulkc mailing list
rulkc@linuxtesting.org
http://linuxtesting.org/cgi-bin/mailman/listinfo/rulkc