Add newsletter (#51)

Author: joladev

lib/jola_dev_web/components/layouts/app.html.heex

@@ -4,6 +4,7 @@
       <:link href="/" active={@conn.request_path == "/"}>Home</:link>
       <:link href="/about" active={@conn.request_path == "/about"}>About</:link>
       <:link href="/posts" active={String.starts_with?(@conn.request_path, "/posts")}>Blog</:link>
+      <:link href="/newsletter" active={@conn.request_path == "/newsletter"}>Newsletter</:link>
       <:link href="/projects" active={@conn.request_path == "/projects"}>Projects</:link>
       <:link href="/talks" active={@conn.request_path == "/talks"}>Talks</:link>
     </.navigation>

lib/jola_dev_web/controllers/page_controller.ex

@@ -36,4 +36,12 @@ defmodule JolaDevWeb.PageController do
         "Conference talks and presentations by Johanna Larsson on Elixir, distributed systems, and engineering leadership."
     )
   end
+
+  def newsletter(conn, _params) do
+    render(conn, :newsletter,
+      page_title: "Newsletter | jola.dev",
+      meta_description:
+        "Newsletter by Johanna Larsson with content from the blog, delivered monthly."
+    )
+  end
 end

lib/jola_dev_web/controllers/page_html/newsletter.html.heex

@@ -0,0 +1,43 @@
+<section class="py-16">
+  <div class="max-w-prose mx-auto px-6 md:px-8">
+    <header class="mb-12 text-center">
+      <.heading level={1}>Newsletter</.heading>
+    </header>
+
+    <div class="space-y-6">
+      <.text variant={:lead} class="text-justify">
+        Get a monthly newsletter with content from the blog, delivered to your inbox.
+      </.text>
+    </div>
+
+    <div class="space-y-6">
+      <form
+        action="https://buttondown.com/api/emails/embed-subscribe/joladev"
+        method="post"
+        class="embeddable-buttondown-form flex flex-col gap-2 w-[300px] mx-auto mt-16"
+      >
+        <label for="bd-email">Enter your email</label>
+        <input
+          type="email"
+          name="email"
+          id="bd-email"
+          class="h-10 rounded-md border border-border"
+        />
+        <input
+          type="submit"
+          value="Subscribe"
+          class="bg-accent text-white px-4 py-2 rounded-md cursor-pointer"
+        />
+        <p class="mx-auto pt-4">
+          <.link
+            href="https://buttondown.com/refer/joladev"
+            target="_blank"
+            class="underline text-xs"
+          >
+            Powered by Buttondown.
+          </.link>
+        </p>
+      </form>
+    </div>
+  </div>
+</section>

lib/jola_dev_web/router.ex

@@ -42,6 +42,7 @@ defmodule JolaDevWeb.Router do
     get "/posts", BlogController, :index
     get "/posts/tag/:tag", BlogController, :tag
     get "/posts/:id", BlogController, :show
+    get "/newsletter", PageController, :newsletter
   end
 
   scope "/", JolaDevWeb do