refactor(email): improve code formatting and error handling in email route

app/api/email/route.tsx

@@ -1,4 +1,4 @@
-import { type NextRequest, NextResponse } from "next/server";
+import {type NextRequest, NextResponse} from "next/server";
 import nodemailer from "nodemailer";
 import SMTPTransport from "nodemailer/lib/smtp-transport";
 import Mail from "nodemailer/lib/mailer";
@@ -7,63 +7,63 @@ import dotenv from "dotenv";
 dotenv.config();
 
 export async function POST(request: NextRequest) {
-  const body = (await request.json()) as {
-    email: string;
-    name: string;
-    message: string;
-  };
-  const { email, name, message } = body;
+    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 ?? "";
+    const user = process.env.MY_EMAIL ?? "";
+    const pass = process.env.MY_PASSWORD ?? "";
 
-  if (!user || !pass) {
-    console.error("Missing email/password environment variables");
-    return NextResponse.json(
-      { error: "Internal server error" },
-      { status: 500 },
-    );
-  }
+    if (!user || !pass) {
+        console.error("Missing email/password environment variables");
+        return NextResponse.json(
+            {error: "Internal server error"},
+            {status: 500},
+        );
+    }
 
-  const transportOptions: SMTPTransport.Options = {
-    host: "smtp.ionos.de",
-    port: 587,
-    secure: false,
-    requireTLS: true,
-    auth: {
-      type: "login",
-      user,
-      pass,
-    },
-  };
+    const transportOptions: SMTPTransport.Options = {
+        host: "smtp.ionos.de",
+        port: 587,
+        secure: false,
+        requireTLS: true,
+        auth: {
+            type: "login",
+            user,
+            pass,
+        },
+    };
 
-  const transport = nodemailer.createTransport(transportOptions);
+    const transport = nodemailer.createTransport(transportOptions);
 
-  const mailOptions: Mail.Options = {
-    from: user,
-    to: user, // Ensure this is the correct email address
-    subject: `Message from ${name} (${email})`,
-    text: message + "\n\n" + email,
-  };
+    const mailOptions: Mail.Options = {
+        from: user,
+        to: user, // Ensure this is the correct email address
+        subject: `Message from ${name} (${email})`,
+        text: message + "\n\n" + email,
+    };
 
-  const sendMailPromise = () =>
-    new Promise<string>((resolve, reject) => {
-      transport.sendMail(mailOptions, function (err, info) {
-        if (!err) {
-          console.log("Email sent:", info.response);
-          resolve(info.response);
-        } else {
-          console.error("Error sending email:", err);
-          reject(err.message);
-        }
-      });
-    });
+    const sendMailPromise = () =>
+        new Promise<string>((resolve, reject) => {
+            transport.sendMail(mailOptions, function (err, info) {
+                if (!err) {
+                    console.log("Email sent");
+                    resolve(info.response);
+                } else {
+                    console.error("Error sending email:", err);
+                    reject(err.message);
+                }
+            });
+        });
 
-  try {
-    await sendMailPromise();
-    return NextResponse.json({ message: "Email sent" });
-  } catch (err) {
-    console.error("Error sending email:", err);
-    return NextResponse.json({ error: err }, { status: 500 });
-  }
+    try {
+        await sendMailPromise();
+        return NextResponse.json({message: "Email sent"});
+    } catch (err) {
+        console.error("Error sending email:", err);
+        return NextResponse.json({error: err}, {status: 500});
+    }
 }

app/api/fetchAllProjects/route.tsx

@@ -1,25 +1,26 @@
-import { NextResponse } from "next/server";
+import {NextResponse} from "next/server";
 
 export const runtime = "nodejs"; // Force Node runtime
 
