portfolio/docs/archive/N8N_READING_INTEGRATION.md

# 📚 Reading Activity zu n8n hinzufügen

## ✅ Was du bereits hast:
- ✅ Frontend ist bereit (ActivityFeed.tsx updated)
- ✅ TypeScript Interfaces erweitert
- ✅ Grid Layout (horizontal auf Desktop, vertikal auf Mobile)
- ✅ Conditional Rendering (nur zeigen wenn `isReading: true`)

## 🔧 n8n Workflow anpassen

### Option 1: Hardcover Integration (automatisch)

**1. Neuer Node in n8n: "Hardcover"**
```
Type: HTTP Request
Method: GET
URL: https://cms.dk0.dev/api/n8n/hardcover/currently-reading
```

**2. Mit Webhook verbinden**
```
Webhook → Hardcover (parallel zu Spotify/Lanyard)
          ↓
       Merge (Node mit 5 Inputs statt 4)
          ↓
    Code in JavaScript
```

**3. Code Node updaten**
Ersetze den gesamten Code in deinem "Code in JavaScript" Node mit dem Code aus:
`scripts/n8n-workflow-code-updated.js`

---

### Option 2: Manueller Webhook (für Tests)

**Neuer Workflow: "Set Reading Status"**

**Node 1: Webhook (POST)**
```
Path: /set-reading
Method: POST
```

**Node 2: PostgreSQL/Set Variable**
```javascript
// Speichere reading Status in einer Variablen
// Oder direkt in Database wenn du willst
const { title, author, progress, coverUrl, isReading } = items[0].json.body;

return [{
  json: {
    reading: {
      isReading: isReading !== false, // default true
      title,
      author,
      progress,
      coverUrl
    }
  }
}];
```

**Usage:**
```bash
curl -X POST https://your-n8n.com/webhook/set-reading \
  -H "Content-Type: application/json" \
  -d '{
    "isReading": true,
    "title": "Clean Architecture",
    "author": "Robert C. Martin",
    "progress": 65,
    "coverUrl": "https://example.com/cover.jpg"
  }'

# Clear reading:
curl -X POST https://your-n8n.com/webhook/set-reading \
  -d '{"isReading": false}'
```

---

## 🎨 Wie es aussieht

### Desktop (breiter Bildschirm):
```
┌────────────┬────────────┬────────────┬────────────┐
│  Coding    │  Gaming    │  Music     │  Reading   │
│  (RIGHT    │  (RIGHT    │            │            │
│   NOW)     │   NOW)     │            │            │
└────────────┴────────────┴────────────┴────────────┘
```

### Tablet:
```
┌────────────┬────────────┐
│  Coding    │  Gaming    │
└────────────┴────────────┘
┌────────────┬────────────┐
│  Music     │  Reading   │
└────────────┴────────────┘
```

### Mobile:
```
┌────────────┐
│  Coding    │
│  (RIGHT    │
│   NOW)     │
└────────────┘
┌────────────┐
│  Gaming    │
└────────────┘
┌────────────┐
│  Music     │
└────────────┘
┌────────────┐
│  Reading   │
└────────────┘
```

---

## 🔥 Features

✅ **Nur zeigen wenn aktiv** - Wenn `isReading: false`, verschwindet die Card komplett
✅ **Progress Bar** - Visueller Fortschritt mit Animation
✅ **Book Cover** - Kleines Cover (40x56px)
✅ **Responsive Grid** - 1 Spalte (Mobile), 2 Spalten (Tablet), 3 Spalten (Desktop)
✅ **Smooth Animations** - Fade in/out mit Framer Motion
✅ **Amber Theme** - Passt zu "Reading" 📖

---

## 🚀 Testing

**1. Hardcover Endpoint testen:**
```bash
curl https://cms.dk0.dev/api/n8n/hardcover/currently-reading
```

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

**3. Frontend testen:**
```bash
# Dev Server starten
npm run dev

# In Browser Console:
fetch('/api/n8n/status').then(r => r.json()).then(console.log)
```

---

## 📝 Nächste Schritte

1. ✅ Frontend Code ist bereits angepasst
2. ⏳ n8n Workflow Code updaten (siehe `scripts/n8n-workflow-code-updated.js`)
3. ⏳ Optional: Hardcover Node hinzufügen
4. ⏳ Testen und Deploy

**Alles ready! Nur noch n8n Code austauschen.** 🎉