refactor portfolios and isolate public profiles #16
11 changed files with 424 additions and 1816 deletions
266
README.md
266
README.md
|
|
@ -1,120 +1,200 @@
|
|||
# 📚 Dual Identity Autoren-Zentrale (Selbstgehostet)
|
||||
# Autoren-Portfolio-Suite
|
||||
|
||||
Willkommen in Ihrer modernen, reaktiven Autoren-Website für das 21. Jahrhundert! Dieses System ermöglicht es Ihnen, mehrere eigenständige Autorenprofile mit individuellen Themen, Biografien, Schreibprojekten und Bücherregalen über eine einzige, passwortgeschützte Administrationsoberfläche zu pflegen.
|
||||
Eine selbst gehostete Portfolio-Anwendung für mehrere voneinander getrennte Autorenprofile. Inhalte, Bücher, laufende Projekte, Designs, SEO-Daten und Rechtstexte werden über eine gemeinsame, passwortgeschützte Administrationsoberfläche gepflegt.
|
||||
|
||||
---
|
||||
Technisch besteht die Anwendung aus einem React-/Tailwind-Frontend und einem Express-Backend. Sie kann als einzelner Docker-Container betrieben werden und benötigt keine externe Datenbank.
|
||||
|
||||
## 🛠️ Warum kein klassischer LAMP-Stack? (Unser Vorschlag)
|
||||
## Funktionsumfang
|
||||
|
||||
Bisher liefen klassische Portfolios oft auf einem standardmäßigen **LAMP-Stack** (Linux, Apache, MySQL, PHP). Für diese modernisierte Website schlagen wir einen **Node.JS + Docker-Stack** vor. Hier ist der Grund, warum das für Ihre Bedürfnisse die deutlich bessere Option ist:
|
||||
- Mehrere unabhängig konfigurierte Autorenprofile mit eigenen Domains und Themes
|
||||
- Biografie, Schlagworte, individuelle Texte und optionale Zusatzsektion
|
||||
- Bücherregal mit Detailansicht, Cover, Kauflink und optionaler Spotify-Playlist
|
||||
- Aktuelle Projekte mit Fortschritt, Markdown-Detailtext, Bild und optionaler Spotify-Playlist
|
||||
- Lokaler Bild-Upload über den Adminbereich
|
||||
- Verwaltung von Impressum, Datenschutzerklärung und weiteren Rechtstexten
|
||||
- Optionale serverseitige Gemini-Unterstützung für Klappentexte
|
||||
- Profilabhängige SEO-Metadaten, Open Graph, strukturierte Daten, Sitemap und `robots.txt`
|
||||
- Health-Endpunkte, persistente JSON-Datenhaltung und automatische Migrationsbackups
|
||||
|
||||
1. **Vollständige Kapselung (Kein Server-Wildwuchs):** Bei einem LAMP-Stack müssen Sie Apache/Nginx, PHP-Laufzeiten und eine MySQL-Datenbank auf dem Host installieren und managen. Unser Docker-Stack bündelt das gesamte Frontend, das Express-Backend und die Speicherrelevanz in einem **einzigen, autarken Container**.
|
||||
2. **Blitzschnelle, reaktive Benutzeroberfläche (SPA):** Das Frontend nutzt modernste Webtechnologie (React & Tailwind CSS). Seitenwechsel und Buchdetails laden augenblicklich im Browser des Nutzers, ohne das klassische, träge Neuladen von PHP-Seiten.
|
||||
3. **Einfachheit bei Datensicherungen (Backups):** Anstatt komplexe MySQL-Dumps durchzuführen, speichert unsere Anwendung alle Buchtitel, Projekte, Cover und Biografien in einer schlanken JSON-Datenbankdatei (`/data/database.json`). Ein Backup lässt sich durch einfaches Kopieren dieser Datei anfertigen!
|
||||
4. **KI-Unterstützung integriert:** Der integrierte **Gemini-Klappentext-Assistent** läuft nahtlos und sicher über das Node-Backend (ohne API-Schlüssel im Webbrowser zu exponieren).
|
||||
## Trennung der Profile
|
||||
|
||||
---
|
||||
Die öffentliche Seite erhält ausschließlich die Daten des Profils, das zur aufgerufenen Domain gehört. Andere Profile, deren Domains und interne Pfadkonfigurationen werden von der öffentlichen API nicht ausgeliefert.
|
||||
|
||||
## 🌌 Die Trennung der Profile
|
||||
Im Produktionsmodus gilt der Hostname als Trennlinie:
|
||||
|
||||
Das System ist von Grund auf so strukturiert, dass Besucher der Website **keine Verbindung** zwischen den gepflegten Identitäten herstellen müssen. Der Code enthält derzeit vier getrennt auflösbare Profile; Domains und Pfade können im Adminbereich gepflegt werden. Unter anderem:
|
||||
- **Echte Identität (Daniel Hesse — Sci-Fi & Fantasy):** Erreichbar auf der Standard-Startseite (`/`). Das Design kombiniert dunkelblaue Weltraum-Energie, Monospace-Einflüsse und kosmische Magie-Akzente.
|
||||
- **Pseudonym (Annie Slone — Sinnliche Literatur):** Erreichbar unter anderem über den Pfad `/sensual-moments`. Das Profil verwendet ein warmes, edles Thema mit klassischer und anspruchsvoller Serif-Asthetik. Es gibt keinerlei gegenseitige Verlinkungen!
|
||||
- Konfigurierte Domains reagieren nur auf die exakte Domain und deren `www`-Variante.
|
||||
- Ein URL-Pfad oder Query-Parameter kann nicht zu einem anderen Profil wechseln.
|
||||
- Pfadbasierte Profilvorschauen stehen nur in der lokalen Entwicklungsumgebung zur Verfügung.
|
||||
- Vollständige Profildaten sind ausschließlich über einen authentifizierten Admin-Endpunkt verfügbar.
|
||||
- Gemeinsam gepflegte Rechtstexte werden bei der öffentlichen Ausgabe von strukturiert bekannten Kennungen anderer Profile bereinigt. Die gespeicherten Originaltexte bleiben unverändert.
|
||||
|
||||
---
|
||||
Der Reverse Proxy sollte zusätzlich nur die tatsächlich verwendeten Domains an den Container weiterleiten.
|
||||
|
||||
## 🚀 Inbetriebnahme als Docker-Stack (Empfohlen)
|
||||
## Architektur
|
||||
|
||||
Es wird dringend empfohlen, die Website mithilfe von **Docker und Docker-Compose** zu betreiben. Dies garantiert, dass die Anwendung sofort und unabhängig von installierten Node.JS-Versionen auf Ihrem Server funktioniert.
|
||||
Die öffentlichen Portfolioseiten verwenden eine gemeinsame, daten- und themegesteuerte React-Komponente. Dadurch liegen Layout, Buch- und Projektmodale, Rechtstexte sowie die Medienintegration nur einmal im Code vor. Profilbezogene Inhalte und Farben kommen aus der Datenbank; die Auswahl des Profils findet serverseitig statt.
|
||||
|
||||
### 1. Dateien vorbereiten
|
||||
Stellen Sie sicher, dass sich folgende Dateien im gleichen Ordner auf Ihrem Server befinden:
|
||||
- `Dockerfile`
|
||||
- `docker-compose.yml`
|
||||
- Der gesamte Code-Ordner
|
||||
Wichtige Verzeichnisse und Dateien:
|
||||
|
||||
### 2. Konfiguration anpassen
|
||||
Kopieren Sie `.env.example` nach `.env` und tragen Sie dort die Geheimnisse ein. Die `.env`-Datei wird nicht eingecheckt:
|
||||
```dotenv
|
||||
ADMIN_PASSWORD=IhrSicheresLieblingsPasswort123
|
||||
SESSION_SECRET=EineUnabhaengigeZufaelligeZeichenfolgeMitMindestens32Zeichen
|
||||
GEMINI_API_KEY=Ihr_Gemini_API_Schluessel
|
||||
```text
|
||||
src/App.tsx Öffentliche/Admin-Routen und Datenabruf
|
||||
src/components/PortfolioPage.tsx Gemeinsame öffentliche Portfolioseite
|
||||
src/components/AdminPanel.tsx Administrationsarbeitsbereich
|
||||
src/components/admin/ Ausgelagerte Admin-Komponenten
|
||||
src/defaultData.ts Ausgangsdaten für eine neue Installation
|
||||
server.ts API, Routing, Sessions, Uploads und SEO
|
||||
data/database.json Persistente Inhaltsdaten
|
||||
data/uploads/ Lokal hochgeladene Bilder
|
||||
data/backups/ Automatische Migrationsbackups
|
||||
tests/ Integrations- und Sicherheitstests
|
||||
```
|
||||
|
||||
Der Admin-Login erzeugt eine auf 24 Stunden begrenzte, serverseitige Sitzung in einem `HttpOnly`-, `Secure`- und `SameSite=Strict`-Cookie. Ein Container-Neustart beendet aktive Sitzungen. Das Passwort selbst wird nicht im Browser gespeichert. Ohne `ADMIN_PASSWORD` und `SESSION_SECRET` startet die Anwendung im Produktionsmodus bewusst nicht.
|
||||
## Docker-Inbetriebnahme
|
||||
|
||||
### 1. Konfiguration anlegen
|
||||
|
||||
Kopiere `.env.example` nach `.env` und ersetze die Beispielwerte:
|
||||
|
||||
```dotenv
|
||||
ADMIN_PASSWORD=EinLangesZufaelligesAdminPasswort
|
||||
SESSION_SECRET=EineUnabhaengigeZufaelligeZeichenfolgeMitMindestens32Zeichen
|
||||
|
||||
# Optional: aktiviert den Klappentext-Assistenten
|
||||
GEMINI_API_KEY=
|
||||
|
||||
# Nur setzen, wenn genau ein vertrauenswürdiger Reverse Proxy vorgeschaltet ist
|
||||
# TRUST_PROXY=1
|
||||
```
|
||||
|
||||
Für den Produktionsbetrieb gelten folgende Mindestanforderungen:
|
||||
|
||||
- `ADMIN_PASSWORD`: gesetzt und mindestens 12 Zeichen lang
|
||||
- `SESSION_SECRET`: gesetzt, unabhängig vom Passwort und mindestens 32 Zeichen lang
|
||||
|
||||
Ohne gültige Werte startet der Server im Produktionsmodus bewusst nicht. Geheimnisse gehören ausschließlich in `.env` beziehungsweise in die Secret-Verwaltung der Betriebsumgebung und nicht in `docker-compose.yml` oder Git.
|
||||
|
||||
### 2. Container starten
|
||||
|
||||
### 3. Container starten
|
||||
Führen Sie im entsprechenden Verzeichnis folgenden Befehl aus:
|
||||
```bash
|
||||
docker compose up -d --build
|
||||
```
|
||||
Die Anwendung baut das Image und startet die Autoren-Zentrale im Hintergrund. Sie ist nun direkt auf Port **`3000`** Ihres Webservers erreichbar!
|
||||
|
||||
#### Reverse Proxy Tipp:
|
||||
Sie können ganz hervorragend einen Reverse Proxy wie **Nginx Proxy Manager**, **Traefik** oder **Caddy** davorhängen, um SSL-Zertifikate (Let's Encrypt) zuzuweisen und Ihre Domain auf den Container-Port `3000` umzuleiten.
|
||||
Die Anwendung ist anschließend am veröffentlichten Container-Port `3000` erreichbar. In einer öffentlichen Installation sollte davor ein Reverse Proxy wie Caddy, Traefik oder Nginx Proxy Manager TLS übernehmen und ausschließlich die vorgesehenen Domains weiterleiten.
|
||||
|
||||
Wenn genau ein vertrauenswürdiger Reverse Proxy vor dem Container sitzt und Port 3000 nicht direkt aus dem Internet erreichbar ist, setzen Sie zusätzlich `TRUST_PROXY=1` in `.env`. So verwendet das Login-Limit die ursprüngliche Client-IP. Bei direkter Veröffentlichung des Containerports darf diese Option nicht aktiviert werden.
|
||||
Wenn genau ein vertrauenswürdiger Proxy vorgeschaltet und Port 3000 nicht direkt öffentlich erreichbar ist, kann `TRUST_PROXY=1` gesetzt werden. Das sorgt dafür, dass das Login-Limit die ursprüngliche Client-IP verwendet. Bei direkter Veröffentlichung des Ports darf diese Option nicht aktiviert werden.
|
||||
|
||||
---
|
||||
## Installation ohne Docker
|
||||
|
||||
## 💾 Manuelle Installation ohne Docker (Alternativ)
|
||||
|
||||
Sollten Sie die Software direkt auf Ihrem Server (ohne Docker) starten wollen:
|
||||
|
||||
1. **Voraussetzung:** Installieren Sie **Node.js** (v18 oder neuer) auf Ihrem Linux- oder Windows-Server.
|
||||
2. **Abhängigkeiten installieren:**
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
3. **Produktions-Build ausführen:**
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
4. **Umgebungsvariablen setzen:**
|
||||
Erstellen Sie eine `.env`-Datei oder exportieren Sie diese im Terminal:
|
||||
```bash
|
||||
export ADMIN_PASSWORD="IhrSicheresPasswort"
|
||||
export SESSION_SECRET="EineUnabhaengigeZufaelligeZeichenfolgeMitMindestens32Zeichen"
|
||||
export GEMINI_API_KEY="Ihr_Gemini_API_Schlüssel"
|
||||
```
|
||||
5. **Starten:**
|
||||
```bash
|
||||
npm start
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🧱 Datensicherung / Backups
|
||||
|
||||
Alle Ihre Inhalte (Biografien, Projektfortschritte und Bücherregal-Einträge) liegen als lesbares JSON in Ihrem Projektordner unter:
|
||||
`./data/database.json`
|
||||
|
||||
Da wir in der `docker-compose.yml` ein **lokales Volume** gemountet haben (`./data:/app/data`), wird diese Datei direkt auf die Festplatte Ihres Servers geschrieben.
|
||||
- **Backup erstellen:** Sichern Sie einfach die Datei `./data/database.json`.
|
||||
- **Wiederherstellen:** Platzieren Sie eine gesicherte `database.json` in den `./data/`-Ordner vor dem Starten des Containers.
|
||||
|
||||
Beim Ergänzen neuer Datenfelder legt die Anwendung vor der Migration automatisch eine unveränderte Sicherung unter `./data/backups/` an. Schreibvorgänge erfolgen atomar und werden nacheinander verarbeitet, damit die Datei bei parallelen Änderungen nicht teilweise überschrieben wird. Das Docker-Volume ersetzt dennoch kein externes Backup des Hostsystems.
|
||||
|
||||
---
|
||||
|
||||
## Betrieb & SEO
|
||||
|
||||
- `/health/live` zeigt an, ob der Prozess läuft.
|
||||
- `/health/ready` zeigt an, ob die Daten erfolgreich geladen wurden und die Anwendung bereit ist.
|
||||
- Seitentitel, Beschreibung, Canonical URL, Open-Graph-Daten und strukturierte Personendaten werden passend zur aufgerufenen Autorendomain serverseitig ausgegeben.
|
||||
- `/robots.txt` und `/sitemap.xml` werden ebenfalls profilabhängig erzeugt; der Adminbereich ist mit `noindex` gekennzeichnet.
|
||||
- Optionale SEO-Felder können später je Profil gepflegt werden. Ohne sie werden die Angaben rückwärtskompatibel aus den vorhandenen Profildaten abgeleitet.
|
||||
|
||||
### Bild-Uploads
|
||||
|
||||
Der Adminbereich akzeptiert JPEG, PNG, WebP, GIF und AVIF bis maximal 8 MB. Der Server prüft den tatsächlichen Dateikopf unabhängig von Dateiname und Browserangabe, erzeugt einen zufälligen nicht überschreibbaren Namen und begrenzt Uploads auf 30 Versuche pro Sitzung und Stunde. SVG, HTML und andere aktive Dateiformate werden weder angenommen noch aus dem Uploadverzeichnis ausgeliefert.
|
||||
|
||||
### Qualitätschecks
|
||||
Voraussetzung ist eine unterstützte Node.js-Version (empfohlen: Node.js 20 oder neuer).
|
||||
|
||||
```bash
|
||||
npm run typecheck # TypeScript ohne Ausgabe prüfen
|
||||
npm test # Produktionsbuild und Integrationstests
|
||||
npm run check # vollständiger Check aus TypeScript, Build und Tests
|
||||
npm install
|
||||
npm run build
|
||||
NODE_ENV=production \
|
||||
ADMIN_PASSWORD="EinLangesZufaelligesAdminPasswort" \
|
||||
SESSION_SECRET="EineUnabhaengigeZufaelligeZeichenfolgeMitMindestens32Zeichen" \
|
||||
npm start
|
||||
```
|
||||
|
||||
Die Integrationstests verwenden ausschließlich temporäre Datenverzeichnisse und einen kurzlebigen lokalen Server. Sie prüfen Produktions-Secrets, Admin-Sitzung und Logout, Origin-Schutz, Login-Limit, exaktes Domain-Routing sowie gültige und manipulierte Bild-Uploads.
|
||||
Optional können `GEMINI_API_KEY`, `TRUST_PROXY`, `PORT` und `DATA_DIR` ergänzt werden. Standardmäßig lauscht die Anwendung auf Port `3000` und verwendet `./data` als Datenverzeichnis.
|
||||
|
||||
Für die lokale Entwicklung genügt:
|
||||
|
||||
```bash
|
||||
npm install
|
||||
npm run dev
|
||||
```
|
||||
|
||||
Die im Entwicklungsmodus vorhandenen Fallback-Secrets sind ausschließlich für lokale Entwicklung gedacht und werden in Produktion nicht akzeptiert.
|
||||
|
||||
## Admin-Authentifizierung und Schutzmaßnahmen
|
||||
|
||||
Das Admin-Passwort wird nur beim Login übertragen und weder als Bearer-Token zurückgegeben noch im Browser gespeichert. Nach erfolgreicher Anmeldung wird eine zufällige, serverseitig verwaltete Sitzung erzeugt.
|
||||
|
||||
- Sitzungsdauer: 24 Stunden
|
||||
- Cookie: `HttpOnly`, `SameSite=Strict`, in Produktion zusätzlich `Secure`
|
||||
- Sitzungen liegen nur im Arbeitsspeicher und enden spätestens bei einem Server-/Container-Neustart
|
||||
- Schreibende Admin-Anfragen werden auf gleiche Herkunft geprüft
|
||||
- Fehlgeschlagene Logins werden pro Client-IP begrenzt
|
||||
- Uploads und Gemini-Aufrufe besitzen zusätzliche Sitzungslimits
|
||||
- Sicherheitsheader und eine Content Security Policy werden serverseitig gesetzt
|
||||
|
||||
Ein vergessenes Admin-Passwort wird über die Betriebsumgebung geändert; es gibt keine öffentliche Passwort-zurücksetzen-Funktion.
|
||||
|
||||
## Datenhaltung und Backups
|
||||
|
||||
Alle Inhaltsdaten liegen in `data/database.json`. Docker bindet mit `./data:/app/data` das vollständige Datenverzeichnis auf dem Host ein. Damit bleiben Daten und Uploads beim Neubauen oder Ersetzen des Containers erhalten.
|
||||
|
||||
Für ein vollständiges Backup sollte der gesamte Ordner `data/` gesichert werden:
|
||||
|
||||
```text
|
||||
data/database.json
|
||||
data/uploads/
|
||||
data/backups/
|
||||
```
|
||||
|
||||
Schreibvorgänge auf die JSON-Datenbank erfolgen atomar und nacheinander. Vor schemaändernden Migrationen legt die Anwendung eine unveränderte Sicherung in `data/backups/` an. Diese lokalen Sicherungen ersetzen kein externes, regelmäßig getestetes Backup.
|
||||
|
||||
## Bild-Uploads
|
||||
|
||||
Der Adminbereich akzeptiert JPEG, PNG, WebP, GIF und AVIF mit maximal 8 MB pro Datei.
|
||||
|
||||
Der Server:
|
||||
|
||||
- prüft Dateiendung, angegebenen MIME-Typ und den tatsächlichen Dateikopf,
|
||||
- lehnt SVG, HTML und andere aktive Formate ab,
|
||||
- erzeugt zufällige, nicht überschreibbare Dateinamen,
|
||||
- begrenzt Uploadversuche pro Admin-Sitzung und Stunde,
|
||||
- liefert Uploads mit `nosniff` und langfristigen Cache-Headern aus.
|
||||
|
||||
Die Bilder können für Avatare, Banner, Buchcover und aktuelle Projekte verwendet werden. Leere Bildfelder erzeugen keinen Request zu einem externen Standardbild.
|
||||
|
||||
## Spotify und externe Dienste
|
||||
|
||||
Spotify-Playlists werden sowohl in Buch- als auch in Projektdetails nach dem Zwei-Klick-Prinzip eingebunden. Beim Öffnen eines Details erscheint zunächst nur ein lokaler Platzhalter. Erst nach einem bewussten Klick auf „Spotify-Player laden“ wird das Spotify-`iframe` erzeugt und eine Verbindung zu Spotify hergestellt.
|
||||
|
||||
Weitere mögliche externe Verbindungen:
|
||||
|
||||
- `GEMINI_API_KEY`: Der optionale Admin-Assistent sendet die eingegebenen Buchinformationen serverseitig an die Google-Gemini-API.
|
||||
- Kauf- und sonstige Markdown-Links: Erst ein Klick führt zur jeweiligen externen Website.
|
||||
- Externe Bild-URLs: Das System unterstützt sie weiterhin, empfohlen werden jedoch lokal hochgeladene Bilder.
|
||||
|
||||
Die Anwendung enthält kein Analytics- oder Tracking-System und lädt keine externen Webfonts. Sie verwendet für Besucher weder `localStorage` noch `sessionStorage`. Der Browser speichert lediglich das notwendige Admin-Sitzungscookie nach einer Anmeldung. Diese Punkte sowie das übliche Logging des Reverse Proxys/Hosters sollten passend zur tatsächlichen Installation in der Datenschutzerklärung beschrieben werden.
|
||||
|
||||
## SEO und Betriebsendpunkte
|
||||
|
||||
- `/health/live`: Prozess läuft
|
||||
- `/health/ready`: Daten wurden geladen und der Server ist bereit
|
||||
- `/robots.txt`: profilabhängige Crawling-Regeln
|
||||
- `/sitemap.xml`: profilabhängige Sitemap
|
||||
- `/admin`: mit `noindex` gekennzeichneter Administrationsbereich
|
||||
|
||||
Seitentitel, Beschreibung, Canonical URL, Open-Graph-Daten und strukturierte Personendaten werden serverseitig für die aufgerufene Domain erzeugt. Optionale SEO-Felder können je Profil im Adminbereich gepflegt werden; fehlende Angaben werden aus bestehenden Profildaten abgeleitet.
|
||||
|
||||
## Qualitätschecks
|
||||
|
||||
```bash
|
||||
npm run typecheck # TypeScript-Typprüfung
|
||||
npm test # Produktionsbuild und Integrationstests
|
||||
npm run check # Typprüfung, Build und Tests
|
||||
```
|
||||
|
||||
Die Integrationstests verwenden ein temporäres Datenverzeichnis und einen kurzlebigen lokalen HTTP-Server. Geprüft werden unter anderem:
|
||||
|
||||
- verpflichtende Produktions-Secrets,
|
||||
- Admin-Sitzung und Logout,
|
||||
- Origin-Schutz und Login-Limit,
|
||||
- exaktes Domain-Routing und öffentliche Profilisolation,
|
||||
- Schutz des vollständigen Admin-Datenendpunkts,
|
||||
- gültige und manipulierte Bild-Uploads,
|
||||
- wesentliche Sicherheitsheader.
|
||||
|
||||
## Hinweise zur Aktualisierung
|
||||
|
||||
Vor einem Update sollte der komplette `data/`-Ordner gesichert werden. Danach kann das Image neu gebaut werden:
|
||||
|
||||
```bash
|
||||
docker compose up -d --build
|
||||
```
|
||||
|
||||
Vorhandene Inhaltsdaten werden nicht durch die im Quellcode enthaltenen Ausgangsdaten ersetzt. Neue optionale Felder werden migrationsfähig ergänzt; vor notwendigen Schemaänderungen wird automatisch ein Backup angelegt.
|
||||
|
|
|
|||
71
server.ts
71
server.ts
|
|
@ -5,7 +5,7 @@ import { createHmac, randomBytes, timingSafeEqual } from "crypto";
|
|||
import dotenv from "dotenv";
|
||||
import { GoogleGenAI } from "@google/genai";
|
||||
import { defaultAuthorData } from "./src/defaultData.js";
|
||||
import { AuthorData, AuthorProfile } from "./src/types.js";
|
||||
import { AuthorData, AuthorProfile, PortfolioTheme, PublicAuthorData } from "./src/types.js";
|
||||
|
||||
dotenv.config();
|
||||
|
||||
|
|
@ -69,6 +69,12 @@ setInterval(() => {
|
|||
|
||||
const profileKeys = ["scifi", "erotica", "clara", "renee"] as const;
|
||||
type ProfileKey = typeof profileKeys[number];
|
||||
const publicThemes: Record<ProfileKey, PortfolioTheme> = {
|
||||
scifi: "cosmic",
|
||||
erotica: "velvet",
|
||||
clara: "botanical",
|
||||
renee: "romance",
|
||||
};
|
||||
|
||||
function isAuthorData(value: unknown): value is AuthorData {
|
||||
if (!value || typeof value !== "object") return false;
|
||||
|
|
@ -420,19 +426,24 @@ function profileForRequest(hostname: string, pathname: string): ProfileKey {
|
|||
scifi: ["hesse-sf.de", "danielhesse.de"],
|
||||
};
|
||||
|
||||
for (const key of profileKeys) {
|
||||
const configuredPaths = (dbCache[key].customPath || "").split(",").map((item) => item.trim().toLowerCase()).filter(Boolean);
|
||||
for (const value of [...configuredPaths, ...standardPaths[key]]) {
|
||||
const prefix = value.startsWith("/") ? value : `/${value}`;
|
||||
if (pathname === prefix || pathname.startsWith(`${prefix}/`)) return key;
|
||||
}
|
||||
}
|
||||
for (const key of profileKeys) {
|
||||
const configuredDomains = (dbCache[key].customDomain || "").split(",").map(cleanDomain).filter(Boolean);
|
||||
for (const domain of [...configuredDomains, ...standardDomains[key]]) {
|
||||
if (matchesConfiguredDomain(hostname, domain)) return key;
|
||||
}
|
||||
}
|
||||
|
||||
// Path previews are a local development convenience only. In production the
|
||||
// hostname is the security boundary, so a path can never reveal another site.
|
||||
if (process.env.NODE_ENV !== "production") {
|
||||
for (const key of profileKeys) {
|
||||
const configuredPaths = (dbCache[key].customPath || "").split(",").map((item) => item.trim().toLowerCase()).filter(Boolean);
|
||||
for (const value of [...configuredPaths, ...standardPaths[key]]) {
|
||||
const prefix = value.startsWith("/") ? value : `/${value}`;
|
||||
if (pathname === prefix || pathname.startsWith(`${prefix}/`)) return key;
|
||||
}
|
||||
}
|
||||
}
|
||||
return "scifi";
|
||||
}
|
||||
|
||||
|
|
@ -451,6 +462,30 @@ function absoluteUrl(value: string | undefined, origin: string): string | undefi
|
|||
}
|
||||
}
|
||||
|
||||
function escapeRegExp(value: string): string {
|
||||
return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
|
||||
}
|
||||
|
||||
function isolateLegalContent(content: string, activeKey: ProfileKey): string {
|
||||
let isolated = content;
|
||||
for (const key of profileKeys) {
|
||||
if (key === activeKey) continue;
|
||||
const profile = dbCache[key];
|
||||
const identifiers = [
|
||||
profile.name,
|
||||
profile.heroTitle,
|
||||
...(profile.customDomain || "").split(",").map((domain) => cleanDomain(domain)),
|
||||
...(profile.customPath || "").split(",").map((pathValue) => pathValue.trim()),
|
||||
...profile.books.map((book) => book.title),
|
||||
...profile.projects.map((project) => project.title),
|
||||
].filter((identifier) => identifier.length >= 4);
|
||||
for (const identifier of identifiers) {
|
||||
isolated = isolated.replace(new RegExp(escapeRegExp(identifier), "gi"), "Autorinnen- oder Autorenprofil");
|
||||
}
|
||||
}
|
||||
return isolated;
|
||||
}
|
||||
|
||||
function seoMeta(req: express.Request, scriptNonce?: string): string {
|
||||
const key = profileForRequest(req.hostname, req.path);
|
||||
const profile = dbCache[key];
|
||||
|
|
@ -491,8 +526,26 @@ function seoMeta(req: express.Request, scriptNonce?: string): string {
|
|||
|
||||
// --- API ROUTES ---
|
||||
|
||||
// 1. Get entire public author setup
|
||||
// Return only the public data belonging to the requested hostname.
|
||||
app.get("/api/author-data", (req, res) => {
|
||||
const key = profileForRequest(req.hostname, req.path);
|
||||
const { customDomain: _customDomain, customPath: _customPath, ...publicProfile } = dbCache[key];
|
||||
const legalDocuments = (dbCache.legalDocuments || [])
|
||||
.filter((document) => document.assignedProfiles.includes(key))
|
||||
.map((document) => ({
|
||||
...document,
|
||||
content: isolateLegalContent(document.content, key),
|
||||
assignedProfiles: [],
|
||||
}));
|
||||
const response: PublicAuthorData = {
|
||||
profile: publicProfile,
|
||||
legalDocuments,
|
||||
theme: publicThemes[key],
|
||||
};
|
||||
res.json(response);
|
||||
});
|
||||
|
||||
app.get("/api/admin/author-data", verifySession, (_req, res) => {
|
||||
res.json(dbCache);
|
||||
});
|
||||
|
||||
|
|
|
|||
200
src/App.tsx
200
src/App.tsx
|
|
@ -1,193 +1,101 @@
|
|||
import { lazy, Suspense, useState, useEffect } from "react";
|
||||
import { AuthorData } from "./types";
|
||||
import { lazy, Suspense, useEffect, useState } from "react";
|
||||
import { Lock, RefreshCw } from "lucide-react";
|
||||
import type { PublicAuthorData } from "./types";
|
||||
|
||||
const SciFiPortfolio = lazy(() => import("./components/SciFiPortfolio"));
|
||||
const EroticaPortfolio = lazy(() => import("./components/EroticaPortfolio"));
|
||||
const ClaraPortfolio = lazy(() => import("./components/ClaraPortfolio"));
|
||||
const ReneePortfolio = lazy(() => import("./components/ReneePortfolio"));
|
||||
const PortfolioPage = lazy(() => import("./components/PortfolioPage"));
|
||||
const AdminPanel = lazy(() => import("./components/AdminPanel"));
|
||||
|
||||
function LoadingScreen() {
|
||||
return (
|
||||
<div className="min-h-screen bg-slate-950 text-slate-100 flex flex-col items-center justify-center space-y-4">
|
||||
<RefreshCw className="w-8 h-8 animate-spin text-cyan-400" />
|
||||
<p className="font-mono text-xs text-slate-500 uppercase tracking-widest">Autoren-Portfolio wird geladen...</p>
|
||||
<p className="font-mono text-xs text-slate-500 uppercase tracking-widest">Portfolio wird geladen...</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function App() {
|
||||
const [authorData, setAuthorData] = useState<AuthorData | null>(null);
|
||||
const [publicData, setPublicData] = useState<PublicAuthorData | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [currentPath, setCurrentPath] = useState(window.location.pathname);
|
||||
const isAdmin = currentPath === "/admin" || currentPath.startsWith("/admin/");
|
||||
|
||||
// Monitor location changes for custom routing
|
||||
useEffect(() => {
|
||||
const handleLocationChange = () => {
|
||||
setCurrentPath(window.location.pathname);
|
||||
};
|
||||
|
||||
// Listen to popstate for navigation back/forward support
|
||||
const handleLocationChange = () => setCurrentPath(window.location.pathname);
|
||||
window.addEventListener("popstate", handleLocationChange);
|
||||
return () => {
|
||||
window.removeEventListener("popstate", handleLocationChange);
|
||||
};
|
||||
return () => window.removeEventListener("popstate", handleLocationChange);
|
||||
}, []);
|
||||
|
||||
// Fetch profiles configuration from server
|
||||
useEffect(() => {
|
||||
fetch("/api/author-data")
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
setAuthorData(data);
|
||||
setLoading(false);
|
||||
if (isAdmin) {
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const controller = new AbortController();
|
||||
setLoading(true);
|
||||
fetch("/api/author-data", { signal: controller.signal })
|
||||
.then((res) => {
|
||||
if (!res.ok) throw new Error(`HTTP ${res.status}`);
|
||||
return res.json() as Promise<PublicAuthorData>;
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error("Fehler beim Abrufen der Autoren-Informationen:", err);
|
||||
setLoading(false);
|
||||
});
|
||||
}, []);
|
||||
.then((data) => setPublicData(data))
|
||||
.catch((error) => {
|
||||
if (error instanceof DOMException && error.name === "AbortError") return;
|
||||
console.error("Fehler beim Abrufen des Portfolios:", error);
|
||||
setPublicData(null);
|
||||
})
|
||||
.finally(() => setLoading(false));
|
||||
|
||||
// Ermittelt die aktive Suite basierend auf Pfad-Überschreibungen oder dem Domainnamen (Hostname)
|
||||
const getActiveSuite = (): "erotica" | "clara" | "scifi" | "renee" => {
|
||||
const hostname = window.location.hostname.toLowerCase();
|
||||
const profileKeys: ("erotica" | "clara" | "renee" | "scifi")[] = ["erotica", "clara", "renee", "scifi"];
|
||||
return () => controller.abort();
|
||||
}, [isAdmin]);
|
||||
|
||||
// 1. Pfad-basierte Routen (haben Vorrang, z.B. für Vorschau & Direktlinks)
|
||||
for (const key of profileKeys) {
|
||||
const p = authorData?.[key];
|
||||
const customPaths: string[] = p?.customPath
|
||||
? p.customPath.split(",").map((s) => s.trim().toLowerCase()).filter(Boolean)
|
||||
: [];
|
||||
|
||||
// Statische Standard-Fallbacks
|
||||
if (key === "erotica") customPaths.push("/sensual-moments", "/annie-slone", "/marc-velvet");
|
||||
if (key === "clara") customPaths.push("/clara-finch", "/clara");
|
||||
if (key === "renee") customPaths.push("/renee-heart", "/renee");
|
||||
if (key === "scifi") customPaths.push("/sci-fi", "/daniel-hesse");
|
||||
|
||||
for (const prefix of customPaths) {
|
||||
if (prefix) {
|
||||
const formattedPrefix = prefix.startsWith("/") ? prefix : "/" + prefix;
|
||||
if (currentPath === formattedPrefix || currentPath.startsWith(formattedPrefix + "/")) {
|
||||
return key;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 2. Dynamische Domain-basierte Routen (für Live-Domains)
|
||||
for (const key of profileKeys) {
|
||||
const p = authorData?.[key];
|
||||
const customDomains: string[] = p?.customDomain
|
||||
? p.customDomain.split(",").map((s) => s.trim().toLowerCase()).filter(Boolean)
|
||||
: [];
|
||||
|
||||
// Statische Standard-Fallbacks
|
||||
if (key === "erotica") customDomains.push("annieslone.de", "marcvelvet.de");
|
||||
if (key === "clara") customDomains.push("clarafinch.de", "clara-finch.de");
|
||||
if (key === "renee") customDomains.push("reneeheart.de", "renee-heart.de");
|
||||
if (key === "scifi") customDomains.push("hesse-sf.de", "danielhesse.de");
|
||||
|
||||
for (const domain of customDomains) {
|
||||
// Entferne evtl. eingegebene Protokolle (http://, https://) oder führendes "www."
|
||||
const cleanDomain = domain.replace(/^https?:\/\//, "").replace(/^www\./, "").trim();
|
||||
if (cleanDomain && (hostname === cleanDomain || hostname === `www.${cleanDomain}`)) {
|
||||
return key;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Standard-Fallback (Daniel Hesse SciFi)
|
||||
return "scifi";
|
||||
};
|
||||
|
||||
// Dynamisch den Dokumententitel (Browsertab-Titel) basierend auf Suite und Autorendaten anpassen
|
||||
useEffect(() => {
|
||||
if (!authorData) {
|
||||
document.title = "Lade Autoren-Portfolio...";
|
||||
return;
|
||||
}
|
||||
if (currentPath === "/admin" || currentPath.startsWith("/admin/")) {
|
||||
document.title = "Admin-Zentrale | Autor-Suiten";
|
||||
return;
|
||||
}
|
||||
if (isAdmin) document.title = "Administration";
|
||||
else if (publicData) document.title = publicData.profile.seoTitle || publicData.profile.name;
|
||||
else document.title = "Portfolio";
|
||||
}, [isAdmin, publicData]);
|
||||
|
||||
const activeSuite = getActiveSuite();
|
||||
if (activeSuite === "erotica") {
|
||||
document.title = authorData.erotica.name || "Annie Slone";
|
||||
} else if (activeSuite === "clara") {
|
||||
document.title = authorData.clara.name || "Clara Finch";
|
||||
} else if (activeSuite === "renee") {
|
||||
document.title = authorData.renee.name || "Renee Heart";
|
||||
} else {
|
||||
document.title = authorData.scifi.name || "Daniel Hesse";
|
||||
}
|
||||
}, [currentPath, authorData]);
|
||||
|
||||
const handleAdminLogout = () => {
|
||||
// Relocate to landing site after administration work
|
||||
window.history.pushState({}, "", "/");
|
||||
setCurrentPath("/");
|
||||
const navigateTo = (path: string) => {
|
||||
window.history.pushState({}, "", path);
|
||||
setCurrentPath(path);
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return <LoadingScreen />;
|
||||
if (isAdmin) {
|
||||
return (
|
||||
<Suspense fallback={<LoadingScreen />}>
|
||||
<AdminPanel onLogout={() => navigateTo("/")} />
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
|
||||
if (!authorData) {
|
||||
if (loading) return <LoadingScreen />;
|
||||
|
||||
if (!publicData) {
|
||||
return (
|
||||
<div className="min-h-screen bg-slate-950 text-slate-100 flex flex-col items-center justify-center p-4">
|
||||
<div className="min-h-screen bg-slate-950 text-slate-100 flex items-center justify-center p-4">
|
||||
<div className="max-w-md p-6 bg-slate-900 border border-slate-800 rounded-xl text-center space-y-3">
|
||||
<h2 className="text-lg font-bold text-rose-450 text-rose-400">Verbindungsfehler</h2>
|
||||
<p className="text-xs text-slate-400 leading-relaxed">
|
||||
Die Verbindung zum lokalen Datenspeicher-Server konnte nicht hergestellt werden. Bitte vergewissern Sie sich, dass Ihr Express API-Server ordnungsgemäß läuft.
|
||||
</p>
|
||||
<h2 className="text-lg font-bold text-rose-400">Verbindungsfehler</h2>
|
||||
<p className="text-xs text-slate-400 leading-relaxed">Das Portfolio konnte nicht geladen werden.</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Purely route-based render isolation structure
|
||||
// 1. Administration panel
|
||||
if (currentPath === "/admin" || currentPath.startsWith("/admin/")) {
|
||||
return <Suspense fallback={<LoadingScreen />}><AdminPanel onLogout={handleAdminLogout} /></Suspense>;
|
||||
}
|
||||
|
||||
// Render active portfolio
|
||||
const renderActivePortfolio = () => {
|
||||
const activeSuite = getActiveSuite();
|
||||
const legalDocs = authorData.legalDocuments || [];
|
||||
if (activeSuite === "erotica") {
|
||||
return <EroticaPortfolio data={authorData.erotica} legalDocuments={legalDocs} />;
|
||||
}
|
||||
if (activeSuite === "clara") {
|
||||
return <ClaraPortfolio data={authorData.clara} legalDocuments={legalDocs} />;
|
||||
}
|
||||
if (activeSuite === "renee") {
|
||||
return <ReneePortfolio data={authorData.renee} legalDocuments={legalDocs} />;
|
||||
}
|
||||
return <SciFiPortfolio data={authorData.scifi} legalDocuments={legalDocs} />;
|
||||
};
|
||||
|
||||
return (
|
||||
<Suspense fallback={<LoadingScreen />}>
|
||||
{renderActivePortfolio()}
|
||||
|
||||
{/* Absolute floating administration bypass link hidden on the bottom left (hover to show) */}
|
||||
<PortfolioPage data={publicData.profile} legalDocuments={publicData.legalDocuments} theme={publicData.theme} />
|
||||
<div className="fixed bottom-3 left-3 opacity-0 hover:opacity-100 focus-within:opacity-100 transition-opacity duration-300 z-40 bg-neutral-950/90 border border-neutral-800 p-2 rounded-xl flex items-center text-xs font-mono shadow-xl backdrop-blur-sm">
|
||||
<a
|
||||
href="/admin"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
window.history.pushState({}, "", "/admin");
|
||||
setCurrentPath("/admin");
|
||||
<a
|
||||
href="/admin"
|
||||
onClick={(event) => {
|
||||
event.preventDefault();
|
||||
navigateTo("/admin");
|
||||
}}
|
||||
className="text-stone-500 hover:text-cyan-400 font-bold flex items-center gap-1.5 transition-colors px-1"
|
||||
>
|
||||
<Lock className="w-3 h-3" />
|
||||
<span>Admin-Zentrale</span>
|
||||
<span>Administration</span>
|
||||
</a>
|
||||
</div>
|
||||
</Suspense>
|
||||
|
|
|
|||
|
|
@ -2,12 +2,13 @@ import React, { useState, useEffect, FormEvent } from "react";
|
|||
import Markdown from "react-markdown";
|
||||
import { AuthorData, AuthorProfile, Book, Project, LegalDocument } from "../types";
|
||||
import {
|
||||
Lock, Save, Plus, Trash2, Edit2, Check, RefreshCw, Sparkles,
|
||||
Save, Plus, Trash2, Edit2, Check, RefreshCw, Sparkles,
|
||||
BookOpen, Compass, Clipboard, Eye, Music, LogOut, ArrowLeftRight,
|
||||
Palette, Type, Image as ImageIcon, Globe, Tag,
|
||||
Scale, ShieldCheck, FileText, CheckSquare, Square, Copy, ArrowRight
|
||||
} from "lucide-react";
|
||||
import ImagePicker from "./ImagePicker";
|
||||
import AdminLogin from "./admin/AdminLogin";
|
||||
|
||||
interface AdminPanelProps {
|
||||
onLogout: () => void;
|
||||
|
|
@ -73,7 +74,7 @@ export default function AdminPanel({ onLogout }: AdminPanelProps) {
|
|||
const fetchAuthorData = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await fetch("/api/author-data");
|
||||
const res = await fetch("/api/admin/author-data");
|
||||
const data = await res.json();
|
||||
setAuthorData(data);
|
||||
} catch (err) {
|
||||
|
|
@ -485,48 +486,7 @@ export default function AdminPanel({ onLogout }: AdminPanelProps) {
|
|||
};
|
||||
|
||||
if (!isLoggedIn) {
|
||||
return (
|
||||
<div className="min-h-screen bg-slate-950 text-slate-100 flex items-center justify-center p-4">
|
||||
<div className="w-full max-w-md p-8 bg-slate-900 border border-slate-800 rounded-2xl shadow-2xl space-y-6">
|
||||
<div className="text-center space-y-2">
|
||||
<div className="mx-auto w-12 h-12 bg-indigo-950/80 border border-indigo-700/50 rounded-xl flex items-center justify-center text-cyan-400">
|
||||
<Lock className="w-6 h-6" />
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold tracking-tight text-white">Autoren-Zentrale Admin</h1>
|
||||
<p className="text-xs text-slate-400">Authentifizierung erforderlich. Passwortgeschütztes Kontrollzentrum.</p>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleLogin} className="space-y-4">
|
||||
<div className="space-y-1">
|
||||
<label className="text-xs font-mono text-cyan-400 uppercase tracking-widest">Admin-Passwort</label>
|
||||
<input
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
placeholder="Passwort eingeben..."
|
||||
className="w-full px-4 py-3 bg-slate-950 border border-slate-800 rounded-xl text-white outline-none focus:border-cyan-400 transition-colors text-sm"
|
||||
required
|
||||
/>
|
||||
<span className="text-[10px] text-slate-500">Standard-Passwort im Self-Host ist `autor2026`, anpassbar via Env-Variable `ADMIN_PASSWORD`.</span>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="p-3 bg-rose-950/40 border border-rose-900/50 text-rose-300 text-xs rounded-lg text-center font-sans">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="w-full py-3 bg-gradient-to-r from-cyan-500 to-indigo-600 hover:from-cyan-400 hover:to-indigo-500 text-slate-950 font-bold rounded-xl transition-all flex items-center justify-center gap-2 text-sm cursor-pointer"
|
||||
>
|
||||
{loading ? <RefreshCw className="w-4 h-4 animate-spin text-slate-950" /> : <span>Zentrale aufschließen</span>}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
return <AdminLogin password={password} error={error} loading={loading} onPasswordChange={setPassword} onSubmit={handleLogin} />;
|
||||
}
|
||||
|
||||
if (!authorData || !profile) {
|
||||
|
|
@ -561,25 +521,25 @@ export default function AdminPanel({ onLogout }: AdminPanelProps) {
|
|||
onClick={() => { setActiveProfile("scifi"); setActiveTab("profile"); }}
|
||||
className={`px-3 py-1.5 rounded-lg text-xs font-semibold cursor-pointer transition-all ${activeProfile === "scifi" ? "bg-cyan-500 text-slate-950" : "text-slate-400 hover:text-white"}`}
|
||||
>
|
||||
Sci-Fi (Daniel Hesse)
|
||||
Sci-Fi ({authorData.scifi.name})
|
||||
</button>
|
||||
<button
|
||||
onClick={() => { setActiveProfile("erotica"); setActiveTab("profile"); }}
|
||||
className={`px-3 py-1.5 rounded-lg text-xs font-semibold cursor-pointer transition-all ${activeProfile === "erotica" ? "bg-rose-800 text-white" : "text-slate-400 hover:text-white"}`}
|
||||
>
|
||||
Erotik ({authorData?.erotica?.name || "Annie Slone"})
|
||||
Erotik ({authorData.erotica.name})
|
||||
</button>
|
||||
<button
|
||||
onClick={() => { setActiveProfile("clara"); setActiveTab("profile"); }}
|
||||
className={`px-3 py-1.5 rounded-lg text-xs font-semibold cursor-pointer transition-all ${activeProfile === "clara" ? "bg-emerald-700 text-white" : "text-slate-400 hover:text-white"}`}
|
||||
>
|
||||
Naturlyrik ({authorData?.clara?.name || "Clara Finch"})
|
||||
Naturlyrik ({authorData.clara.name})
|
||||
</button>
|
||||
<button
|
||||
onClick={() => { setActiveProfile("renee"); setActiveTab("profile"); }}
|
||||
className={`px-3 py-1.5 rounded-lg text-xs font-semibold cursor-pointer transition-all ${activeProfile === "renee" ? "bg-yellow-500 text-slate-950" : "text-slate-400 hover:text-white"}`}
|
||||
>
|
||||
Romantik ({authorData?.renee?.name || "Renee Heart"})
|
||||
Romantik ({authorData.renee.name})
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
|
@ -855,10 +815,10 @@ export default function AdminPanel({ onLogout }: AdminPanelProps) {
|
|||
type="text"
|
||||
value={profile.customDomain || ""}
|
||||
onChange={(e) => updateProfileField("customDomain", e.target.value)}
|
||||
placeholder="z.B. reneeheart.de, renee-heart.de"
|
||||
placeholder="z.B. autorin.de, www.autorin.de"
|
||||
className="w-full px-3 py-2 bg-slate-950 border border-slate-800 rounded-xl text-white outline-none focus:border-indigo-500 text-sm font-mono"
|
||||
/>
|
||||
<p className="text-[11px] text-slate-500">Kommagetrennte Domainnamen. Bsp: <code className="text-slate-400">reneeheart.de, renee-heart.de</code></p>
|
||||
<p className="text-[11px] text-slate-500">Kommagetrennte Domainnamen. Bsp: <code className="text-slate-400">autorin.de, autorin.com</code></p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
|
|
@ -1840,10 +1800,10 @@ export default function AdminPanel({ onLogout }: AdminPanelProps) {
|
|||
<div className="grid grid-cols-1 gap-4">
|
||||
{authorData.legalDocuments.map((doc) => {
|
||||
const profileNamesMap = {
|
||||
scifi: authorData.scifi?.name || "Daniel Hesse",
|
||||
erotica: authorData.erotica?.name || "Annie Slone",
|
||||
clara: authorData.clara?.name || "Clara Finch",
|
||||
renee: authorData.renee?.name || "Renee Heart"
|
||||
scifi: authorData.scifi.name,
|
||||
erotica: authorData.erotica.name,
|
||||
clara: authorData.clara.name,
|
||||
renee: authorData.renee.name
|
||||
};
|
||||
|
||||
return (
|
||||
|
|
@ -2044,10 +2004,10 @@ export default function AdminPanel({ onLogout }: AdminPanelProps) {
|
|||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-3 pt-2">
|
||||
{[
|
||||
{ key: "scifi" as const, name: authorData.scifi?.name || "Daniel Hesse", badge: "Sci-Fi" },
|
||||
{ key: "erotica" as const, name: authorData.erotica?.name || "Annie Slone", badge: "Erotik" },
|
||||
{ key: "clara" as const, name: authorData.clara?.name || "Clara Finch", badge: "Naturlyrik" },
|
||||
{ key: "renee" as const, name: authorData.renee?.name || "Renee Heart", badge: "Romantik" }
|
||||
{ key: "scifi" as const, name: authorData.scifi.name, badge: "Sci-Fi" },
|
||||
{ key: "erotica" as const, name: authorData.erotica.name, badge: "Erotik" },
|
||||
{ key: "clara" as const, name: authorData.clara.name, badge: "Naturlyrik" },
|
||||
{ key: "renee" as const, name: authorData.renee.name, badge: "Romantik" }
|
||||
].map((item) => {
|
||||
const checked = legalForm.assignedProfiles?.includes(item.key);
|
||||
return (
|
||||
|
|
@ -2094,22 +2054,22 @@ export default function AdminPanel({ onLogout }: AdminPanelProps) {
|
|||
type: "impressum",
|
||||
content: `### Angaben gemäß § 5 Digitale-Dienste-Gesetz (DDG)
|
||||
|
||||
**Daniel Hesse**
|
||||
Musterstraße 12
|
||||
10115 Berlin
|
||||
**Vor- und Nachname**
|
||||
Straße und Hausnummer
|
||||
PLZ Ort
|
||||
Deutschland
|
||||
|
||||
### Kontakt
|
||||
**E-Mail:** kontakt@danielhesse.de
|
||||
**Website:** https://danielhesse.de
|
||||
**E-Mail:** kontakt@example.org
|
||||
**Website:** https://example.org
|
||||
|
||||
### Redaktionell verantwortlich
|
||||
Daniel Hesse
|
||||
Musterstraße 12
|
||||
10115 Berlin
|
||||
Vor- und Nachname
|
||||
Straße und Hausnummer
|
||||
PLZ Ort
|
||||
|
||||
### Künstlerische Pseudonyme & Urheberrecht
|
||||
Die auf dieser Internetpräsenz präsentierten literarischen Werke und Inhalte unter den Autorennamen **Daniel Hesse**, **Annie Slone**, **Clara Finch** und **Renee Heart** sind urheberrechtlich geschützte künstlerische Veröffentlichungen.
|
||||
### Urheberrecht
|
||||
Die auf dieser Internetpräsenz präsentierten literarischen Werke und Inhalte sind urheberrechtlich geschützt.
|
||||
|
||||
### EU-Streitschlichtung
|
||||
Die Europäische Kommission stellt eine Plattform zur Online-Streitbeilegung (OS) bereit: https://ec.europa.eu/consumers/odr/
|
||||
|
|
@ -2139,10 +2099,10 @@ Die folgenden Hinweise geben einen einfachen Überblick darüber, was mit Ihren
|
|||
### 2. Verantwortliche Stelle
|
||||
Verantwortlich für die Datenverarbeitung auf dieser Website ist:
|
||||
|
||||
**Daniel Hesse**
|
||||
Musterstraße 12
|
||||
10115 Berlin
|
||||
E-Mail: kontakt@danielhesse.de
|
||||
**Vor- und Nachname**
|
||||
Straße und Hausnummer
|
||||
PLZ Ort
|
||||
E-Mail: kontakt@example.org
|
||||
|
||||
### 3. Datenerfassung auf dieser Website
|
||||
|
||||
|
|
|
|||
|
|
@ -1,492 +0,0 @@
|
|||
import { useState } from "react";
|
||||
import Markdown from "react-markdown";
|
||||
import { Book, Project, AuthorProfile, LegalDocument } from "../types";
|
||||
import { Leaf, Feather, Sparkles, BookOpen, ExternalLink, ArrowRight } from "lucide-react";
|
||||
import SpotlightSection from "./SpotlightSection";
|
||||
import LegalModal from "./LegalModal";
|
||||
import ProjectDetailMedia from "./ProjectDetailMedia";
|
||||
import SpotifyConsentPlayer from "./SpotifyConsentPlayer";
|
||||
|
||||
interface ClaraPortfolioProps {
|
||||
data: AuthorProfile;
|
||||
legalDocuments?: LegalDocument[];
|
||||
}
|
||||
|
||||
export default function ClaraPortfolio({ data, legalDocuments = [] }: ClaraPortfolioProps) {
|
||||
const [selectedBook, setSelectedBook] = useState<Book | null>(null);
|
||||
const [selectedProject, setSelectedProject] = useState<Project | null>(null);
|
||||
const [legalModalOpen, setLegalModalOpen] = useState(false);
|
||||
const [activeLegalId, setActiveLegalId] = useState<string | null>(null);
|
||||
|
||||
const relevantLegalDocs = legalDocuments.filter(doc => doc.assignedProfiles.includes("clara"));
|
||||
|
||||
const accentColor = data.accentColor || "#8FA797";
|
||||
const secondaryColor = data.secondaryColor || "#B59EB1";
|
||||
const bgColor = data.backgroundColor || "#0c0a09";
|
||||
const cardBgColor = data.cardBgColor || "#1c1917";
|
||||
|
||||
const fontClass = data.fontFamily === "sans" ? "font-sans" : data.fontFamily === "mono" ? "font-mono" : "font-serif";
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`min-h-screen text-stone-200 ${fontClass} selection:bg-[#B39EAF]/30 selection:text-white overflow-x-hidden relative`}
|
||||
style={{ backgroundColor: bgColor }}
|
||||
>
|
||||
{/* Hero Banner Background if present */}
|
||||
{data.heroBannerUrl && (
|
||||
<div className="absolute top-0 inset-x-0 h-96 overflow-hidden pointer-events-none -z-5 opacity-20">
|
||||
<img src={data.heroBannerUrl} alt="" className="w-full h-full object-cover blur-sm" />
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-transparent to-stone-950" style={{ backgroundImage: `linear-gradient(to bottom, transparent, ${bgColor})` }} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Delicate organic gradients */}
|
||||
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-stone-900/10 via-transparent to-transparent -z-10 pointer-events-none" />
|
||||
<div className="absolute top-1/4 left-1/4 w-96 h-96 rounded-full blur-3xl pointer-events-none opacity-15" style={{ backgroundColor: accentColor }} />
|
||||
<div className="absolute bottom-1/3 right-1/3 w-96 h-96 rounded-full blur-3xl pointer-events-none opacity-15" style={{ backgroundColor: secondaryColor }} />
|
||||
|
||||
{/* Header / Hero */}
|
||||
<header className="relative py-24 px-4 max-w-7xl mx-auto border-b border-stone-800/80">
|
||||
<div className="text-center max-w-4xl mx-auto space-y-6">
|
||||
<div
|
||||
className="inline-flex items-center gap-2 px-4 py-1.5 bg-stone-900/80 border rounded-full text-xs tracking-wider mb-2 shadow-sm"
|
||||
style={{ borderColor: `${accentColor}40`, color: accentColor }}
|
||||
>
|
||||
<Leaf className="w-3.5 h-3.5 animate-pulse" style={{ color: accentColor }} />
|
||||
<span className="font-serif italic text-stone-300">{data.badgeText || "Lyrik & Naturphilosophie"}</span>
|
||||
</div>
|
||||
|
||||
<h1 className="text-4xl md:text-6xl font-serif tracking-widest text-stone-100 uppercase font-light drop-shadow-sm">
|
||||
{data.heroTitle || data.name || "CLARA FINCH"}
|
||||
</h1>
|
||||
<p className="font-sans text-xs md:text-sm tracking-[0.4em] uppercase" style={{ color: secondaryColor }}>
|
||||
{data.heroSubtitle || "LYRIK, ESSAYS & NATURPHILOSOPHIE"}
|
||||
</p>
|
||||
<div className="h-[1px] w-36 mx-auto mt-6" style={{ background: `linear-gradient(to right, transparent, ${accentColor}, ${secondaryColor}, transparent)` }} />
|
||||
|
||||
{/* Quick Section Navigation */}
|
||||
<nav className="mt-8 flex flex-wrap justify-center gap-3 text-xs font-sans">
|
||||
<a
|
||||
href="#ueber-mich"
|
||||
className="px-4 py-2 rounded-full border border-stone-800 bg-stone-900/60 hover:border-stone-500 transition-all text-stone-300 uppercase tracking-wider"
|
||||
>
|
||||
🌿 {data.aboutTitle || "Über mich"}
|
||||
</a>
|
||||
<a
|
||||
href="#projekte"
|
||||
className="px-4 py-2 rounded-full border border-stone-800 bg-stone-900/60 hover:border-stone-500 transition-all text-stone-300 uppercase tracking-wider"
|
||||
>
|
||||
✍️ {data.projectsTitle || "Notizbücher"}
|
||||
</a>
|
||||
<a
|
||||
href="#buecherregal"
|
||||
className="px-4 py-2 rounded-full border border-stone-800 bg-stone-900/60 hover:border-stone-500 transition-all text-stone-300 uppercase tracking-wider"
|
||||
>
|
||||
📖 {data.booksTitle || "Gedruckte Werke"}
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Main Grid */}
|
||||
<main className="max-w-7xl mx-auto px-4 py-16 space-y-24">
|
||||
|
||||
{/* About writer */}
|
||||
<section id="ueber-mich" className="grid grid-cols-1 md:grid-cols-12 gap-12 items-center">
|
||||
<div className="md:col-span-4 flex justify-center">
|
||||
<div className="relative group">
|
||||
{/* Outer soft natural glow */}
|
||||
<div className="absolute -inset-1.5 rounded-2xl blur opacity-20 group-hover:opacity-40 transition duration-1000 group-hover:duration-200" style={{ background: `linear-gradient(to right, ${accentColor}, ${secondaryColor})` }} />
|
||||
<div className="relative w-64 h-64 md:w-80 md:h-80 rounded-2xl overflow-hidden border border-stone-800" style={{ backgroundColor: cardBgColor }}>
|
||||
<img
|
||||
src={data.avatarUrl || undefined}
|
||||
alt={data.name}
|
||||
className="w-full h-full object-cover grayscale brightness-95 group-hover:scale-105 group-hover:grayscale-0 transition-all duration-1000"
|
||||
referrerPolicy="no-referrer"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="md:col-span-8 space-y-6">
|
||||
<h2 className="text-2xl md:text-3xl font-serif text-stone-100 flex items-center gap-3">
|
||||
<Feather className="w-6 h-6" style={{ color: accentColor }} />
|
||||
<span>{data.aboutTitle || "Das Atmen zwischen den Zeilen"}</span>
|
||||
</h2>
|
||||
<div className="prose prose-invert prose-stone max-w-none text-stone-300 leading-relaxed font-sans space-y-4">
|
||||
<p className="whitespace-pre-wrap italic">{data.bio}</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 gap-4 pt-4 text-xs">
|
||||
{(data.bioTag1Label || data.bioTag1Value) && (
|
||||
<div className="p-3 border rounded-xl flex items-center gap-3" style={{ backgroundColor: cardBgColor, borderColor: `${accentColor}20` }}>
|
||||
<Leaf className="w-5 h-5 shrink-0" style={{ color: accentColor }} />
|
||||
<div>
|
||||
<div className="text-stone-500 uppercase tracking-wider text-[10px]">{data.bioTag1Label || "Genre"}</div>
|
||||
<div className="text-stone-200 font-semibold">{data.bioTag1Value || "Lyrik & Essays"}</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{(data.bioTag2Label || data.bioTag2Value) && (
|
||||
<div className="p-3 border rounded-xl flex items-center gap-3" style={{ backgroundColor: cardBgColor, borderColor: `${accentColor}20` }}>
|
||||
<Sparkles className="w-5 h-5 shrink-0" style={{ color: secondaryColor }} />
|
||||
<div>
|
||||
<div className="text-stone-500 uppercase tracking-wider text-[10px]">{data.bioTag2Label || "Ästhetik"}</div>
|
||||
<div className="text-stone-200 font-semibold">{data.bioTag2Value || "Natur & Poesie"}</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{(data.bioTag3Label || data.bioTag3Value) && (
|
||||
<div className="p-3 border rounded-xl flex items-center gap-3 col-span-2 md:col-span-1" style={{ backgroundColor: cardBgColor, borderColor: `${accentColor}20` }}>
|
||||
<Feather className="w-5 h-5 shrink-0" style={{ color: accentColor }} />
|
||||
<div>
|
||||
<div className="text-stone-500 uppercase tracking-wider text-[10px]">{data.bioTag3Label || "Fokus"}</div>
|
||||
<div className="text-stone-200 font-semibold">{data.bioTag3Value || "Naturkontemplation"}</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Section 1.5: Spotlight / Neuerscheinung */}
|
||||
{data.books?.find(b => b.isSpotlight) && (
|
||||
<SpotlightSection
|
||||
book={data.books.find(b => b.isSpotlight)!}
|
||||
title={data.spotlightTitle}
|
||||
subtitle={data.spotlightSubtitle}
|
||||
accentColor={accentColor}
|
||||
secondaryColor={secondaryColor}
|
||||
cardBgColor={cardBgColor}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Dynamic ongoing work writing progress */}
|
||||
<section id="projekte" className="space-y-8">
|
||||
<div className="flex flex-col md:flex-row md:items-end justify-between gap-4 border-b border-stone-800 pb-4">
|
||||
<div>
|
||||
<h2 className="text-2xl md:text-3xl font-serif text-stone-100 flex items-center gap-3">
|
||||
<Feather className="w-6 h-6" style={{ color: accentColor }} />
|
||||
<span>{data.projectsTitle || "Aus den Notizbüchern"}</span>
|
||||
</h2>
|
||||
<p className="text-stone-400 text-sm mt-1">{data.projectsSubtitle || "Gedanken im Entwurf, Fragmente und Sammlungen, die bald das Licht der Welt erblicken."}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{data.projects.map((project) => (
|
||||
<button
|
||||
key={project.id}
|
||||
onClick={() => setSelectedProject(project)}
|
||||
className="p-6 border rounded-xl transition-all duration-300 flex flex-col text-left w-full justify-between group cursor-pointer hover:scale-[1.01] focus:outline-none shadow-md"
|
||||
style={{ backgroundColor: cardBgColor, borderColor: `${accentColor}20` }}
|
||||
>
|
||||
<div className="space-y-4 w-full">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-[10px] uppercase font-sans px-2.5 py-1 rounded border tracking-wider" style={{ color: accentColor, backgroundColor: `${accentColor}15`, borderColor: `${accentColor}30` }}>
|
||||
{project.status || "In Arbeit"}
|
||||
</span>
|
||||
<span className="text-xs text-stone-400 italic">
|
||||
Reifegrad: {project.progress}%
|
||||
</span>
|
||||
</div>
|
||||
<h3 className="text-lg font-serif text-stone-100 group-hover:text-stone-300 transition-colors">
|
||||
{project.title}
|
||||
</h3>
|
||||
<div className="text-stone-300 text-sm italic line-clamp-3 markdown-body [&_p]:inline [&_p]:m-0">
|
||||
<Markdown
|
||||
components={{
|
||||
a: ({ node, ...props }) => (
|
||||
<a
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="underline text-[#8FA797] hover:text-stone-200 font-medium"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}}
|
||||
>
|
||||
{project.description}
|
||||
</Markdown>
|
||||
</div>
|
||||
<p className="font-sans text-[11px] mt-2 group-hover:translate-x-1 transition-transform flex items-center gap-1 italic" style={{ color: accentColor }}>
|
||||
Details einsehen <ArrowRight className="w-3 h-3" />
|
||||
</p>
|
||||
</div>
|
||||
<div className="mt-6 space-y-1.5 w-full">
|
||||
<div className="h-1 w-full bg-stone-900 rounded-full overflow-hidden">
|
||||
<div
|
||||
className="h-full rounded-full transition-all duration-1000 ease-out shadow-sm"
|
||||
style={{ width: `${project.progress}%`, background: `linear-gradient(to right, ${accentColor}, ${secondaryColor})` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Bookshelf display */}
|
||||
<section id="buecherregal" className="space-y-8">
|
||||
<div className="border-b border-stone-800 pb-4">
|
||||
<h2 className="text-2xl md:text-3xl font-serif text-stone-100 flex items-center gap-3">
|
||||
<BookOpen className="w-6 h-6" style={{ color: accentColor }} />
|
||||
<span>{data.booksTitle || "Gedruckte Werke"}</span>
|
||||
</h2>
|
||||
<p className="text-stone-400 text-sm mt-1">{data.booksSubtitle || "Erschlossene Wortlandschaften. Wählen Sie einen Band, um tiefer hineinzuhören."}</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-6 justify-items-center">
|
||||
{data.books.map((book) => (
|
||||
<button
|
||||
key={book.id}
|
||||
onClick={() => setSelectedBook(book)}
|
||||
className="group relative focus:outline-none text-left w-full max-w-[210px] aspect-[2/3] rounded-xl overflow-hidden border transition-all duration-300 hover:shadow-xl cursor-pointer"
|
||||
style={{ backgroundColor: cardBgColor, borderColor: `${accentColor}30` }}
|
||||
>
|
||||
<div className="absolute inset-0 bg-stone-900/10 opacity-0 group-hover:opacity-100 transition-opacity z-10 pointer-events-none" />
|
||||
<img
|
||||
src={book.coverUrl || undefined}
|
||||
alt={book.title}
|
||||
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700 z-0"
|
||||
referrerPolicy="no-referrer"
|
||||
/>
|
||||
|
||||
<div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-stone-950 via-stone-950/90 to-transparent p-4 opacity-80 group-hover:opacity-100 transition-all duration-350 z-20">
|
||||
<p className="text-stone-100 text-xs font-serif truncate">{book.title}</p>
|
||||
<p className="text-[10px] font-sans mt-0.5 italic" style={{ color: accentColor }}>Verweilen <ArrowRight className="inline-block w-2.5 h-2.5 ml-0.5" /></p>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Custom Highlight Section if present */}
|
||||
{(data.customSectionTitle || data.customSectionContent) && (
|
||||
<section id="garten-notiz" className="p-8 rounded-2xl border relative overflow-hidden max-w-4xl mx-auto shadow-xl" style={{ backgroundColor: cardBgColor, borderColor: `${accentColor}30` }}>
|
||||
{data.customSectionTitle && (
|
||||
<h2 className="text-2xl font-serif text-stone-100 mb-4 flex items-center gap-2">
|
||||
<Sparkles className="w-5 h-5" style={{ color: accentColor }} />
|
||||
<span>{data.customSectionTitle}</span>
|
||||
</h2>
|
||||
)}
|
||||
{data.customSectionContent && (
|
||||
<div className="text-stone-300 text-sm md:text-base leading-relaxed italic markdown-body [&_p]:mb-4 [&_p:last-child]:mb-0">
|
||||
<Markdown
|
||||
components={{
|
||||
a: ({ node, ...props }) => (
|
||||
<a
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="underline text-[#8FA797] hover:text-stone-200 font-medium"
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}}
|
||||
>
|
||||
{data.customSectionContent}
|
||||
</Markdown>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
)}
|
||||
|
||||
</main>
|
||||
|
||||
{/* Book details modular modal */}
|
||||
{selectedBook && (
|
||||
<div className="fixed inset-0 z-50 overflow-y-auto" role="dialog" aria-modal="true">
|
||||
<div
|
||||
className="fixed inset-0 bg-stone-950/85 backdrop-blur-md transition-opacity"
|
||||
onClick={() => setSelectedBook(null)}
|
||||
/>
|
||||
|
||||
<div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
|
||||
<div className="relative transform overflow-hidden rounded-2xl bg-stone-950 border border-stone-900 text-left shadow-2xl transition-all sm:my-8 sm:w-full sm:max-w-4xl p-6 md:p-8 space-y-6">
|
||||
|
||||
<button
|
||||
onClick={() => setSelectedBook(null)}
|
||||
className="absolute top-4 right-4 text-stone-400 hover:text-stone-100 hover:bg-[#4A5D50]/80 px-2.5 py-1 rounded-md text-xs font-sans border border-stone-800 transition-all cursor-pointer"
|
||||
>
|
||||
SCHLIEẞEN
|
||||
</button>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-12 gap-8 pt-4">
|
||||
|
||||
{/* Book Cover */}
|
||||
<div className="col-span-1 md:col-span-4 flex flex-col items-center">
|
||||
<div className="rounded-xl overflow-hidden shadow-2xl border border-[#4A5D50]/30 max-w-[260px] aspect-[2/3] w-full">
|
||||
<img
|
||||
src={selectedBook.coverUrl || undefined}
|
||||
alt={selectedBook.title}
|
||||
className="w-full h-full object-cover"
|
||||
referrerPolicy="no-referrer"
|
||||
/>
|
||||
</div>
|
||||
{selectedBook.buyLink && (
|
||||
<a
|
||||
href={selectedBook.buyLink}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="mt-6 w-full max-w-[260px] py-3 text-center bg-gradient-to-r from-[#8FA797] to-[#B59EB1] hover:from-[#9fbca9] hover:to-[#cbb5c7] text-stone-950 font-bold font-sans rounded-xl flex items-center justify-center gap-2 transition-all hover:scale-[1.02] shadow-[0_4px_12px_rgba(143,167,151,0.2)] text-sm"
|
||||
>
|
||||
<span>Werk erwerben</span>
|
||||
<ExternalLink className="w-4 h-4" />
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Details text area */}
|
||||
<div className="col-span-1 md:col-span-8 flex flex-col justify-between space-y-6">
|
||||
<div className="space-y-4">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<span className="text-[10px] font-sans text-[#8FA797] bg-[#4A5D50]/20 px-2.5 py-0.5 rounded border border-[#8FA797]/30">
|
||||
Erschienen: {selectedBook.publishedYear}
|
||||
</span>
|
||||
{selectedBook.genres?.map((genre) => (
|
||||
<span key={genre} className="text-[10px] font-sans text-[#B59EB1] bg-[#B59EB1]/10 px-2.5 py-0.5 rounded border border-[#B59EB1]/20">
|
||||
{genre}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<h3 className="text-3xl font-serif text-stone-100">
|
||||
{selectedBook.title}
|
||||
</h3>
|
||||
|
||||
{selectedBook.subtitle && (
|
||||
<h4 className="text-sm font-sans italic text-[#B59EB1]">
|
||||
{selectedBook.subtitle}
|
||||
</h4>
|
||||
)}
|
||||
|
||||
<div className="h-[1px] bg-[#4A5D50]/30" />
|
||||
|
||||
<div className="text-stone-300 text-sm leading-relaxed italic markdown-body [&_p]:mb-4 [&_p:last-child]:mb-0">
|
||||
<Markdown>{selectedBook.description}</Markdown>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Privacy-friendly Spotify player */}
|
||||
{selectedBook.spotifyPlaylistId && selectedBook.spotifyPlaylistId.trim() !== "" && (
|
||||
<SpotifyConsentPlayer playlist={selectedBook.spotifyPlaylistId} title={`Spotify-Playlist zu ${selectedBook.title}`} accentColor={accentColor} />
|
||||
)}
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Project details modular modal */}
|
||||
{selectedProject && (
|
||||
<div className="fixed inset-0 z-50 overflow-y-auto" role="dialog" aria-modal="true">
|
||||
<div
|
||||
className="fixed inset-0 bg-stone-950/85 backdrop-blur-md transition-opacity"
|
||||
onClick={() => setSelectedProject(null)}
|
||||
/>
|
||||
|
||||
<div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
|
||||
<div className="relative transform overflow-hidden rounded-2xl bg-stone-950 border border-stone-900 text-left shadow-2xl transition-all sm:my-8 sm:w-full sm:max-w-5xl p-6 md:p-8 space-y-6">
|
||||
|
||||
<button
|
||||
onClick={() => setSelectedProject(null)}
|
||||
className="absolute top-4 right-4 text-stone-400 hover:text-stone-100 hover:bg-[#4A5D50]/80 px-2.5 py-1 rounded-md text-xs font-sans border border-stone-800 transition-all cursor-pointer"
|
||||
>
|
||||
SCHLIEẞEN
|
||||
</button>
|
||||
|
||||
<div className="space-y-6 pt-4">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<span className="text-[10px] font-sans text-[#8FA797] bg-[#4A5D50]/20 px-2.5 py-0.5 rounded border border-[#8FA797]/30">
|
||||
Status: {selectedProject.status || "In Arbeit"}
|
||||
</span>
|
||||
<span className="text-[10px] font-sans text-[#B59EB1] bg-[#B59EB1]/10 px-2.5 py-0.5 rounded border border-[#B59EB1]/20">
|
||||
Notizbucheintrag
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h3 className="text-3xl font-serif text-stone-100">
|
||||
{selectedProject.title}
|
||||
</h3>
|
||||
|
||||
<div className="h-[1px] bg-[#4A5D50]/30" />
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between items-center text-xs font-sans text-stone-400">
|
||||
<span>{data.projectProgressLabel ? `${data.projectProgressLabel.toUpperCase()}:` : "ENTWURF-FORTSCHRITT:"}</span>
|
||||
<span className="font-bold" style={{ color: accentColor }}>{selectedProject.progress}%</span>
|
||||
</div>
|
||||
<div className="h-2 w-full bg-stone-900 rounded-full overflow-hidden border border-stone-800">
|
||||
<div
|
||||
className="h-full rounded-full transition-all duration-1000 ease-out shadow-md"
|
||||
style={{ width: `${selectedProject.progress}%`, background: `linear-gradient(to right, ${accentColor}, ${secondaryColor})` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={`grid gap-6 ${(selectedProject.imageUrl || selectedProject.spotifyPlaylistId) ? "lg:grid-cols-[minmax(0,1fr)_minmax(0,1.15fr)] lg:items-start" : ""}`}>
|
||||
<ProjectDetailMedia project={selectedProject} accentColor={accentColor} />
|
||||
|
||||
<div className="bg-[#4A5D50]/5 p-5 rounded-xl border border-[#4A5D50]/20 relative overflow-hidden">
|
||||
{data.projectExcerptBadge && (
|
||||
<div className="absolute top-0 right-0 p-2 text-stone-700 text-[10px] font-mono select-none">
|
||||
{data.projectExcerptBadge}
|
||||
</div>
|
||||
)}
|
||||
<h4 className="text-xs font-sans uppercase tracking-wider mb-3 italic" style={{ color: accentColor }}>
|
||||
{data.projectExcerptTitle || "Konzeptuelle Notizen & Auszüge"}
|
||||
</h4>
|
||||
<div className="text-stone-200 text-sm leading-relaxed italic markdown-body [&_p]:mb-4 [&_p:last-child]:mb-0">
|
||||
<Markdown>{selectedProject.description || "Für dieses Buchprojekt wurden noch keine lyrischen Gedanken freigegeben."}</Markdown>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="border-t border-stone-800 py-12 px-4 text-center text-xs text-stone-500 italic" style={{ backgroundColor: bgColor }}>
|
||||
<div className="max-w-7xl mx-auto space-y-3">
|
||||
<p>© {new Date().getFullYear()} {data.name}. Alle Rechte vorbehalten.</p>
|
||||
<p className="text-stone-500">{data.footerText || "Betrachtungen, verwoben mit dem Rhythmus der wachsenden Natur."}</p>
|
||||
|
||||
{relevantLegalDocs.length > 0 && (
|
||||
<div className="flex flex-wrap items-center justify-center gap-6 pt-3 border-t border-stone-800/60 max-w-md mx-auto not-italic">
|
||||
{relevantLegalDocs.map((doc) => (
|
||||
<button
|
||||
key={doc.id}
|
||||
onClick={() => {
|
||||
setActiveLegalId(doc.id);
|
||||
setLegalModalOpen(true);
|
||||
}}
|
||||
className="text-stone-400 hover:text-[#8FA797] transition-colors underline underline-offset-4 cursor-pointer"
|
||||
>
|
||||
{doc.title}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
{/* Legal Modal */}
|
||||
<LegalModal
|
||||
isOpen={legalModalOpen}
|
||||
onClose={() => setLegalModalOpen(false)}
|
||||
documents={relevantLegalDocs}
|
||||
initialDocId={activeLegalId}
|
||||
accentColor={accentColor}
|
||||
secondaryColor={secondaryColor}
|
||||
fontFamily={data.fontFamily || "serif"}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,492 +0,0 @@
|
|||
import { useState } from "react";
|
||||
import Markdown from "react-markdown";
|
||||
import { Book, Project, AuthorProfile, LegalDocument } from "../types";
|
||||
import { Heart, Key, Sparkles, BookOpen, ExternalLink, ArrowRight } from "lucide-react";
|
||||
import SpotlightSection from "./SpotlightSection";
|
||||
import LegalModal from "./LegalModal";
|
||||
import ProjectDetailMedia from "./ProjectDetailMedia";
|
||||
import SpotifyConsentPlayer from "./SpotifyConsentPlayer";
|
||||
|
||||
interface EroticaPortfolioProps {
|
||||
data: AuthorProfile;
|
||||
legalDocuments?: LegalDocument[];
|
||||
}
|
||||
|
||||
export default function EroticaPortfolio({ data, legalDocuments = [] }: EroticaPortfolioProps) {
|
||||
const [selectedBook, setSelectedBook] = useState<Book | null>(null);
|
||||
const [selectedProject, setSelectedProject] = useState<Project | null>(null);
|
||||
const [legalModalOpen, setLegalModalOpen] = useState(false);
|
||||
const [activeLegalId, setActiveLegalId] = useState<string | null>(null);
|
||||
|
||||
const relevantLegalDocs = legalDocuments.filter(doc => doc.assignedProfiles.includes("erotica"));
|
||||
|
||||
const accentColor = data.accentColor || "#f97316";
|
||||
const secondaryColor = data.secondaryColor || "#f59e0b";
|
||||
const bgColor = data.backgroundColor || "#0a0a0a";
|
||||
const cardBgColor = data.cardBgColor || "#171717";
|
||||
|
||||
const fontClass = data.fontFamily === "sans" ? "font-sans" : data.fontFamily === "mono" ? "font-mono" : "font-serif";
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`min-h-screen text-neutral-200 ${fontClass} selection:bg-orange-500 selection:text-black overflow-x-hidden relative`}
|
||||
style={{ backgroundColor: bgColor }}
|
||||
>
|
||||
{/* Hero Banner Background if present */}
|
||||
{data.heroBannerUrl && (
|
||||
<div className="absolute top-0 inset-x-0 h-96 overflow-hidden pointer-events-none -z-5 opacity-20">
|
||||
<img src={data.heroBannerUrl} alt="" className="w-full h-full object-cover blur-sm" />
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-transparent to-neutral-950" style={{ backgroundImage: `linear-gradient(to bottom, transparent, ${bgColor})` }} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Decorative Warm background gradient and peach glow vibes */}
|
||||
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-amber-950/20 via-transparent to-transparent -z-10 pointer-events-none" />
|
||||
<div className="absolute top-1/4 left-1/3 w-96 h-96 rounded-full blur-3xl pointer-events-none opacity-20" style={{ backgroundColor: accentColor }} />
|
||||
<div className="absolute bottom-1/3 right-1/4 w-96 h-96 rounded-full blur-3xl pointer-events-none opacity-20" style={{ backgroundColor: secondaryColor }} />
|
||||
|
||||
{/* Header / Hero */}
|
||||
<header className="relative py-24 px-4 max-w-7xl mx-auto border-b border-neutral-800/80">
|
||||
<div className="text-center max-w-4xl mx-auto space-y-6">
|
||||
<div
|
||||
className="inline-flex items-center gap-2 px-4 py-1.5 bg-neutral-900/80 border rounded-full text-xs tracking-wider mb-2 shadow-sm"
|
||||
style={{ borderColor: `${accentColor}40`, color: accentColor }}
|
||||
>
|
||||
<Heart className="w-3.5 h-3.5 fill-current animate-pulse" style={{ color: accentColor }} />
|
||||
<span>{data.badgeText || "Stilvolle Sinnlichkeit & Romantik"}</span>
|
||||
</div>
|
||||
|
||||
<h1 className="text-4xl md:text-6xl tracking-wide text-amber-100 uppercase font-light drop-shadow-sm font-serif">
|
||||
{data.heroTitle || data.name || "M. S. VELVET"}
|
||||
</h1>
|
||||
<p className="font-sans text-xs md:text-sm tracking-[0.3em] uppercase" style={{ color: accentColor }}>
|
||||
{data.heroSubtitle || "ELEGANT-SINNLICHE LITERATUR"}
|
||||
</p>
|
||||
<div className="h-[1px] w-36 mx-auto mt-6" style={{ background: `linear-gradient(to right, transparent, ${accentColor}, transparent)` }} />
|
||||
|
||||
{/* Quick Section Navigation */}
|
||||
<nav className="mt-8 flex flex-wrap justify-center gap-3 text-xs font-sans">
|
||||
<a
|
||||
href="#ueber-mich"
|
||||
className="px-4 py-2 rounded-full border border-neutral-800 bg-neutral-900/60 hover:border-orange-400 hover:text-orange-300 transition-all text-neutral-300 uppercase tracking-wider"
|
||||
>
|
||||
🍑 {data.aboutTitle || "Über mich"}
|
||||
</a>
|
||||
<a
|
||||
href="#projekte"
|
||||
className="px-4 py-2 rounded-full border border-neutral-800 bg-neutral-900/60 hover:border-orange-400 hover:text-orange-300 transition-all text-neutral-300 uppercase tracking-wider"
|
||||
>
|
||||
✍️ {data.projectsTitle || "In der Entstehung"}
|
||||
</a>
|
||||
<a
|
||||
href="#buecherregal"
|
||||
className="px-4 py-2 rounded-full border border-neutral-800 bg-neutral-900/60 hover:border-orange-400 hover:text-orange-300 transition-all text-neutral-300 uppercase tracking-wider"
|
||||
>
|
||||
📖 {data.booksTitle || "Das Samtregal"}
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Main Grid */}
|
||||
<main className="max-w-7xl mx-auto px-4 py-16 space-y-24">
|
||||
|
||||
{/* About writer */}
|
||||
<section id="ueber-mich" className="grid grid-cols-1 md:grid-cols-12 gap-12 items-center">
|
||||
<div className="md:col-span-4 flex justify-center">
|
||||
<div className="relative group">
|
||||
{/* Outer warm glow */}
|
||||
<div className="absolute -inset-1.5 rounded-2xl blur opacity-25 group-hover:opacity-60 transition duration-1000 group-hover:duration-200" style={{ background: `linear-gradient(to right, ${accentColor}, ${secondaryColor})` }} />
|
||||
<div className="relative w-64 h-64 md:w-80 md:h-80 rounded-2xl overflow-hidden border border-neutral-800" style={{ backgroundColor: cardBgColor }}>
|
||||
<img
|
||||
src={data.avatarUrl || undefined}
|
||||
alt={data.name}
|
||||
className="w-full h-full object-cover grayscale brightness-90 group-hover:scale-105 group-hover:grayscale-0 transition-all duration-1000"
|
||||
referrerPolicy="no-referrer"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="md:col-span-8 space-y-6">
|
||||
<h2 className="text-2xl md:text-3xl font-serif text-amber-100 flex items-center gap-3">
|
||||
<Sparkles className="w-6 h-6" style={{ color: accentColor }} />
|
||||
<span>{data.aboutTitle || "Das Geheimnis hinter der Feder"}</span>
|
||||
</h2>
|
||||
<div className="prose prose-invert prose-stone max-w-none text-neutral-300 leading-relaxed font-sans space-y-4">
|
||||
<p className="whitespace-pre-wrap italic">{data.bio}</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 gap-4 pt-4 text-xs">
|
||||
{(data.bioTag1Label || data.bioTag1Value) && (
|
||||
<div className="p-3 border rounded-xl flex items-center gap-3" style={{ backgroundColor: cardBgColor, borderColor: `${accentColor}20` }}>
|
||||
<Heart className="w-5 h-5 fill-current shrink-0" style={{ color: accentColor }} />
|
||||
<div>
|
||||
<div className="text-neutral-500 uppercase tracking-wider text-[10px]">{data.bioTag1Label || "Genre"}</div>
|
||||
<div className="text-neutral-200 font-semibold">{data.bioTag1Value || "Sinnliche Romance"}</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{(data.bioTag2Label || data.bioTag2Value) && (
|
||||
<div className="p-3 border rounded-xl flex items-center gap-3" style={{ backgroundColor: cardBgColor, borderColor: `${accentColor}20` }}>
|
||||
<Sparkles className="w-5 h-5 shrink-0" style={{ color: secondaryColor }} />
|
||||
<div>
|
||||
<div className="text-neutral-500 uppercase tracking-wider text-[10px]">{data.bioTag2Label || "Tonalität"}</div>
|
||||
<div className="text-neutral-200 font-semibold">{data.bioTag2Value || "Elegant & Knisternd"}</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{(data.bioTag3Label || data.bioTag3Value) && (
|
||||
<div className="p-3 border rounded-xl flex items-center gap-3 col-span-2 md:col-span-1" style={{ backgroundColor: cardBgColor, borderColor: `${accentColor}20` }}>
|
||||
<Key className="w-5 h-5 shrink-0" style={{ color: accentColor }} />
|
||||
<div>
|
||||
<div className="text-neutral-500 uppercase tracking-wider text-[10px]">{data.bioTag3Label || "Identität"}</div>
|
||||
<div className="text-neutral-200 font-semibold">{data.bioTag3Value || "Diskret / Pseudonym"}</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Section 1.5: Spotlight / Neuerscheinung */}
|
||||
{data.books?.find(b => b.isSpotlight) && (
|
||||
<SpotlightSection
|
||||
book={data.books.find(b => b.isSpotlight)!}
|
||||
title={data.spotlightTitle}
|
||||
subtitle={data.spotlightSubtitle}
|
||||
accentColor={accentColor}
|
||||
secondaryColor={secondaryColor}
|
||||
cardBgColor={cardBgColor}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Dynamic ongoing work writing progress */}
|
||||
<section id="projekte" className="space-y-8">
|
||||
<div className="flex flex-col md:flex-row md:items-end justify-between gap-4 border-b border-neutral-800 pb-4">
|
||||
<div>
|
||||
<h2 className="text-2xl md:text-3xl font-serif text-amber-100 flex items-center gap-3">
|
||||
<Heart className="w-6 h-6" style={{ color: accentColor }} />
|
||||
<span>{data.projectsTitle || "In der Entstehung..."}</span>
|
||||
</h2>
|
||||
<p className="text-neutral-400 text-sm mt-1">{data.projectsSubtitle || "Ein diskreter Blick hinter die Samtvorhänge meiner aktuellen Manuskripte."}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{data.projects.map((project) => (
|
||||
<button
|
||||
key={project.id}
|
||||
onClick={() => setSelectedProject(project)}
|
||||
className="p-6 border rounded-xl transition-all duration-300 flex flex-col text-left w-full justify-between group cursor-pointer hover:scale-[1.01] focus:outline-none shadow-lg"
|
||||
style={{ backgroundColor: cardBgColor, borderColor: `${accentColor}25` }}
|
||||
>
|
||||
<div className="space-y-4 w-full">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-[10px] uppercase font-sans px-2.5 py-1 rounded border tracking-wider" style={{ color: accentColor, backgroundColor: `${accentColor}15`, borderColor: `${accentColor}30` }}>
|
||||
{project.status || "In Arbeit"}
|
||||
</span>
|
||||
<span className="text-xs text-neutral-400 italic">
|
||||
Verlangen erfüllt: {project.progress}%
|
||||
</span>
|
||||
</div>
|
||||
<h3 className="text-lg font-serif text-amber-100 group-hover:text-orange-400 transition-colors">
|
||||
{project.title}
|
||||
</h3>
|
||||
<div className="text-neutral-300 text-sm italic line-clamp-3 markdown-body [&_p]:inline [&_p]:m-0">
|
||||
<Markdown
|
||||
components={{
|
||||
a: ({ node, ...props }) => (
|
||||
<a
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="underline text-orange-400 hover:text-amber-300 font-medium"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}}
|
||||
>
|
||||
{project.description}
|
||||
</Markdown>
|
||||
</div>
|
||||
<p className="font-sans text-[11px] mt-2 group-hover:translate-x-1 transition-transform flex items-center gap-1 italic" style={{ color: accentColor }}>
|
||||
Details einsehen <ArrowRight className="w-3 h-3" />
|
||||
</p>
|
||||
</div>
|
||||
<div className="mt-6 space-y-1.5 w-full">
|
||||
<div className="h-1 w-full bg-neutral-900 rounded-full overflow-hidden">
|
||||
<div
|
||||
className="h-full rounded-full transition-all duration-1000 ease-out shadow-sm"
|
||||
style={{ width: `${project.progress}%`, background: `linear-gradient(to right, ${accentColor}, ${secondaryColor})` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Bookshelf display */}
|
||||
<section id="buecherregal" className="space-y-8">
|
||||
<div className="border-b border-neutral-800 pb-4">
|
||||
<h2 className="text-2xl md:text-3xl font-serif text-amber-100 flex items-center gap-3">
|
||||
<BookOpen className="w-6 h-6" style={{ color: secondaryColor }} />
|
||||
<span>{data.booksTitle || "Das Samtregal"}</span>
|
||||
</h2>
|
||||
<p className="text-neutral-400 text-sm mt-1">{data.booksSubtitle || "Wählen Sie ein Buch aus, um tiefer in die Versuchung einzutauchen."}</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-6 justify-items-center">
|
||||
{data.books.map((book) => (
|
||||
<button
|
||||
key={book.id}
|
||||
onClick={() => setSelectedBook(book)}
|
||||
className="group relative focus:outline-none text-left w-full max-w-[210px] aspect-[2/3] rounded-xl overflow-hidden border transition-all duration-300 hover:shadow-xl cursor-pointer"
|
||||
style={{ backgroundColor: cardBgColor, borderColor: `${accentColor}30` }}
|
||||
>
|
||||
<div className="absolute inset-0 bg-orange-950/10 opacity-0 group-hover:opacity-100 transition-opacity z-10 pointer-events-none" />
|
||||
<img
|
||||
src={book.coverUrl || undefined}
|
||||
alt={book.title}
|
||||
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700 z-0"
|
||||
referrerPolicy="no-referrer"
|
||||
/>
|
||||
|
||||
<div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-neutral-950 via-neutral-950/90 to-transparent p-4 opacity-80 group-hover:opacity-100 transition-all duration-350 z-20">
|
||||
<p className="text-amber-100 text-xs font-serif truncate">{book.title}</p>
|
||||
<p className="text-[10px] font-sans mt-0.5 italic" style={{ color: accentColor }}>Eintauchen <ArrowRight className="inline-block w-2.5 h-2.5 ml-0.5" /></p>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Custom Highlight Section if present */}
|
||||
{(data.customSectionTitle || data.customSectionContent) && (
|
||||
<section id="exklusiv-notiz" className="p-8 rounded-2xl border relative overflow-hidden max-w-4xl mx-auto shadow-xl" style={{ backgroundColor: cardBgColor, borderColor: `${accentColor}30` }}>
|
||||
{data.customSectionTitle && (
|
||||
<h2 className="text-2xl font-serif text-amber-100 mb-4 flex items-center gap-2">
|
||||
<Sparkles className="w-5 h-5" style={{ color: accentColor }} />
|
||||
<span>{data.customSectionTitle}</span>
|
||||
</h2>
|
||||
)}
|
||||
{data.customSectionContent && (
|
||||
<div className="text-neutral-300 text-sm md:text-base leading-relaxed italic markdown-body [&_p]:mb-4 [&_p:last-child]:mb-0">
|
||||
<Markdown
|
||||
components={{
|
||||
a: ({ node, ...props }) => (
|
||||
<a
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="underline text-orange-400 hover:text-amber-300 font-medium"
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}}
|
||||
>
|
||||
{data.customSectionContent}
|
||||
</Markdown>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
)}
|
||||
|
||||
</main>
|
||||
|
||||
{/* Book details modular modal */}
|
||||
{selectedBook && (
|
||||
<div className="fixed inset-0 z-50 overflow-y-auto" role="dialog" aria-modal="true">
|
||||
<div
|
||||
className="fixed inset-0 bg-neutral-950/85 backdrop-blur-md transition-opacity"
|
||||
onClick={() => setSelectedBook(null)}
|
||||
/>
|
||||
|
||||
<div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
|
||||
<div className="relative transform overflow-hidden rounded-2xl bg-neutral-950 border border-neutral-900 text-left shadow-2xl transition-all sm:my-8 sm:w-full sm:max-w-4xl p-6 md:p-8 space-y-6">
|
||||
|
||||
<button
|
||||
onClick={() => setSelectedBook(null)}
|
||||
className="absolute top-4 right-4 text-neutral-400 hover:text-amber-100 hover:bg-orange-950/80 px-2.5 py-1 rounded-md text-xs font-sans border border-neutral-800 transition-all cursor-pointer"
|
||||
>
|
||||
SCHLIEẞEN
|
||||
</button>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-12 gap-8 pt-4">
|
||||
|
||||
{/* Book Cover */}
|
||||
<div className="col-span-1 md:col-span-4 flex flex-col items-center">
|
||||
<div className="rounded-xl overflow-hidden shadow-2xl border border-orange-950/50 max-w-[260px] aspect-[2/3] w-full">
|
||||
<img
|
||||
src={selectedBook.coverUrl || undefined}
|
||||
alt={selectedBook.title}
|
||||
className="w-full h-full object-cover"
|
||||
referrerPolicy="no-referrer"
|
||||
/>
|
||||
</div>
|
||||
{selectedBook.buyLink && (
|
||||
<a
|
||||
href={selectedBook.buyLink}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="mt-6 w-full max-w-[260px] py-3 text-center bg-gradient-to-r from-orange-400 to-amber-500 hover:from-orange-300 hover:to-amber-400 text-neutral-950 font-bold font-sans rounded-xl flex items-center justify-center gap-2 transition-all hover:scale-[1.02] shadow-[0_4px_12px_rgba(249,115,22,0.25)] text-sm"
|
||||
>
|
||||
<span>Buch erwerben</span>
|
||||
<ExternalLink className="w-4 h-4" />
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Details text area */}
|
||||
<div className="col-span-1 md:col-span-8 flex flex-col justify-between space-y-6">
|
||||
<div className="space-y-4">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<span className="text-[10px] font-sans text-orange-300 bg-orange-950/30 px-2.5 py-0.5 rounded border border-orange-900/30">
|
||||
Sinnlich seit: {selectedBook.publishedYear}
|
||||
</span>
|
||||
{selectedBook.genres?.map((genre) => (
|
||||
<span key={genre} className="text-[10px] font-sans text-amber-300 bg-amber-950/30 px-2.5 py-0.5 rounded border border-amber-900/30">
|
||||
{genre}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<h3 className="text-3xl font-serif text-amber-100">
|
||||
{selectedBook.title}
|
||||
</h3>
|
||||
|
||||
{selectedBook.subtitle && (
|
||||
<h4 className="text-sm font-sans italic text-orange-400">
|
||||
{selectedBook.subtitle}
|
||||
</h4>
|
||||
)}
|
||||
|
||||
<div className="h-px bg-orange-950/40" />
|
||||
|
||||
<div className="text-neutral-300 text-sm leading-relaxed italic markdown-body [&_p]:mb-4 [&_p:last-child]:mb-0">
|
||||
<Markdown>{selectedBook.description}</Markdown>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Privacy-friendly Spotify player */}
|
||||
{selectedBook.spotifyPlaylistId && selectedBook.spotifyPlaylistId.trim() !== "" && (
|
||||
<SpotifyConsentPlayer playlist={selectedBook.spotifyPlaylistId} title={`Spotify-Playlist zu ${selectedBook.title}`} accentColor={accentColor} />
|
||||
)}
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Project details modular modal */}
|
||||
{selectedProject && (
|
||||
<div className="fixed inset-0 z-50 overflow-y-auto" role="dialog" aria-modal="true">
|
||||
<div
|
||||
className="fixed inset-0 bg-neutral-950/85 backdrop-blur-md transition-opacity"
|
||||
onClick={() => setSelectedProject(null)}
|
||||
/>
|
||||
|
||||
<div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
|
||||
<div className="relative transform overflow-hidden rounded-2xl bg-neutral-950 border border-neutral-900 text-left shadow-2xl transition-all sm:my-8 sm:w-full sm:max-w-5xl p-6 md:p-8 space-y-6">
|
||||
|
||||
<button
|
||||
onClick={() => setSelectedProject(null)}
|
||||
className="absolute top-4 right-4 text-neutral-400 hover:text-amber-100 hover:bg-orange-950/80 px-2.5 py-1 rounded-md text-xs font-sans border border-neutral-800 transition-all cursor-pointer"
|
||||
>
|
||||
SCHLIEẞEN
|
||||
</button>
|
||||
|
||||
<div className="space-y-6 pt-4">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<span className="text-[10px] font-sans text-orange-300 bg-orange-950/30 px-2.5 py-0.5 rounded border border-orange-900/30">
|
||||
Status: {selectedProject.status || "In Arbeit"}
|
||||
</span>
|
||||
<span className="text-[10px] font-sans text-amber-300 bg-amber-950/30 px-2.5 py-0.5 rounded border border-amber-900/30">
|
||||
Intime Einblicke
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h3 className="text-3xl font-serif text-amber-100">
|
||||
{selectedProject.title}
|
||||
</h3>
|
||||
|
||||
<div className="h-px bg-orange-950/40" />
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between items-center text-xs font-sans text-neutral-400">
|
||||
<span>{data.projectProgressLabel ? `${data.projectProgressLabel.toUpperCase()}:` : "REIFEGRAD DES WERKS:"}</span>
|
||||
<span className="font-bold" style={{ color: accentColor }}>{selectedProject.progress}%</span>
|
||||
</div>
|
||||
<div className="h-2 w-full bg-neutral-900 rounded-full overflow-hidden border border-neutral-800">
|
||||
<div
|
||||
className="h-full rounded-full transition-all duration-1000 ease-out shadow-md"
|
||||
style={{ width: `${selectedProject.progress}%`, background: `linear-gradient(to right, ${accentColor}, ${secondaryColor})` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={`grid gap-6 ${(selectedProject.imageUrl || selectedProject.spotifyPlaylistId) ? "lg:grid-cols-[minmax(0,1fr)_minmax(0,1.15fr)] lg:items-start" : ""}`}>
|
||||
<ProjectDetailMedia project={selectedProject} accentColor={accentColor} />
|
||||
|
||||
<div className="bg-orange-950/10 p-5 rounded-xl border border-orange-950/20 relative overflow-hidden">
|
||||
{data.projectExcerptBadge && (
|
||||
<div className="absolute top-0 right-0 p-2 text-neutral-700 text-[10px] font-mono select-none">
|
||||
{data.projectExcerptBadge}
|
||||
</div>
|
||||
)}
|
||||
<h4 className="text-xs font-sans uppercase tracking-wider mb-3 italic" style={{ color: accentColor }}>
|
||||
{data.projectExcerptTitle || "Konzeptuelle Skizzen & Atmosphärische Auszüge"}
|
||||
</h4>
|
||||
<div className="text-neutral-200 text-sm leading-relaxed italic markdown-body [&_p]:mb-4 [&_p:last-child]:mb-0">
|
||||
<Markdown>{selectedProject.description || "Für dieses diskrete Werk wurde noch kein detaillierter Auszug freigegeben."}</Markdown>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="border-t border-neutral-800 py-12 px-4 text-center text-xs text-neutral-500 italic" style={{ backgroundColor: bgColor }}>
|
||||
<div className="max-w-7xl mx-auto space-y-3">
|
||||
<p>© {new Date().getFullYear()} {data.name}. Alle Rechte vorbehalten.</p>
|
||||
<p className="text-neutral-500">{data.footerText || "Geschlossenes Refugium für feine, hochästhetische Phantasiereisen."}</p>
|
||||
|
||||
{relevantLegalDocs.length > 0 && (
|
||||
<div className="flex flex-wrap items-center justify-center gap-6 pt-3 border-t border-neutral-800/60 max-w-md mx-auto not-italic">
|
||||
{relevantLegalDocs.map((doc) => (
|
||||
<button
|
||||
key={doc.id}
|
||||
onClick={() => {
|
||||
setActiveLegalId(doc.id);
|
||||
setLegalModalOpen(true);
|
||||
}}
|
||||
className="text-neutral-400 hover:text-orange-400 transition-colors underline underline-offset-4 cursor-pointer"
|
||||
>
|
||||
{doc.title}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
{/* Legal Modal */}
|
||||
<LegalModal
|
||||
isOpen={legalModalOpen}
|
||||
onClose={() => setLegalModalOpen(false)}
|
||||
documents={relevantLegalDocs}
|
||||
initialDocId={activeLegalId}
|
||||
accentColor={accentColor}
|
||||
secondaryColor={secondaryColor}
|
||||
fontFamily={data.fontFamily || "serif"}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,29 +1,38 @@
|
|||
import { useState } from "react";
|
||||
import Markdown from "react-markdown";
|
||||
import { Book, Project, AuthorProfile, LegalDocument } from "../types";
|
||||
import { Book, Project, AuthorProfile, LegalDocument, PortfolioTheme } from "../types";
|
||||
import { BookOpen, Star, HelpCircle, Award, Compass, ArrowRight, ExternalLink, Moon } from "lucide-react";
|
||||
import SpotlightSection from "./SpotlightSection";
|
||||
import LegalModal from "./LegalModal";
|
||||
import ProjectDetailMedia from "./ProjectDetailMedia";
|
||||
import SpotifyConsentPlayer from "./SpotifyConsentPlayer";
|
||||
|
||||
interface SciFiPortfolioProps {
|
||||
interface PortfolioPageProps {
|
||||
data: AuthorProfile;
|
||||
legalDocuments?: LegalDocument[];
|
||||
theme: PortfolioTheme;
|
||||
}
|
||||
|
||||
export default function SciFiPortfolio({ data, legalDocuments = [] }: SciFiPortfolioProps) {
|
||||
const themeDefaults: Record<PortfolioTheme, { accent: string; secondary: string; background: string; card: string; badge: string; subtitle: string }> = {
|
||||
cosmic: { accent: "#06b6d4", secondary: "#a855f7", background: "#020617", card: "#0f172a", badge: "Geschichten & Welten", subtitle: "AUTORINNEN- UND AUTORENPORTFOLIO" },
|
||||
velvet: { accent: "#f97316", secondary: "#f59e0b", background: "#0a0a0a", card: "#171717", badge: "Literatur & Leidenschaft", subtitle: "AUTORINNEN- UND AUTORENPORTFOLIO" },
|
||||
botanical: { accent: "#8FA797", secondary: "#B59EB1", background: "#0c0a09", card: "#1c1917", badge: "Poesie & Gedanken", subtitle: "AUTORINNEN- UND AUTORENPORTFOLIO" },
|
||||
romance: { accent: "#e11d48", secondary: "#f59e0b", background: "#10070b", card: "#1f1117", badge: "Geschichten & Gefühle", subtitle: "AUTORINNEN- UND AUTORENPORTFOLIO" },
|
||||
};
|
||||
|
||||
export default function PortfolioPage({ data, legalDocuments = [], theme }: PortfolioPageProps) {
|
||||
const [selectedBook, setSelectedBook] = useState<Book | null>(null);
|
||||
const [selectedProject, setSelectedProject] = useState<Project | null>(null);
|
||||
const [legalModalOpen, setLegalModalOpen] = useState(false);
|
||||
const [activeLegalId, setActiveLegalId] = useState<string | null>(null);
|
||||
|
||||
const relevantLegalDocs = legalDocuments.filter(doc => doc.assignedProfiles.includes("scifi"));
|
||||
const relevantLegalDocs = legalDocuments;
|
||||
|
||||
const accentColor = data.accentColor || "#06b6d4";
|
||||
const secondaryColor = data.secondaryColor || "#a855f7";
|
||||
const bgColor = data.backgroundColor || "#020617";
|
||||
const cardBgColor = data.cardBgColor || "#0f172a";
|
||||
const defaults = themeDefaults[theme];
|
||||
const accentColor = data.accentColor || defaults.accent;
|
||||
const secondaryColor = data.secondaryColor || defaults.secondary;
|
||||
const bgColor = data.backgroundColor || defaults.background;
|
||||
const cardBgColor = data.cardBgColor || defaults.card;
|
||||
|
||||
const fontClass = data.fontFamily === "serif" ? "font-serif" : data.fontFamily === "mono" ? "font-mono" : "font-sans";
|
||||
|
||||
|
|
@ -60,14 +69,14 @@ export default function SciFiPortfolio({ data, legalDocuments = [] }: SciFiPortf
|
|||
style={{ borderColor: `${accentColor}40`, color: accentColor }}
|
||||
>
|
||||
<Star className="w-3.5 h-3.5 animate-pulse" style={{ color: accentColor }} />
|
||||
<span>{data.badgeText || "Cyber-Mystisches Archive"}</span>
|
||||
<span>{data.badgeText || defaults.badge}</span>
|
||||
</div>
|
||||
|
||||
<h1 className="text-5xl md:text-7xl tracking-tight text-white mb-4 uppercase drop-shadow-md font-bold">
|
||||
{data.heroTitle || data.name || "DANIEL HESSE"}
|
||||
{data.heroTitle || data.name}
|
||||
</h1>
|
||||
<p className="font-mono text-xs md:text-sm tracking-widest uppercase mb-8" style={{ color: accentColor }}>
|
||||
{data.heroSubtitle || "WELTENWANDLER & STERNENZEICHNER"}
|
||||
{data.heroSubtitle || defaults.subtitle}
|
||||
</p>
|
||||
<div
|
||||
className="h-0.5 w-24 mx-auto rounded-full"
|
||||
|
|
@ -135,7 +144,7 @@ export default function SciFiPortfolio({ data, legalDocuments = [] }: SciFiPortf
|
|||
<BookOpen className="w-5 h-5 shrink-0" style={{ color: secondaryColor }} />
|
||||
<div>
|
||||
<div className="text-slate-500 uppercase tracking-widest">{data.bioTag1Label || "Fokus"}</div>
|
||||
<div className="text-white font-semibold">{data.bioTag1Value || "Sci-Fi & Fantasy"}</div>
|
||||
<div className="text-white font-semibold">{data.bioTag1Value || "Literatur"}</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -144,7 +153,7 @@ export default function SciFiPortfolio({ data, legalDocuments = [] }: SciFiPortf
|
|||
<Star className="w-5 h-5 shrink-0" style={{ color: accentColor }} />
|
||||
<div>
|
||||
<div className="text-slate-500 uppercase tracking-widest">{data.bioTag2Label || "Welten"}</div>
|
||||
<div className="text-white font-semibold">{data.bioTag2Value || "Techno-Magie"}</div>
|
||||
<div className="text-white font-semibold">{data.bioTag2Value || "Geschichten"}</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -153,7 +162,7 @@ export default function SciFiPortfolio({ data, legalDocuments = [] }: SciFiPortf
|
|||
<Award className="w-5 h-5 shrink-0" style={{ color: secondaryColor }} />
|
||||
<div>
|
||||
<div className="text-slate-500 uppercase tracking-widest">{data.bioTag3Label || "Stil"}</div>
|
||||
<div className="text-white font-semibold">{data.bioTag3Value || "Episch & Atmosphärisch"}</div>
|
||||
<div className="text-white font-semibold">{data.bioTag3Value || "Atmosphärisch"}</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -184,7 +193,7 @@ export default function SciFiPortfolio({ data, legalDocuments = [] }: SciFiPortf
|
|||
<p className="text-slate-400 text-sm mt-1">{data.projectsSubtitle || "Ein exklusiver Blick auf das, was sich gerade auf meinem Schreib-Amboss befindet."}</p>
|
||||
</div>
|
||||
<div className="text-xs font-mono px-3 py-1 rounded border" style={{ color: accentColor, backgroundColor: `${accentColor}10`, borderColor: `${accentColor}30` }}>
|
||||
Laufendes Telemetrie-Tracking
|
||||
Aktuell in Arbeit
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -271,7 +280,7 @@ export default function SciFiPortfolio({ data, legalDocuments = [] }: SciFiPortf
|
|||
|
||||
<div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-slate-950 via-slate-950/90 to-transparent p-4 opacity-80 group-hover:opacity-100 transition-all duration-350 z-20">
|
||||
<p className="text-white text-xs font-bold truncate">{book.title}</p>
|
||||
<p className="text-[10px] font-mono mt-0.5" style={{ color: accentColor }}>Details auslesen <ArrowRight className="inline-block w-2.5 h-2.5 ml-0.5" /></p>
|
||||
<p className="text-[10px] font-mono mt-0.5" style={{ color: accentColor }}>Details anzeigen <ArrowRight className="inline-block w-2.5 h-2.5 ml-0.5" /></p>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
|
|
@ -352,7 +361,7 @@ export default function SciFiPortfolio({ data, legalDocuments = [] }: SciFiPortf
|
|||
rel="noopener noreferrer"
|
||||
className="mt-6 w-full max-w-[260px] py-3 text-center bg-gradient-to-r from-cyan-500 to-indigo-600 hover:from-cyan-400 hover:to-indigo-500 text-slate-950 font-bold font-sans rounded-xl flex items-center justify-center gap-2 transition-all hover:scale-[1.02] shadow-[0_4px_12px_rgba(6,182,212,0.3)] text-sm"
|
||||
>
|
||||
<span>Invasion starten (Kauf-Link)</span>
|
||||
<span>Zum Buch</span>
|
||||
<ExternalLink className="w-4 h-4" />
|
||||
</a>
|
||||
)}
|
||||
|
|
@ -429,7 +438,7 @@ export default function SciFiPortfolio({ data, legalDocuments = [] }: SciFiPortf
|
|||
Status: {selectedProject.status || "In Arbeit"}
|
||||
</span>
|
||||
<span className="text-xs font-mono text-purple-400 bg-purple-950/40 px-2.5 py-0.5 rounded border border-purple-900/40">
|
||||
Übertragung aktiv
|
||||
Aktuelles Projekt
|
||||
</span>
|
||||
</div>
|
||||
|
||||
|
|
@ -441,7 +450,7 @@ export default function SciFiPortfolio({ data, legalDocuments = [] }: SciFiPortf
|
|||
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between items-center text-xs font-mono text-slate-400">
|
||||
<span>{data.projectProgressLabel ? `${data.projectProgressLabel.toUpperCase()}:` : "ORGANISCHER FORTSCHRITT:"}</span>
|
||||
<span>{data.projectProgressLabel ? `${data.projectProgressLabel.toUpperCase()}:` : "FORTSCHRITT:"}</span>
|
||||
<span className="font-bold" style={{ color: accentColor }}>{selectedProject.progress}%</span>
|
||||
</div>
|
||||
<div className="h-2 w-full bg-slate-950 rounded-full overflow-hidden border border-slate-800">
|
||||
|
|
@ -480,7 +489,7 @@ export default function SciFiPortfolio({ data, legalDocuments = [] }: SciFiPortf
|
|||
<footer className="border-t border-slate-800 py-12 px-4 text-center text-xs text-slate-500 font-mono" style={{ backgroundColor: bgColor }}>
|
||||
<div className="max-w-7xl mx-auto space-y-4">
|
||||
<p>© {new Date().getFullYear()} {data.name}. Alle Rechte vorbehalten.</p>
|
||||
<p className="text-slate-500">{data.footerText || "Dokumentation, Fragmente und stellare Chiffren. Verschlüsselt mit moderner Node.JS Technologie."}</p>
|
||||
<p className="text-slate-500">{data.footerText || "Geschichten, Projekte und Veröffentlichungen."}</p>
|
||||
|
||||
{relevantLegalDocs.length > 0 && (
|
||||
<div className="flex flex-wrap items-center justify-center gap-6 pt-3 border-t border-slate-800/60 max-w-md mx-auto">
|
||||
|
|
@ -1,492 +0,0 @@
|
|||
import React, { useState } from "react";
|
||||
import Markdown from "react-markdown";
|
||||
import { AuthorProfile, Book, Project, LegalDocument } from "../types";
|
||||
import {
|
||||
Heart, Sparkles, BookOpen, ExternalLink, X, ArrowRight, Sun
|
||||
} from "lucide-react";
|
||||
import SpotlightSection from "./SpotlightSection";
|
||||
import LegalModal from "./LegalModal";
|
||||
import ProjectDetailMedia from "./ProjectDetailMedia";
|
||||
import SpotifyConsentPlayer from "./SpotifyConsentPlayer";
|
||||
|
||||
interface ReneePortfolioProps {
|
||||
data: AuthorProfile;
|
||||
legalDocuments?: LegalDocument[];
|
||||
}
|
||||
|
||||
export default function ReneePortfolio({ data, legalDocuments = [] }: ReneePortfolioProps) {
|
||||
const [selectedBook, setSelectedBook] = useState<Book | null>(null);
|
||||
const [selectedProject, setSelectedProject] = useState<Project | null>(null);
|
||||
const [legalModalOpen, setLegalModalOpen] = useState(false);
|
||||
const [activeLegalId, setActiveLegalId] = useState<string | null>(null);
|
||||
|
||||
const relevantLegalDocs = legalDocuments.filter(doc => doc.assignedProfiles.includes("renee"));
|
||||
|
||||
const accentColor = data.accentColor || "#eab308";
|
||||
const secondaryColor = data.secondaryColor || "#ec4899";
|
||||
const bgColor = data.backgroundColor || "#0f172a";
|
||||
const cardBgColor = data.cardBgColor || "#1e293b";
|
||||
|
||||
const fontClass = data.fontFamily === "serif" ? "font-serif" : data.fontFamily === "mono" ? "font-mono" : "font-sans";
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`min-h-screen text-slate-100 ${fontClass} selection:bg-pink-500 selection:text-white overflow-x-hidden relative`}
|
||||
style={{ backgroundColor: bgColor }}
|
||||
>
|
||||
{/* Hero Banner Background if present */}
|
||||
{data.heroBannerUrl && (
|
||||
<div className="absolute top-0 inset-x-0 h-96 overflow-hidden pointer-events-none -z-5 opacity-25">
|
||||
<img src={data.heroBannerUrl} alt="" className="w-full h-full object-cover blur-sm" />
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-transparent to-slate-900" style={{ backgroundImage: `linear-gradient(to bottom, transparent, ${bgColor})` }} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Decorative Yellow & Pink Warm Glows */}
|
||||
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-yellow-500/10 via-transparent to-transparent -z-10 pointer-events-none" />
|
||||
<div className="absolute top-1/4 left-1/4 w-96 h-96 rounded-full blur-3xl pointer-events-none opacity-20" style={{ backgroundColor: accentColor }} />
|
||||
<div className="absolute bottom-1/3 right-1/3 w-96 h-96 rounded-full blur-3xl pointer-events-none opacity-20" style={{ backgroundColor: secondaryColor }} />
|
||||
|
||||
{/* Header / Hero */}
|
||||
<header className="relative py-24 px-4 max-w-7xl mx-auto border-b border-slate-800">
|
||||
<div className="text-center max-w-4xl mx-auto space-y-6">
|
||||
<div
|
||||
className="inline-flex items-center gap-2 px-4 py-1.5 bg-slate-800/80 border rounded-full text-xs tracking-wider mb-2 shadow-sm"
|
||||
style={{ borderColor: `${accentColor}40`, color: accentColor }}
|
||||
>
|
||||
<Heart className="w-3.5 h-3.5 fill-current animate-pulse" style={{ color: secondaryColor }} />
|
||||
<span>{data.badgeText || "Herzklopfen & Gefühlsstark"}</span>
|
||||
</div>
|
||||
|
||||
<h1 className="text-4xl md:text-6xl tracking-wide text-white uppercase font-bold drop-shadow-sm">
|
||||
{data.heroTitle || data.name || "RENEE HEART"}
|
||||
</h1>
|
||||
<p className="font-sans text-xs md:text-sm tracking-[0.3em] uppercase font-semibold" style={{ color: secondaryColor }}>
|
||||
{data.heroSubtitle || "HERZENSGESCHICHTEN & EMOTIONALE ROMANE"}
|
||||
</p>
|
||||
<div className="h-[2px] w-36 mx-auto mt-6 rounded-full" style={{ background: `linear-gradient(to right, transparent, ${accentColor}, ${secondaryColor}, transparent)` }} />
|
||||
|
||||
{/* Quick Section Navigation */}
|
||||
<nav className="mt-8 flex flex-wrap justify-center gap-3 text-xs font-sans">
|
||||
<a
|
||||
href="#ueber-mich"
|
||||
className="px-4 py-2 rounded-full border border-slate-700 bg-slate-800/60 hover:border-yellow-400 hover:text-yellow-300 transition-all text-slate-200 uppercase tracking-wider font-medium"
|
||||
>
|
||||
💖 {data.aboutTitle || "Über Renee Heart"}
|
||||
</a>
|
||||
<a
|
||||
href="#projekte"
|
||||
className="px-4 py-2 rounded-full border border-slate-700 bg-slate-800/60 hover:border-yellow-400 hover:text-yellow-300 transition-all text-slate-200 uppercase tracking-wider font-medium"
|
||||
>
|
||||
✍️ {data.projectsTitle || "Aus der Schreibstube"}
|
||||
</a>
|
||||
<a
|
||||
href="#buecherregal"
|
||||
className="px-4 py-2 rounded-full border border-slate-700 bg-slate-800/60 hover:border-yellow-400 hover:text-yellow-300 transition-all text-slate-200 uppercase tracking-wider font-medium"
|
||||
>
|
||||
📖 {data.booksTitle || "Gefühlvolle Romane"}
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Main Content Area */}
|
||||
<main className="max-w-6xl mx-auto px-4 py-16 space-y-24">
|
||||
|
||||
{/* Author Bio Section */}
|
||||
<section id="ueber-mich" className="grid grid-cols-1 md:grid-cols-12 gap-12 items-center">
|
||||
<div className="md:col-span-4 flex justify-center">
|
||||
<div className="relative group">
|
||||
{/* Outer yellow/pink glow */}
|
||||
<div className="absolute -inset-1.5 rounded-2xl blur opacity-30 group-hover:opacity-70 transition duration-1000 group-hover:duration-200" style={{ background: `linear-gradient(to right, ${accentColor}, ${secondaryColor})` }} />
|
||||
<div className="relative w-64 h-64 md:w-80 md:h-80 rounded-2xl overflow-hidden border border-slate-700 shadow-xl" style={{ backgroundColor: cardBgColor }}>
|
||||
<img
|
||||
src={data.avatarUrl || undefined}
|
||||
alt={data.name}
|
||||
className="w-full h-full object-cover group-hover:scale-105 transition duration-500"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="md:col-span-8 space-y-6">
|
||||
<h2 className="text-2xl md:text-3xl font-bold text-white flex items-center gap-3">
|
||||
<Sparkles className="w-6 h-6" style={{ color: accentColor }} />
|
||||
<span>{data.aboutTitle || "Über Renee Heart"}</span>
|
||||
</h2>
|
||||
<div className="prose prose-invert max-w-none text-slate-300 leading-relaxed space-y-4">
|
||||
<p className="whitespace-pre-wrap">{data.bio}</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 gap-4 pt-4 text-xs">
|
||||
{(data.bioTag1Label || data.bioTag1Value) && (
|
||||
<div className="p-3 border rounded-xl flex items-center gap-3 shadow-sm" style={{ backgroundColor: cardBgColor, borderColor: `${accentColor}30` }}>
|
||||
<Heart className="w-5 h-5 fill-current shrink-0" style={{ color: secondaryColor }} />
|
||||
<div>
|
||||
<div className="text-slate-400 uppercase tracking-wider text-[10px]">{data.bioTag1Label || "Genre"}</div>
|
||||
<div className="text-slate-200 font-semibold">{data.bioTag1Value || "Emotionale Romance"}</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{(data.bioTag2Label || data.bioTag2Value) && (
|
||||
<div className="p-3 border rounded-xl flex items-center gap-3 shadow-sm" style={{ backgroundColor: cardBgColor, borderColor: `${accentColor}30` }}>
|
||||
<Sun className="w-5 h-5 shrink-0" style={{ color: accentColor }} />
|
||||
<div>
|
||||
<div className="text-slate-400 uppercase tracking-wider text-[10px]">{data.bioTag2Label || "Tonalität"}</div>
|
||||
<div className="text-slate-200 font-semibold">{data.bioTag2Value || "Herzlich & Hoffnungsvoll"}</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{(data.bioTag3Label || data.bioTag3Value) && (
|
||||
<div className="p-3 border rounded-xl flex items-center gap-3 col-span-2 md:col-span-1 shadow-sm" style={{ backgroundColor: cardBgColor, borderColor: `${accentColor}30` }}>
|
||||
<Sparkles className="w-5 h-5 shrink-0" style={{ color: secondaryColor }} />
|
||||
<div>
|
||||
<div className="text-slate-400 uppercase tracking-wider text-[10px]">{data.bioTag3Label || "Fokus"}</div>
|
||||
<div className="text-slate-200 font-semibold">{data.bioTag3Value || "Gefühl & Tiefe"}</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Section 1.5: Spotlight / Neuerscheinung */}
|
||||
{data.books?.find(b => b.isSpotlight) && (
|
||||
<SpotlightSection
|
||||
book={data.books.find(b => b.isSpotlight)!}
|
||||
title={data.spotlightTitle}
|
||||
subtitle={data.spotlightSubtitle}
|
||||
accentColor={accentColor}
|
||||
secondaryColor={secondaryColor}
|
||||
cardBgColor={cardBgColor}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Dynamic ongoing work writing progress */}
|
||||
<section id="projekte" className="space-y-8">
|
||||
<div className="flex flex-col md:flex-row md:items-end justify-between gap-4 border-b border-slate-800 pb-4">
|
||||
<div>
|
||||
<h2 className="text-2xl md:text-3xl font-bold text-white flex items-center gap-3">
|
||||
<Heart className="w-6 h-6" style={{ color: secondaryColor }} />
|
||||
<span>{data.projectsTitle || "Aus der Schreibstube"}</span>
|
||||
</h2>
|
||||
<p className="text-slate-400 text-sm mt-1">{data.projectsSubtitle || "Ein Blick auf meine aktuellen Geschichten in Entstehung – voller Hoffnung und Herzklopfen."}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{data.projects.map((project) => (
|
||||
<button
|
||||
key={project.id}
|
||||
onClick={() => setSelectedProject(project)}
|
||||
className="p-6 border rounded-xl transition-all duration-300 flex flex-col text-left w-full justify-between group cursor-pointer hover:scale-[1.01] focus:outline-none shadow-lg"
|
||||
style={{ backgroundColor: cardBgColor, borderColor: `${accentColor}25` }}
|
||||
>
|
||||
<div className="space-y-4 w-full">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-[10px] uppercase font-sans font-bold px-2.5 py-1 rounded border tracking-wider" style={{ color: accentColor, backgroundColor: `${accentColor}15`, borderColor: `${accentColor}30` }}>
|
||||
{project.status || "In Arbeit"}
|
||||
</span>
|
||||
<span className="text-xs text-slate-400 italic">
|
||||
{project.progress}% fertiggestellt
|
||||
</span>
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-white group-hover:text-yellow-300 transition-colors">
|
||||
{project.title}
|
||||
</h3>
|
||||
<div className="text-slate-300 text-sm line-clamp-3 markdown-body [&_p]:inline [&_p]:m-0">
|
||||
<Markdown
|
||||
components={{
|
||||
a: ({ node, ...props }) => (
|
||||
<a
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="underline text-yellow-400 hover:text-pink-400 font-medium"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}}
|
||||
>
|
||||
{project.description}
|
||||
</Markdown>
|
||||
</div>
|
||||
<p className="font-sans text-[11px] mt-2 group-hover:translate-x-1 transition-transform flex items-center gap-1 font-semibold" style={{ color: secondaryColor }}>
|
||||
Details einsehen <ArrowRight className="w-3 h-3" />
|
||||
</p>
|
||||
</div>
|
||||
<div className="mt-6 space-y-1.5 w-full">
|
||||
<div className="h-1.5 w-full bg-slate-900 rounded-full overflow-hidden">
|
||||
<div
|
||||
className="h-full rounded-full transition-all duration-1000 ease-out shadow-sm"
|
||||
style={{ width: `${project.progress}%`, background: `linear-gradient(to right, ${accentColor}, ${secondaryColor})` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Bookshelf display */}
|
||||
<section id="buecherregal" className="space-y-8">
|
||||
<div className="border-b border-slate-800 pb-4">
|
||||
<h2 className="text-2xl md:text-3xl font-bold text-white flex items-center gap-3">
|
||||
<BookOpen className="w-6 h-6" style={{ color: accentColor }} />
|
||||
<span>{data.booksTitle || "Gefühlvolle Romane"}</span>
|
||||
</h2>
|
||||
<p className="text-slate-400 text-sm mt-1">{data.booksSubtitle || "Geschichten zum Mitfühlen, Träumen und Genießen."}</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-6 justify-items-center">
|
||||
{data.books.map((book) => (
|
||||
<button
|
||||
key={book.id}
|
||||
onClick={() => setSelectedBook(book)}
|
||||
className="group relative focus:outline-none text-left w-full max-w-[210px] aspect-[2/3] rounded-xl overflow-hidden border transition-all duration-300 hover:shadow-2xl cursor-pointer"
|
||||
style={{ backgroundColor: cardBgColor, borderColor: `${accentColor}30` }}
|
||||
>
|
||||
<div className="absolute inset-0 bg-yellow-500/10 opacity-0 group-hover:opacity-100 transition-opacity z-10 pointer-events-none" />
|
||||
<img
|
||||
src={book.coverUrl || undefined}
|
||||
alt={book.title}
|
||||
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
|
||||
referrerPolicy="no-referrer"
|
||||
/>
|
||||
|
||||
<div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-slate-950 via-slate-950/90 to-transparent p-4 opacity-90 group-hover:opacity-100 transition-all duration-300 z-20">
|
||||
<p className="text-white text-xs font-bold truncate">{book.title}</p>
|
||||
<p className="text-[10px] font-sans mt-0.5 font-semibold flex items-center gap-1" style={{ color: secondaryColor }}>
|
||||
Entdecken <ArrowRight className="inline-block w-2.5 h-2.5" />
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Custom Highlight Section if present */}
|
||||
{(data.customSectionTitle || data.customSectionContent) && (
|
||||
<section id="herzenspost" className="p-8 rounded-2xl border relative overflow-hidden max-w-4xl mx-auto shadow-xl" style={{ backgroundColor: cardBgColor, borderColor: `${accentColor}30` }}>
|
||||
{data.customSectionTitle && (
|
||||
<h2 className="text-2xl font-bold text-white mb-4 flex items-center gap-2">
|
||||
<Heart className="w-5 h-5" style={{ color: secondaryColor }} />
|
||||
<span>{data.customSectionTitle}</span>
|
||||
</h2>
|
||||
)}
|
||||
{data.customSectionContent && (
|
||||
<div className="text-slate-300 text-sm md:text-base leading-relaxed markdown-body [&_p]:mb-4 [&_p:last-child]:mb-0">
|
||||
<Markdown
|
||||
components={{
|
||||
a: ({ node, ...props }) => (
|
||||
<a
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="underline text-yellow-400 hover:text-pink-400 font-medium"
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}}
|
||||
>
|
||||
{data.customSectionContent}
|
||||
</Markdown>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
)}
|
||||
|
||||
</main>
|
||||
|
||||
{/* Book Details Modal */}
|
||||
{selectedBook && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-950/80 backdrop-blur-md animate-fade-in">
|
||||
<div
|
||||
className="relative w-full max-w-2xl border rounded-2xl p-6 md:p-8 space-y-6 max-h-[90vh] overflow-y-auto shadow-2xl"
|
||||
style={{ backgroundColor: cardBgColor, borderColor: `${accentColor}40` }}
|
||||
>
|
||||
<button
|
||||
onClick={() => setSelectedBook(null)}
|
||||
className="absolute top-4 right-4 p-2 text-slate-400 hover:text-white bg-slate-800/80 rounded-full transition-colors cursor-pointer"
|
||||
>
|
||||
<X className="w-5 h-5" />
|
||||
</button>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-12 gap-6 items-start">
|
||||
<div className="md:col-span-5 aspect-[2/3] rounded-xl overflow-hidden border border-slate-700 shadow-md">
|
||||
<img
|
||||
src={selectedBook.coverUrl || undefined}
|
||||
alt={selectedBook.title}
|
||||
className="w-full h-full object-cover"
|
||||
referrerPolicy="no-referrer"
|
||||
/>
|
||||
</div>
|
||||
<div className="md:col-span-7 space-y-4">
|
||||
<div>
|
||||
<span className="text-xs uppercase tracking-wider font-bold" style={{ color: accentColor }}>Erscheinungsjahr {selectedBook.publishedYear}</span>
|
||||
<h3 className="text-2xl font-bold text-white">{selectedBook.title}</h3>
|
||||
{selectedBook.subtitle && (
|
||||
<p className="text-sm text-slate-400 italic">{selectedBook.subtitle}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{selectedBook.genres && selectedBook.genres.length > 0 && (
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{selectedBook.genres.map((g, idx) => (
|
||||
<span key={idx} className="px-2.5 py-0.5 rounded-full bg-slate-800 text-[10px] text-slate-300 border border-slate-700">
|
||||
{g}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="text-slate-300 text-sm leading-relaxed markdown-body [&_p]:mb-4 [&_p:last-child]:mb-0">
|
||||
<Markdown
|
||||
components={{
|
||||
a: ({ node, ...props }) => (
|
||||
<a
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="underline text-yellow-400 hover:text-pink-400 font-medium"
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}}
|
||||
>
|
||||
{selectedBook.description}
|
||||
</Markdown>
|
||||
</div>
|
||||
|
||||
{/* Privacy-friendly Spotify player */}
|
||||
{selectedBook.spotifyPlaylistId && (
|
||||
<SpotifyConsentPlayer playlist={selectedBook.spotifyPlaylistId} title={`Spotify-Playlist zu ${selectedBook.title}`} accentColor={accentColor} />
|
||||
)}
|
||||
|
||||
{selectedBook.buyLink && (
|
||||
<div className="pt-2">
|
||||
<a
|
||||
href={selectedBook.buyLink}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center gap-2 px-5 py-2.5 rounded-xl font-bold text-slate-950 transition-all text-xs cursor-pointer shadow-md"
|
||||
style={{ background: `linear-gradient(to right, ${accentColor}, ${secondaryColor})` }}
|
||||
>
|
||||
<span>Buch kaufen / Lesen</span>
|
||||
<ExternalLink className="w-4 h-4" />
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Project Details Modal */}
|
||||
{selectedProject && (
|
||||
<div className="fixed inset-0 z-50 overflow-y-auto bg-slate-950/80 backdrop-blur-md animate-fade-in">
|
||||
<div className="flex min-h-full items-center justify-center p-4">
|
||||
<div
|
||||
className="relative w-full max-w-5xl border rounded-2xl p-6 md:p-8 my-8 space-y-6 shadow-2xl"
|
||||
style={{ backgroundColor: cardBgColor, borderColor: `${accentColor}40` }}
|
||||
>
|
||||
<button
|
||||
onClick={() => setSelectedProject(null)}
|
||||
className="absolute top-4 right-4 p-2 text-slate-400 hover:text-white bg-slate-800/80 rounded-full transition-colors cursor-pointer"
|
||||
>
|
||||
<X className="w-5 h-5" />
|
||||
</button>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-xs uppercase font-bold px-2.5 py-1 rounded border tracking-wider" style={{ color: accentColor, backgroundColor: `${accentColor}15`, borderColor: `${accentColor}30` }}>
|
||||
Status: {selectedProject.status}
|
||||
</span>
|
||||
<span className="text-xs text-slate-400 italic">
|
||||
{data.projectProgressLabel ? `${data.projectProgressLabel}: ` : "Fortschritt: "}{selectedProject.progress}%
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h3 className="text-2xl font-bold text-white">{selectedProject.title}</h3>
|
||||
|
||||
<div className="h-2 w-full bg-slate-900 rounded-full overflow-hidden">
|
||||
<div
|
||||
className="h-full rounded-full transition-all duration-500"
|
||||
style={{ width: `${selectedProject.progress}%`, background: `linear-gradient(to right, ${accentColor}, ${secondaryColor})` }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={`grid gap-6 ${(selectedProject.imageUrl || selectedProject.spotifyPlaylistId) ? "lg:grid-cols-[minmax(0,1fr)_minmax(0,1.15fr)] lg:items-start" : ""}`}>
|
||||
<ProjectDetailMedia project={selectedProject} accentColor={accentColor} />
|
||||
|
||||
<div className="bg-slate-900/60 p-5 rounded-xl border border-slate-800 relative overflow-hidden">
|
||||
{data.projectExcerptBadge && (
|
||||
<div className="absolute top-0 right-0 p-2 text-slate-700 text-[10px] font-mono select-none">
|
||||
{data.projectExcerptBadge}
|
||||
</div>
|
||||
)}
|
||||
{data.projectExcerptTitle && (
|
||||
<h4 className="text-xs uppercase tracking-wider mb-3 font-semibold" style={{ color: accentColor }}>
|
||||
{data.projectExcerptTitle}
|
||||
</h4>
|
||||
)}
|
||||
<div className="text-slate-300 text-sm leading-relaxed markdown-body [&_p]:mb-4 [&_p:last-child]:mb-0">
|
||||
<Markdown
|
||||
components={{
|
||||
a: ({ node, ...props }) => (
|
||||
<a
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="underline text-yellow-400 hover:text-pink-400 font-medium"
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}}
|
||||
>
|
||||
{selectedProject.description || "Für dieses Schreibprojekt wurden noch keine weiteren Details abgelegt."}
|
||||
</Markdown>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="border-t border-slate-800 py-12 px-4 text-center text-xs text-slate-500 font-sans" style={{ backgroundColor: bgColor }}>
|
||||
<div className="max-w-7xl mx-auto space-y-3">
|
||||
<p>© {new Date().getFullYear()} {data.name}. Alle Rechte vorbehalten.</p>
|
||||
<p className="text-slate-500">{data.footerText || "Geschrieben mit viel Gefühl und Herzblut."}</p>
|
||||
|
||||
{relevantLegalDocs.length > 0 && (
|
||||
<div className="flex flex-wrap items-center justify-center gap-6 pt-3 border-t border-slate-800/60 max-w-md mx-auto">
|
||||
{relevantLegalDocs.map((doc) => (
|
||||
<button
|
||||
key={doc.id}
|
||||
onClick={() => {
|
||||
setActiveLegalId(doc.id);
|
||||
setLegalModalOpen(true);
|
||||
}}
|
||||
className="text-slate-400 hover:text-yellow-400 transition-colors underline underline-offset-4 cursor-pointer"
|
||||
>
|
||||
{doc.title}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
{/* Legal Modal */}
|
||||
<LegalModal
|
||||
isOpen={legalModalOpen}
|
||||
onClose={() => setLegalModalOpen(false)}
|
||||
documents={relevantLegalDocs}
|
||||
initialDocId={activeLegalId}
|
||||
accentColor={accentColor}
|
||||
secondaryColor={secondaryColor}
|
||||
fontFamily={data.fontFamily || "sans"}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
51
src/components/admin/AdminLogin.tsx
Normal file
51
src/components/admin/AdminLogin.tsx
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
import type { FormEvent } from "react";
|
||||
import { Lock, RefreshCw } from "lucide-react";
|
||||
|
||||
interface AdminLoginProps {
|
||||
password: string;
|
||||
error: string;
|
||||
loading: boolean;
|
||||
onPasswordChange: (password: string) => void;
|
||||
onSubmit: (event: FormEvent) => void;
|
||||
}
|
||||
|
||||
export default function AdminLogin({ password, error, loading, onPasswordChange, onSubmit }: AdminLoginProps) {
|
||||
return (
|
||||
<div className="min-h-screen bg-slate-950 text-slate-100 flex items-center justify-center p-4">
|
||||
<div className="w-full max-w-md p-8 bg-slate-900 border border-slate-800 rounded-2xl shadow-2xl space-y-6">
|
||||
<div className="text-center space-y-2">
|
||||
<div className="mx-auto w-12 h-12 bg-indigo-950/80 border border-indigo-700/50 rounded-xl flex items-center justify-center text-cyan-400">
|
||||
<Lock className="w-6 h-6" />
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold tracking-tight text-white">Autoren-Zentrale Admin</h1>
|
||||
<p className="text-xs text-slate-400">Authentifizierung erforderlich. Passwortgeschütztes Kontrollzentrum.</p>
|
||||
</div>
|
||||
|
||||
<form onSubmit={onSubmit} className="space-y-4">
|
||||
<div className="space-y-1">
|
||||
<label className="text-xs font-mono text-cyan-400 uppercase tracking-widest">Admin-Passwort</label>
|
||||
<input
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(event) => onPasswordChange(event.target.value)}
|
||||
placeholder="Passwort eingeben..."
|
||||
className="w-full px-4 py-3 bg-slate-950 border border-slate-800 rounded-xl text-white outline-none focus:border-cyan-400 transition-colors text-sm"
|
||||
required
|
||||
/>
|
||||
<span className="text-[10px] text-slate-500">Das Passwort wird über die Serverkonfiguration festgelegt.</span>
|
||||
</div>
|
||||
|
||||
{error && <div className="p-3 bg-rose-950/40 border border-rose-900/50 text-rose-300 text-xs rounded-lg text-center">{error}</div>}
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="w-full py-3 bg-gradient-to-r from-cyan-500 to-indigo-600 hover:from-cyan-400 hover:to-indigo-500 text-slate-950 font-bold rounded-xl transition-all flex items-center justify-center gap-2 text-sm cursor-pointer disabled:opacity-60"
|
||||
>
|
||||
{loading ? <RefreshCw className="w-4 h-4 animate-spin" /> : <span>Zentrale aufschließen</span>}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -95,6 +95,14 @@ export interface AuthorData {
|
|||
revision?: number;
|
||||
}
|
||||
|
||||
export type PortfolioTheme = "cosmic" | "velvet" | "botanical" | "romance";
|
||||
|
||||
export interface PublicAuthorData {
|
||||
profile: AuthorProfile;
|
||||
legalDocuments: LegalDocument[];
|
||||
theme: PortfolioTheme;
|
||||
}
|
||||
|
||||
export interface AdminSettings {
|
||||
adminPasswordHash?: string; // Optional if we hash, or we check against .env
|
||||
}
|
||||
|
|
|
|||
|
|
@ -113,6 +113,21 @@ test("production hardening and public routing", async (t) => {
|
|||
response = await fetch(`${baseUrl}/api/admin/session`, { headers: { cookie } });
|
||||
assert.equal(response.status, 200);
|
||||
|
||||
response = await fetch(`${baseUrl}/api/admin/author-data`);
|
||||
assert.equal(response.status, 401);
|
||||
|
||||
const publicResponse = await getWithHost(`${baseUrl}/api/author-data?path=/clara`, "annieslone.de");
|
||||
assert.equal(publicResponse.status, 200);
|
||||
const publicData = JSON.parse(publicResponse.body);
|
||||
assert.deepEqual(Object.keys(publicData).sort(), ["legalDocuments", "profile", "theme"]);
|
||||
assert.equal(publicData.profile.name, "Annie Slone");
|
||||
assert.equal(publicData.theme, "velvet");
|
||||
assert.equal(publicData.profile.customDomain, undefined);
|
||||
assert.equal(publicData.profile.customPath, undefined);
|
||||
assert.equal(publicResponse.body.includes("Clara Finch"), false);
|
||||
assert.equal(publicResponse.body.includes("Renee Heart"), false);
|
||||
assert.equal(publicResponse.body.includes("Daniel Hesse"), false);
|
||||
|
||||
let routedPage = await getWithHost(`${baseUrl}/`, "annieslone.de");
|
||||
assert.match(routedPage.body, /<title>Annie Slone/);
|
||||
routedPage = await getWithHost(`${baseUrl}/`, "www.annieslone.de");
|
||||
|
|
|
|||
Loading…
Reference in a new issue