-const GHOST_API_URL = "http://big-bear-ghost:2368";
+const GHOST_API_URL = "http://172.21.0.3:2368";
 const GHOST_API_KEY = process.env.GHOST_API_KEY;
 
 export async function GET() {
-  try {
-    const response = await fetch(
-      `${GHOST_API_URL}/ghost/api/content/posts/?key=${GHOST_API_KEY}&limit=all`,
-    );
-    if (!response.ok) {
-      throw new Error(`Failed to fetch posts: ${response.statusText}`);
+    try {
+        const response = await fetch(
+            `${GHOST_API_URL}/ghost/api/content/posts/?key=${GHOST_API_KEY}&limit=all`,
+        );
+        if (!response.ok) {
+            console.error(`Failed to fetch posts: ${response.statusText}`);
+            return NextResponse.json({});
+        }
+        const posts = await response.json();
+        return NextResponse.json(posts);
+    } catch (error) {
+        console.error("Failed to fetch posts from Ghost:", error);
+        return NextResponse.json(
+            {error: "Failed to fetch projects"},
+            {status: 500},
+        );
     }
-    const posts = await response.json();
-    return NextResponse.json(posts);
-  } catch (error) {
-    console.error("Failed to fetch posts from Ghost:", error);
-    return NextResponse.json(
-      { error: "Failed to fetch projects" },
-      { status: 500 },
-    );
-  }
 }

app/api/sitemap/route.tsx

@@ -11,7 +11,7 @@ interface ProjectsData {
 
 export const runtime = "nodejs"; // Force Node runtime
 
-const GHOST_API_URL = "http://big-bear-ghost:2368";
+const GHOST_API_URL = "http://172.21.0.3:2368";
 const GHOST_API_KEY = process.env.GHOST_API_KEY;
 
 // Funktion, um die XML für die Sitemap zu generieren

app/components/Projects.tsx

@@ -1,85 +1,84 @@
-import React, { useEffect, useState } from "react";
+import React, {useEffect, useState} from "react";
 import Link from "next/link";
 
 interface Project {
-  slug: string;
-  id: string;
-  title: string;
-  feature_image: string;
-  visibility: string;
-  published_at: string;
-  updated_at: string;
-  html: string;
-  reading_time: number;
-  meta_description: string;
+    slug: string;
+    id: string;
+    title: string;
+    feature_image: string;
+    visibility: string;
+    published_at: string;
+    updated_at: string;
+    html: string;
+    reading_time: number;
+    meta_description: string;
 }
 
 interface ProjectsData {
-  posts: Project[];
+    posts: Project[];
 }
 
 export default function Projects() {
-  const [projects, setProjects] = useState<Project[]>([]);
-  const [isVisible, setIsVisible] = useState(false);
+    const [projects, setProjects] = useState<Project[]>([]);
+    const [isVisible, setIsVisible] = useState(false);
 
-  useEffect(() => {
-    const fetchProjects = async () => {
-      try {
-        const response = await fetch("/api/fetchAllProjects");
-        if (!response.ok) {
-          throw new Error("Failed to fetch projects from Ghost");
-        }
-        const projectsData = (await response.json()) as ProjectsData;
-        setProjects(projectsData.posts);
+    useEffect(() => {
+        const fetchProjects = async () => {
+            try {
+                const response = await fetch("/api/fetchAllProjects");
+                if (!response.ok) {
+                    console.error(`Failed to fetch projects: ${response.statusText}`);
+                    return [];
+                }
+                const projectsData = (await response.json()) as ProjectsData;
+                setProjects(projectsData.posts);
 
-        setTimeout(() => {
-          setIsVisible(true);
-        }, 250); // Delay to start the animation after Hero
-      } catch (error) {
-        console.error("Failed to fetch projects:", error);
-      }
-    };
-    fetchProjects();
-  }, []);
+                setTimeout(() => {
+                    setIsVisible(true);
+                }, 250); // Delay to start the animation after Hero
+            } catch (error) {
+                console.error("Failed to fetch projects:", error);
+            }
+        };
+        fetchProjects();
+    }, []);
 
-  console.log(projects.at(0)?.feature_image);
-
-  const numberOfProjects = projects.length;
-  return (
-    <section
-      id="projects"
-      className={`p-10 ${isVisible ? "animate-fly-in" : "opacity-0"}`}
-    >
-      <h2 className="text-3xl font-bold text-center text-gray-800">Projects</h2>
-      <div className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-6">
-        {projects.map((project, index) => (
-          <Link
-            key={project.id}
-            href={{
-              pathname: `/projects/${project.slug}`,
-              query: { project: JSON.stringify(project) },
-            }}
-            className="cursor-pointer"
-          >
-            <div
-              className={`p-4 border shadow-lg bg-white/45 rounded-2xl animate-fly-in`}
-              style={{ animationDelay: `${index * 0.1}s` }}
-            >
-              <h3 className="text-2xl font-bold text-gray-800">
-                {project.title}
-              </h3>
-              <p className="mt-2 text-gray-500">{project.meta_description}</p>
-            </div>
-          </Link>
-        ))}
-        <div
-          className={`p-4 border shadow-lg bg-white/45 rounded-2xl animate-fly-in`}
-          style={{ animationDelay: `${(numberOfProjects + 1) * 0.1}s` }}
+    const numberOfProjects = projects.length;
+    return (
+        <section
+            id="projects"
+            className={`p-10 ${isVisible ? "animate-fly-in" : "opacity-0"}`}
         >
-          <h3 className="text-2xl font-bold text-gray-800">More to come</h3>
-          <p className="mt-2 text-gray-500">...</p>
-        </div>
-      </div>
-    </section>
-  );
+            <h2 className="text-3xl font-bold text-center text-gray-800">Projects</h2>
+            <div className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-6">
+                {projects.map((project, index) => (
+                    <Link
+                        key={project.id}
+                        href={{
+                            pathname: `/projects/${project.slug}`,
+                            query: {project: JSON.stringify(project)},
+                        }}
+                        className="cursor-pointer"
+                    >
+                        <div
+                            className={`p-4 border shadow-lg bg-white/45 rounded-2xl animate-fly-in`}
+                            style={{animationDelay: `${index * 0.1}s`}}
+                        >
+                            <h3 className="text-2xl font-bold text-gray-800">
+                                {project.title}
+                            </h3>
+                            <p className="mt-2 text-gray-500">{project.meta_description}</p>
+                        </div>
+                    </Link>
+                ))}
+                <div
+                    className={`p-4 border shadow-lg bg-white/45 rounded-2xl animate-fly-in`}
+                    style={{animationDelay: `${(numberOfProjects + 1) * 0.1}s`}}
+                >
+                    <h3 className="text-2xl font-bold text-gray-800">More to come</h3>
+                    <p className="mt-2 text-gray-500">...</p>
+                </div>
+            </div>
+        </section>
+    );
 }

app/projects/[slug]/page.tsx

@@ -59,7 +59,7 @@ const ProjectDetails = () => {
             try {
                 fetchProjectData(slug);
             } catch (error) {
-                console.log(error);
+                console.error(error);
                 setError("Failed to fetch project data");
             }
         }