From 0031883094072237cf33587e3d069a5482008450 Mon Sep 17 00:00:00 2001
From: Tobias <tobigr@mail.de>
Date: Sun, 8 Oct 2023 21:56:13 +0200
Subject: [PATCH] Improved language chooser for translated URLs

---
 content/about/index.de.md   |  1 +
 content/about/index.en.md   |  2 ++
 layouts/_default/about.html | 31 +++++++++++++++++++++++++++++++
 layouts/partials/nav.html   | 17 ++++++++++++++---
 4 files changed, 48 insertions(+), 3 deletions(-)
 create mode 100644 layouts/_default/about.html

diff --git a/content/about/index.de.md b/content/about/index.de.md
index 9149b98..b445341 100644
--- a/content/about/index.de.md
+++ b/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.
 ---
diff --git a/content/about/index.en.md b/content/about/index.en.md
index 3ef7f6c..542aab9 100644
--- a/content/about/index.en.md
+++ b/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.
 ---
diff --git a/layouts/_default/about.html b/layouts/_default/about.html
new file mode 100644
index 0000000..ac2e715
--- /dev/null
+++ b/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}}
\ No newline at end of file
diff --git a/layouts/partials/nav.html b/layouts/partials/nav.html
index 3bc19e9..1ae7e3a 100644
--- a/layouts/partials/nav.html
+++ b/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>