Koko210/immich-folio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: photography features & image optimizations

Browse Source 
- Hero carousel: gallery.yaml hero accepts single UUID or array, crossfade component
- Full-bleed single albums: subpages with 1 album skip grid, render photos directly
- EXIF on hover: camera/lens/focal length overlay on grid items (toggle via exifOnHover)
- Customizable grid: columns/gap/aspectRatio/layout (masonry|uniform) via gallery.yaml
- Per-subpage grid overrides: each subpage can override global grid config
- True masonry: per-image aspect ratios from EXIF dimensions
- next/image migration: homepage hero, album covers, grid thumbnails, about portrait
- ThumbHash blur placeholders and dominant color backgrounds
- Custom next/image loader via image proxy with width/quality params
- Lightbox fade-in transition with dominant color background
- Password-protected subpages, health check, rate limiting, OG images
This commit is contained in:
ralksta
2026-02-14 10:30:27 +01:00
parent 3c69860a64
commit b7217c4a76
31 changed files with 1998 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
app/[...path]/PhotoGrid.tsx
View File

@@ -6,6 +6,7 @@
'use client';
import { useState, useCallback, useEffect } from 'react';
import Image from 'next/image';
import { Lightbox } from '@/components/Lightbox';
export interface PhotoItem {
@@ -14,14 +15,24 @@ export interface PhotoItem {
previewUrl: string;
originalUrl: string;
exifUrl: string;
blurDataURL?: string;
dominantColor?: string;
/** Compact EXIF summary for hover overlay */
camera?: string;
lens?: string;
focalLength?: string;
/** Natural image aspect ratio (width/height) for masonry layout */
aspectRatio?: number;
}
interface PhotoGridProps {
assets: PhotoItem[];
albumId: string;
layout?: 'masonry' | 'uniform';
gridStyle?: React.CSSProperties;
}
export function PhotoGrid({ assets }: PhotoGridProps) {
export function PhotoGrid({ assets, layout = 'masonry', gridStyle }: PhotoGridProps) {
const [lightboxIndex, setLightboxIndex] = useState<number | null>(null);
const openLightbox = useCallback((index: number) => {
@@ -74,18 +85,34 @@ export function PhotoGrid({ assets }: PhotoGridProps) {
return (
<>
<div className="photo-grid">
<div className={`photo-grid photo-grid--${layout}`} style={gridStyle}>
{assets.map((asset, index) => (
<div
key={asset.id}
className="photo-grid__item"
onClick={() => openLightbox(index)}
style={{
...(asset.dominantColor ? { backgroundColor: asset.dominantColor } : {}),
...(layout === 'masonry' && asset.aspectRatio
? { aspectRatio: `${asset.aspectRatio}` }
: {}),
}}
>
<img
<Image
src={asset.thumbUrl}
alt=""
fill
sizes="(max-width: 600px) 50vw, (max-width: 1000px) 33vw, 25vw"
loading={index < 6 ? 'eager' : 'lazy'}
{...(asset.blurDataURL
? { placeholder: 'blur' as const, blurDataURL: asset.blurDataURL }
: {})}
/>
{(asset.camera || asset.lens) && (
<div className="photo-grid__item-exif">
{[asset.camera, asset.lens, asset.focalLength].filter(Boolean).join(' · ')}
</div>
)}
</div>
))}
</div>
@@ -102,3 +129,4 @@ export function PhotoGrid({ assets }: PhotoGridProps) {
</>
);
}

256
app/[...path]/page.tsx
View File

@@ -11,10 +11,16 @@
*/
import Link from 'next/link';
import Image from 'next/image';
import { cookies } from 'next/headers';
import type { Metadata } from 'next';
import { immich } from '@/lib/immich';
import { notFound } from 'next/navigation';
import { PhotoGrid } from './PhotoGrid';
import { imageUrl, exifUrl } from '@/lib/urls';
import { imageUrl, exifUrl, assetPlaceholder, assetExifSummary, assetAspectRatio } from '@/lib/urls';
import { getConfig, type GridConfig } from '@/lib/config';
import { isProtected, isAuthenticated } from '@/lib/auth';
import PasswordGate from '@/components/PasswordGate';
// Render at request time — requires live Immich connection
export const dynamic = 'force-dynamic';
@@ -23,8 +29,69 @@ interface PathPageProps {
params: Promise<{ path: string[] }>;
}
export async function generateMetadata({ params }: PathPageProps): Promise<Metadata> {
const { path } = await params;
if (!path || path.length === 0) return {};
const slug = path[0];
let title = slug;
let subtitle = '';
if (path.length === 2) {
const album = await immich.getAlbumBySlug(path[1], slug);
if (album) {
title = album.albumName;
const count = album.assets.filter((a) => a.type === 'IMAGE').length;
subtitle = `${count} photo${count === 1 ? '' : 's'}`;
}
} else if (immich.isSubpageSlug(slug)) {
const result = await immich.getSubpageAlbums(slug);
if (result) {
// Single album → use album name; multiple → use subpage name
if (result.albums.length === 1) {
const album = await immich.getAlbumBySlug(result.albums[0].slug, slug);
if (album) {
title = album.albumName;
const count = album.assets.filter((a) => a.type === 'IMAGE').length;
subtitle = `${count} photo${count === 1 ? '' : 's'}`;
}
} else {
title = result.subpage.name;
}
}
} else {
const album = await immich.getAlbumBySlug(slug);
if (album) {
title = album.albumName;
const count = album.assets.filter((a) => a.type === 'IMAGE').length;
subtitle = `${count} photo${count === 1 ? '' : 's'}`;
}
}
const ogUrl = `/api/og?title=${encodeURIComponent(title)}${subtitle ? `&subtitle=${encodeURIComponent(subtitle)}` : ''}`;
return {
title,
openGraph: { title, images: [ogUrl] },
twitter: { card: 'summary_large_image', title, images: [ogUrl] },
};
}
export default async function PathPage({ params }: PathPageProps) {
const { path } = await params;
const config = getConfig();
// Build grid CSS custom properties, optionally merging subpage overrides
const buildGridStyle = (overrides?: Partial<GridConfig>): React.CSSProperties => {
const g = { ...config.grid, ...overrides };
return {
'--grid-columns': g.columns,
'--grid-gap': `${g.gap}px`,
'--grid-aspect-ratio': g.aspectRatio,
} as React.CSSProperties;
};
const resolveLayout = (overrides?: Partial<GridConfig>) =>
overrides?.layout ?? config.grid.layout;
if (!path || path.length === 0) {
notFound();
@@ -33,14 +100,27 @@ export default async function PathPage({ params }: PathPageProps) {
// ── Two segments: subpage/album ──────────────────────────────
if (path.length === 2) {
const [subpageSlug, albumSlug] = path;
// Password gate for protected subpages
if (isProtected(subpageSlug)) {
const cookieStore = await cookies();
const getCookie = (name: string) => cookieStore.get(name)?.value;
if (!isAuthenticated(subpageSlug, getCookie)) {
const subpageData = await immich.getSubpageAlbums(subpageSlug);
const subpageName = subpageData?.subpage.name ?? subpageSlug;
return <PasswordGate slug={subpageSlug} title={subpageName} />;
}
}
const album = await immich.getAlbumBySlug(albumSlug, subpageSlug);
if (!album) {
notFound();
}
// Get subpage name for the back link
// Look up subpage config for grid overrides and back link
const subpageData = await immich.getSubpageAlbums(subpageSlug);
const spGrid = subpageData?.subpage.grid;
const subpageName = subpageData?.subpage.name ?? subpageSlug;
const images = album.assets.filter((asset) => asset.type === 'IMAGE');
@@ -61,14 +141,23 @@ export default async function PathPage({ params }: PathPageProps) {
</p>
</div>
<PhotoGrid
assets={images.map((a) => ({
id: a.id,
thumbUrl: imageUrl(a.id, 'preview'),
previewUrl: imageUrl(a.id, 'preview'),
originalUrl: imageUrl(a.id, 'original'),
exifUrl: exifUrl(a.id),
}))}
assets={images.map((a) => {
const ph = assetPlaceholder(a);
const exif = config.exifOnHover ? assetExifSummary(a) : undefined;
return {
id: a.id,
thumbUrl: imageUrl(a.id, 'preview'),
previewUrl: imageUrl(a.id, 'preview'),
originalUrl: imageUrl(a.id, 'original'),
exifUrl: exifUrl(a.id),
...(ph ? { blurDataURL: ph.blurDataURL, dominantColor: ph.dominantColor } : {}),
...(exif ?? {}),
aspectRatio: assetAspectRatio(a),
};
})}
albumId={album.id}
layout={resolveLayout(spGrid)}
gridStyle={buildGridStyle(spGrid)}
/>
</>
);
@@ -79,6 +168,17 @@ export default async function PathPage({ params }: PathPageProps) {
// Check if it's a subpage
if (immich.isSubpageSlug(slug)) {
// Password gate for protected subpages
if (isProtected(slug)) {
const cookieStore = await cookies();
const getCookie = (name: string) => cookieStore.get(name)?.value;
if (!isAuthenticated(slug, getCookie)) {
const subpageData = await immich.getSubpageAlbums(slug);
const subpageName = subpageData?.subpage.name ?? slug;
return <PasswordGate slug={slug} title={subpageName} />;
}
}
const result = await immich.getSubpageAlbums(slug);
if (!result || result.albums.length === 0) {
notFound();
@@ -86,34 +186,97 @@ export default async function PathPage({ params }: PathPageProps) {
const { albums } = result;
// ── Single album → full-bleed (skip album grid) ──────────
if (albums.length === 1) {
const album = await immich.getAlbumBySlug(albums[0].slug, slug);
if (!album) notFound();
const images = album.assets.filter((asset) => asset.type === 'IMAGE');
return (
<>
<div className="album-header">
<Link href="/" className="album-header__back">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<polyline points="15 18 9 12 15 6" />
</svg>
Back to Gallery
</Link>
<h1 className="album-header__title">{album.albumName}</h1>
<p className="album-header__meta">
{images.length} {images.length === 1 ? 'photo' : 'photos'}
{album.description && ` · ${album.description}`}
</p>
</div>
<PhotoGrid
assets={images.map((a) => {
const ph = assetPlaceholder(a);
const exif = config.exifOnHover ? assetExifSummary(a) : undefined;
return {
id: a.id,
thumbUrl: imageUrl(a.id, 'preview'),
previewUrl: imageUrl(a.id, 'preview'),
originalUrl: imageUrl(a.id, 'original'),
exifUrl: exifUrl(a.id),
...(ph ? { blurDataURL: ph.blurDataURL, dominantColor: ph.dominantColor } : {}),
...(exif ?? {}),
aspectRatio: assetAspectRatio(a),
};
})}
albumId={album.id}
layout={resolveLayout(result.subpage.grid)}
gridStyle={buildGridStyle(result.subpage.grid)}
/>
</>
);
}
// ── Multiple albums → show album grid ─────────────────────
// Batch-fetch ThumbHash for album cover placeholders
const coverPlaceholders = await Promise.all(
albums.map(async (album) => {
if (!album.albumThumbnailAssetId) return null;
const asset = await immich.getAssetInfo(album.albumThumbnailAssetId);
return asset ? assetPlaceholder(asset) : null;
}),
);
return (
<div className="subpage-grid">
{albums.map((album) => (
<Link
key={album.id}
href={`/${slug}/${album.slug}`}
className="subpage-grid__item"
>
{album.albumThumbnailAssetId ? (
<img
src={imageUrl(album.albumThumbnailAssetId, 'preview')}
alt={album.albumName}
loading="lazy"
/>
) : (
<div
className="skeleton"
style={{ width: '100%', height: '100%' }}
/>
)}
<div className="subpage-grid__item-overlay">
<span className="subpage-grid__item-title">{album.albumName}</span>
<span className="subpage-grid__item-count">
{album.assetCount} {album.assetCount === 1 ? 'photo' : 'photos'}
</span>
</div>
</Link>
))}
{albums.map((album, i) => {
const ph = coverPlaceholders[i];
return (
<Link
key={album.id}
href={`/${slug}/${album.slug}`}
className="subpage-grid__item"
style={ph?.dominantColor ? { backgroundColor: ph.dominantColor } : undefined}
>
{album.albumThumbnailAssetId ? (
<Image
src={imageUrl(album.albumThumbnailAssetId, 'preview')}
alt={album.albumName}
fill
sizes="(max-width: 600px) 100vw, (max-width: 1000px) 50vw, 33vw"
loading="lazy"
{...(ph ? { placeholder: 'blur' as const, blurDataURL: ph.blurDataURL } : {})}
/>
) : (
<div
className="skeleton"
style={{ width: '100%', height: '100%' }}
/>
)}
<div className="subpage-grid__item-overlay">
<span className="subpage-grid__item-title">{album.albumName}</span>
<span className="subpage-grid__item-count">
{album.assetCount} {album.assetCount === 1 ? 'photo' : 'photos'}
</span>
</div>
</Link>
);
})}
</div>
);
}
@@ -142,14 +305,23 @@ export default async function PathPage({ params }: PathPageProps) {
</p>
</div>
<PhotoGrid
assets={images.map((a) => ({
id: a.id,
thumbUrl: imageUrl(a.id, 'preview'),
previewUrl: imageUrl(a.id, 'preview'),
originalUrl: imageUrl(a.id, 'original'),
exifUrl: exifUrl(a.id),
}))}
assets={images.map((a) => {
const ph = assetPlaceholder(a);
const exif = config.exifOnHover ? assetExifSummary(a) : undefined;
return {
id: a.id,
thumbUrl: imageUrl(a.id, 'preview'),
previewUrl: imageUrl(a.id, 'preview'),
originalUrl: imageUrl(a.id, 'original'),
exifUrl: exifUrl(a.id),
...(ph ? { blurDataURL: ph.blurDataURL, dominantColor: ph.dominantColor } : {}),
...(exif ?? {}),
aspectRatio: assetAspectRatio(a),
};
})}
albumId={album.id}
layout={resolveLayout()}
gridStyle={buildGridStyle()}
/>
</>
);

122
app/about/about.css Normal file
View File

@@ -0,0 +1,122 @@
/* ── About Page — Bauhaus / Leica Minimalist ──────── */
.about {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: calc(100vh - var(--header-height));
}
/* ── Portrait Column ─────────────────────────────── */
.about__portrait-col {
position: relative;
overflow: hidden;
background: var(--bg-secondary);
}
.about__portrait {
width: 100%;
height: 100%;
object-fit: cover;
}
.about__portrait--placeholder {
width: 100%;
height: 100%;
background: var(--bg-secondary);
}
/* ── Text Column ─────────────────────────────────── */
.about__text-col {
display: flex;
flex-direction: column;
justify-content: center;
padding: 80px 64px;
max-width: 560px;
}
.about__name {
font-family: var(--font-sans);
font-size: 2.4rem;
font-weight: 300;
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 8px;
}
.about__location {
font-family: var(--font-sans);
font-size: 0.75rem;
font-weight: 400;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--text-muted);
}
/* ── Thin Rule Dividers ──────────────────────────── */
.about__rule {
border: none;
border-top: 1px solid var(--border-subtle);
margin: 40px 0;
width: 60px;
}
/* ── Bio ─────────────────────────────────────────── */
.about__bio p {
font-family: var(--font-sans);
font-size: 0.95rem;
font-weight: 300;
line-height: 1.8;
color: var(--text-secondary);
margin-bottom: 8px;
}
.about__bio p:last-child {
margin-bottom: 0;
}
/* ── Gear Section ────────────────────────────────── */
.about__section-label {
font-family: var(--font-sans);
font-size: 0.65rem;
font-weight: 500;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 20px;
}
.about__gear {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.about__gear li {
font-family: var(--font-sans);
font-size: 0.85rem;
font-weight: 300;
color: var(--text-secondary);
letter-spacing: 0.04em;
}
/* ── Responsive ──────────────────────────────────── */
@media (max-width: 768px) {
.about {
grid-template-columns: 1fr;
}
.about__portrait-col {
max-height: 50vh;
}
.about__text-col {
padding: 48px 24px 64px;
}
.about__name {
font-size: 1.8rem;
}
}

88
app/about/page.tsx Normal file
View File

@@ -0,0 +1,88 @@
/**
* About page — Bauhaus / Leica minimalist layout.
* Reads content from content/about.md (frontmatter + markdown body).
*/
import { readFileSync } from 'fs';
import { join } from 'path';
import matter from 'gray-matter';
import Image from 'next/image';
import { imageUrl, assetPlaceholder } from '@/lib/urls';
import { immich } from '@/lib/immich';
import './about.css';
interface AboutFrontmatter {
portrait?: string;
name?: string;
location?: string;
gear?: string[];
}
function getAboutContent() {
const raw = readFileSync(join(process.cwd(), 'content', 'about.md'), 'utf-8');
const { data, content } = matter(raw);
return { meta: data as AboutFrontmatter, body: content.trim() };
}
export default async function AboutPage() {
const { meta, body } = getAboutContent();
// Fetch ThumbHash for portrait placeholder
const portraitAsset = meta.portrait
? await immich.getAssetInfo(meta.portrait)
: null;
const portraitPlaceholder = portraitAsset ? assetPlaceholder(portraitAsset) : null;
return (
<div className="about">
{/* ── Portrait ─────────────────────────────────── */}
<div className="about__portrait-col">
{meta.portrait ? (
<Image
src={imageUrl(meta.portrait, 'preview')}
alt={meta.name || 'Portrait'}
className="about__portrait"
fill
sizes="(max-width: 768px) 100vw, 40vw"
{...(portraitPlaceholder
? { placeholder: 'blur' as const, blurDataURL: portraitPlaceholder.blurDataURL }
: {})}
/>
) : (
<div className="about__portrait about__portrait--placeholder" />
)}
</div>
{/* ── Text ─────────────────────────────────────── */}
<div className="about__text-col">
{meta.name && <h1 className="about__name">{meta.name}</h1>}
{meta.location && (
<p className="about__location">{meta.location}</p>
)}
<hr className="about__rule" />
{body && (
<div className="about__bio">
{body.split('\n').filter(Boolean).map((line, i) => (
<p key={i}>{line}</p>
))}
</div>
)}
{meta.gear && meta.gear.length > 0 && (
<>
<hr className="about__rule" />
<h2 className="about__section-label">Gear</h2>
<ul className="about__gear">
{meta.gear.map((item) => (
<li key={item}>{item}</li>
))}
</ul>
</>
)}
</div>
</div>
);
}

46
app/api/auth/route.ts Normal file
View File

@@ -0,0 +1,46 @@
/**
* Auth API — validates album passwords and sets auth cookies.
* POST /api/auth { slug, password }
*/
import { NextRequest, NextResponse } from 'next/server';
import { authenticate, isProtected } from '@/lib/auth';
export async function POST(request: NextRequest) {
try {
const body = await request.json();
const { slug, password } = body;
if (!slug || !password) {
return NextResponse.json(
{ error: 'Missing slug or password' },
{ status: 400 },
);
}
if (!isProtected(slug)) {
return NextResponse.json(
{ error: 'Album is not password-protected' },
{ status: 400 },
);
}
const setCookie = authenticate(slug, password);
if (!setCookie) {
return NextResponse.json(
{ error: 'Invalid password' },
{ status: 401 },
);
}
return NextResponse.json(
{ success: true },
{ headers: { 'Set-Cookie': setCookie } },
);
} catch {
return NextResponse.json(
{ error: 'Invalid request body' },
{ status: 400 },
);
}
}

26
app/api/health/route.ts Normal file
View File

@@ -0,0 +1,26 @@
/**
* Health check endpoint — reports app and Immich connectivity status.
* Used by Docker HEALTHCHECK, monitoring tools, and load balancers.
*
* GET /api/health → { status, immich, uptime }
*/
import { NextResponse } from 'next/server';
import { immich } from '@/lib/immich';
const startTime = Date.now();
export async function GET() {
const immichOk = await immich.ping();
const body = {
status: immichOk ? 'ok' : 'degraded',
immich: immichOk ? 'connected' : 'unreachable',
uptime: Math.floor((Date.now() - startTime) / 1000),
};
return NextResponse.json(body, {
status: immichOk ? 200 : 503,
headers: { 'Cache-Control': 'no-store' },
});
}

50
app/api/image/[id]/route.ts
View File

@@ -3,19 +3,49 @@
* without exposing the Immich server or API key.
*
* Usage: GET /api/image/:token?size=thumbnail|preview|original
* GET /api/image/:token?w=640&q=75 (for next/image loader)
* The :token is an encoded asset ID (not a raw UUID).
*/
import { NextRequest, NextResponse } from 'next/server';
import { immich, ImageSize } from '@/lib/immich';
import { decodeAssetId } from '@/lib/tokens';
import { getConfig } from '@/lib/config';
import { checkRateLimit } from '@/lib/rate-limit';
const VALID_SIZES: ImageSize[] = ['thumbnail', 'preview', 'original'];
/**
* Map a requested pixel width to the best Immich size tier.
*/
function widthToSize(w: number): ImageSize {
if (w <= 250) return 'thumbnail';
if (w <= 1440) return 'preview';
return 'original';
}
export async function GET(
request: NextRequest,
{ params }: { params: Promise<{ id: string }> },
) {
// ── Rate limiting ──────────────────────────────────
const ip = request.headers.get('x-forwarded-for')?.split(',')[0].trim() || 'unknown';
const { success, remaining, resetAt } = checkRateLimit(ip, getConfig().rateLimitRpm);
if (!success) {
const retryAfter = Math.ceil((resetAt - Date.now()) / 1000);
return NextResponse.json(
{ error: 'Too many requests' },
{
status: 429,
headers: {
'Retry-After': String(retryAfter),
'X-RateLimit-Remaining': '0',
},
},
);
}
const { id: token } = await params;
// Decode the opaque token back to an Immich asset ID
@@ -24,11 +54,19 @@ export async function GET(
return NextResponse.json({ error: 'Invalid token' }, { status: 400 });
}
// Parse and validate size parameter
const sizeParam = request.nextUrl.searchParams.get('size') || 'preview';
const size: ImageSize = VALID_SIZES.includes(sizeParam as ImageSize)
? (sizeParam as ImageSize)
: 'preview';
// Determine size: prefer explicit ?size=, then infer from ?w=
const sizeParam = request.nextUrl.searchParams.get('size');
const widthParam = request.nextUrl.searchParams.get('w');
let size: ImageSize = 'preview';
if (sizeParam && VALID_SIZES.includes(sizeParam as ImageSize)) {
size = sizeParam as ImageSize;
} else if (widthParam) {
const w = parseInt(widthParam, 10);
if (!isNaN(w) && w > 0) {
size = widthToSize(w);
}
}
const result = await immich.streamAsset(assetId, size);
if (!result) {
@@ -39,6 +77,7 @@ export async function GET(
'Content-Type': result.contentType,
// Images are immutable once uploaded to Immich — cache aggressively
'Cache-Control': 'public, max-age=31536000, immutable',
'X-RateLimit-Remaining': String(remaining),
};
if (result.contentLength) {
@@ -47,3 +86,4 @@ export async function GET(
return new NextResponse(result.stream, { headers });
}

93
app/api/og/route.tsx Normal file
View File

@@ -0,0 +1,93 @@
/**
* Dynamic OG image generator — renders social share previews.
* Uses next/og (ImageResponse) to create 1200×630 cards.
*
* GET /api/og?title=Album+Name&subtitle=12+photos
*/
import { ImageResponse } from 'next/og';
import { NextRequest } from 'next/server';
export const runtime = 'edge';
export async function GET(request: NextRequest) {
const { searchParams } = request.nextUrl;
const title = searchParams.get('title') || 'Gallery';
const subtitle = searchParams.get('subtitle') || '';
return new ImageResponse(
(
<div
style={{
width: '100%',
height: '100%',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#0a0a0a',
fontFamily: 'system-ui, -apple-system, sans-serif',
padding: '60px',
}}
>
{/* Decorative top line */}
<div
style={{
width: '60px',
height: '2px',
backgroundColor: '#d4af37',
marginBottom: '40px',
}}
/>
{/* Title */}
<div
style={{
fontSize: '64px',
fontWeight: 600,
color: '#f0f0f0',
letterSpacing: '0.02em',
textAlign: 'center',
lineHeight: 1.2,
maxWidth: '900px',
}}
>
{title}
</div>
{/* Subtitle */}
{subtitle && (
<div
style={{
fontSize: '24px',
color: '#999999',
fontWeight: 300,
marginTop: '16px',
letterSpacing: '0.08em',
textTransform: 'lowercase',
}}
>
{subtitle}
</div>
)}
{/* Bottom decorative line */}
<div
style={{
width: '60px',
height: '2px',
backgroundColor: '#d4af37',
marginTop: '40px',
}}
/>
</div>
),
{
width: 1200,
height: 630,
headers: {
'Cache-Control': 'public, max-age=86400, s-maxage=86400',
},
},
);
}

170
app/globals.css
View File

@@ -119,8 +119,9 @@ img {
padding: 48px 24px 96px;
}
/* Homepage hero uses full bleed — override main padding */
.main:has(.hero) {
/* Homepage hero + About page use full bleed — override main padding */
.main:has(.hero),
.main:has(.about) {
max-width: none;
padding: 0;
}
@@ -205,6 +206,17 @@ img {
background: var(--bg-secondary);
}
/* ── Hero Carousel Crossfade ────────────────────── */
.hero__carousel-image {
object-fit: cover;
opacity: 0;
transition: opacity 1.2s ease-in-out;
}
.hero__carousel-image--active {
opacity: 1;
}
/* ── Section Labels ──────────────────────────────── */
.section-label {
font-family: var(--font-sans);
@@ -387,22 +399,36 @@ img {
}
.photo-grid {
column-count: 3;
column-gap: 12px;
column-count: var(--grid-columns, 3);
column-gap: var(--grid-gap, 12px);
}
/* Uniform layout: CSS Grid with fixed aspect ratio */
.photo-grid--uniform {
display: grid;
grid-template-columns: repeat(var(--grid-columns, 3), 1fr);
gap: var(--grid-gap, 12px);
column-count: unset;
}
.photo-grid__item {
break-inside: avoid;
margin-bottom: 12px;
margin-bottom: var(--grid-gap, 12px);
border-radius: var(--radius-sm);
overflow: hidden;
cursor: pointer;
position: relative;
aspect-ratio: var(--grid-aspect-ratio, 1);
}
.photo-grid--uniform .photo-grid__item {
margin-bottom: 0;
}
.photo-grid__item img {
width: 100%;
height: auto;
height: 100%;
object-fit: cover;
display: block;
transition: filter var(--transition-normal), transform var(--transition-slow);
}
@@ -412,6 +438,31 @@ img {
transform: scale(1.02);
}
/* EXIF hover overlay */
.photo-grid__item-exif {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 20px 10px 8px;
background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 100%);
color: rgba(255, 255, 255, 0.85);
font-size: 0.65rem;
font-weight: 400;
letter-spacing: 0.03em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
pointer-events: none;
opacity: 0;
transition: opacity var(--transition-normal);
z-index: 2;
}
.photo-grid__item:hover .photo-grid__item-exif {
opacity: 1;
}
/* ── Lightbox ─────────────────────────────────────── */
.lightbox-overlay {
position: fixed;
@@ -455,6 +506,8 @@ img {
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-sm);
overflow: hidden;
}
.lightbox__image {
@@ -464,6 +517,12 @@ img {
border-radius: var(--radius-sm);
user-select: none;
-webkit-user-drag: none;
opacity: 0;
transition: opacity var(--transition-normal);
}
.lightbox__image--loaded {
opacity: 1;
}
.lightbox__close {
@@ -649,10 +708,101 @@ img {
font-weight: 300;
}
/* ── Password Gate ────────────────────────────────── */
.password-gate {
display: flex;
align-items: center;
justify-content: center;
min-height: calc(100vh - var(--header-height));
padding: 24px;
}
.password-gate__card {
text-align: center;
padding: 48px 40px;
max-width: 400px;
width: 100%;
background: var(--bg-secondary);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
}
.password-gate__title {
font-family: var(--font-serif);
font-size: 1.8rem;
font-weight: 400;
letter-spacing: 0.02em;
margin-bottom: 8px;
}
.password-gate__subtitle {
font-size: 0.85rem;
color: var(--text-secondary);
font-weight: 300;
margin-bottom: 32px;
}
.password-gate__form {
display: flex;
flex-direction: column;
gap: 12px;
}
.password-gate__input {
width: 100%;
padding: 12px 16px;
background: var(--bg-primary);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
color: var(--text-primary);
font-family: var(--font-sans);
font-size: 0.9rem;
outline: none;
transition: border-color var(--transition-fast);
}
.password-gate__input:focus {
border-color: var(--accent);
}
.password-gate__input::placeholder {
color: var(--text-muted);
}
.password-gate__button {
padding: 12px 24px;
background: var(--accent);
color: var(--bg-primary);
border: none;
border-radius: var(--radius-md);
font-family: var(--font-sans);
font-size: 0.85rem;
font-weight: 500;
letter-spacing: 0.05em;
cursor: pointer;
transition: opacity var(--transition-fast);
}
.password-gate__button:hover {
opacity: 0.9;
}
.password-gate__button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.password-gate__error {
margin-top: 12px;
font-size: 0.8rem;
color: #e74c3c;
font-weight: 400;
}
/* ── Responsive ───────────────────────────────────── */
@media (max-width: 1024px) {
.photo-grid {
column-count: 2;
--grid-columns: 2;
}
.album-grid {
@@ -679,7 +829,7 @@ img {
}
.photo-grid {
column-count: 1;
--grid-columns: 1;
}
.album-grid {
@@ -723,4 +873,8 @@ img {
.lightbox__nav--next {
right: 8px;
}
.password-gate__card {
padding: 36px 24px;
}
}

22
app/layout.tsx
View File

@@ -8,9 +8,24 @@ import Link from 'next/link';
import './globals.css';
import { SubpageNav } from '@/components/SubpageNav';
const siteTitle = process.env.SITE_TITLE || 'Gallery';
const siteDescription = 'A curated photography portfolio';
export const metadata: Metadata = {
title: process.env.SITE_TITLE || 'Gallery',
description: 'A curated photography portfolio',
title: siteTitle,
description: siteDescription,
openGraph: {
title: siteTitle,
description: siteDescription,
type: 'website',
images: [`/api/og?title=${encodeURIComponent(siteTitle)}`],
},
twitter: {
card: 'summary_large_image',
title: siteTitle,
description: siteDescription,
images: [`/api/og?title=${encodeURIComponent(siteTitle)}`],
},
};
export default function RootLayout({
@@ -27,6 +42,9 @@ export default function RootLayout({
Home
</Link>
<SubpageNav />
<Link href="/about" className="header__nav-link">
About
</Link>
</nav>
</header>
<main className="main">{children}</main>

30
app/page.tsx
View File

@@ -1,13 +1,14 @@
/**
* Homepage — Split hero layout.
* Left panel: site title, subtitle, navigation links.
* Right panel: hero image from Immich.
* Right panel: hero image carousel from Immich.
*/
import Link from 'next/link';
import { immich } from '@/lib/immich';
import { getConfig } from '@/lib/config';
import { imageUrl } from '@/lib/urls';
import { imageUrl, assetPlaceholder } from '@/lib/urls';
import { HeroCarousel } from '@/components/HeroCarousel';
// Render at request time — requires live Immich connection
export const dynamic = 'force-dynamic';
@@ -19,6 +20,18 @@ export default async function HomePage() {
immich.getStandaloneAlbums(),
]);
// Fetch ThumbHash for all hero images
const heroData = await Promise.all(
config.heroImages.map(async (id) => {
const asset = await immich.getAssetInfo(id);
const ph = asset ? assetPlaceholder(asset) : null;
return {
src: imageUrl(id, 'preview'),
...(ph ? { blurDataURL: ph.blurDataURL } : {}),
};
}),
);
return (
<div className="hero">
{/* ── Left Panel ──────────────────────────────── */}
@@ -52,18 +65,11 @@ export default async function HomePage() {
</div>
</div>
{/* ── Right Panel (Hero Image) ────────────────── */}
{/* ── Right Panel (Hero Carousel) ─────────────── */}
<div className="hero__right">
{config.heroImage ? (
<img
src={imageUrl(config.heroImage, 'preview')}
alt=""
className="hero__image"
/>
) : (
<div className="hero__image-placeholder" />
)}
<HeroCarousel images={heroData} />
</div>
</div>
);
}