denshooter
e431ff50fc
- 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.
166 lines
4.2 KiB
Markdown
166 lines
4.2 KiB
Markdown
# 📚 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.** 🎉
|