init elas atelier #1
+1
-1
@@ -39,7 +39,7 @@ services:
|
||||
context: ./frontend
|
||||
dockerfile: Dockerfile
|
||||
ports:
|
||||
- "4321:4321"
|
||||
- "4322:4321"
|
||||
environment:
|
||||
- PUBLIC_API_URL=http://backend:3000
|
||||
depends_on:
|
||||
|
||||
@@ -317,74 +317,74 @@ export default function Editor({ editSlug }: Props) {
|
||||
{/* Title + Date */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-[1fr_180px] gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-subtext1 mb-2">Title</label>
|
||||
<label className="field-label">Title</label>
|
||||
<input
|
||||
type="text"
|
||||
value={title}
|
||||
onChange={e => setTitle(e.target.value)}
|
||||
required
|
||||
placeholder="Untitled (charcoal on paper)"
|
||||
className="w-full bg-crust border border-surface1 rounded-lg px-4 py-3 text-text focus:outline-none focus:border-mauve transition-colors"
|
||||
className="field-input"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-subtext1 mb-2">Date</label>
|
||||
<label className="field-label">Date</label>
|
||||
<input
|
||||
type="date"
|
||||
value={date}
|
||||
onChange={e => setDate(e.target.value)}
|
||||
className="w-full bg-crust border border-surface1 rounded-lg px-4 py-3 text-text focus:outline-none focus:border-mauve transition-colors font-mono"
|
||||
className="field-input font-mono"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Slug */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-subtext1 mb-2">
|
||||
Slug <span className="text-overlay0 font-normal">(URL identifier — auto-derived from title)</span>
|
||||
<label className="field-label">
|
||||
Slug <span className="normal-case tracking-normal text-[var(--overlay0)] italic font-display">— auto-derived from title</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={slug}
|
||||
onChange={e => { setSlug(e.target.value); setSlugTouched(true); }}
|
||||
required
|
||||
placeholder="my-awesome-post"
|
||||
className="w-full bg-crust border border-surface1 rounded-lg px-4 py-3 text-text focus:outline-none focus:border-mauve transition-colors font-mono"
|
||||
placeholder="untitled-charcoal-on-paper"
|
||||
className="field-input font-mono"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Tags + Draft */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-[1fr_auto] gap-4 md:items-end">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-subtext1 mb-2">Tags (comma-separated)</label>
|
||||
<label className="field-label">Tags (comma-separated)</label>
|
||||
<input
|
||||
type="text"
|
||||
value={tagsInput}
|
||||
onChange={e => setTagsInput(e.target.value)}
|
||||
placeholder="oil, paper, 2026, study"
|
||||
className="w-full bg-crust border border-surface1 rounded-lg px-4 py-3 text-text focus:outline-none focus:border-mauve transition-colors"
|
||||
className="field-input"
|
||||
/>
|
||||
</div>
|
||||
<label className="flex items-center gap-2 px-4 py-3 bg-crust border border-surface1 rounded-lg cursor-pointer hover:border-peach/40 transition-colors select-none">
|
||||
<label className="flex items-center gap-2 px-4 py-3 bg-[var(--surface0)]/60 border border-[var(--surface2)] cursor-pointer hover:border-[var(--peach)] transition-colors select-none" style={{ borderRadius: 1 }}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={draft}
|
||||
onChange={e => setDraft(e.target.checked)}
|
||||
className="accent-peach"
|
||||
className="accent-[var(--peach)]"
|
||||
/>
|
||||
<span className="text-sm font-medium text-subtext1">Draft</span>
|
||||
<span className="text-sm font-display italic text-[var(--subtext1)]">Sketch (draft)</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{/* Summary */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-subtext1 mb-2">Custom Summary (Optional)</label>
|
||||
<label className="field-label">Caption (optional)</label>
|
||||
<textarea
|
||||
value={summary}
|
||||
onChange={e => setSummary(e.target.value)}
|
||||
rows={2}
|
||||
placeholder="A short caption for the catalogue index..."
|
||||
className="w-full bg-crust border border-surface1 rounded-lg px-4 py-3 text-text focus:outline-none focus:border-mauve transition-colors resize-none"
|
||||
className="field-input resize-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -25,74 +25,74 @@ export default function Settings() {
|
||||
e.preventDefault();
|
||||
try {
|
||||
await updateConfig(config);
|
||||
showAlert('Settings saved successfully! Refresh to see changes.', 'success');
|
||||
showAlert('Settings saved. Refresh to see changes.', 'success');
|
||||
} catch (e) {
|
||||
showAlert(e instanceof ApiError ? `Error: ${e.message}` : 'Failed to save settings.', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="space-y-8">
|
||||
<form onSubmit={handleSubmit} className="space-y-10">
|
||||
{alert && (
|
||||
<div className={`p-4 rounded-lg mb-6 text-sm font-semibold text-center backdrop-blur-sm ${
|
||||
alert.type === 'success'
|
||||
? 'bg-green/15 text-green border border-green/30'
|
||||
: 'bg-red/15 text-red border border-red/30'
|
||||
}`}>
|
||||
<div
|
||||
className={`p-4 text-sm font-display italic text-center border ${
|
||||
alert.type === 'success'
|
||||
? 'bg-[var(--green)]/15 text-[var(--green)] border-[var(--green)]/30'
|
||||
: 'bg-[var(--red)]/15 text-[var(--red)] border-[var(--red)]/30'
|
||||
}`}
|
||||
style={{ borderRadius: 1 }}
|
||||
>
|
||||
{alert.msg}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<section className="space-y-6">
|
||||
<h2 className="text-xl font-bold text-lavender border-l-4 border-lavender pl-4">General Identity</h2>
|
||||
<h2 className="font-display italic text-2xl text-[var(--text)] border-l-2 border-[var(--mauve)] pl-4">Identity</h2>
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
<Field label="Blog Title (Nav)" value={config.title || ''} onChange={v => update('title', v)} />
|
||||
<Field label="Nav Subtitle" value={config.subtitle || ''} onChange={v => update('subtitle', v)} />
|
||||
<Field label="Welcome Title (Frontpage)" value={config.welcome_title || ''} onChange={v => update('welcome_title', v)} />
|
||||
<Field label="Welcome Subtitle" value={config.welcome_subtitle || ''} onChange={v => update('welcome_subtitle', v)} />
|
||||
</div>
|
||||
<div>
|
||||
<Field label="Favicon URL" value={config.favicon || ''} onChange={v => update('favicon', v)} hint="URL to the icon shown in browser tabs." />
|
||||
<Field label="Gallery name (nav)" value={config.title || ''} onChange={v => update('title', v)} />
|
||||
<Field label="Nav subtitle" value={config.subtitle || ''} onChange={v => update('subtitle', v)} />
|
||||
<Field label="Welcome title (index)" value={config.welcome_title || ''} onChange={v => update('welcome_title', v)} />
|
||||
<Field label="Welcome subtitle" value={config.welcome_subtitle || ''} onChange={v => update('welcome_subtitle', v)} />
|
||||
</div>
|
||||
<Field label="Favicon URL" value={config.favicon || ''} onChange={v => update('favicon', v)} hint="Icon shown in browser tabs." />
|
||||
</section>
|
||||
|
||||
<section className="space-y-6">
|
||||
<h2 className="text-xl font-bold text-blue border-l-4 border-blue pl-4">Appearance</h2>
|
||||
<h2 className="font-display italic text-2xl text-[var(--text)] border-l-2 border-[var(--blue)] pl-4">Appearance</h2>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-subtext1 mb-2">Color Theme (Catppuccin)</label>
|
||||
<label className="field-label">Theme</label>
|
||||
<select
|
||||
value={config.theme || 'mocha'}
|
||||
value={config.theme || 'salon'}
|
||||
onChange={e => update('theme', e.target.value)}
|
||||
className="w-full bg-crust border border-surface1 rounded-lg px-4 py-3 text-text focus:outline-none focus:border-mauve transition-colors"
|
||||
className="field-input font-display italic"
|
||||
>
|
||||
<option value="mocha">Mocha (Dark, High Contrast)</option>
|
||||
<option value="macchiato">Macchiato (Dark, Medium Contrast)</option>
|
||||
<option value="frappe">Frappe (Dark, Low Contrast)</option>
|
||||
<option value="latte">Latte (Light Mode)</option>
|
||||
<option value="scaled-and-icy">Scaled and Icy (Vibrant Light)</option>
|
||||
<option value="salon">Salon (parchment, default)</option>
|
||||
<option value="salon-noir">Salon Noir (black gallery wall)</option>
|
||||
<option value="latte">Latte (light)</option>
|
||||
<option value="mocha">Mocha (dark)</option>
|
||||
</select>
|
||||
<p className="text-[10px] text-subtext0 mt-1">Select a predefined Catppuccin color palette.</p>
|
||||
<p className="text-[10px] font-display italic text-[var(--subtext0)] mt-2 tracking-wider">Salon and Salon Noir are tuned for the gallery aesthetic.</p>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-subtext1 mb-2">Custom CSS</label>
|
||||
<label className="field-label">Custom CSS</label>
|
||||
<textarea
|
||||
value={config.custom_css || ''}
|
||||
onChange={e => update('custom_css', e.target.value)}
|
||||
rows={4}
|
||||
className="w-full bg-crust border border-surface1 rounded-lg px-4 py-3 text-text focus:outline-none focus:border-mauve transition-colors font-mono text-xs"
|
||||
className="field-input font-mono text-xs"
|
||||
placeholder="body { ... }"
|
||||
/>
|
||||
<p className="text-[10px] text-subtext0 mt-1">Inject custom CSS styles globally.</p>
|
||||
<p className="text-[10px] font-display italic text-[var(--subtext0)] mt-2 tracking-wider">Injected globally — use sparingly.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="space-y-6">
|
||||
<h2 className="text-xl font-bold text-teal border-l-4 border-teal pl-4">Footer</h2>
|
||||
<Field label="Footer Text" value={config.footer || ''} onChange={v => update('footer', v)} />
|
||||
<h2 className="font-display italic text-2xl text-[var(--text)] border-l-2 border-[var(--teal)] pl-4">Footer</h2>
|
||||
<Field label="Footer text" value={config.footer || ''} onChange={v => update('footer', v)} />
|
||||
</section>
|
||||
|
||||
<button type="submit" className="w-full md:w-auto bg-mauve text-crust font-bold py-4 px-12 rounded-lg hover:bg-pink transition-all transform hover:scale-[1.02] active:scale-[0.98]">
|
||||
Save Site Configuration
|
||||
<button type="submit" className="btn-stamp">
|
||||
Save site settings
|
||||
</button>
|
||||
</form>
|
||||
);
|
||||
@@ -101,15 +101,15 @@ export default function Settings() {
|
||||
function Field({ label, value, onChange, hint }: { label: string; value: string; onChange: (v: string) => void; hint?: string }) {
|
||||
return (
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-subtext1 mb-2">{label}</label>
|
||||
<label className="field-label">{label}</label>
|
||||
<input
|
||||
type="text"
|
||||
value={value}
|
||||
onChange={e => onChange(e.target.value)}
|
||||
required
|
||||
className="w-full bg-crust border border-surface1 rounded-lg px-4 py-3 text-text focus:outline-none focus:border-mauve transition-colors"
|
||||
className="field-input"
|
||||
/>
|
||||
{hint && <p className="text-[10px] text-subtext0 mt-1">{hint}</p>}
|
||||
{hint && <p className="text-[10px] font-display italic text-[var(--subtext0)] mt-2 tracking-wider">{hint}</p>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user