Language selection & theme toggle

author: Arne Rief <riearn@proton.me> 2025-08-20 21:36:19 +0200
committer: Arne Rief <riearn@proton.me> 2025-08-20 21:36:19 +0200
commit: dac4024abcfea76f14522a84bee4b7258c37b72d (patch)
tree: 1aa3c2e0af122d5c0feb4360850476fd55d3831e /layouts
parent: f0506acd6f70da636b8fdb23439c85bbf2392b40 (diff)
12 files changed, 92 insertions, 17 deletions
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 3c4865b..99f09d9 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -3,7 +3,7 @@
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
-        <title>{{ block "title" . }}{{ if .Title }}{{ .Title }} | {{ end }}{{ site.Title }}{{ end }}</title>
+        <title>{{ block "title" . }}{{ if and (not .IsHome) .Title }}{{ .Title }} | {{ end }}{{ site.Title }}{{ end }}</title>
 
         {{- with .Description }}
             <meta name="description" content="{{ . }}">
@@ -24,13 +24,25 @@
             {{- end }}
         {{- end }}
 
+        {{- with .OutputFormats.Get "rss" }}
+            {{- printf `<link rel=%q type=%q href=%q title=%q>` .Rel .MediaType.Type .Permalink site.Title | safeHTML }}
+        {{- end }}
+
         {{- partial "head/meta.html" . }}
         {{- partial "head/seo.html" . }}
+        <!-- Prevent FOUC, default light mode -->
+        <script>
+            const storedTheme = localStorage.getItem("theme");
+            const prefDarkmode = window.matchMedia("(prefers-color-scheme: dark)").matches;
+            document.documentElement.setAttribute("data-theme", storedTheme ?? (prefDarkmode ? "dark" : "light"));
+        </script>
         {{- partialCached "head/css.html" . }}
+        {{ partialCached "head/js.html" . }}
     </head>
 
     <body class="{{ .Type | default "page" }}">
         {{ partial "header.html" . }}
+        {{ partial "navmenu.html" (dict "menuID" "main" "page" .) }}
 
         <main id="main-content" class="site__main" role="main">
             {{ block "main" . }}{{ end }}
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index a934e59..7225d09 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -1,3 +1,7 @@
 <footer class="site__footer" role="contentinfo">
     <p>&copy; {{ now.Year }} {{ site.Params.author.name }}</p>
+
+    <a href="{{ site.Home.Permalink }}index.xml" aria-label="RSS Feed" title="RSS Feed">
+        <img src="/rss.svg" class="icon icon-rss" style="max-height: 32px" alt="RSS Feed" aria-hidden="true">
+    </a>
 </footer>
diff --git a/layouts/partials/head/css.html b/layouts/partials/head/css.html
index 8e6c145..c3c6e33 100644
--- a/layouts/partials/head/css.html
+++ b/layouts/partials/head/css.html
@@ -6,5 +6,4 @@
             <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
         {{- end }}
     {{- end }}
-{{- end }}
-
+{{- end -}}
diff --git a/layouts/partials/head/js.html b/layouts/partials/head/js.html
index 6123e7f..0baf831 100644
--- a/layouts/partials/head/js.html
+++ b/layouts/partials/head/js.html
@@ -6,12 +6,11 @@
     }}
     {{- with . | js.Build $opts }}
         {{- if hugo.IsDevelopment }}
-            <script src="{{ .RelPermalink }}"></script>
+            <script defer src="{{ .RelPermalink }}"></script>
         {{- else }}
             {{- with . | fingerprint }}
-                <script src="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous"></script>
+                <script defer src="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous"></script>
             {{- end }}
         {{- end }}
     {{- end }}
-{{- end }}
-
+{{- end -}}
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 7b728a6..9195345 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -1,7 +1,12 @@
 <header class="site__header" role="banner">
     <a href="{{ site.Home.RelPermalink }}" rel="home" class="site-{{ if site.Params.logo }}logo{{ else }}title{{ end }}">
-        {{ with site.Params.logo}}{{ . }}{{ else }}{{ site.Title }}{{end}}
+        {{- with site.Params.logo }}
+        <img src="{{ . }}" alt="{{ site.Title }}" />
+        {{- else }}
+        {{ site.Title }}
+        {{- end }}
     </a>
 
