feat: Add Hardcover currently reading integration with i18n support

- Add CurrentlyReading component with beautiful design
- Integrate into About section
- Add German and English translations
- Add n8n API route for Hardcover integration
- Add comprehensive documentation for n8n setup

app/api/n8n/hardcover/currently-reading/route.ts

@@ -0,0 +1,131 @@
+// app/api/n8n/hardcover/currently-reading/route.ts
+import { NextRequest, NextResponse } from "next/server";
+
+// Cache für 5 Minuten, damit wir n8n nicht zuspammen
+// Hardcover-Daten ändern sich nicht so häufig
+export const revalidate = 300;
+
+export async function GET(request: NextRequest) {
+  // Rate limiting for n8n hardcover endpoint
+  const ip =
+    request.headers.get("x-forwarded-for") ||
+    request.headers.get("x-real-ip") ||
+    "unknown";
+  const ua = request.headers.get("user-agent") || "unknown";
+  const { checkRateLimit } = await import('@/lib/auth');
+  
+  // In dev, many requests can share ip=unknown; use UA to avoid a shared bucket.
+  const rateKey =
+    process.env.NODE_ENV === "development" && ip === "unknown"
+      ? `ua:${ua.slice(0, 120)}`
+      : ip;
+  const maxPerMinute = process.env.NODE_ENV === "development" ? 60 : 10;
+
+  if (!checkRateLimit(rateKey, maxPerMinute, 60000)) { // requests per minute
+    return NextResponse.json(
+      { error: 'Rate limit exceeded. Please try again later.' },
+      { status: 429 }
+    );
+  }
+
+  try {
+    // Check if n8n webhook URL is configured
+    const n8nWebhookUrl = process.env.N8N_WEBHOOK_URL;
+    
+    if (!n8nWebhookUrl) {
+      console.warn("N8N_WEBHOOK_URL not configured for hardcover endpoint");
+      // Return fallback if n8n is not configured
+      return NextResponse.json({
+        currentlyReading: null,
+      });
+    }
+
+    // Rufe den n8n Webhook auf
+    // Add timestamp to query to bypass Cloudflare cache
+    const webhookUrl = `${n8nWebhookUrl}/webhook/hardcover/currently-reading?t=${Date.now()}`;
+    console.log(`Fetching currently reading from: ${webhookUrl}`);
+
+    // Add timeout to prevent hanging requests
+    const controller = new AbortController();
+    const timeoutId = setTimeout(() => controller.abort(), 10000); // 10 second timeout
+
+    try {
+      const res = await fetch(webhookUrl, {
+        method: "GET",
+        headers: {
+          Accept: "application/json",
+          ...(process.env.N8N_SECRET_TOKEN && {
+            Authorization: `Bearer ${process.env.N8N_SECRET_TOKEN}`,
+          }),
+          ...(process.env.N8N_API_KEY && {
+            "X-API-Key": process.env.N8N_API_KEY,
+          }),
+        },
+        next: { revalidate: 300 },
+        signal: controller.signal,
+      });
+
+      clearTimeout(timeoutId);
+
+      if (!res.ok) {
+        const errorText = await res.text().catch(() => 'Unknown error');
+        console.error(`n8n hardcover webhook failed: ${res.status}`, errorText);
+        throw new Error(`n8n error: ${res.status} - ${errorText}`);
+      }
+
+      const raw = await res.text().catch(() => "");
+      if (!raw || !raw.trim()) {
+        throw new Error("Empty response body received from n8n");
+      }
+
+      let data: unknown;
+      try {
+        data = JSON.parse(raw);
+      } catch (parseError) {
+        // Sometimes upstream sends HTML or a partial response; include a snippet for debugging.
+        const snippet = raw.slice(0, 240);
+        throw new Error(
+          `Invalid JSON from n8n (${res.status}): ${snippet}${raw.length > 240 ? "…" : ""}`,
+        );
+      }
+
+      // n8n gibt oft ein Array zurück: [{...}]. Wir wollen nur das Objekt.
+      const readingData = Array.isArray(data) ? data[0] : data;
+
+      // Safety check: if readingData is still undefined/null (e.g. empty array), use fallback
+      if (!readingData) {
+        throw new Error("Empty data received from n8n");
+      }
+
+      // Ensure currentlyReading has proper structure
+      if (readingData.currentlyReading && typeof readingData.currentlyReading === "object") {
+        // Already properly formatted from n8n
+      } else if (readingData.currentlyReading === null || readingData.currentlyReading === undefined) {
+        // No reading data - keep as null
+        readingData.currentlyReading = null;
+      }
+
+      return NextResponse.json(readingData);
+    } catch (fetchError: unknown) {
+      clearTimeout(timeoutId);
+      
+      if (fetchError instanceof Error && fetchError.name === 'AbortError') {
+        console.error("n8n hardcover webhook request timed out");
+      } else {
+        console.error("n8n hardcover webhook fetch error:", fetchError);
+      }
+      throw fetchError;
+    }
+  } catch (error: unknown) {
+    console.error("Error fetching n8n hardcover data:", error);
+    console.error("Error details:", {
+      message: error instanceof Error ? error.message : String(error),
+      stack: error instanceof Error ? error.stack : undefined,
+      n8nUrl: process.env.N8N_WEBHOOK_URL ? 'configured' : 'missing',
+    });
+    // Leeres Fallback-Objekt, damit die Seite nicht abstürzt
+    return NextResponse.json({
+      currentlyReading: null,
+    });
+  }
+}

