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:
```json
{
  "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:**
```javascript
// 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:
```javascript
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)
```javascript
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)
```javascript
customActivities.working_out = {
  enabled: true,
  activity: "Running",
  duration_minutes: 45,
  distance_km: 7.2,
  calories: 350,
  avg_pace: "6:15 /km"
};
```

### Learning (mit Progress)
```javascript
customActivities.learning = {
  enabled: true,
  course: "Docker Deep Dive",
  platform: "Udemy",
  instructor: "Nigel Poulton",
  progress: 67,
  time_spent_hours: 8.5
};
```

### Streaming (Live)
```javascript
customActivities.streaming = {
  enabled: true,
  platform: "Twitch",
  title: "Building a Portfolio",
  viewers: 42,
  url: "https://twitch.tv/yourname"
};
```

### Activity deaktivieren
```javascript
customActivities.reading = {
  enabled: false // Verschwindet komplett
};
// Oder einfach nicht hinzufügen
```

---

## 🚀 Testing

**1. n8n Workflow testen:**
```bash
curl https://your-n8n.com/webhook/denshooter-71242/status
```

**2. Response checken:**
```json
{
  "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:**
```javascript
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!** 🎉