feat: add basic email box

Author: tonyaellie

astro.config.mjs

@@ -2,7 +2,6 @@ import { defineConfig } from 'astro/config';
 import tailwind from '@astrojs/tailwind';
 import image from '@astrojs/image';
 import react from '@astrojs/react';
-
 import prefetch from '@astrojs/prefetch';
 
 // https://astro.build/config

package.json

@@ -16,12 +16,13 @@
     "@astrojs/tailwind": "^3.1.2",
     "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",
-    "astro": "^2.4.5",
+    "astro": "^2.5.1",
     "prettier": "^2.8.8",
     "prettier-plugin-tailwindcss": "^0.3.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "sharp": "^0.32.1",
-    "tailwindcss": "^3.0.24"
+    "tailwindcss": "^3.0.24",
+    "zod": "^3.21.4"
   }
 }

pnpm-lock.yaml

@@ -0,0 +1,45 @@
+---
+---
+
+<div class="mx-auto w-96 py-4">
+  <label class="mb-2 block text-lg font-bold text-white" for="email"
+    >Subscribe to our newsletter</label
+  >
+  <form data-email-subscription class="flex place-content-between">
+    <input
+      class="w-full rounded-lg bg-slate-900 p-2 text-white"
+      type="email"
+      name="email"
+      id="email"
+      placeholder="Enter your email"
+      required
+    />
+    <button class="ml-2 rounded-lg bg-slate-900 p-2 text-white" type="submit"
+      >Subscribe</button
+    >
+  </form>
+</div>
+
+<script>
+  import { z } from 'zod';
+
+  const forms = document.querySelectorAll('[data-email-subscription]');
+  forms.forEach((form) => {
+    form.addEventListener('submit', (e) => {
+      e.preventDefault();
+      // TODO: Send email to some service
+      const email = z
+        .string()
+        .email()
+        .safeParse((e.target as any)?.email?.value);
+
+      if (!email.success) {
+        alert('Please enter a valid email address');
+        return;
+      }
+
+      console.log(email.data);
+      form.innerHTML = 'Thank you for subscribing!';
+    });
+  });
+</script>

src/components/EmailSub.astro

@@ -1,5 +1,6 @@
 ---
 import { Image } from '@astrojs/image/components';
+import EmailSub from '../components/EmailSub.astro';
 
 interface Props {
   title: string;
@@ -35,5 +36,6 @@ const { title } = Astro.props;
       >
     </header>
     <slot />
+    <EmailSub />
   </body>
 </html>