app/components/About.tsx

@@ -6,6 +6,7 @@ import { useEffect, useState } from "react";
 import { useLocale, useTranslations } from "next-intl";
 import type { JSONContent } from "@tiptap/react";
 import RichTextClient from "./RichTextClient";
+import CurrentlyReading from "./CurrentlyReading";
 
 const staggerContainer: Variants = {
   hidden: { opacity: 0 },
@@ -239,6 +240,14 @@ const About = () => {
                 ))}
               </div>
             </div>
+
+            {/* Currently Reading */}
+            <motion.div
+              variants={fadeInUp}
+              className="mt-8"
+            >
+              <CurrentlyReading />
+            </motion.div>
           </motion.div>
         </div>
       </div>

app/components/CurrentlyReading.tsx

@@ -0,0 +1,157 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { BookOpen } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useTranslations } from "next-intl";
+
+interface CurrentlyReading {
+  title: string;
+  authors: string[];
+  image: string | null;
+  progress: number;
+  startedAt: string | null;
+}
+
+const CurrentlyReading = () => {
+  const t = useTranslations("home.about.currentlyReading");
+  const [books, setBooks] = useState<CurrentlyReading[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    // Nur einmal beim Laden der Seite
+    const fetchCurrentlyReading = async () => {
+      try {
+        const res = await fetch("/api/n8n/hardcover/currently-reading", {
+          cache: "default",
+        });
+
+        if (!res.ok) {
+          throw new Error("Failed to fetch");
+        }
+
+        const data = await res.json();
+        // Handle both single book and array of books
+        if (data.currentlyReading) {
+          const booksArray = Array.isArray(data.currentlyReading) 
+            ? data.currentlyReading 
+            : [data.currentlyReading];
+          setBooks(booksArray);
+        } else {
+          setBooks([]);
+        }
+      } catch (error) {
+        if (process.env.NODE_ENV === "development") {
+          console.error("Error fetching currently reading:", error);
+        }
+        setBooks([]);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchCurrentlyReading();
+  }, []); // Leeres Array = nur einmal beim Mount
+
+  // Zeige nichts wenn kein Buch gelesen wird oder noch geladen wird
+  if (loading || books.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="space-y-4">
+      {/* Header */}
+      <div className="flex items-center gap-2 mb-4">
+        <BookOpen size={18} className="text-stone-600 flex-shrink-0" />
+        <h3 className="text-lg font-bold text-stone-900">
+          {t("title")} {books.length > 1 && `(${books.length})`}
+        </h3>
+      </div>
+
+      {/* Books List */}
+      {books.map((book, index) => (
+        <motion.div
+          key={`${book.title}-${index}`}
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true, margin: "-50px" }}
+          transition={{ duration: 0.6, delay: index * 0.1, ease: [0.25, 0.1, 0.25, 1] }}
+          whileHover={{
+            scale: 1.02,
+            transition: { duration: 0.4, ease: "easeOut" },
+          }}
+          className="relative overflow-hidden bg-gradient-to-br from-liquid-lavender/15 via-liquid-pink/10 to-liquid-rose/15 border-2 border-liquid-lavender/30 rounded-xl p-6 backdrop-blur-sm hover:border-liquid-lavender/50 hover:from-liquid-lavender/20 hover:via-liquid-pink/15 hover:to-liquid-rose/20 transition-all duration-500 ease-out"
+        >
+          {/* Background Blob Animation */}
+          <motion.div
+            className="absolute -top-10 -right-10 w-32 h-32 bg-gradient-to-br from-liquid-lavender/20 to-liquid-pink/20 rounded-full blur-2xl"
+            animate={{
+              scale: [1, 1.2, 1],
+              opacity: [0.3, 0.5, 0.3],
+            }}
+            transition={{
+              duration: 8,
+              repeat: Infinity,
+              ease: "easeInOut",
+              delay: index * 0.5,
+            }}
+          />
+
+          <div className="relative z-10 flex flex-col sm:flex-row gap-4 items-start">
+            {/* Book Cover */}
+            {book.image && (
+              <motion.div
+                initial={{ opacity: 0, scale: 0.9 }}
+                animate={{ opacity: 1, scale: 1 }}
+                transition={{ duration: 0.5, delay: 0.2 + index * 0.1 }}
+                className="flex-shrink-0"
+              >
+                <div className="relative w-24 h-36 sm:w-28 sm:h-40 rounded-lg overflow-hidden shadow-lg border-2 border-white/50">
+                  <img
+                    src={book.image}
+                    alt={book.title}
+                    className="w-full h-full object-cover"
+                    loading="lazy"
+                  />
+                  {/* Glossy Overlay */}
+                  <div className="absolute inset-0 bg-gradient-to-tr from-white/20 via-transparent to-white/10 pointer-events-none" />
+                </div>
+              </motion.div>
+            )}
+
+            {/* Book Info */}
+            <div className="flex-1 min-w-0">
+              {/* Title */}
+              <h4 className="text-lg font-bold text-stone-900 mb-1 line-clamp-2">
+                {book.title}
+              </h4>
+
+              {/* Authors */}
+              <p className="text-sm text-stone-600 mb-4 line-clamp-1">
+                {book.authors.join(", ")}
+              </p>
+
+              {/* Progress Bar */}
+              <div className="space-y-2">
+                <div className="flex items-center justify-between text-xs text-stone-600">
+                  <span>{t("progress")}</span>
+                  <span className="font-semibold">{book.progress}%</span>
+                </div>
+                <div className="relative h-2 bg-white/50 rounded-full overflow-hidden border border-white/70">
+                  <motion.div
+                    initial={{ width: 0 }}
+                    animate={{ width: `${book.progress}%` }}
+                    transition={{ duration: 1, delay: 0.3 + index * 0.1, ease: "easeOut" }}
+                    className="absolute left-0 top-0 h-full bg-gradient-to-r from-liquid-lavender via-liquid-pink to-liquid-rose rounded-full shadow-sm"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </motion.div>
+      ))}
+    </div>
+  );
+};
+
+export default CurrentlyReading;