From f2246b43035535a7718d5da2f0cbac36d3f06c13 Mon Sep 17 00:00:00 2001
From: Ian Andwati <andwatiian@gmail.com>
Date: Sun, 27 Aug 2023 14:55:00 +0300
Subject: [PATCH] Added newsletter functionality

---
 content/newsletter/_index.md |  3 ++
 sass/site.scss               | 55 +++++++++++++++++++++++++++---------
 templates/footer.html        | 16 ++++++++++-
 templates/subscription.html  | 30 ++++++++++++++++++++
 4 files changed, 90 insertions(+), 14 deletions(-)
 create mode 100644 content/newsletter/_index.md
 create mode 100644 templates/subscription.html

diff --git a/content/newsletter/_index.md b/content/newsletter/_index.md
new file mode 100644
index 0000000..036c5e1
--- /dev/null
+++ b/content/newsletter/_index.md
@@ -0,0 +1,3 @@
++++
+template = "subscription.html"
++++
diff --git a/sass/site.scss b/sass/site.scss
index 6e6ccce..a7619c5 100644
--- a/sass/site.scss
+++ b/sass/site.scss
@@ -44,8 +44,10 @@ body {
 }
 
 body {
-  display: flex; /* Required for sticky footer. */
-  flex-direction: column; /* Required for sticky footer. */
+  display: flex;
+  /* Required for sticky footer. */
+  flex-direction: column;
+  /* Required for sticky footer. */
   margin: 0;
   line-height: var(--default-line-height);
   font-size: var(--default-font-size);
@@ -56,7 +58,8 @@ body {
 }
 
 main {
-  flex: 1 0 auto; /* Required for sticky footer. */
+  flex: 1 0 auto;
+  /* Required for sticky footer. */
 }
 
 /* FIXME: For reasons that utterly bewilder me, an <article> with this id needs
@@ -72,14 +75,15 @@ main {
 }
 
 header {
-  overflow: hidden; /* FIXME: This WILL cut off titles that are too long! */
+  overflow: hidden;
+  /* FIXME: This WILL cut off titles that are too long! */
   margin-top: 1.4em;
   margin-bottom: 1.4em;
   margin-left: 1em;
   margin-right: 1em;
 }
 
