Skip to content

Commit 628f140

Browse files
committed
fix: prevent output buffering issues and add dashboard
- Add `exit` and `cleanOutputBuffers` to API responses to prevent HTML appending. - Update CORS headers. - Add Standalone Dashboard for API visualization.
1 parent ad5a653 commit 628f140

4 files changed

Lines changed: 2066 additions & 1 deletion

File tree

assets/dashboard/README.md

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
# Content Pilot — REDAXO API Dashboard
2+
3+
Ein **Standalone-Dashboard** das die [REDAXO API](../../README.md) konsumiert und alle verfügbaren Endpoints visuell darstellt. Ideal als Demo, Referenz und zum Testen der API.
4+
5+
## Features
6+
7+
| Feature | API-Endpoint |
8+
|---|---|
9+
| 📊 **Dashboard** mit Stats-Karten | Alle List-Endpoints parallel |
10+
| 🌳 **Seitenstruktur** als interaktiver Baum | `GET /api/structure/articles` |
11+
| 🖼 **Medienpool** als Galerie mit Filter | `GET /api/media` + `GET /api/media/{filename}/info` |
12+
| 📄 **Templates** mit Code-Ansicht | `GET /api/templates` |
13+
| ⚙️ **Module** mit Ein-/Ausgabe-Code | `GET /api/modules` |
14+
| 👥 **Benutzer & Rollen** Übersicht | `GET /api/users` + `GET /api/users/roles` |
15+
| 🌐 **Sprachen** Konfiguration | `GET /api/system/clangs` |
16+
| 🔍 **Globale Suche** über alle Inhalte | Client-seitig |
17+
| 📋 **API Request Log** mit Timing | Automatisch |
18+
| 🌓 **Dark/Light Theme** | Client-seitig |
19+
20+
## Verwendung
21+
22+
### Option 1: Direkt im Browser öffnen
23+
24+
```bash
25+
open assets/dashboard/index.html
26+
```
27+
28+
### Option 2: Von einem Webserver ausliefern
29+
30+
Die Datei kann von überall ausgeliefert werden — sie benötigt keine Server-seitige Logik.
31+
32+
### Verbindung herstellen
33+
34+
1. **REDAXO URL** eingeben (z.B. `https://www.meine-seite.de`)
35+
2. **API Token** eingeben (erstellt im Backend unter `API → Token`)
36+
3. Sicherstellen, dass der Token **alle benötigten Scopes** hat:
37+
- `structure/articles/list`, `structure/articles/get`
38+
- `media/list`, `media/get`
39+
- `templates/list`
40+
- `modules/list`
41+
- `users/list`
42+
- `system/clangs/list`
43+
44+
### Apache .htaccess (falls nötig)
45+
46+
```apache
47+
RewriteCond %{HTTP:Authorization} .
48+
RewriteRule ^ - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
49+
```
50+
51+
### CORS (falls von externer Domain)
52+
53+
Falls das Dashboard von einer anderen Domain als REDAXO betrieben wird, muss CORS in der REDAXO-Installation konfiguriert werden.
54+
55+
## Screenshots
56+
57+
Das Dashboard bietet:
58+
- **Stats-Karten**: Kompakte Übersicht aller Inhalte mit Klick-Navigation
59+
- **Seitenstruktur-Baum**: Hierarchische Darstellung aller Artikel und Kategorien
60+
- **Media-Galerie**: Thumbnail-Vorschau für Bilder, Icons für andere Dateitypen
61+
- **Detail-Modals**: Klick auf ein Element zeigt alle Metadaten
62+
- **API Log**: Jeder Request wird protokolliert mit Methode, Status und Antwortzeit
63+
64+
## Technologie
65+
66+
- **Zero Dependencies** — Kein Framework, keine Build-Tools, kein npm
67+
- **Single HTML File** — Alles in einer Datei: HTML, CSS, JavaScript
68+
- **Vanilla JS** — Fetch API, DOM Manipulation, ES6+
69+
- **Session Storage** — Token wird nur für die Browser-Session gespeichert
70+
- **Responsive** — Sidebar klappt auf Mobile als Overlay
71+
72+
## Für Entwickler
73+
74+
Dieses Dashboard zeigt:
75+
1. Wie man die REDAXO API mit `fetch()` und Bearer Token konsumiert
76+
2. Wie die API-Responses aufgebaut sind (flache JSON-Arrays)
77+
3. Wie Pagination funktioniert (`page`, `per_page` Query-Parameter)
78+
4. Wie man MediaPool-Thumbnails direkt über `/media/{filename}` einbindet
79+
5. Wie man Fehlerbehandlung und Auth-Validierung implementiert

0 commit comments

Comments
 (0)