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:
@@ -12,7 +12,38 @@ vi.mock('@/lib/env', () => ({
|
||||
},
|
||||
}));
|
||||
|
||||
import { slugify, buildSubpageGrid } from '@/lib/config';
|
||||
import { slugify, buildSubpageGrid, sanitizeNavLinks } from '@/lib/config';
|
||||
|
||||
// EXPERIMENTAL: external navigation links — rendered as <a href> in the
|
||||
// header, so only http(s) URLs may survive sanitisation.
|
||||
describe('sanitizeNavLinks', () => {
|
||||
it('keeps well-formed http(s) links', () => {
|
||||
expect(
|
||||
sanitizeNavLinks([
|
||||
{ label: 'Shop', url: 'https://shop.example.com' },
|
||||
{ label: 'Blog', url: 'http://blog.example.com/a?b=c' },
|
||||
]),
|
||||
).toEqual([
|
||||
{ label: 'Shop', url: 'https://shop.example.com' },
|
||||
{ label: 'Blog', url: 'http://blog.example.com/a?b=c' },
|
||||
]);
|
||||
});
|
||||
|
||||
it('drops non-http schemes and entries without label or url', () => {
|
||||
expect(
|
||||
sanitizeNavLinks([
|
||||
{ label: 'Bad', url: 'javascript:alert(1)' },
|
||||
{ label: 'AlsoBad', url: 'data:text/html,x' },
|
||||
{ label: '', url: 'https://x.example' },
|
||||
{ label: 'NoUrl', url: '' },
|
||||
]),
|
||||
).toEqual([]);
|
||||
});
|
||||
|
||||
it('returns empty for undefined input', () => {
|
||||
expect(sanitizeNavLinks(undefined)).toEqual([]);
|
||||
});
|
||||
});
|
||||
|
||||
describe('slugify', () => {
|
||||
it('converts a simple name to lowercase with hyphens', () => {
|
||||
@@ -79,6 +110,12 @@ describe('buildSubpageGrid', () => {
|
||||
});
|
||||
});
|
||||
|
||||
it('preserves the experimental justified layout', () => {
|
||||
expect(buildSubpageGrid({ layout: 'justified' })).toEqual({
|
||||
grid: { layout: 'justified' },
|
||||
});
|
||||
});
|
||||
|
||||
it('falls back to masonry for an unknown layout', () => {
|
||||
expect(buildSubpageGrid({ layout: 'unknown-layout' })).toEqual({
|
||||
grid: { layout: 'masonry' },
|
||||
|
||||
@@ -156,6 +156,66 @@ describe('deriveGallery accepts valid structures', () => {
|
||||
expect(result.albumManualOrders[A]).toEqual([B]);
|
||||
});
|
||||
|
||||
// EXPERIMENTAL: hidden keeps a subpage reachable by direct link while
|
||||
// removing it from navigation — distinct from enabled:false, which 404s.
|
||||
it('derives the hidden flag on array-style subpages', () => {
|
||||
const result = deriveGallery({
|
||||
subpages: [{ name: 'Preview', hidden: true, albums: [A] }],
|
||||
} as unknown as GalleryYaml);
|
||||
|
||||
expect(result.subpages[0].hidden).toBe(true);
|
||||
expect(result.subpages[0].enabled).toBe(true);
|
||||
});
|
||||
|
||||
it('derives the hidden flag on map-style subpages, defaulting to falsy', () => {
|
||||
const result = deriveGallery({
|
||||
subpages: { Preview: { hidden: true, albums: [A] }, Open: [B] },
|
||||
} as unknown as GalleryYaml);
|
||||
|
||||
const preview = result.subpages.find((sp) => sp.name === 'Preview');
|
||||
const open = result.subpages.find((sp) => sp.name === 'Open');
|
||||
expect(preview?.hidden).toBe(true);
|
||||
expect(open?.hidden).toBeFalsy();
|
||||
});
|
||||
|
||||
// EXPERIMENTAL: per-album grid overrides — merged over subpage/global grid.
|
||||
it('collects per-album grid overrides, dropping unknown layouts to masonry', () => {
|
||||
const result = deriveGallery({
|
||||
albums: [
|
||||
{ [A]: { title: 'Panoramas', grid: { layout: 'filmstrip', columns: 2 } } },
|
||||
{ [B]: { grid: { layout: 'not-a-layout' } } },
|
||||
],
|
||||
} as unknown as GalleryYaml);
|
||||
|
||||
expect(result.albumGrids[A]).toEqual({ layout: 'filmstrip', columns: 2 });
|
||||
expect(result.albumGrids[B]).toEqual({ layout: 'masonry' });
|
||||
});
|
||||
|
||||
it('leaves albumGrids empty for entries without a grid', () => {
|
||||
const result = deriveGallery({ albums: [A] } as unknown as GalleryYaml);
|
||||
expect(result.albumGrids).toEqual({});
|
||||
});
|
||||
|
||||
// EXPERIMENTAL: coverPosition feeds object-position on cover images, so it
|
||||
// must be a strict CSS position value — anything else is a typo or an
|
||||
// injection attempt and both should fail loudly.
|
||||
it('collects a valid coverPosition', () => {
|
||||
const result = deriveGallery({
|
||||
albums: [{ [A]: { coverPosition: '50% 25%' } }, { [B]: { coverPosition: 'top' } }],
|
||||
} as unknown as GalleryYaml);
|
||||
|
||||
expect(result.albumCoverPositions[A]).toBe('50% 25%');
|
||||
expect(result.albumCoverPositions[B]).toBe('top');
|
||||
});
|
||||
|
||||
it('rejects a malformed coverPosition, naming the album', () => {
|
||||
expect(() =>
|
||||
deriveGallery({
|
||||
albums: [{ [A]: { coverPosition: 'javascript:alert(1)' } }],
|
||||
} as unknown as GalleryYaml),
|
||||
).toThrow(new RegExp(A));
|
||||
});
|
||||
|
||||
it('ignores an empty asset order rather than storing one', () => {
|
||||
const result = deriveGallery({
|
||||
albums: [{ [A]: { sort: 'manual', assetOrder: [] } }],
|
||||
|
||||
Reference in New Issue
Block a user