-header > h1 {
+header>h1 {
   text-align: center;
   font-size: var(--header-font-size);
   font-family: var(--default-sans-font);
@@ -130,10 +134,32 @@ a {
   text-decoration: none;
 }
 
+/* ---- Button down form --------------------------------------------------------*/
+.embeddable-buttondown-form {
+  display: block;
+}
+
+input[type="submit"] {
+  -webkit-appearance: none;
+  border-radius: 3px;
+  background-color: var(--primary-accent-color);
+  border: 1px solid var(--color-primary);
+  color: #ffff;
+  font-weight: 400;
+  padding: 0.5em 1em;
+}
+
+input[type="email"] {
+  border: 1px solid var(--color-primary);
+  font-weight: 400;
+  padding: 0.5em 1em;
+  border-radius: 5px;
+}
+
 /* ---- Anchor links --------------------------------------------------------*/
 
 /* Add a # to the left of a subheading when it references an internal link... */
-:where(h2, h3, h4, h5, h6) > a[href^="#"]::before {
+:where(h2, h3, h4, h5, h6)>a[href^="#"]::before {
   content: "#";
   display: inline-block;
   width: 1.2rem;
@@ -142,12 +168,12 @@ a {
 }
 
 /* ... but only display the internal anchor link when hovered over. */
-:where(h2, h3, h4, h5, h6):hover > a[href^="#"]::before {
+:where(h2, h3, h4, h5, h6):hover>a[href^="#"]::before {
   opacity: 1;
 }
 
 /* When internal links are linked directly, display with the accent color. */
-:where(h2, h3, h4, h5, h6):target > a[href^="#"]::before {
+:where(h2, h3, h4, h5, h6):target>a[href^="#"]::before {
   opacity: 1;
   color: var(--primary-accent-color);
 }
@@ -220,7 +246,8 @@ footer {
           in a code snippet. */
   background-color: var(--code-background-color);
   padding: 1.4em;
-  flex-shrink: 0; /* Required for sticky footer. */
+  flex-shrink: 0;
+  /* Required for sticky footer. */
 }
 
 footer a {
@@ -228,7 +255,7 @@ footer a {
 }
 
 /* Give footer nav links some breathing room. */
-footer > nav > a {
+footer>nav>a {
   // margin: 0 1.4em;
   margin: 0 0.4em;
 }
@@ -288,7 +315,7 @@ code {
 
 /* Without this the <code> tag gains a little padding that offsets text by like
    2 pixels. Let's *not* do that. */
-pre > code {
+pre>code {
   padding: 0;
   background-color: var(--code-background-color);
   // Code inside a pre block doesn't need rounded borders.
@@ -301,6 +328,7 @@ pre > code {
   :root {
     --default-font-size: 17px;
   }
+
   /* Above this size, increase the header margins. Smaller sizes benefit from
           extra breathing room in the title. */
   header {
@@ -331,8 +359,9 @@ pre > code {
   :root {
     --default-font-size: 21px;
   }
+
   /* On larger devices, give the anchor link some more space. */
-  :where(h2, h3, h4, h5, h6) > a[href^="#"]::before {
+  :where(h2, h3, h4, h5, h6)>a[href^="#"]::before {
     width: 1.8rem;
     margin-left: -1.8rem;
   }
@@ -342,4 +371,4 @@ pre > code {
   :root {
     --default-font-size: 22px;
   }
-}
+}
\ No newline at end of file
diff --git a/templates/footer.html b/templates/footer.html
index ce19d81..eba472b 100644
--- a/templates/footer.html
+++ b/templates/footer.html
@@ -10,6 +10,19 @@
         ⬡
         <a href="/contact">Contact</a>
     </nav>
+    <form action="https://buttondown.email/api/emails/embed-subscribe/andwati"
+          method="post"
+          target="popupwindow"
+          onsubmit="window.open('https://buttondown.email/andwati','popupwindow')"
+          class="embeddable-buttondown-form">
+        <input type="email"
+               name="email"
+               id="bd-email"
+               placeholder="Enter your email" />
+        <input type="hidden" value="1" name="embed" />
+        <input type="hidden" name="tag" value="via-footer" />
+        <input type="submit" value="Sign up" />
+    </form>
     <p>
         © 2022 -
         {{ now() | date(format="%Y") }}
@@ -18,4 +31,5 @@
         <a href="https://github.com/andwati/andwati.com">Source</a>
         ⬡
         <a href="/rss.xml">Feed</a>
-    </footer>
+    </p>
+</footer>
diff --git a/templates/subscription.html b/templates/subscription.html
new file mode 100644
index 0000000..428066c
--- /dev/null
+++ b/templates/subscription.html
@@ -0,0 +1,30 @@
+{% extends "index.html" %}
+{% block meta %}
+    <meta name="description" content="{{ section.description }}" />
+    <meta property="og:site_name" content="andwati.com" />
+    <meta property="og:locale" content="en-us" />
+    <meta property="og:url" content="{{ section.permalink }}" />
+    <meta property="og:title" content="{{ section.title }}" />
+    <meta property="og:description" content="{{ section.description }}" />
+    <meta property="og:type" content="profile" />
+    <meta property="og:image" content="https://andwati.com/self.png" />
+    <meta property="twitter:card" content="summary" />
+    <meta property="twitter:site" content="@andwati_" />
+    <meta property="twitter:title" content="{{ section.title }}" />
+    <meta property="twitter:description" content="{{ section.description }}" />
+    <meta property="twitter:image" content="https://andwati.com/self.png" />
+{% endblock meta %}
+{% block content %}
+    <main id="content">
+        <header>
+            <h1>{{ section.title }}</h1>
+        </header>
+        <h1>Thank You</h1>
+        <p>
+            It's great to have you on board. Check your email to confirm your subscription.
+            <br />
+            Have a nice day!
+        </p>
+    </main>
+    {% include "footer.html" %}
+{% endblock content %}