Become a member

assets/css/style.css

@@ -2590,6 +2590,10 @@ video {
   grid-column: span 6 / span 6;
 }
 
+.m-2 {
+  margin: 0.5rem;
+}
+
 .-mx-5 {
   margin-left: -1.25rem;
   margin-right: -1.25rem;
@@ -2656,6 +2660,10 @@ video {
   margin-bottom: 2rem;
 }
 
+.me-1 {
+  margin-inline-end: 0.25rem;
+}
+
 .ml-1 {
   margin-left: 0.25rem;
 }
@@ -4128,6 +4136,11 @@ EmojiSymbols;
   background-color: rgb(230 146 143 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-primary-500:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(205 50 46 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-primary-600:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(159 39 36 / var(--tw-bg-opacity));
@@ -4182,6 +4195,11 @@ EmojiSymbols;
   border-color: transparent;
 }
 
+.focus\:bg-primary-500:focus {
+  --tw-bg-opacity: 1;
+  background-color: rgb(205 50 46 / var(--tw-bg-opacity));
+}
+
 .focus\:bg-primary-600:focus {
   --tw-bg-opacity: 1;
   background-color: rgb(159 39 36 / var(--tw-bg-opacity));

content/become-a-member/index.de.md

@@ -0,0 +1,12 @@
+---
+title: Mitglied werden
+date: 2023-10-01T03:10:36.000Z
+draft: false
+layout: become-a-member
+description: A test with @tailwindcss/typography & Prose
+people_heading: Representative persons
+url: /de/mitglied-werden
+url_en: /en/become-a-member
+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.
+---

content/become-a-member/index.en.md

@@ -0,0 +1,12 @@
+---
+title: Become A Member
+date: 2023-10-01T03:10:36.000Z
+draft: false
+layout: become-a-member
+description: A test with @tailwindcss/typography & Prose
+people_heading: Representative persons
+url: /en/become-a-member
+url_de: /de/mitglied-werden
+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.
+---

hugo.yaml

@@ -134,7 +134,10 @@ menu:
       url: /about/
       weight: 20
     - identifier: become-a-member
-      url: /contact/
+      url: /become-a-member/
+      params:
+        url_en: /en/become-a-member/
+        url_de: /de/mitglied-werden/
       weight: 40
   about:
     - identifier: foundation

i18n/de.toml

@@ -10,6 +10,11 @@ appearance = "Aussehen"
 comments = "Kommentare"
 analytics = "Analytik"
 basicInfo = "Dies sind die Grundinformationen über NewPipe e.V."
+learn_more = "mehr erfahren"
+
+forename = "Vorname"
+surname = "Nachname"
+email = "E-Mail"
 
 moto = "Supporting privacy and open source software"
 index_description = "NewPipe e.V. ist eine gemeinnützige Organisation, die sich für die Förderung von Datenschutz und Open-Source-Software einsetzt. Wir sind die Organisation hinter NewPipe, einer freien Medien-App für Android."

i18n/en.toml

@@ -10,6 +10,11 @@ appearance = "Appearance"
 comments = "Comments"
 analytics = "Analytics"
 basicInfo = "This is basic information about NewPipe e.V."
+learn_more = "Learn more"
+
+forename = "Forename"
+surname = "Surname"
+email = "Email"
 
 moto = "Supporting privacy and open source software"
 index_description = "NewPipe e.V. is a non-profit organization that aims to empower users to take back control of their data and to protect their privacy when using Android devices."

layouts/_default/become-a-member.html

@@ -0,0 +1,30 @@
+{{define "main"}}
+<!-- @format -->
+
+<section class="lg:pb-24 mt-12">
+  <div class="max-w-screen-md px-4 mx-auto">
+    <p class="mb-8 font-light text-center text-gray-500 lg:mb-16 dark:text-gray-400 sm:text-xl">Got a technical issue? Want to send feedback about a beta feature? Need details about our Business plan? Let us know.</p>
+    <form name="contact" action="https://formsubmit.co/your@email.com" method="POST" class="space-y-8">
+      <div class="my-4">
+        <label for="forename" class="block mb-2 font-medium text-gray-900 text-md dark:text-gray-300"><strong>{{ T "forename" }}:</strong></label>
+        <input type="text" name="forename" id="forename" class="block w-full p-3 text-gray-900 border border-gray-300 rounded-lg shadow-sm text-md bg-gray-50 focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-indigo-500 dark:focus:border-indigo-500 dark:shadow-sm-light" placeholder="Let us know how we can help you" required>
+      </div>
+      <div class="my-4">
+        <label for="surname" class="block mb-2 font-medium text-gray-900 text-md dark:text-gray-300"><strong>{{ T "surname" }}:</strong></label>
+        <input type="text" name="surname" id="surname" class="block w-full p-3 text-gray-900 border border-gray-300 rounded-lg shadow-sm text-md bg-gray-50 focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-indigo-500 dark:focus:border-indigo-500 dark:shadow-sm-light" placeholder="Let us know how we can help you" required>
+      </div>
+      <div class="my-4">
+        <label for="email" class="block mb-2 font-medium text-gray-900 text-md dark:text-gray-300"><strong>{{ T "email" }}:</strong></label>
+        <input type="email" name="email" id="email" class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-md rounded-lg focus:ring-indigo-500 focus:border-indigo-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-indigo-500 dark:focus:border-indigo-500 dark:shadow-sm-light" placeholder="name@example.com" required>
+      </div>
+      <div class="my-4 sm:col-span-2">
+        <label for="message" class="block mb-2 font-medium text-gray-900 text-md dark:text-gray-400"><strong>Your message:</strong></label>
+        <textarea id="message" name="message" rows="6" class="block p-2.5 w-full text-md text-gray-900 bg-gray-50 rounded-lg shadow-sm border border-gray-300 focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-indigo-500 dark:focus:border-indigo-500" placeholder="Leave a comment..."></textarea>
+      </div>
+      <div class="mt-6 lg:pb-16">
+        <button type="submit" class="px-5 py-3 font-bold text-center text-white bg-indigo-600 rounded-lg text-md sm:w-fit hover:bg-indigo-800 focus:ring-4 focus:outline-none focus:ring-indigo-300 dark:bg-indigo-600 dark:hover:bg-indigo-700 dark:focus:ring-indigo-800">Send Message</button>
+      </div>
+    </form>
+  </div>
+</section>
+{{end}}

layouts/partials/menu-url.html

@@ -0,0 +1,13 @@
+{{- if eq .lang "en" -}}
+  {{- with .menu.url_en -}}
+    {{- relURL . -}}
+  {{- else -}}
+    {{- .menu.URL | absLangURL -}}
+  {{- end -}}
+{{- else -}}
+  {{- with .menu.url_de -}}
+    {{- relURL . -}}
+  {{- else -}}
+    {{- .menu.URL | absLangURL -}}
+  {{- end -}}
+{{- end -}}

layouts/partials/nav.html

@@ -24,6 +24,7 @@
         <nav :class="{'flex': open, 'hidden': !open}"
              class="flex-col flex-grow hidden pb-4 md:pb-0 md:flex md:justify-end md:flex-row">
             {{ range site.Menus.main }}
+            {{ $menuCtx := (dict "lang" $.Site.Language.Lang "menu" .Params) }}
             {{ if (eq "complexdropdown" .Pre) }}
             <div @click.away="open = false" class="relative" x-data="{ open: false }">
                 <button @click="open = !open"
@@ -46,8 +47,9 @@
                     <div class="px-2 pt-2 pb-4 bg-white rounded-md shadow-lg text-zinc-900">
                         <div class="grid grid-cols-1 gap-4">
                             {{ range (index site.Menus .Identifier) }}
+                            {{ printf "%#v" .Params | safeHTML }}
                             <a class="flex items-start p-2 bg-transparent rounded-lg group row hover:text-white focus:text-white hover:bg-primary-600 focus:bg-primary-700 focus:outline-none focus:shadow-outline"
-                               href="{{ .URL | absLangURL }}">
+                               href="{{ partial "menu-url.html" $menuCtx }}">
                                 <div class="p-3 text-white bg-primary-600 rounded-lg group-hover:bg-gray-900">
                                     {{ if (eq .Pre "stars") }}
                                     <svg fill="none" stroke="currentColor" stroke-linecap="round"
@@ -109,7 +111,7 @@
                     <div class="px-2 py-2 text-primary-900 bg-white rounded-md shadow">
                         {{ range (index site.Menus .Identifier) }}
                         <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="{{ .URL | absLangURL }}">{{- or (T .Identifier) .Name | safeHTML -}}
+                           href="{{ partial "menu-url.html" $menuCtx }}">{{- or (T .Identifier) .Name | safeHTML -}}
                         </a>
                         {{ end }}
                     </div>
@@ -117,7 +119,7 @@
             </div>
             {{ else }}
             <a class="px-4 py-2 mt-2 text-sm font-semibold rounded-lg md:mt-0 md:ml-4 hover:text-white focus:text-white hover:bg-primary-600 focus:bg-primary-700 focus:outline-none focus:shadow-outline"
-                href="{{ .URL | absLangURL }}" title="{{ .Title | default .Name }}">
+                href="{{ partial "menu-url.html" $menuCtx }}" title="{{ .Title | default .Name }}">
                 {{ or (T .Identifier) .Name | safeHTML }}
             </a>
             {{ end }}