feat: Add Directus setup scripts for collections, fields, and relations

- Created setup-directus-collections.js to automate the creation of tech stack collections, fields, and relations in Directus. - Created setup-directus-hobbies.js for setting up hobbies collection with translations. - Created setup-directus-projects.js for establishing projects collection with comprehensive fields and translations. - Added setup-tech-stack-directus.js to populate tech_stack_items with predefined data.
2026-01-23 02:53:31 +01:00
parent 7604e00e0f
commit e431ff50fc
28 changed files with 5253 additions and 23 deletions
--- a/docs/DYNAMIC_ACTIVITY_FINAL.md
+++ b/docs/DYNAMIC_ACTIVITY_FINAL.md
@@ -0,0 +1,229 @@
+# 🎨 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!** 🎉