-    {{ partial "navmenu.html" (dict "menuID" "main" "page" .) }}
+    {{- partial "selectTheme.html" . }}
+    {{- partial "selectLanguage.html" . }}
 </header>
diff --git a/layouts/partials/list/recent-posts.html b/layouts/partials/list/recent-posts.html
index c1075e2..d774138 100644
--- a/layouts/partials/list/recent-posts.html
+++ b/layouts/partials/list/recent-posts.html
@@ -1,5 +1,5 @@
 {{- /*
-List of Recent Posts. Accepts a dict with the following optional parameters:
+List of specified number of the most recent and published posts. Accepts a dict with the following optional parameters:
 
 @context {int} count: Number of posts to display (default: 10).
 @context {string} title: Section title (default: "Recent Articles").
@@ -11,7 +11,6 @@ List of Recent Posts. Accepts a dict with the following optional parameters:
 {{- $count := .count | default 10 -}}
 {{- $title := .title | default (lang.Translate "posts.recent" | default "Recent Articles") -}}
 {{- $showViewAll := .show_view_all | default true -}}
-
 <section class="recent-posts" aria-labelledby="recent-posts-heading">
     <header class="recent-posts__header">
         <h2 id="recent-posts-heading" class="recent-posts__title">
@@ -19,7 +18,6 @@ List of Recent Posts. Accepts a dict with the following optional parameters:
         </h2>
     </header>
 
-    {{- /* Get published 10 most recent posts */ -}}
     {{- $recentPosts := where site.RegularPages "Date" "!=" nil }}
     {{- $recentPosts = where $recentPosts ".Date" "le" now }}
     {{- $recentPosts = first $count $recentPosts }}
@@ -35,14 +33,14 @@ List of Recent Posts. Accepts a dict with the following optional parameters:
             </ul>
 
             {{- if $showViewAll }}
-                <a href="{{ with site.GetPage "/posts" }}{{ .RelPermalink }}{{ else }}/posts/{{ end }}" class="recent_posts__view-all-link">
+                <a href="{{ with site.GetPage "/posts" }}{{ .RelPermalink }}{{ else }}/posts/{{ end }}" class="recent-posts__view-all-link">
                     {{ lang.Translate "posts.view_all" | default "View all posts" }}
                 </a>
             {{- end }}
         </div>
     {{ else }}
         <div class="recent-posts__empty">
-            <p class="recent_posts__empty-message">
+            <p class="recent-posts__empty-message">
                 {{ lang.Translate "list.empty" | default "No posts in this section." }}
             </p>
         </div>
