feat(frontend): working newsletter

apps/frontend/src/components/header/index.astro

@@ -36,15 +36,15 @@ import HeaderLink from './header-link.astro';
         </svg>
       </HeaderLink>
 
-      <div class="flex flex-row gap-4">
+      <!-- <div class="flex flex-row gap-4">
         <button class="bg-black text-white px-4 py-2 rounded">
           Login
         </button>
 
         <button class="border border-primary text-primary px-4 py-2 rounded">
           Sign Up
         </button>
-      </div>
+      </div> -->
     </nav>
 
     <!-- Mobile menu -->

apps/frontend/src/directus/index.ts

@@ -1,3 +1,4 @@
 export * from './articles';
 export * from './get-image-url';
+export * from './newsletter';
 export * from './sdk-client';

apps/frontend/src/directus/newsletter/create-newsletter-user.ts

@@ -0,0 +1,11 @@
+import { createItem } from '@directus/sdk';
+
+import { directusSdk } from '../sdk-client';
+
+export function createNewsletterUser(email: string) {
+  return directusSdk.request(
+    createItem('Newsletter_List', {
+      email,
+    }),
+  );
+}

apps/frontend/src/directus/newsletter/index.ts

@@ -0,0 +1 @@
+export * from './create-newsletter-user';

apps/frontend/src/directus/sdk-client.ts

@@ -18,9 +18,14 @@ export type Article = {
   slug: string;
 };
 
+type NewsletterList = {
+  email: string;
+};
+
 type Schema = {
   Author: Author[];
   Article: Article[];
+  Newsletter_List: NewsletterList[];
 };
 
 export const directusSdk = createDirectus<Schema>(import.meta.env.PUBLIC_VITE_DIRECTUS_URL).with(rest());

apps/frontend/src/pages/blog/_parts/newsletter-card.astro

@@ -0,0 +1,39 @@
+---
+import { Mail } from 'lucide-astro';
+
+interface Props {
+  errors: string[];
+}
+
+const { errors } = Astro.props;
+
+---
+<div class="mt-8 p-6 bg-gray-100 rounded-lg">
+  <h2 class="text-xl font-bold mb-4">Subscribe to our Newsletter</h2>
+  <p class="mb-4">
+    Stay updated with the latest articles, tips, and exclusive promotions. Subscribe to our newsletter and never miss out on the best content for AI lovers!
+  </p>
+  <form method="post" class="flex flex-col gap-4">
+    <input
+      type="email"
+      name="email"
+      placeholder="Enter your email"
+      class="p-3 border border-gray-300 rounded-lg"
+      required
+    />
+    <button
+      type="submit"
+      class="p-3 bg-black text-white font-bold rounded-lg hover:bg-gray-800 flex items-center justify-center gap-2"
+    >
+      <Mail class="h-5 w-5" />
+
+      Subscribe
+    </button>
+
+    {errors.length > 0 && (
+      <div class="mt-4 p-4 bg-red-100 text-red-700 rounded-lg">
+        {errors.map(error => <p>{error}</p>)}
+      </div>
+    )}
+  </form>
+</div>

apps/frontend/src/pages/blog/index.astro

@@ -1,13 +1,42 @@
 ---
-import { Mail } from 'lucide-astro';
-
 import ArticleCard from '~/components/blog/article-card.astro';
-import { getArticles } from '~/directus';
+import { createNewsletterUser, getArticles } from '~/directus';
 import DefaultLayout from '~/layouts/default-layout.astro';
 
+import NewsletterCard from './_parts/newsletter-card.astro';
+
+const errors = [];
+let redirectTo = '';
+
+if (Astro.request.method === 'POST') {
+  try {
+    const data = await Astro.request.formData();
+    const email = data.get('email');
+
+    if (!email || typeof email !== 'string') {
+      errors.push('Email is required.');
+    }
+
+    if (!errors.length) {
+      await createNewsletterUser(email!.toString())!;
+      redirectTo = '/newsletter/thank-you';
+    }
+  }
+  catch (error) {
+    console.error(error);
+    errors.push('Something went wrong. Please try again later.');
+  }
+}
+
+if (redirectTo) {
+  return Astro.redirect(redirectTo);
+}
+
 const articles = await getArticles({
   limit: 14,
 });
+
+
 ---
 <DefaultLayout
   title="DashHub.ai"
@@ -36,28 +65,7 @@ const articles = await getArticles({
           ))}
         </ul>
 
-        <div class="mt-8 p-6 bg-gray-100 rounded-lg">
-          <h2 class="text-xl font-bold mb-4">Subscribe to our Newsletter</h2>
-          <p class="mb-4">
-            Stay updated with the latest articles, tips, and exclusive promotions. Subscribe to our newsletter and never miss out on the best content for AI lovers!
-          </p>
-          <form class="flex flex-col gap-4">
-            <input
-              type="email"
-              placeholder="Enter your email"
-              class="p-3 border border-gray-300 rounded-lg"
-              required
-            />
-            <button
-              type="submit"
-              class="p-3 bg-black text-white font-bold rounded-lg hover:bg-gray-800 flex items-center justify-center gap-2"
-            >
-              <Mail class="h-5 w-5" />
-
-              Subscribe
-            </button>
-          </form>
-        </div>
+        <NewsletterCard errors={errors} />
       </aside>
     </div>
   </section>

apps/frontend/src/pages/home/_parts/jumbotron.astro

@@ -14,8 +14,8 @@ import jumbotronImage from '~/images/jumbotron.jpg';
           With a community-driven approach, DashHub continuously evolves to meet the needs of modern enterprises. Join our community today and contribute to the future of enterprise AI.
         </p>
         <p class="mt-8">
-            <a href="https://github.com/DashHub-ai/DashHub" class="bg-black text-white px-4 py-3 rounded">
-              Join Our Community
+            <a href="https://github.com/DashHub-ai/DashHub" class="bg-black text-white px-4 py-3 rounded opacity-50 cursor-not-allowed" aria-disabled="true">
+              Join Our Community (Coming Soon)
             </a>
         </p>
       </div>

apps/frontend/src/pages/newsletter/thank-you.astro

@@ -0,0 +1,16 @@
+---
+import DefaultLayout from '~/layouts/default-layout.astro';
+---
+
+<DefaultLayout
+  title="Thank You for Subscribing!"
+  description="You have successfully subscribed to our newsletter."
+>
+  <section class="container mx-auto px-4 py-8">
+    <div class="text-center">
+      <h1 class="text-3xl font-bold mb-4">Thank You for Subscribing!</h1>
+      <p class="mb-4">You have successfully subscribed to our newsletter. Stay tuned for the latest updates and exclusive content.</p>
+      <a href="/blog" class="text-blue-500 hover:underline">Go back to Blog</a>
+    </div>
+  </section>
+</DefaultLayout>