Improved language chooser for translated URLs

This commit is contained in:
Tobias 2023-10-08 21:56:13 +02:00
parent e560afa5b9
commit 0031883094
Signed by: tobigr
GPG Key ID: 1081A7AAB3E37791
4 changed files with 48 additions and 3 deletions

View File

@ -7,6 +7,7 @@ description: Kontaktinformationen für NewPipe e.V.
people_heading: Vertretungsberechtigte Personen people_heading: Vertretungsberechtigte Personen
permalink: ueber permalink: ueber
url: /de/ueber url: /de/ueber
url_en: /en/about
people_text: | 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. 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.
--- ---

View File

@ -5,6 +5,8 @@ draft: false
layout: about layout: about
description: A test with @tailwindcss/typography & Prose description: A test with @tailwindcss/typography & Prose
people_heading: Representative persons people_heading: Representative persons
url: /en/about
url_de: /de/ueber
people_text: | 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. 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.
--- ---

View File

@ -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}}

View File

@ -153,12 +153,23 @@
x-transition:leave-end="transform opacity-0 scale-95" 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"> 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"> <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) }} {{ 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" <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> </a>
{{ end }} {{- end }}
</div> </div>
</div> </div>
</div> </div>