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.
This commit is contained in:
243
directus-schema/README.md
Normal file
243
directus-schema/README.md
Normal file
@@ -0,0 +1,243 @@
|
||||
# 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
|
||||
Reference in New Issue
Block a user