Standardize newsletters (#322)

andreilgeorgescu · wkenned1 · web-flow · commit 69c96ee7602a · 2025-04-14T16:14:42.000+03:00
* Adjust and comment out newsletter code in use

* Fix commented out code

* Add astro action for newsletter

* Modify newslettersection to use the action and have cleaned up logic

* Uncomment NewsletterSection in ArticleLayout

* Complete newsletter action arguments

* Connect action to cf worker

* Hide newsletter form in ArticleLayout

* Move from actions to inline and fix up minor issues

---------

Co-authored-by: wkenned1 &lt;wkenned1@binghamton.edu&gt;
diff --git a/src/components/AuthorWide.astro b/src/components/AuthorWide.astro
@@ -30,7 +30,7 @@ const { author, loading = "lazy" } = Astro.props,
     : undefined;
 ---
 
-<div class="my-8">
+<div class="mt-8 md:mt-12">
   <AuthorWideHelper
     authorId={author.id}
     {biography}
diff --git a/src/components/NewsletterForm.astro b/src/components/NewsletterForm.astro
@@ -40,11 +40,6 @@
           <div id="mce-error-response" style={`display: "none"`}></div>
           <div id="mce-success-response" style={`display: "none"`}></div>
         </div>
-        <script
-          is:inline
-          type="text/javascript"
-          src="//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"
-          defer></script>
       </form>
     </div>
   </div>
diff --git a/src/components/NewsletterSection.astro b/src/components/NewsletterSection.astro
@@ -0,0 +1,158 @@
+---
+interface Props {
+  stacked?: boolean;
+  title?: string;
+}
+
+const { stacked = false, title } = Astro.props;
+---
+
+{
+  stacked ? (
+    <div class="bg-bkg py-8 md:py-0">
+      <div class="mx-auto max-w-7xl px-6">
+        {title && (
+          <h2 class="max-w-xl text-balance text-xl font-semibold tracking-tight text-content-1 sm:text-2xl">
+            {title}
+          </h2>
+        )}
+        <form id="newsletter-form" class="w-full max-w-md pt-2 lg:col-span-5">
+          <div class="flex gap-x-4">
+            <label for="email" class="sr-only">
+              {" "}
+              Email address{" "}
+            </label>
+            <input
+              id="email"
+              name="email"
+              type="email"
+              autocomplete="email"
+              required
+              class="min-w-0 flex-auto rounded-md bg-white px-3.5 py-2 text-base text-black placeholder-black outline outline-1 -outline-offset-1 outline-gray-300 placeholder:text-black focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6"
+              placeholder="Enter your email"
+            />
+            <button
+              type="submit"
+              class="flex-none rounded-md bg-cta px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-accent-1 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+            >
+              Subscribe
+            </button>
+          </div>
+          <p class="mt-4 text-sm/6 text-content-1">
+            This site is built on trust, and your data is safe. Check out the{" "}
+            <a href="/policies/privacy" class="font-semibold">
+              privacy&nbsp;policy
+            </a>
+            .
+          </p>
+        </form>
+        <p
+          id="confirmation-message"
+          class="mt-4 hidden text-sm/6 text-green-200"
+        >
+          Thank you for subscribing! Check your email for confirmation.
+        </p>
+      </div>
+    </div>
+  ) : (
+    <div class="bg-bkg py-8 sm:py-12 lg:py-16">
+      <div class="mx-auto grid max-w-7xl grid-cols-1 gap-10 px-6 lg:grid-cols-12 lg:gap-8 lg:px-8">
+        <h2 class="max-w-xl text-balance text-3xl font-semibold tracking-tight text-content-1 sm:text-4xl lg:col-span-7">
+          Like what you see? Keep learning by subscribing to the newsletter!
+        </h2>
+        <form
+          id="newsletter-form"
+          class="w-full max-w-md lg:col-span-5 lg:pt-2"
+        >
+          <div class="flex gap-x-4">
+            <label for="email" class="sr-only">
+              {" "}
+              Email address{" "}
+            </label>
+            <input
+              id="email"
+              name="email"
+              type="email"
+              autocomplete="email"
+              required
+              class="min-w-0 flex-auto rounded-md bg-white px-3.5 py-2 text-base text-black placeholder-black outline outline-1 -outline-offset-1 outline-gray-300 placeholder:text-black focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6"
+              placeholder="Enter your email"
+            />
+            <button
+              type="submit"
+              class="flex-none rounded-md bg-cta px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-accent-1 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+            >
+              Subscribe
+            </button>
+          </div>
+          <p class="mt-4 text-sm/6 text-content-1">
+            This site is built on trust, and your data is safe. Check out the{" "}
+            <a href="/policies/privacy" class="font-semibold">
+              privacy&nbsp;policy
+            </a>
+            .
+          </p>
+        </form>
+        <p
+          id="confirmation-message"
+          class="mt-4 hidden text-sm/6 text-green-200"
+        >
+          Thank you for subscribing! Check your email for confirmation.
+        </p>
+      </div>
+    </div>
+  )
+}
+
+<script>
+  import { z } from "astro/zod";
+
+  const subscribeToNewsletterSchema = z.object({
+      email: z.string().email(),
+    }),
+    subscribeToNewsletter = async (email: string) => {
+      const url = "https://rtjvm-mailerlite-worker.andrei-023.workers.dev",
+        route = "/",
+        body = JSON.stringify({
+          email,
+        }),
+        response = await fetch(url + route, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            Accept: "application/json",
+          },
+          body,
+        });
+
+      if (!response.ok) {
+        throw new Error(
+          "Failed to subscribe to the newsletter. Try again later.",
+        );
+      }
+
+      return;
+    };
+
+  document.addEventListener("DOMContentLoaded", () => {
+    const form: HTMLFormElement = document.querySelector("#newsletter-form")!,
+      confirmationMessage = document.querySelector("#confirmation-message")!;
+
+    form?.addEventListener("submit", async (event) => {
+      event.preventDefault();
+      const formData = new FormData(form);
+
+      const { email } = subscribeToNewsletterSchema.parse({
+        email: formData.get("email"),
+      });
+
+      try {
+        await subscribeToNewsletter(email);
+        form.style.display = "none";
+        confirmationMessage.classList.remove("hidden");
+      } catch (_) {
+        alert("Failed to subscribe to the newsletter. Please try again later.");
+      }
+    });
+  });
+</script>
diff --git a/src/layouts/BaseLayout/BaseLayout.astro b/src/layouts/BaseLayout/BaseLayout.astro
@@ -27,6 +27,7 @@ interface Props {
   canonicalUrl?: URL;
   forcedTheme?: string;
   description: string;
+  hideFooterNewsletter?: boolean;
   image?: {
     alt: string;
     src: string;
@@ -48,6 +49,7 @@ const {
   error = false,
   image = site.logo,
   isHomePage = false,
+  hideFooterNewsletter = false,
   structuredData,
   title,
   type = "website",
@@ -75,7 +77,10 @@ const {
       <slot />
       <CookieBanner client:load />
     </main>
-    <Footer holiday={Boolean(forcedTheme)} />
+    <Footer
+      hideNewsletter={hideFooterNewsletter}
+      holiday={Boolean(forcedTheme)}
+    />
   </body>
 </html>
 <AffiliateScript />
diff --git a/src/layouts/BaseLayout/_sections/Footer/Footer.astro b/src/layouts/BaseLayout/_sections/Footer/Footer.astro
@@ -5,13 +5,15 @@ import LinkedIn from "@/components/icons/LinkedIn.astro";
 import RSS from "@/components/icons/RSS.astro";
 import Twitter from "@/components/icons/Twitter.astro";
 import YouTube from "@/components/icons/YouTube.astro";
+import NewsletterSection from "@/components/NewsletterSection.astro";
 import FooterHelper from "./FooterHelper";
 
 interface Props {
+  hideNewsletter?: boolean;
   holiday?: boolean;
 }
 
-const { holiday } = Astro.props;
+const { hideNewsletter = false, holiday } = Astro.props;
 ---
 
 <FooterHelper client:visible {holiday}>
@@ -22,66 +24,12 @@ const { holiday } = Astro.props;
   <YouTube slot="youtube" />
   <RSS slot="rss" />
   {
-    !holiday && (
-      <div id="mc_embed_shell" slot="newsletter">
-        <div id="mc_embed_signup">
-          <form
-            action="https://rockthejvm.us5.list-manage.com/subscribe/post?u=f7e7dcf30c1dd4f49893c696b&id=2c292e211e&f_id=003d27ebf0"
-            method="post"
-            id="mc-embedded-subscribe-form"
-            name="mc-embedded-subscribe-form"
-            target="_blank"
-          >
-            <div id="mc_embed_signup_scroll">
-              <h3
-                class={`text-sm font-semibold leading-6 ${holiday ? "text-holiday-content-1" : "text-content"}`}
-              >
-                Subscribe to our newsletter
-              </h3>
-              <div>
-                <input
-                  type="email"
-                  name="EMAIL"
-                  class="w-full min-w-0 appearance-none rounded-md border-0 bg-white px-3 py-1.5 text-base text-black shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-black focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:w-64 sm:text-sm sm:leading-6 xl:w-full"
-                  id="mce-EMAIL"
-                  required=""
-                  value=""
-                  placeholder="Enter your email"
-                />
-              </div>
-              <div id="mce-responses">
-                <div id="mce-error-response" style="display: none;" />
-                <div id="mce-success-response" style="display: none;" />
-              </div>
-              <div
-                aria-hidden="true"
-                style="position: absolute; left: -5000px;"
-              >
-                <input
-                  type="text"
-                  name="b_f7e7dcf30c1dd4f49893c696b_2c292e211e"
-                  tabindex="-1"
-                  value=""
-                />
-              </div>
-              <div class="my-2">
-                <input
-                  type="submit"
-                  name="subscribe"
-                  id="mc-embedded-subscribe"
-                  class="flex items-center justify-center rounded-md bg-cta px-3 py-2 text-sm font-semibold text-ctatext shadow-sm hover:bg-accent-1 hover:text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
-                  value="Subscribe"
-                />
-              </div>
-            </div>
-          </form>
-        </div>
-        <script
-          type="text/javascript"
-          src="//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"
-          defer
-        />
-      </div>
+    !holiday && !hideNewsletter && (
+      <NewsletterSection
+        stacked={true}
+        title="Subscribe to our newsletter!"
+        slot="newsletter"
+      />
     )
   }
 </FooterHelper>
diff --git a/src/layouts/BaseLayout/_sections/Footer/FooterHelper.jsx b/src/layouts/BaseLayout/_sections/Footer/FooterHelper.jsx
@@ -118,9 +118,12 @@ export default function Example(props) {
       <h2 id="footer-heading" className="sr-only">
         Footer
       </h2>
-      <div className="mx-auto max-w-7xl px-6 pb-8 pt-20 sm:pt-24 lg:px-8 lg:pt-32">
-        <div className="xl:grid xl:grid-cols-3 xl:gap-8">
-          <div className="grid grid-cols-2 gap-8 xl:col-span-2">
+      <div className="mx-auto w-full max-w-7xl px-6 pb-8 pt-20 sm:pt-24 lg:px-8 lg:pt-32">
+        <div className="w-full xl:grid xl:grid-cols-4 xl:gap-8">
+          <div className="col-span-2 mb-8 mt-10 w-full justify-center xl:order-2 xl:mb-0 xl:mt-0 xl:flex xl:w-auto">
+            {props.newsletter}
+          </div>
+          <div className="grid grid-cols-2 gap-8 xl:order-1 xl:col-span-2">
             <div className="md:grid md:grid-cols-2 md:gap-8">
               <div>
                 <h3
@@ -215,7 +218,6 @@ export default function Example(props) {
               </div>
             </div>
           </div>
-          <div className="mt-10 xl:mt-0">{props.newsletter}</div>
         </div>
         <div className="mt-16 border-t border-gray-900/10 pt-8 sm:mt-20 md:flex md:items-center md:justify-between lg:mt-24">
           <ul className="flex space-x-6 md:order-2">
diff --git a/src/layouts/HolidayLayout/_components/HolidayCourseList.astro b/src/layouts/HolidayLayout/_components/HolidayCourseList.astro
@@ -24,5 +24,5 @@ const { categories, couponCode } = Astro.props;
       </section>
     ))
   }
-  <NewsletterForm />
+  <!-- <NewsletterForm /> -->
 </article>
diff --git a/src/pages/articles/_components/NewsletterSection.astro b/src/pages/articles/_components/NewsletterSection.astro
diff --git a/src/pages/articles/_components/RelatedArticlesSection.astro b/src/pages/articles/_components/RelatedArticlesSection.astro
@@ -0,0 +1,32 @@
+---
+import ArticlePreview from "@/components/ArticlePreview.astro";
+import type { CollectionEntry } from "astro:content";
+import RelatedArticles from "./RelatedArticles";
+
+interface Props {
+  relatedArticles: CollectionEntry<"articles">[];
+}
+const { relatedArticles } = Astro.props;
+---
+
+{
+  relatedArticles.length > 0 && (
+    <RelatedArticles length={relatedArticles.length} client:load>
+      {relatedArticles.length >= 1 && (
+        <ArticlePreview slot="firstArticle" article={relatedArticles[0]!} />
+      )}
+      {relatedArticles.length >= 2 && (
+        <ArticlePreview slot="secondArticle" article={relatedArticles[1]!} />
+      )}
+      {relatedArticles.length >= 3 && (
+        <ArticlePreview slot="thirdArticle" article={relatedArticles[2]!} />
+      )}
+      {relatedArticles.length >= 4 && (
+        <ArticlePreview slot="fourthArticle" article={relatedArticles[3]!} />
+      )}
+      {relatedArticles.length >= 5 && (
+        <ArticlePreview slot="fifthArticle" article={relatedArticles[4]!} />
+      )}
+    </RelatedArticles>
+  )
+}
diff --git a/src/pages/articles/_layouts/ArticleLayout.astro b/src/pages/articles/_layouts/ArticleLayout.astro

Original file line number	Diff line number	Diff line change
`@@ -24,5 +24,5 @@ const { categories, couponCode } = Astro.props;`
`24`	`24`	`</section>`
`25`	`25`	`))`
`26`	`26`	`}`
`27`		`- <NewsletterForm />`
	`27`	`+ <!-- <NewsletterForm /> -->`
`28`	`28`	`</article>`