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:

   # Via scp oder in deinem Docker Container
   scp tech-stack-schema.json user@server:/path/to/directus/
   

2. Schema anwenden:

   cd /path/to/directus
   npx directus schema apply ./tech-stack-schema.json
   

3. Verify:

   npx directus database inspect
   

---

🔧 Methode 3: Import via REST API (Automatisch)

Falls du ein Script bevorzugst:

// 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:

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

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

# 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:

  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:

# 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