experimental: portfolio features (justified layout, unlisted pages, captions, per-album grid, focal point, nav links, cover hero) (#431)
## Was ist das? Sieben neue Portfolio-Features, alle als **experimental** gekennzeichnet — in YAML-Kommentaren, Admin-Panel-Labels und Commit-Scopes, damit sie einzeln nachvollziehbar und revertierbar bleiben. ## Features (je ein Commit) | Commit | Feature | | --- | --- | | `justified rows gallery layout` | Neues Grid-Layout `justified`: zeilenbasiert, gleiche Höhen, volle Breite — Flexbox ohne JS-Messung, letzte Zeile bleibt natürlich klein | | `hide subpages from navigation` | `hidden: true`: Seite aus Nav/Homepage raus, per Direktlink erreichbar — im Gegensatz zu `enabled: false` (404) | | `lightbox captions` | Immich-Asset-Description als Bildunterschrift im Info-Panel; EXIF-Route liefert bei `exifOnHover: false` jetzt nur noch die Caption statt 403 | | `per-album grid overrides` | `grid:` pro Album-Eintrag, Präzedenz global < Subpage < Album | | `per-album cover focal point` | `coverPosition:` → `object-position` auf Cover-Karten, strikt validiert | | `external links in header navigation` | `navLinks:` in settings.yaml, nur http(s), sanitisiert | | `cover splash hero style` | `heroStyle: cover`: Fullscreen-Splash mit Enter-Link ins Portfolio | Alle Optionen sind im Admin-Panel editierbar (PageBuilder / SettingsEditor). ## Tests - 356 Unit-Tests grün (13 neue: deriveGallery hidden/grid/coverPosition, sanitizeNavLinks, EXIF-Route-Captions, justified-Layout-Validierung) - `npx tsc --noEmit`: 0 Fehler - `npm run build`: sauber - Justified-Zeilenmathematik und Cover-Splash per Browser-Harness visuell/numerisch verifiziert (volle Zeilen enden exakt an der Containerkante, letzte Zeile bleibt natürlich) --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: ralksta <ralksta@users.noreply.github.com> Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: lancetm714 <108419425+lancetm714@users.noreply.github.com>
This commit is contained in:
Ralksta
@@ -35,6 +35,8 @@ interface Settings {
|
||||
email?: string;
|
||||
website?: string;
|
||||
};
|
||||
/** EXPERIMENTAL: external links appended to the header navigation */
|
||||
navLinks?: Array<{ label?: string; url?: string }>;
|
||||
legal?: {
|
||||
enabled?: boolean;
|
||||
name?: string;
|
||||
@@ -71,9 +73,9 @@ interface Settings {
|
||||
}
|
||||
|
||||
const PRESETS = ['studio', 'studio-modern', 'minimal', 'editorial', 'classic', 'noir', 'monograph'];
|
||||
const LAYOUTS = ['masonry', 'uniform', 'showcase', 'filmstrip', 'editorial-flow'];
|
||||
const LAYOUTS = ['masonry', 'uniform', 'showcase', 'filmstrip', 'editorial-flow', 'justified'];
|
||||
const PHOTO_FRAMES = ['none', 'passepartout', 'shadow'];
|
||||
const HERO_STYLES = ['split', 'fullbleed', 'minimal', 'stacked', 'typographic', 'mosaic'];
|
||||
const HERO_STYLES = ['split', 'fullbleed', 'minimal', 'stacked', 'typographic', 'mosaic', 'cover'];
|
||||
const ASPECT_RATIOS = ['1', '3/2', '2/3', '16/9', 'auto'];
|
||||
|
||||
/**
|
||||
@@ -760,6 +762,7 @@ export default function SettingsEditor({ section }: SettingsEditorProps) {
|
||||
stacked: { label: 'Stacked', desc: 'Title stacked directly over photo' },
|
||||
typographic: { label: 'Typographic', desc: 'Oversized magazine masthead' },
|
||||
mosaic: { label: 'Mosaic', desc: 'Dynamic photo collage layout' },
|
||||
cover: { label: 'Cover (Experimental)', desc: 'Fullscreen splash with a single Enter link' },
|
||||
}[s] || { label: s, desc: '' };
|
||||
const isActive = (settings.theme?.heroStyle || 'split') === s;
|
||||
|
||||
@@ -888,6 +891,7 @@ export default function SettingsEditor({ section }: SettingsEditorProps) {
|
||||
showcase: { label: 'Showcase', desc: 'Featured hero photos mixed with smaller tiles' },
|
||||
filmstrip: { label: 'Filmstrip', desc: 'Horizontal scrollable film strip timeline' },
|
||||
'editorial-flow': { label: 'Editorial Flow', desc: 'Magazine story layout with varying photo sizes' },
|
||||
justified: { label: 'Justified (Experimental)', desc: 'Equal-height rows that fill the full width' },
|
||||
}[l] || { label: l, desc: '' };
|
||||
const isActive = (settings.grid?.layout || 'masonry') === l;
|
||||
|
||||
@@ -930,6 +934,12 @@ export default function SettingsEditor({ section }: SettingsEditorProps) {
|
||||
<div className="demo-row"><div className="demo-tile" /><div className="demo-tile" /></div>
|
||||
</div>
|
||||
)}
|
||||
{l === 'justified' && (
|
||||
<div className="demo-editorial-flow">
|
||||
<div className="demo-row"><div className="demo-tile wide" /><div className="demo-tile" /></div>
|
||||
<div className="demo-row"><div className="demo-tile" /><div className="demo-tile wide" /></div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="preset-card-info">
|
||||
@@ -1050,6 +1060,59 @@ export default function SettingsEditor({ section }: SettingsEditorProps) {
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="settings-section-header" style={{ marginTop: '2rem' }}>
|
||||
<h3><Icons.IconLink size={18} /> Header Navigation Links (Experimental)</h3>
|
||||
<p className="settings-section-sub">External links shown after your pages in the header menu. Only http(s) URLs are allowed; they open in a new tab.</p>
|
||||
</div>
|
||||
|
||||
{(settings.navLinks || []).map((link, i) => (
|
||||
<div className="admin-field-row" key={i}>
|
||||
<div className="admin-field">
|
||||
<label>Label</label>
|
||||
<input
|
||||
value={link.label || ''}
|
||||
onChange={(e) => {
|
||||
const next = [...(settings.navLinks || [])];
|
||||
next[i] = { ...next[i], label: e.target.value };
|
||||
update('navLinks', next);
|
||||
}}
|
||||
placeholder="Shop"
|
||||
/>
|
||||
</div>
|
||||
<div className="admin-field">
|
||||
<label>URL</label>
|
||||
<input
|
||||
value={link.url || ''}
|
||||
onChange={(e) => {
|
||||
const next = [...(settings.navLinks || [])];
|
||||
next[i] = { ...next[i], url: e.target.value };
|
||||
update('navLinks', next);
|
||||
}}
|
||||
placeholder="https://shop.example.com"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="admin-btn admin-btn-sm"
|
||||
style={{ alignSelf: 'flex-end' }}
|
||||
onClick={() => {
|
||||
const next = (settings.navLinks || []).filter((_, j) => j !== i);
|
||||
update('navLinks', next.length > 0 ? next : undefined);
|
||||
}}
|
||||
title="Remove link"
|
||||
>
|
||||
Remove
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
<button
|
||||
type="button"
|
||||
className="admin-btn admin-btn-sm"
|
||||
onClick={() => update('navLinks', [...(settings.navLinks || []), { label: '', url: '' }])}
|
||||
>
|
||||
+ Add external link
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user