d-branch-2 (#18)

* ✨ refactor: streamline sitemap generation and contact form logic

* ✨ refactor: update sendEmail function to handle JSON data

app/api/email/route.tsx

@@ -7,7 +7,12 @@ import dotenv from "dotenv";
 dotenv.config();
 
 export async function POST(request: NextRequest) {
-  const { email, name, message } = await request.json();
+  const body = (await request.json()) as {
+    email: string;
+    name: string;
+    message: string;
+  };
+  const { email, name, message } = body;
 
   const user = process.env.MY_EMAIL ?? "";
   const pass = process.env.MY_PASSWORD ?? "";
@@ -38,7 +43,7 @@ export async function POST(request: NextRequest) {
     from: user,
     to: user, // Ensure this is the correct email address
     subject: `Message from ${name} (${email})`,
-    text: message + `\n\nSent from ${email}`,
+    text: message + "\n\n" + email,
   };
 
   const sendMailPromise = () =>

app/api/sitemap/route.tsx

@@ -17,40 +17,20 @@ interface SitemapRoute {
 const baseUrl = process.env.NEXT_PUBLIC_BASE_URL || "https://dki.one";
 
 const generateSitemap = async (): Promise<SitemapRoute[]> => {
+  // Static pages
+  const staticRoutes: SitemapRoute[] = [
+    { url: `${baseUrl}/`, lastModified: new Date().toISOString() },
+    {
+      url: `${baseUrl}/privacy-policy`,
+      lastModified: new Date().toISOString(),
+    },
+    {
+      url: `${baseUrl}/legal-notice`,
+      lastModified: new Date().toISOString(),
+    },
+  ];
+
   try {
-    // Static pages
-    const staticRoutes: SitemapRoute[] = [
-      { url: `${baseUrl}/`, lastModified: new Date().toISOString() },
-      {
-        url: `${baseUrl}/privacy-policy`,
-        lastModified: new Date().toISOString(),
-      },
-      {
-        url: `${baseUrl}/legal-notice`,
-        lastModified: new Date().toISOString(),
-      },
-    ];
-
-    // Check if running in build environment
-    if (process.env.IS_BUILD) {
-      console.log("Running in build mode - using mock data");
-      const mockProjectsData: ProjectsData = {
-        posts: [
-          { slug: "project-1" },
-          { slug: "project-2" },
-          { slug: "project-3" },
-        ],
-      };
-      const projectRoutes: SitemapRoute[] = mockProjectsData.posts.map(
-        (project) => ({
-          url: `${baseUrl}/projects/${project.slug}`,
-          lastModified: new Date().toISOString(),
-        }),
-      );
-      return [...staticRoutes, ...projectRoutes];
-    }
-
-    // Fetch project data from API
     console.log("Fetching project data from API...");
     const response = await fetch(`${baseUrl}/api/fetchAllProjects`, {
       headers: { "Cache-Control": "no-cache" },
@@ -58,13 +38,13 @@ const generateSitemap = async (): Promise<SitemapRoute[]> => {
 
     if (!response.ok) {
       console.error(`Failed to fetch projects: ${response.statusText}`);
-      return staticRoutes; // Return static pages instead of throwing an error
+      return staticRoutes; // Fallback auf statische Seiten
     }
 
     const projectsData = (await response.json()) as ProjectsData;
     console.log("Fetched project data:", projectsData);
 
-    // Generate dynamic routes for projects
+    // Dynamische Projekt-Routen generieren
     const projectRoutes: SitemapRoute[] = projectsData.posts.map((project) => ({
       url: `${baseUrl}/projects/${project.slug}`,
       lastModified: project.updated_at
@@ -75,7 +55,7 @@ const generateSitemap = async (): Promise<SitemapRoute[]> => {
     return [...staticRoutes, ...projectRoutes];
   } catch (error) {
     console.error("Failed to generate sitemap:", error);
-    return staticRoutes; // Return static pages in case of failure
+    return staticRoutes; // Fallback nur auf statische Seiten
   }
 };
 

app/components/Contact.tsx

@@ -1,87 +1,106 @@
-import React, {useEffect, useState} from "react";
-import {sendEmail} from "@/app/utils/send-email";
+import React, { useEffect, useState } from "react";
+import { sendEmail } from "@/app/utils/send-email";
 
-export type FormData = {
-    name: string;
-    email: string;
-    message: string;
-}
+export type ContactFormData = {
+  name: string;
+  email: string;
+  message: string;
+};
 
 export default function Contact() {
-    const [isVisible, setIsVisible] = useState(false);
-    const [banner, setBanner] = useState<{ show: boolean, message: string, type: 'success' | 'error' }>({
-        show: false,
-        message: '',
-        type: 'success'
-    });
+  const [isVisible, setIsVisible] = useState(false);
+  const [banner, setBanner] = useState<{
+    show: boolean;
+    message: string;
+    type: "success" | "error";
+  }>({
+    show: false,
+    message: "",
+    type: "success",
+  });
 
-    useEffect(() => {
-        setTimeout(() => {
-            setIsVisible(true);
-        }, 350); // Delay to start the animation after Projects
-    }, []);
+  useEffect(() => {
+    setTimeout(() => {
+      setIsVisible(true);
+    }, 350); // Delay to start the animation after Projects
+  }, []);
 
-    async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
-        e.preventDefault();
-        const form = e.currentTarget;
-        const data: FormData = {
-            name: (form.elements.namedItem('name') as HTMLInputElement).value,
-            email: (form.elements.namedItem('email') as HTMLInputElement).value,
-            message: (form.elements.namedItem('message') as HTMLTextAreaElement).value,
-        };
-        const response = await sendEmail(data);
-        if (response.success) {
-            form.reset();
-        }
-        setBanner({show: true, message: response.message, type: response.success ? 'success' : 'error'});
-        setTimeout(() => {
-            setBanner({...banner, show: false});
-        }, 3000); // Hide banner after 3 seconds
+  async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+
+    const form = e.currentTarget as HTMLFormElement;
+    const formData = new FormData(form);
+
+    const data: ContactFormData = {
+      name: formData.get("name") as string,
+      email: formData.get("email") as string,
+      message: formData.get("message") as string,
+    };
+
+    // Convert FormData to a plain object
+    const jsonData = JSON.stringify(data);
+
+    const response = await sendEmail(jsonData);
+    if (response.success) {
+      form.reset();
     }
 
-    return (
-        <section id="contact" className={`p-10 ${isVisible ? 'animate-fly-in' : 'opacity-0'}`}>
-            <h2 className="text-3xl font-bold text-center text-gray-800 dark:text-white">
-                Contact Me
-            </h2>
-            <div
-                className="flex flex-col items-center p-8 bg-gradient-to-br from-white/60 to-white/30 backdrop-blur-lg rounded-2xl shadow-xl max-w-lg mx-auto mt-6 relative">
-                {banner.show && (
-                    <div
-                        className={`absolute top-0 left-0 right-0 text-white text-center py-2 rounded-2xl animate-fade-out ${banner.type === 'success' ? 'bg-green-500' : 'bg-red-500'}`}>
-                        {banner.message}
-                    </div>
-                )}
-                <form className="w-full space-y-4" onSubmit={onSubmit}>
-                    <input
-                        type="text"
-                        name="name"
-                        placeholder="Name"
-                        className="w-full p-2 border rounded dark:text-white"
-                        required
-                    />
-                    <input
-                        type="email"
-                        name="email"
-                        placeholder="Email"
-                        className="w-full p-2 border rounded dark:text-white"
-                        required
-                    />
-                    <textarea
-                        name="message"
-                        placeholder="Message"
-                        className="w-full p-2 border rounded dark:text-white"
-                        rows={5}
-                        required
-                    ></textarea>
-                    <button
-                        type="submit"
-                        className="w-full p-2 text-white bg-gradient-to-r from-blue-500 to-purple-500 rounded hover:from-blue-600 hover:to-purple-600 transition"
-                    >
-                        Send
-                    </button>
-                </form>
-            </div>
-        </section>
-    );
+    setBanner({
+      show: true,
+      message: response.message,
+      type: response.success ? "success" : "error",
+    });
+    setTimeout(() => {
+      setBanner((prev) => ({ ...prev, show: false }));
+    }, 3000);
+  }
+
+  return (
+    <section
+      id="contact"
+      className={`p-10 ${isVisible ? "animate-fly-in" : "opacity-0"}`}
+    >
+      <h2 className="text-3xl font-bold text-center text-gray-800 dark:text-white">
+        Contact Me
+      </h2>
+      <div className="flex flex-col items-center p-8 bg-gradient-to-br from-white/60 to-white/30 backdrop-blur-lg rounded-2xl shadow-xl max-w-lg mx-auto mt-6 relative">
+        {banner.show && (
+          <div
+            className={`absolute top-0 left-0 right-0 text-white text-center py-2 rounded-2xl animate-fade-out ${banner.type === "success" ? "bg-green-500" : "bg-red-500"}`}
+          >
+            {banner.message}
+          </div>
+        )}
+        <form className="w-full space-y-4" onSubmit={onSubmit}>
+          <input
+            type="text"
+            name="name"
+            placeholder="Name"
+            className="w-full p-2 border rounded dark:text-white"
+            required
+          />
+          <input
+            type="email"
+            name="email"
+            placeholder="Email"
+            className="w-full p-2 border rounded dark:text-white"
+            required
+          />
+          <textarea
+            name="message"
+            placeholder="Message"
+            className="w-full p-2 border rounded dark:text-white"
+            rows={5}
+            required
+          ></textarea>
+          <button
+            type="submit"
+            className="w-full p-2 text-white bg-gradient-to-r from-blue-500 to-purple-500 rounded hover:from-blue-600 hover:to-purple-600 transition"
+          >
+            Send
+          </button>
+        </form>
+      </div>
+    </section>
+  );
 }

app/utils/send-email.tsx

@@ -1,17 +1,20 @@
-import {FormData} from "@/app/components/Contact";
+export function sendEmail(
+  data: string,
+): Promise<{ success: boolean; message: string }> {
+  const apiEndpoint = "/api/email";
 
-export function sendEmail(data: FormData): Promise<{ success: boolean, message: string }> {
-    const apiEndpoint = '/api/email';
-
-    return fetch(apiEndpoint, {
-        method: 'POST',
-        body: JSON.stringify(data),
+  return fetch(apiEndpoint, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: data,
+  })
+    .then((res) => res.json())
+    .then((response) => {
+      return { success: true, message: response.message };
     })
-        .then((res) => res.json())
-        .then((response) => {
-            return {success: true, message: response.message};
-        })
-        .catch((err) => {
-            return {success: false, message: err.message};
-        });
+    .catch((err) => {
+      return { success: false, message: err.message };
+    });
 }