From 8eaf478fba7a61afa79472e46ad0383e12c29f76 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sat, 29 Jan 2022 14:17:06 +0100
Subject: [PATCH] feat: add newsletter subscription form

---
 layouts/partials/footer.html | 32 +++++++++++++++++++++++++-------
 package.json                 |  3 +++
 tailwind.config.js           |  1 +
 yarn.lock                    | 12 ++++++++++++
 4 files changed, 41 insertions(+), 7 deletions(-)

diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 27f0152..8874d25 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -1,5 +1,5 @@
-<footer class="mt-12 border-t-2 border-gray-200 py-8 md:flex text-left text-sm text-gray-800 mx-auto max-w-screen-xl">
-	<div class="w-full md:w-1/5 flex flex-col">
+<footer class="mt-12 border-t-2 border-gray-200 py-8 px-4 md:px-0 md:flex text-left text-sm text-gray-800 mx-auto max-w-screen-xl">
+	<div class="w-full md:w-2/5 flex flex-col">
 		<img src="{{ .Site.BaseURL }}images/vikunja-logo.svg" alt="{{ .Site.Title }}" class="h-8" width="109"
 			 height="32"/>
 		<p class="py-4 text-gray-600">
@@ -10,8 +10,22 @@
 		<a href="https://matrix.to/#/#vikunja:matrix.org">
 			<img src="https://img.shields.io/badge/chat-on%20matrix.org-brightgreen" alt="Chat on matrix.org"/>
 		</a>
+
+		<p class="mt-6 font-title text-base font-bold">
+			Subscribe to our newsletter
+		</p>
+		<p class="text-gray-700 mt-2">
+			We'll email you about releases and news about Vikunja.
+			Low traffic. Unsubscribe any time.
+		</p>
+		<form method="post" action="https://newsletter.kolaente.de/subscription/form" class="listmonk-form">
+			<input type="text" name="email" placeholder="E-mail" class="mt-2 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring focus:ring-primary-lighter focus:ring-opacity-50" required/>
+
+			<input id="f0bc9" type="hidden" name="l" value="f0bc9ec2-56a4-48c8-baad-7a31b137484e"/>
+
+			<input type="submit" value="Subscribe" class="mt-4 px-4 py-2 border border-transparent text-base font-medium rounded-md text-white bg-primary hover:bg-primary-darker cursor-pointer"/>
+		</form>
 	</div>
-	<div class="md:w-1/5"></div>
 	<div class="w-full md:w-1/5 mt-4 md:mt-0 flex flex-col">
 		<h3 class="font-title font-bold text-base mb-4 md:mb-6">Legal</h3>
 		<a href="/privacy" class="hover:underline pb-2">Privacy Policy</a>
@@ -20,15 +34,18 @@
 	<div class="w-full md:w-1/5 mt-4 md:mt-0 flex flex-col">
 		<h3 class="font-title font-bold text-base mb-4 md:mb-6">Support Us</h3>
 		<a href="https://www.buymeacoffee.com/kolaente" class="hover:underline pb-2 flex align-middle" target="_blank">
-			<img src="https://cdn.buymeacoffee.com/buttons/bmc-new-btn-logo.svg" alt="Buy me a coffee" class="w-3 mr-1"/>
+			<img src="https://cdn.buymeacoffee.com/buttons/bmc-new-btn-logo.svg" alt="Buy me a coffee"
+				 class="w-3 mr-1"/>
 			<span>
 				Buy Me a Coffee
 			</span>
 		</a>
 		<a href="https://github.com/sponsors/kolaente/button" class="hover:underline pb-2 flex align-middle"
 		   target="_blank">
-			<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/>
+			<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24"
+				 stroke="currentColor">
+				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+					  d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/>
 			</svg>
 			<span>
 				Sponsor on Github
@@ -37,7 +54,8 @@
 		<a href="https://opencollective.com/vikunja" class="hover:underline pb-2" target="_blank">
 			Sponsor on Opencollective
 		</a>
-		<a href="https://vikunja.cloud/stickers?utm_source=io&utm_medium=io&utm_campaign=footer" class="hover:underline pb-2">
+		<a href="https://vikunja.cloud/stickers?utm_source=io&utm_medium=io&utm_campaign=footer"
+		   class="hover:underline pb-2">
 			Buy Stickers
 		</a>
 	</div>
diff --git a/package.json b/package.json
index edadcd1..071e618 100644
--- a/package.json
+++ b/package.json
@@ -15,5 +15,8 @@
     "@tailwindcss/typography": "^0.5.0",
     "postcss": "^8.4.5",
     "tailwindcss": "^3.0.17"
+  },
+  "dependencies": {
+    "@tailwindcss/forms": "^0.4.0"
   }
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index 5bcc100..36f22cf 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -21,5 +21,6 @@ module.exports = {
   },
   plugins: [
       require('@tailwindcss/typography'),
+	  require('@tailwindcss/forms'),
   ],
 }
diff --git a/yarn.lock b/yarn.lock
index ebd6a12..7fab4e7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -44,6 +44,13 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
+"@tailwindcss/forms@^0.4.0":
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/forms/-/forms-0.4.0.tgz#a46715e347a32d216a3973eb67473bd29ae3798e"
+  integrity sha512-DeaQBx6EgEeuZPQACvC+mKneJsD8am1uiJugjgQK1+/Vt+Ai0GpFBC2T2fqnUad71WgOxyrZPE6BG1VaI6YqfQ==
+  dependencies:
+    mini-svg-data-uri "^1.2.3"
+
 "@tailwindcss/typography@^0.5.0":
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/@tailwindcss/typography/-/typography-0.5.0.tgz#47886ec46ac41e1211d24fea05301046d9b30906"
@@ -398,6 +405,11 @@ micromatch@^4.0.4:
     braces "^3.0.1"
     picomatch "^2.2.3"
 
+mini-svg-data-uri@^1.2.3:
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/mini-svg-data-uri/-/mini-svg-data-uri-1.4.3.tgz#43177b2e93766ba338931a3e2a84a3dfd3a222b8"
+  integrity sha512-gSfqpMRC8IxghvMcxzzmMnWpXAChSA+vy4cia33RgerMS8Fex95akUyQZPbxJJmeBGiGmK7n/1OpUX8ksRjIdA==
+
 minimist@^1.1.1:
   version "1.2.5"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"