diff --git a/layouts/partials/selectLanguage.html b/layouts/partials/selectLanguage.html
new file mode 100644
index 0000000..752b605
--- /dev/null
+++ b/layouts/partials/selectLanguage.html
@@ -0,0 +1,39 @@
+{{- /*
+Selection of available languages.
+Dynamically links to corresponding page/post if a translated version exists, otherwise to homepage of that language as fallback.
+
+Note: `$activeLang` and `$allTranslationsForPage` are technically unnecessary variables, their values could be called with `$.Lang` and `$.Translations` respectively.
+These variables - together with the explicit naming of `.` context variables in other cases - were chosen for better readability and understandability of the code.
+*/ -}}
+
+{{- if gt (len site.Languages) 1 }}
+{{- $activeLang := .Lang }}
+{{- $allTranslationsForPage := .Translations }}
+    <div class="language-select" style="background-color: yellow;">
+        <ul>
+        {{- range site.Languages }}
+            {{- $currLangSlice := . }}
+            {{- if ne $currLangSlice.Lang $activeLang }}
+                {{- $targetPage := index (where site.Home.Translations "Lang" $currLangSlice.Lang) 0 }}
+                {{- $translatedPage := index (where $allTranslationsForPage "Lang" $currLangSlice.Lang) 0 }}
+                {{- if $translatedPage }}{{- $targetPage = $translatedPage }}{{- end }}
+                <li>
+                    <a
+                        href="{{ $targetPage.RelPermalink }}"
+                        hreflang="{{ $targetPage.Lang }}"
+                        aria-label="{{ $targetPage.LinkTitle }} ({{ or $targetPage.Language.LanguageName $targetPage.Lang }})"
+                    >
+                        <img
+                            src="/flags/{{ $targetPage.Lang }}.svg"
+                            class="icon icon-flag"
+                            style="max-height: 32px"
+                            alt="{{ $targetPage.LinkTitle }} ({{ or $targetPage.Language.LanguageName $targetPage.Lang }})"
+                            aria-hidden="true"
+                        />
+                    </a>
+                </li>
+            {{- end }}
+        {{- end }}
+        </ul>
+    </div>
+{{- end }}
diff --git a/layouts/partials/selectTheme.html b/layouts/partials/selectTheme.html
new file mode 100644
index 0000000..e9114cc
--- /dev/null
+++ b/layouts/partials/selectTheme.html
@@ -0,0 +1,15 @@
+<button
+    type="button"
+    id="theme-toggle"
+    class="theme-toggle"
+    aria-label="{{ lang.Translate "theme.toggle_dark" }}"
+    data-label-dark="{{ lang.Translate "theme.toggle_dark" }}"
+    data-label-light="{{ lang.Translate "theme.toggle_light" }}"
+>
+        <svg class="icon icon-moon" xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 16 16" aria-hidden="true" style="display: none;">
+            <path fill="currentColor" d="M6 .278a.768.768 0 0 1 .08.858a7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277c.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316a.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71C0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"></path>
+        </svg>
+        <svg class="icon icon-sun" xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 16 16" aria-hidden="true">
+            <path fill="currentColor" d="M8 12a4 4 0 1 0 0-8a4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"/>
+        </svg>
+</button>
diff --git a/layouts/partials/single/tags.html b/layouts/partials/single/tags.html
index e90b909..f9c8105 100644
--- a/layouts/partials/single/tags.html
+++ b/layouts/partials/single/tags.html
@@ -7,7 +7,7 @@
     <ul class="post__tags-list">
         {{- range . }}
             <li class="post__tags-item">
-            <a href="{{ .RelPermalink }}" class="post__tags-link" rel="tag">
+                <a href="{{ .RelPermalink }}" class="post__tags-link" rel="tag">
                     {{ .Title }}
                 </a>
             </li>
diff --git a/layouts/robots.txt b/layouts/robots.txt
new file mode 100644
index 0000000..fd9192c
--- /dev/null
+++ b/layouts/robots.txt
@@ -0,0 +1,4 @@
+User-agent: *
+Disallow:
+
+Sitemap: {{ site.BaseURL }}/sitemap.xml
diff --git a/layouts/tags/list.html b/layouts/tags/list.html
index d3af0e4..bfe9479 100644
--- a/layouts/tags/list.html
+++ b/layouts/tags/list.html
@@ -12,7 +12,7 @@
 
     <section class="tags-index__content" aria-label="{{ lang.Translate "tags.all" | default "All Tags" }}">
         {{- with site.Taxonomies.tags }}
-        {{ $tags := .Alphabetical }}
+            {{- $tags := .Alphabetical }}
             <ul class="tags-index__list">
                 {{- range $tags }}
                     <li class="tags-index__item">
diff --git a/layouts/tags/term.html b/layouts/tags/term.html
index e107123..1e0dba7 100644
--- a/layouts/tags/term.html
+++ b/layouts/tags/term.html
@@ -33,7 +33,7 @@
 
     <footer class="tag-page__footer">
         <nav class="tag-page__navigation" aria-label="{{ lang.Translate "tags.navigation" | default "Tag navigation" }}">
-            <a href="{{ "/tags/" | relURL }}" class="tag-page__back-link">
+            <a href="{{ .Parent.RelPermalink }}" class="tag-page__list-all-link">
                 ← {{ lang.Translate "tags.all_tags" | default "All tags" }}
             </a>
         </nav>
author	Arne Rief <riearn@proton.me>	2025-08-20 21:36:19 +0200
committer	Arne Rief <riearn@proton.me>	2025-08-20 21:36:19 +0200
commit	dac4024abcfea76f14522a84bee4b7258c37b72d (patch)
tree	1aa3c2e0af122d5c0feb4360850476fd55d3831e /layouts
parent	f0506acd6f70da636b8fdb23439c85bbf2392b40 (diff)