Become a member

2023-10-08 23:51:01 +02:00 · 2023-10-08 23:51:01 +02:00 · 420e08a73f
parent 0031883094
commit 420e08a73f
9 changed files with 104 additions and 4 deletions
--- a/assets/css/style.css
+++ b/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));
--- a/content/become-a-member/index.de.md
+++ b/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.
+---
--- a/content/become-a-member/index.en.md
+++ b/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.
+---
--- a/hugo.yaml
+++ b/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
--- a/i18n/de.toml
+++ b/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."
--- a/i18n/en.toml
+++ b/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."
--- a/layouts/_default/become-a-member.html
+++ b/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}}
--- a/layouts/partials/menu-url.html
+++ b/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 -}}
--- a/layouts/partials/nav.html
+++ b/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 }}