Files
immich-folio/components/SubpageNav.tsx
Ralksta 84c7eeef40 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>
2026-08-14 17:56:22 +02:00

54 lines
1.5 KiB
TypeScript

/**
* SubpageNav — server component that renders navigation links
* for all subpages and standalone albums in the header.
*/
import Link from 'next/link';
import { immich } from '@/lib/immich';
import { getConfig } from '@/lib/config';
import { listJournalEntries } from '@/lib/admin/journal-service';
export async function SubpageNav() {
const [subpages, standaloneAlbums, journalEntries] = await Promise.all([
immich.getSubpages(),
immich.getStandaloneAlbums(),
listJournalEntries().catch(() => []),
]);
// EXPERIMENTAL: external nav links from settings.yaml, appended after the
// internal entries. Sanitised to http(s) in getConfig().
const navLinks = getConfig().navLinks;
const hasPublicJournal = journalEntries.some((e) => !e.frontmatter.draft);
return (
<>
{subpages.map((sp) => (
<Link key={sp.slug} href={`/${sp.slug}`} className="header__nav-link">
{sp.name}
</Link>
))}
{hasPublicJournal && (
<Link href="/journal" className="header__nav-link">
Journal
</Link>
)}
{standaloneAlbums.map((album) => (
<Link key={album.id} href={`/${album.slug}`} className="header__nav-link">
{album.albumName}
</Link>
))}
{navLinks.map((link) => (
<a
key={link.url}
href={link.url}
className="header__nav-link header__nav-link--external"
target="_blank"
rel="noopener noreferrer"
>
{link.label}
</a>
))}
</>
);
}