# Directus-Integration für das Minimalistische Landing-Theme

Dieses Paket enthält eine minimalistische Landing-Page und ein einfaches Post-Template, angepasst, um Directus als Backend zu nutzen. Das Frontend lädt Inhalte zur Laufzeit aus der Directus REST-API (public read).

Wichtige Dateien
- index.html — Landing-Page (lädt site settings aus Directus)
- post.html — Post-Seite (lädt einen Beitrag per ?slug=... aus Directus)
- assets/styles.css — Styling (Watercolor-Hintergrund, Layout)
- assets/script-directus.js — kleines Client‑JS, das Directus anfragt

Directus - empfohlene Struktur (Beispiel)
1) Collection: site_settings (ein Eintrag, public lesbar)
   - site_title (string)
   - site_description (string, optional)
   - email (string)
   - linkedin (string, URL)
   - github (string, URL)
   - initials (string)
   - tagline (string)
   - name (string)
   - year (integer/string, optional)

2) Collection: posts
   - title (string)
   - slug (string, unique)
   - date_iso (datetime oder ISO string)
   - date (string, human readable)
   - author (relation oder string)
   - content (rich text / HTML) — in diesem Beispiel erwartet das Template bereits HTML
   - excerpt (string)
   - tags (many-to-many relation oder array)

Permissions & CORS
- Die Frontend-Anfragen erfolgen clientseitig an die Directus-API. Stelle sicher:
  - In Directus existiert eine Rolle (z. B. "public") mit Leserechten auf die Collections.
  - CORS erlaubt Anfragen von deiner Frontend-Domain (z. B. der Cloudron-App-Domain).
  - Wenn du private Daten hast, implementiere serverseitige Rendering oder Auth (dieses Theme ist für öffentliche Leseinhalte gedacht).

Konfiguration
- Setze in index.html und post.html die Variable window.__DIRECTUS_CONFIG.url auf die Basis-URL deiner Directus-Instanz (z. B. "https://directus.dein-host.tld").
- Optional: passe die Collection-Namen an (settingsCollection, postsCollection).

Nutzung unter Cloudron
- Kopiere diese Dateien in eine statische Web-App oder nutze einen einfachen Webserver (z. B. nginx oder die statische App auf Cloudron).
- Stelle sicher, dass die Cloudron-Domain in Directus als erlaubte Herkunft (CORS) eingetragen ist.
- Wenn du deine Inhalte serverseitig rendern möchtest (z. B. für bessere SEO), kannst du die Directus-API serverseitig aufrufen und die HTML-Templates zur Build-Zeit füllen (z. B. via Node.js oder Static-Site-Generator). Die gelieferten HTML-Dateien sind bewusst einfach gehalten, damit sie leicht in Build-Pipelines integriert werden können.

Anpassungen & Erweiterungen
- Markdown statt HTML: Wenn deine Posts Markdown enthalten, kannst du clientseitig einen kleinen Markdown-Parser (z. B. marked.js) ergänzen oder serverseitig rendern.
- Lokalisierung: Fügt Felder in Directus für mehrere Sprachen hinzu und erweitere das Skript um eine Sprachwahl.
- Caching: Für Performance kannst du Fetch-Responses im Service Worker oder localStorage cachen.

Wenn du möchtest, kann ich:
- die Template-Platzhalter statt clientseitigem Fetch in ein Build-Tool (z. B. Eleventy/11ty) übersetzen und ein Beispiel-Build-Script erstellen, das Directus-API-Aufrufe zur Build-Zeit macht;
- das Post-Template so erweitern, dass Markdown-Inhalte clientseitig geparst werden;
- ein Beispiel für die Directus-Collection-Definition (JSON) exportieren, das du importieren kannst.

Sag mir, was du bevorzugst — runtime-Client (wie hier) oder build-time-rendering — dann passe ich die Dateien entsprechend an.