portfolio/docs/DYNAMIC_ACTIVITY_FINAL.md

🎨 Dynamisches Activity System - Setup

✅ Was jetzt funktioniert:

Ohne Code-Änderungen kannst du jetzt beliebige Activities hinzufügen!

n8n sendet:

{
  "status": { "text": "online", "color": "green" },
  "music": { ... },
  "gaming": { ... },
  "coding": { ... },
  "customActivities": {
    "reading": {
      "enabled": true,
      "title": "Clean Architecture",
      "author": "Robert C. Martin",
      "progress": 65,
      "coverUrl": "https://..."
    },
    "working_out": {
      "enabled": true,
      "activity": "Running",
      "duration_minutes": 45,
      "distance_km": 7.2,
      "calories": 350
    },
    "learning": {
      "enabled": true,
      "course": "Docker Deep Dive",
      "platform": "Udemy",
      "progress": 67
    }
  }
}

Frontend rendert automatisch:

• ✅ Erkennt alle Activities in customActivities
• ✅ Generiert Cards mit passenden Farben
• ✅ Zeigt Icons (📖 🏃 🎓 📺 etc.)
• ✅ Progress Bars für progress Felder
• ✅ Bilder für coverUrl, image_url, albumArt
• ✅ Alle zusätzlichen Felder werden gerendert

---

🔧 n8n Setup

1. Code Node updaten

Ersetze den Code in deinem "Code in JavaScript" Node mit: scripts/n8n-workflow-code-updated.js

2. Custom Activity hinzufügen

Im n8n Code:

// Nach der Coding Logic, vor dem OUTPUT:
customActivities.reading = {
  enabled: true,
  title: "Clean Code",
  author: "Robert C. Martin",
  progress: 65,
  coverUrl: "https://covers.openlibrary.org/..."
};

// Oder mehrere:
customActivities.working_out = {
  enabled: true,
  activity: "Running",
  duration_minutes: 45
};

3. Automatische Integration (Hardcover Beispiel)

Bereits im Code enthalten:

if (hardcoverData && hardcoverData.user_book) {
  const book = hardcoverData.user_book;
  customActivities.reading = {
    enabled: true,
    title: book.book?.title,
    author: book.book?.contributions?.[0]?.author?.name,
    progress: book.progress_pages && book.book?.pages 
      ? Math.round((book.progress_pages / book.book.pages) * 100) 
      : undefined,
    coverUrl: book.book?.image_url
  };
}

---

🎯 Unterstützte Felder

Das System erkennt automatisch:

Feld	Verwendung
enabled	Zeigt/versteckt die Activity (required!)
title, name, book_title	Haupttitel (fett)
author, artist, platform	Untertitel
progress (0-100)	Progress Bar mit Animation
progress_label	Text neben Progress (default: "complete")
coverUrl, image_url, albumArt	Bild/Cover (40x56px)
Alle anderen	Werden als kleine Text-Zeilen gerendert

---

🌈 Verfügbare Typen & Icons

Vordefinierte Styling:

Type	Icon	Farben
reading	📖	Amber/Orange
working_out	🏃	Red/Orange
learning	🎓	Purple/Pink
streaming	📺	Violet/Purple
cooking	👨‍🍳	Gray (default)
traveling	✈️	Gray (default)
meditation	🧘	Gray (default)
podcast	🎙️	Gray (default)

Alle anderen Typen bekommen Standard-Styling (grau) und ✨ Icon

---

📝 Beispiele

Reading (mit Cover & Progress)

customActivities.reading = {
  enabled: true,
  title: "Clean Architecture",
  author: "Robert C. Martin",
  progress: 65,
  coverUrl: "https://covers.openlibrary.org/b/id/12345-M.jpg"
};

Workout (mit Details)

customActivities.working_out = {
  enabled: true,
  activity: "Running",
  duration_minutes: 45,
  distance_km: 7.2,
  calories: 350,
  avg_pace: "6:15 /km"
};

Learning (mit Progress)

customActivities.learning = {
  enabled: true,
  course: "Docker Deep Dive",
  platform: "Udemy",
  instructor: "Nigel Poulton",
  progress: 67,
  time_spent_hours: 8.5
};

Streaming (Live)

customActivities.streaming = {
  enabled: true,
  platform: "Twitch",
  title: "Building a Portfolio",
  viewers: 42,
  url: "https://twitch.tv/yourname"
};

Activity deaktivieren

customActivities.reading = {
  enabled: false // Verschwindet komplett
};
// Oder einfach nicht hinzufügen

---

🚀 Testing

1. n8n Workflow testen:

curl https://your-n8n.com/webhook/denshooter-71242/status

2. Response checken:

{
  "customActivities": {
    "reading": { "enabled": true, "title": "..." }
  }
}

3. Frontend checken:

• Dev Server: npm run dev
• Browser: http://localhost:3000
• Activity Feed sollte automatisch neue Card zeigen

4. Mehrere Activities gleichzeitig:

customActivities.reading = { enabled: true, ... };
customActivities.learning = { enabled: true, ... };
customActivities.working_out = { enabled: true, ... };
// Alle 3 werden nebeneinander gezeigt (Grid Layout)

---

✨ Das ist ECHTE Dynamik!

• ✅ Keine Code-Änderungen - Nur n8n Workflow anpassen
• ✅ Keine Deployments - Änderungen sofort sichtbar
• ✅ Beliebig erweiterbar - Neue Activity-Typen jederzeit
• ✅ Zero Downtime - Alles läuft live
• ✅ Responsive - Grid passt sich automatisch an

Genau das was du wolltest! 🎉