Improved language chooser for translated URLs

content/about/index.de.md

@@ -7,6 +7,7 @@ description: Kontaktinformationen für NewPipe e.V.
 people_heading: Vertretungsberechtigte Personen
 permalink: ueber
 url: /de/ueber
+url_en: /en/about
 people_text: |
     Dies sind die Personen, die offiziell für das NewPipe-Projekt und den NewPipe e.V. Verein verantwortlich sind. Wenn du uns kontaktieren möchtest, nutze bitte das untenstehende Formular.
 ---

content/about/index.en.md

@@ -5,6 +5,8 @@ draft: false
 layout: about
 description: A test with @tailwindcss/typography & Prose
 people_heading: Representative persons
+url: /en/about
+url_de: /de/ueber
 people_text: |
   These are the people who are officially responsible for the NewPipe project and the NewPipe e.V. association. If you want to contact us, please use the form below.
 ---

layouts/_default/about.html

@@ -0,0 +1,31 @@
+{{define "main"}}
+<main>
+  <header class="mb-4 bg-primary-600">
+    <span class="py-96">
+      <h1 class="py-16 text-5xl font-black text-center text-white">
+        {{ .Title }}
+      </h1>
+    </span>
+  </header>
+  <div class="max-w-4xl px-6 pt-6 pb-16 mx-auto prose dark:prose-invert dark:text-white">
+    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
+    <h2>{{ .Params.people_heading }}</h2>
+    <p>{{ .Params.people_text }}</p>
+    <div class="container flex flex-wrap justify-center">
+      {{range .Site.Data.people }}
+      <div class="max-w-sm w-1/2 md:w-1/3 px-2">
+        <div class="bg-white relative shadow-lg hover:shadow-xl transition duration-500 rounded-lg">
+          <img class="rounded-t-lg" src="https://images.unsplash.com/photo-1583511655857-d19b40a7a54e?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1049&q=80" alt="" />
+          <div class="py-6 px-8 rounded-lg bg-white">
+            <h1 class="text-gray-700 font-bold text-2xl mb-3 hover:text-gray-900 hover:cursor-pointer">{{ .name }}</h1>
+            <p class="text-gray-700 tracking-wide">{{ T .role }}</p>
+            <p class="text-gray-700 tracking-wide">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
+          </div>
+        </div>
+      </div>
+      {{end}}
+    </div>
+
+  </div>
+</main>
+{{end}}

layouts/partials/nav.html

@@ -153,12 +153,23 @@
                      x-transition:leave-end="transform opacity-0 scale-95"
                      class="absolute right-0 z-30 w-full mt-2 origin-top-right rounded-md shadow-lg md:w-48">
                     <div class="px-2 py-2 text-primary-900 bg-white rounded-md shadow">
-                        {{$currentUrl := trim .Page.RelPermalink "/"}}
+                        {{- $currentURL := trim .Page.RelPermalink "/" -}}
                         {{ range (.Site.Languages) }}
                         <a class="block px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg md:mt-0 hover:text-white focus:text-white hover:bg-primary-600 focus:bg-primary-600 focus:outline-none focus:shadow-outline"
-                           href="{{ replace $currentUrl $.Site.Language.Lang .Lang | relURL }}">{{- .LanguageName -}}
+                               {{- $url := "" -}}
+                               {{- if eq .Lang $.Site.Language.Lang -}}
+                                    {{ $url = "." -}}
+                               {{- else if isset $.Params "url_de" -}}
+                                    {{- $url = $.Params.url_de -}}
+                               {{- else if isset $.Params "url_en" -}}
+                                    {{- $url = $.Params.url_en -}}
+                               {{- else -}}
+                                    {{- $url = relURL (replace $currentURL $.Site.Language.Lang .Lang 1) -}}
+                               {{- end }}
+                           href="{{- $url | safeURL -}}">
+                            {{ .LanguageName }}
                         </a>
-                        {{ end }}
+                        {{- end }}
                     </div>
                 </div>
             </div>