portfolio/directus-schema/README.md

# Directus Schema Import - Anleitung

## 📦 Verfügbare Schemas

- `tech-stack-schema.json` - Tech Stack Categories + Items mit Translations
- `projects-schema.json` - Projects Collection (Coming Soon)
- `hobbies-schema.json` - Hobbies Collection (Coming Soon)

---

## 🚀 Methode 1: Import via Directus UI (Einfachste Methode)

### Voraussetzungen:
- Directus 10.x installiert
- Admin-Zugriff auf https://cms.dk0.dev

### Schritte:

1. **Gehe zu Directus Admin Panel:**
   ```
   https://cms.dk0.dev
   ```

2. **Öffne Settings:**
   - Klicke auf das **Zahnrad-Icon** (⚙️) unten links
   - Navigiere zu **Data Model** → **Schema**

3. **Import Schema:**
   - Klicke auf **"Import Schema"** Button
   - Wähle die Datei: `tech-stack-schema.json`
   - ✅ Confirm Import

4. **Überprüfen:**
   - Gehe zu **Data Model**
   - Du solltest jetzt sehen:
     - `tech_stack_categories`
     - `tech_stack_categories_translations`
     - `tech_stack_items`

---

## ⚡ Methode 2: Import via Directus CLI (Fortgeschritten)

### Voraussetzungen:
- Direkter Zugriff auf Directus Server
- Directus CLI installiert

### Schritte:

1. **Schema-Datei auf Server kopieren:**
   ```bash
   # Via scp oder in deinem Docker Container
   scp tech-stack-schema.json user@server:/path/to/directus/
   ```

2. **Schema anwenden:**
   ```bash
   cd /path/to/directus
   npx directus schema apply ./tech-stack-schema.json
   ```

3. **Verify:**
   ```bash
   npx directus database inspect
   ```

---

## 🔧 Methode 3: Import via REST API (Automatisch)

Falls du ein Script bevorzugst:

```typescript
// scripts/import-directus-schema.ts
import fetch from 'node-fetch';
import fs from 'fs';

const DIRECTUS_URL = process.env.DIRECTUS_URL || 'https://cms.dk0.dev';
const DIRECTUS_TOKEN = process.env.DIRECTUS_STATIC_TOKEN;

async function importSchema(schemaPath: string) {
  const schema = JSON.parse(fs.readFileSync(schemaPath, 'utf-8'));
  
  // Import Collections
  for (const collection of schema.collections) {
    await fetch(`${DIRECTUS_URL}/collections`, {
      method: 'POST',
      headers: {
        'Authorization': `Bearer ${DIRECTUS_TOKEN}`,
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(collection)
    });
  }
  
  // Import Relations
  for (const relation of schema.relations) {
    await fetch(`${DIRECTUS_URL}/relations`, {
      method: 'POST',
      headers: {
        'Authorization': `Bearer ${DIRECTUS_TOKEN}`,
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(relation)
    });
  }
  
  console.log('✅ Schema imported successfully!');
}

importSchema('./directus-schema/tech-stack-schema.json');
```

**Ausführen:**
```bash
npm install node-fetch @types/node-fetch
npx tsx scripts/import-directus-schema.ts
```

---

## 📝 Nach dem Import: Languages konfigurieren

Directus benötigt die Languages Collection:

### Option A: Manuell in Directus UI

1. Gehe zu **Settings** → **Project Settings** → **Languages**
2. Füge hinzu:
   - **English (United States)** - Code: `en-US`
   - **German (Germany)** - Code: `de-DE`

### Option B: Via API

```bash
curl -X POST "https://cms.dk0.dev/languages" \
  -H "Authorization: Bearer YOUR_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{"code": "en-US", "name": "English (United States)"}'

curl -X POST "https://cms.dk0.dev/languages" \
  -H "Authorization: Bearer YOUR_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{"code": "de-DE", "name": "German (Germany)"}'
```

---

## 🎨 Nach dem Import: Daten befüllen

### Manuell in Directus UI:

1. **Tech Stack Categories erstellen:**
   - Gehe zu **Content** → **Tech Stack Categories**
   - Klicke **"Create Item"**
   - Fülle aus:
     - Key: `frontend`
     - Icon: `Globe`
     - Status: `published`
     - Translations:
       - EN: "Frontend & Mobile"
       - DE: "Frontend & Mobile"

2. **Tech Stack Items hinzufügen:**
   - Gehe zu **Content** → **Tech Stack Items**
   - Klicke **"Create Item"**
   - Fülle aus:
     - Category: `frontend` (Select)
     - Name: `Next.js`
     - URL: `https://nextjs.org` (optional)

### Oder: Migrations-Script verwenden

```bash
# Coming Soon
npm run migrate:tech-stack
```

---

## ✅ Checklist

- [ ] Schema importiert in Directus
- [ ] Languages konfiguriert (en-US, de-DE)
- [ ] Tech Stack Categories angelegt (4 Kategorien)
- [ ] Tech Stack Items hinzugefügt (~20 Items)
- [ ] Status auf "published" gesetzt
- [ ] GraphQL Query getestet:
  ```graphql
  query {
    tech_stack_categories(filter: {status: {_eq: "published"}}) {
      key
      icon
      translations {
        name
        languages_code { code }
      }
      items {
        name
        url
      }
    }
  }
  ```

---

## 🐛 Troubleshooting

### Error: "Collection already exists"
→ Schema wurde bereits importiert. Lösung:
```bash
# Via Directus UI: Data Model → Delete Collection
# Oder via API:
curl -X DELETE "https://cms.dk0.dev/collections/tech_stack_categories" \
  -H "Authorization: Bearer YOUR_TOKEN"
```

### Error: "Language not found"
→ Stelle sicher dass `en-US` und `de-DE` in Languages existieren

### Error: "Unauthorized"
→ Überprüfe `DIRECTUS_STATIC_TOKEN` in .env

---

## 📚 Nächste Schritte

Nach erfolgreichem Import:

1. ✅ **Test GraphQL Query** in Directus
2. ✅ **Erweitere lib/directus.ts** mit `getTechStack()`
3. ✅ **Update About.tsx** Component
4. ✅ **Deploy & Test** auf Production

---

## 💡 Pro-Tipps

- **Backups:** Exportiere Schema regelmäßig via Directus UI
- **Version Control:** Committe Schema-Files ins Git
- **Automation:** Nutze Directus Webhooks für Auto-Deployment
- **Testing:** Teste Queries im Directus GraphQL Playground