cms: headless CMS vor Hugo (Supabase + Node-API + React-Admin)
All-in-One docker-compose-Stack (Muster von RAPPORT-SERVER gespiegelt): db/auth/rest/kong + cms-Service (Node-API + Hugo-Binary 0.161.1 + Admin-SPA). - DB-backed: posts-Tabelle kanonisch, MD ist generiertes Artefakt - echte Hugo-Vorschau via draft:true + --buildDrafts → /_preview - Publish: DB → content/library/<section>/<slug>.md → hugo build → live - Bild-Upload nach static/images/, Supabase-Auth schützt /api/* - Proxmox-LXC-Script: legt Container an, generiert Secrets, startet Stack Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,266 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { supabase } from './supabase.js';
|
||||
import { api } from './api.js';
|
||||
|
||||
const SECTIONS = ['buerofuehrung', 'software', 'theorie'];
|
||||
const LAYOUTS = ['', 'text', 'image'];
|
||||
|
||||
const EMPTY = {
|
||||
section: 'software',
|
||||
slug: '',
|
||||
title: '',
|
||||
date: new Date().toISOString().slice(0, 10),
|
||||
weight: '',
|
||||
tags: '',
|
||||
summary: '',
|
||||
cover_image: '',
|
||||
layout: 'text',
|
||||
external: '',
|
||||
color: '',
|
||||
body: '',
|
||||
};
|
||||
|
||||
export default function App() {
|
||||
const [session, setSession] = useState(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
supabase.auth.getSession().then(({ data }) => {
|
||||
setSession(data.session);
|
||||
setLoading(false);
|
||||
});
|
||||
const { data: sub } = supabase.auth.onAuthStateChange((_e, s) => setSession(s));
|
||||
return () => sub.subscription.unsubscribe();
|
||||
}, []);
|
||||
|
||||
if (loading) return <div className="center">…</div>;
|
||||
if (!session) return <Login />;
|
||||
return <Dashboard email={session.user.email} />;
|
||||
}
|
||||
|
||||
function Login() {
|
||||
const [email, setEmail] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [err, setErr] = useState(null);
|
||||
|
||||
async function submit(e) {
|
||||
e.preventDefault();
|
||||
setErr(null);
|
||||
const { error } = await supabase.auth.signInWithPassword({ email, password });
|
||||
if (error) setErr(error.message);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="center">
|
||||
<form className="card login" onSubmit={submit}>
|
||||
<h1>OPENBUREAU CMS</h1>
|
||||
<input type="email" placeholder="E-Mail" value={email}
|
||||
onChange={(e) => setEmail(e.target.value)} autoFocus />
|
||||
<input type="password" placeholder="Passwort" value={password}
|
||||
onChange={(e) => setPassword(e.target.value)} />
|
||||
<button type="submit">Einloggen</button>
|
||||
{err && <p className="err">{err}</p>}
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Dashboard({ email }) {
|
||||
const [posts, setPosts] = useState([]);
|
||||
const [current, setCurrent] = useState(null); // post-Objekt oder null
|
||||
const [msg, setMsg] = useState(null);
|
||||
|
||||
async function refresh() {
|
||||
try {
|
||||
setPosts(await api.listPosts());
|
||||
} catch (e) {
|
||||
setMsg({ type: 'err', text: e.message });
|
||||
}
|
||||
}
|
||||
useEffect(() => { refresh(); }, []);
|
||||
|
||||
return (
|
||||
<div className="app">
|
||||
<header>
|
||||
<strong>OPENBUREAU CMS</strong>
|
||||
<span className="spacer" />
|
||||
<span className="muted">{email}</span>
|
||||
<button onClick={() => supabase.auth.signOut()}>Logout</button>
|
||||
</header>
|
||||
|
||||
<div className="body">
|
||||
<aside>
|
||||
<button className="new" onClick={() => setCurrent({ ...EMPTY })}>+ Neuer Post</button>
|
||||
<ul className="list">
|
||||
{posts.map((p) => (
|
||||
<li key={p.id} className={current?.id === p.id ? 'active' : ''}
|
||||
onClick={() => setCurrent(fromRow(p))}>
|
||||
<span className={`dot ${p.status}`} />
|
||||
<span className="t">{p.title || '(ohne Titel)'}</span>
|
||||
<span className="s">{p.section}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</aside>
|
||||
|
||||
<main>
|
||||
{current
|
||||
? <Editor key={current.id || 'new'} initial={current}
|
||||
onSaved={(row) => { setCurrent(fromRow(row)); refresh(); }}
|
||||
onMsg={setMsg} />
|
||||
: <p className="muted pad">Wähle links einen Post oder leg einen neuen an.</p>}
|
||||
</main>
|
||||
</div>
|
||||
|
||||
{msg && <div className={`toast ${msg.type}`} onClick={() => setMsg(null)}>{msg.text}</div>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Editor({ initial, onSaved, onMsg }) {
|
||||
const [post, setPost] = useState(initial);
|
||||
const [previewUrl, setPreviewUrl] = useState(null);
|
||||
const [busy, setBusy] = useState(false);
|
||||
const set = (k) => (e) => setPost({ ...post, [k]: e.target.value });
|
||||
|
||||
async function uploadCover(e) {
|
||||
const file = e.target.files?.[0];
|
||||
if (!file) return;
|
||||
setBusy(true);
|
||||
try {
|
||||
const res = await api.upload(file);
|
||||
setPost((p) => ({ ...p, cover_image: res.url }));
|
||||
onMsg({ type: 'ok', text: `Hochgeladen: ${res.url}` });
|
||||
} catch (err) {
|
||||
onMsg({ type: 'err', text: err.message });
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function save() {
|
||||
setBusy(true);
|
||||
try {
|
||||
const payload = toRow(post);
|
||||
const row = post.id
|
||||
? await api.updatePost(post.id, payload)
|
||||
: await api.createPost(payload);
|
||||
onSaved(row);
|
||||
onMsg({ type: 'ok', text: 'Gespeichert.' });
|
||||
return row;
|
||||
} catch (e) {
|
||||
onMsg({ type: 'err', text: e.message });
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function preview() {
|
||||
const row = await save();
|
||||
if (!row) return;
|
||||
setBusy(true);
|
||||
try {
|
||||
const res = await api.preview(row.id);
|
||||
// Cache-Buster, damit der frische Build geladen wird.
|
||||
setPreviewUrl(`${res.url}?t=${Date.now()}`);
|
||||
} catch (e) {
|
||||
onMsg({ type: 'err', text: e.message });
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function publish() {
|
||||
const row = await save();
|
||||
if (!row) return;
|
||||
if (!confirm('Diesen Post live publizieren?')) return;
|
||||
setBusy(true);
|
||||
try {
|
||||
const res = await api.publish(row.id);
|
||||
onMsg({ type: 'ok', text: `Live: ${res.url}` });
|
||||
} catch (e) {
|
||||
onMsg({ type: 'err', text: e.message });
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="editor">
|
||||
<div className="fields">
|
||||
<div className="row">
|
||||
<label>Titel<input value={post.title} onChange={set('title')} /></label>
|
||||
<label className="sm">Section
|
||||
<select value={post.section} onChange={set('section')}>
|
||||
{SECTIONS.map((s) => <option key={s}>{s}</option>)}
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
<div className="row">
|
||||
<label>Slug<input value={post.slug} onChange={set('slug')} placeholder="a-z0-9-" /></label>
|
||||
<label className="sm">Datum<input type="date" value={post.date} onChange={set('date')} /></label>
|
||||
<label className="xs">Weight<input type="number" value={post.weight} onChange={set('weight')} /></label>
|
||||
</div>
|
||||
<div className="row">
|
||||
<label className="sm">Layout
|
||||
<select value={post.layout} onChange={set('layout')}>
|
||||
{LAYOUTS.map((l) => <option key={l} value={l}>{l || '(default)'}</option>)}
|
||||
</select>
|
||||
</label>
|
||||
<label className="sm">Color<input value={post.color} onChange={set('color')} placeholder="kusa / yuyake" /></label>
|
||||
<label>Tags<input value={post.tags} onChange={set('tags')} placeholder="komma, getrennt" /></label>
|
||||
</div>
|
||||
<label>Summary<input value={post.summary} onChange={set('summary')} /></label>
|
||||
<div className="row">
|
||||
<label>Cover-Bild
|
||||
<input value={post.cover_image} onChange={set('cover_image')} placeholder="/images/...jpg" />
|
||||
</label>
|
||||
<label className="sm">Hochladen
|
||||
<input type="file" accept="image/*" onChange={uploadCover} disabled={busy} />
|
||||
</label>
|
||||
<label>Externer Link<input value={post.external} onChange={set('external')} placeholder="https://…" /></label>
|
||||
</div>
|
||||
<label className="grow">Inhalt (Markdown)
|
||||
<textarea value={post.body} onChange={set('body')} spellCheck={false} />
|
||||
</label>
|
||||
<div className="actions">
|
||||
<button onClick={save} disabled={busy}>Speichern</button>
|
||||
<button onClick={preview} disabled={busy}>Vorschau</button>
|
||||
<button className="primary" onClick={publish} disabled={busy}>Publizieren</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="preview">
|
||||
{previewUrl
|
||||
? <iframe title="Vorschau" src={previewUrl} />
|
||||
: <p className="muted pad">Vorschau erscheint hier nach Klick auf „Vorschau".</p>}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// --- DB-Zeile <-> Formular ---
|
||||
function fromRow(row) {
|
||||
return {
|
||||
...EMPTY, ...row,
|
||||
weight: row.weight ?? '',
|
||||
tags: Array.isArray(row.tags) ? row.tags.join(', ') : '',
|
||||
date: row.date ? String(row.date).slice(0, 10) : EMPTY.date,
|
||||
};
|
||||
}
|
||||
function toRow(post) {
|
||||
return {
|
||||
section: post.section,
|
||||
slug: post.slug,
|
||||
title: post.title,
|
||||
date: post.date,
|
||||
weight: post.weight === '' ? null : Number(post.weight),
|
||||
tags: post.tags ? post.tags.split(',').map((t) => t.trim()).filter(Boolean) : [],
|
||||
summary: post.summary || null,
|
||||
cover_image: post.cover_image || null,
|
||||
layout: post.layout || null,
|
||||
external: post.external || null,
|
||||
color: post.color || null,
|
||||
body: post.body || '',
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user