feat: visual polish & UX — fade-in, theme toggle, scroll-to-top, footer, cursor, badge
- Add FadeIn component (IntersectionObserver scroll-reveal + load animation) - Add dark/light theme toggle (useSyncExternalStore + localStorage) - Add scroll-to-top button (appears after 300px scroll) - Add configurable footer with social links (gallery.yaml) - Add crosshair cursor on photo grid items - Add 'X photos' count badge on subpage cover images - Add light theme color palette in tokens.css
This commit is contained in:
ralksta
@@ -8,125 +8,122 @@
|
||||
import { useState, useCallback, useEffect } from 'react';
|
||||
import Image from 'next/image';
|
||||
import { Lightbox } from '@/components/Lightbox';
|
||||
import { FadeIn } from '@/components/FadeIn';
|
||||
|
||||
export interface PhotoItem {
|
||||
id: string;
|
||||
thumbUrl: string;
|
||||
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;
|
||||
id: string;
|
||||
thumbUrl: string;
|
||||
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;
|
||||
assets: PhotoItem[];
|
||||
albumId: string;
|
||||
layout?: 'masonry' | 'uniform';
|
||||
gridStyle?: React.CSSProperties;
|
||||
}
|
||||
|
||||
export function PhotoGrid({ assets, layout = 'masonry', gridStyle }: PhotoGridProps) {
|
||||
const [lightboxIndex, setLightboxIndex] = useState<number | null>(null);
|
||||
const [lightboxIndex, setLightboxIndex] = useState<number | null>(null);
|
||||
|
||||
const openLightbox = useCallback((index: number) => {
|
||||
setLightboxIndex(index);
|
||||
}, []);
|
||||
const openLightbox = useCallback((index: number) => {
|
||||
setLightboxIndex(index);
|
||||
}, []);
|
||||
|
||||
const closeLightbox = useCallback(() => {
|
||||
setLightboxIndex(null);
|
||||
}, []);
|
||||
const closeLightbox = useCallback(() => {
|
||||
setLightboxIndex(null);
|
||||
}, []);
|
||||
|
||||
const goNext = useCallback(() => {
|
||||
setLightboxIndex((prev) =>
|
||||
prev !== null ? (prev + 1) % assets.length : null,
|
||||
);
|
||||
}, [assets.length]);
|
||||
const goNext = useCallback(() => {
|
||||
setLightboxIndex((prev) => (prev !== null ? (prev + 1) % assets.length : null));
|
||||
}, [assets.length]);
|
||||
|
||||
const goPrev = useCallback(() => {
|
||||
setLightboxIndex((prev) =>
|
||||
prev !== null ? (prev - 1 + assets.length) % assets.length : null,
|
||||
);
|
||||
}, [assets.length]);
|
||||
const goPrev = useCallback(() => {
|
||||
setLightboxIndex((prev) => (prev !== null ? (prev - 1 + assets.length) % assets.length : null));
|
||||
}, [assets.length]);
|
||||
|
||||
// Keyboard navigation
|
||||
useEffect(() => {
|
||||
if (lightboxIndex === null) return;
|
||||
// Keyboard navigation
|
||||
useEffect(() => {
|
||||
if (lightboxIndex === null) return;
|
||||
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
switch (e.key) {
|
||||
case 'Escape':
|
||||
closeLightbox();
|
||||
break;
|
||||
case 'ArrowRight':
|
||||
goNext();
|
||||
break;
|
||||
case 'ArrowLeft':
|
||||
goPrev();
|
||||
break;
|
||||
}
|
||||
};
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
switch (e.key) {
|
||||
case 'Escape':
|
||||
closeLightbox();
|
||||
break;
|
||||
case 'ArrowRight':
|
||||
goNext();
|
||||
break;
|
||||
case 'ArrowLeft':
|
||||
goPrev();
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('keydown', handleKeyDown);
|
||||
// Prevent body scroll when lightbox is open
|
||||
document.body.style.overflow = 'hidden';
|
||||
document.addEventListener('keydown', handleKeyDown);
|
||||
// Prevent body scroll when lightbox is open
|
||||
document.body.style.overflow = 'hidden';
|
||||
|
||||
return () => {
|
||||
document.removeEventListener('keydown', handleKeyDown);
|
||||
document.body.style.overflow = '';
|
||||
};
|
||||
}, [lightboxIndex, closeLightbox, goNext, goPrev]);
|
||||
return () => {
|
||||
document.removeEventListener('keydown', handleKeyDown);
|
||||
document.body.style.overflow = '';
|
||||
};
|
||||
}, [lightboxIndex, closeLightbox, goNext, goPrev]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<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}` }
|
||||
: {}),
|
||||
}}
|
||||
>
|
||||
<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>
|
||||
))}
|
||||
return (
|
||||
<>
|
||||
<div className={`photo-grid photo-grid--${layout}`} style={gridStyle}>
|
||||
{assets.map((asset, index) => (
|
||||
<FadeIn key={asset.id} delay={index < 12 ? index * 50 : 0}>
|
||||
<div
|
||||
className="photo-grid__item"
|
||||
onClick={() => openLightbox(index)}
|
||||
style={{
|
||||
...(asset.dominantColor ? { backgroundColor: asset.dominantColor } : {}),
|
||||
...(layout === 'masonry' && asset.aspectRatio
|
||||
? { aspectRatio: `${asset.aspectRatio}` }
|
||||
: {}),
|
||||
}}
|
||||
>
|
||||
<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>
|
||||
</FadeIn>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{lightboxIndex !== null && (
|
||||
<Lightbox
|
||||
assets={assets}
|
||||
currentIndex={lightboxIndex}
|
||||
onClose={closeLightbox}
|
||||
onNext={goNext}
|
||||
onPrev={goPrev}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
{lightboxIndex !== null && (
|
||||
<Lightbox
|
||||
assets={assets}
|
||||
currentIndex={lightboxIndex}
|
||||
onClose={closeLightbox}
|
||||
onNext={goNext}
|
||||
onPrev={goPrev}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -17,7 +17,13 @@ import type { Metadata } from 'next';
|
||||
import { immich } from '@/lib/immich';
|
||||
import { notFound } from 'next/navigation';
|
||||
import { PhotoGrid } from './PhotoGrid';
|
||||
import { imageUrl, exifUrl, assetPlaceholder, assetExifSummary, assetAspectRatio } 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';
|
||||
@@ -26,303 +32,324 @@ import PasswordGate from '@/components/PasswordGate';
|
||||
export const dynamic = 'force-dynamic';
|
||||
|
||||
interface PathPageProps {
|
||||
params: Promise<{ path: string[] }>;
|
||||
params: Promise<{ path: string[] }>;
|
||||
}
|
||||
|
||||
export async function generateMetadata({ params }: PathPageProps): Promise<Metadata> {
|
||||
const { path } = await params;
|
||||
if (!path || path.length === 0) return {};
|
||||
const { path } = await params;
|
||||
if (!path || path.length === 0) return {};
|
||||
|
||||
const slug = path[0];
|
||||
let title = slug;
|
||||
let subtitle = '';
|
||||
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'}`;
|
||||
}
|
||||
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)}` : ''}`;
|
||||
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] },
|
||||
};
|
||||
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();
|
||||
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;
|
||||
// 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();
|
||||
}
|
||||
if (!path || path.length === 0) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
// ── Two segments: subpage/album ──────────────────────────────
|
||||
if (path.length === 2) {
|
||||
const [subpageSlug, albumSlug] = path;
|
||||
// ── 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();
|
||||
}
|
||||
|
||||
// Look up subpage config for grid overrides and back link
|
||||
// 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 spGrid = subpageData?.subpage.grid;
|
||||
const subpageName = subpageData?.subpage.name ?? subpageSlug;
|
||||
|
||||
const images = album.assets.filter((asset) => asset.type === 'IMAGE');
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="album-header">
|
||||
<Link href={`/${subpageSlug}`} 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 {subpageName}
|
||||
</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(spGrid)}
|
||||
gridStyle={buildGridStyle(spGrid)}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
return <PasswordGate slug={subpageSlug} title={subpageName} />;
|
||||
}
|
||||
}
|
||||
|
||||
// ── Single segment: subpage or standalone album ──────────────
|
||||
const slug = path[0];
|
||||
const album = await immich.getAlbumBySlug(albumSlug, subpageSlug);
|
||||
|
||||
// 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();
|
||||
}
|
||||
|
||||
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, 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>
|
||||
);
|
||||
}
|
||||
|
||||
// Otherwise treat as a standalone album slug
|
||||
const album = await immich.getAlbumBySlug(slug);
|
||||
if (!album) {
|
||||
notFound();
|
||||
notFound();
|
||||
}
|
||||
|
||||
// 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');
|
||||
|
||||
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()}
|
||||
gridStyle={buildGridStyle()}
|
||||
/>
|
||||
</>
|
||||
<>
|
||||
<div className="album-header">
|
||||
<Link href={`/${subpageSlug}`} 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 {subpageName}
|
||||
</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(spGrid)}
|
||||
gridStyle={buildGridStyle(spGrid)}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Single segment: subpage or standalone album ──────────────
|
||||
const slug = path[0];
|
||||
|
||||
// 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();
|
||||
}
|
||||
|
||||
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, 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%' }} />
|
||||
)}
|
||||
<span className="subpage-grid__item-badge">
|
||||
{album.assetCount} {album.assetCount === 1 ? 'photo' : 'photos'}
|
||||
</span>
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
||||
// Otherwise treat as a standalone album slug
|
||||
const album = await immich.getAlbumBySlug(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()}
|
||||
gridStyle={buildGridStyle()}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,122 +1,122 @@
|
||||
/* ── About Page — Bauhaus / Leica Minimalist ──────── */
|
||||
|
||||
.about {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
min-height: calc(100vh - var(--header-height));
|
||||
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);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
|
||||
.about__portrait {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.about__portrait--placeholder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: var(--bg-secondary);
|
||||
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;
|
||||
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;
|
||||
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);
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
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 {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.about__portrait-col {
|
||||
max-height: 50vh;
|
||||
}
|
||||
.about__portrait-col {
|
||||
max-height: 50vh;
|
||||
}
|
||||
|
||||
.about__text-col {
|
||||
padding: 48px 24px 64px;
|
||||
}
|
||||
.about__text-col {
|
||||
padding: 48px 24px 64px;
|
||||
}
|
||||
|
||||
.about__name {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
}
|
||||
.about__name {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -12,77 +12,75 @@ import { immich } from '@/lib/immich';
|
||||
import './about.css';
|
||||
|
||||
interface AboutFrontmatter {
|
||||
portrait?: string;
|
||||
name?: string;
|
||||
location?: string;
|
||||
gear?: string[];
|
||||
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() };
|
||||
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();
|
||||
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;
|
||||
// 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>
|
||||
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>
|
||||
)}
|
||||
{/* ── 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" />
|
||||
<hr className="about__rule" />
|
||||
|
||||
{body && (
|
||||
<div className="about__bio">
|
||||
{body.split('\n').filter(Boolean).map((line, i) => (
|
||||
<p key={i}>{line}</p>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{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>
|
||||
);
|
||||
{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>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -7,40 +7,25 @@ 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;
|
||||
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 },
|
||||
);
|
||||
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 });
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,33 +9,30 @@ import { NextResponse } from 'next/server';
|
||||
import { immich } from '@/lib/immich';
|
||||
import { decodeAssetId } from '@/lib/tokens';
|
||||
|
||||
export async function GET(
|
||||
_request: Request,
|
||||
{ params }: { params: Promise<{ id: string }> },
|
||||
) {
|
||||
const { id: token } = await params;
|
||||
export async function GET(_request: Request, { params }: { params: Promise<{ id: string }> }) {
|
||||
const { id: token } = await params;
|
||||
|
||||
// Decode the opaque token back to an Immich asset ID
|
||||
const assetId = decodeAssetId(token);
|
||||
if (!assetId) {
|
||||
return NextResponse.json({ error: 'Invalid token' }, { status: 400 });
|
||||
}
|
||||
// Decode the opaque token back to an Immich asset ID
|
||||
const assetId = decodeAssetId(token);
|
||||
if (!assetId) {
|
||||
return NextResponse.json({ error: 'Invalid token' }, { status: 400 });
|
||||
}
|
||||
|
||||
const asset = await immich.getAssetInfo(assetId);
|
||||
if (!asset?.exifInfo) {
|
||||
return NextResponse.json({ error: 'No EXIF data' }, { status: 404 });
|
||||
}
|
||||
const asset = await immich.getAssetInfo(assetId);
|
||||
if (!asset?.exifInfo) {
|
||||
return NextResponse.json({ error: 'No EXIF data' }, { status: 404 });
|
||||
}
|
||||
|
||||
const exif = asset.exifInfo;
|
||||
return NextResponse.json({
|
||||
make: exif.make,
|
||||
model: exif.model,
|
||||
lensModel: exif.lensModel,
|
||||
focalLength: exif.focalLength,
|
||||
fNumber: exif.fNumber,
|
||||
exposureTime: exif.exposureTime,
|
||||
iso: exif.iso,
|
||||
city: exif.city,
|
||||
country: exif.country,
|
||||
});
|
||||
const exif = asset.exifInfo;
|
||||
return NextResponse.json({
|
||||
make: exif.make,
|
||||
model: exif.model,
|
||||
lensModel: exif.lensModel,
|
||||
focalLength: exif.focalLength,
|
||||
fNumber: exif.fNumber,
|
||||
exposureTime: exif.exposureTime,
|
||||
iso: exif.iso,
|
||||
city: exif.city,
|
||||
country: exif.country,
|
||||
});
|
||||
}
|
||||
|
||||
@@ -11,16 +11,16 @@ import { immich } from '@/lib/immich';
|
||||
const startTime = Date.now();
|
||||
|
||||
export async function GET() {
|
||||
const immichOk = await immich.ping();
|
||||
const immichOk = await immich.ping();
|
||||
|
||||
const body = {
|
||||
status: immichOk ? 'ok' : 'degraded',
|
||||
immich: immichOk ? 'connected' : 'unreachable',
|
||||
uptime: Math.floor((Date.now() - startTime) / 1000),
|
||||
};
|
||||
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' },
|
||||
});
|
||||
return NextResponse.json(body, {
|
||||
status: immichOk ? 200 : 503,
|
||||
headers: { 'Cache-Control': 'no-store' },
|
||||
});
|
||||
}
|
||||
|
||||
@@ -19,71 +19,67 @@ 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';
|
||||
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);
|
||||
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',
|
||||
},
|
||||
},
|
||||
);
|
||||
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
|
||||
const assetId = decodeAssetId(token);
|
||||
if (!assetId) {
|
||||
return NextResponse.json({ error: 'Invalid token' }, { status: 400 });
|
||||
}
|
||||
|
||||
// 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 { id: token } = await params;
|
||||
const result = await immich.streamAsset(assetId, size);
|
||||
if (!result) {
|
||||
return NextResponse.json({ error: 'Asset not found' }, { status: 404 });
|
||||
}
|
||||
|
||||
// Decode the opaque token back to an Immich asset ID
|
||||
const assetId = decodeAssetId(token);
|
||||
if (!assetId) {
|
||||
return NextResponse.json({ error: 'Invalid token' }, { status: 400 });
|
||||
}
|
||||
const headers: Record<string, string> = {
|
||||
'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),
|
||||
};
|
||||
|
||||
// Determine size: prefer explicit ?size=, then infer from ?w=
|
||||
const sizeParam = request.nextUrl.searchParams.get('size');
|
||||
const widthParam = request.nextUrl.searchParams.get('w');
|
||||
if (result.contentLength) {
|
||||
headers['Content-Length'] = result.contentLength;
|
||||
}
|
||||
|
||||
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) {
|
||||
return NextResponse.json({ error: 'Asset not found' }, { status: 404 });
|
||||
}
|
||||
|
||||
const headers: Record<string, string> = {
|
||||
'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) {
|
||||
headers['Content-Length'] = result.contentLength;
|
||||
}
|
||||
|
||||
return new NextResponse(result.stream, { headers });
|
||||
return new NextResponse(result.stream, { headers });
|
||||
}
|
||||
|
||||
|
||||
@@ -11,83 +11,81 @@ 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') || '';
|
||||
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',
|
||||
}}
|
||||
/>
|
||||
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>
|
||||
{/* 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>
|
||||
)}
|
||||
{/* 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',
|
||||
},
|
||||
},
|
||||
);
|
||||
{/* 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',
|
||||
},
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
566
app/globals.css
566
app/globals.css
@@ -1,69 +1,4 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Playfair+Display:wght@400;500;600&display=swap');
|
||||
|
||||
/* ── Design Tokens ────────────────────────────────── */
|
||||
:root {
|
||||
--bg-primary: #0a0a0a;
|
||||
--bg-secondary: #111111;
|
||||
--bg-card: #161616;
|
||||
--bg-card-hover: #1a1a1a;
|
||||
--bg-overlay: rgba(0, 0, 0, 0.92);
|
||||
|
||||
--text-primary: #f0f0f0;
|
||||
--text-secondary: #999999;
|
||||
--text-muted: #666666;
|
||||
|
||||
--border-subtle: #222222;
|
||||
--border-hover: #333333;
|
||||
|
||||
--accent: #d4af37;
|
||||
--accent-dim: rgba(212, 175, 55, 0.15);
|
||||
|
||||
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
--font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
|
||||
|
||||
--radius-sm: 4px;
|
||||
--radius-md: 8px;
|
||||
--radius-lg: 12px;
|
||||
|
||||
--transition-fast: 150ms ease;
|
||||
--transition-normal: 300ms ease;
|
||||
--transition-slow: 500ms ease;
|
||||
|
||||
--max-width: 1400px;
|
||||
--header-height: 64px;
|
||||
}
|
||||
|
||||
/* ── Reset ────────────────────────────────────────── */
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-sans);
|
||||
background: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
min-height: 100vh;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
}
|
||||
@import url('./tokens.css');
|
||||
|
||||
/* ── Header / Navigation ──────────────────────────── */
|
||||
.header {
|
||||
@@ -77,6 +12,10 @@ img {
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
[data-theme='light'] .header {
|
||||
background: rgba(250, 250, 250, 0.9);
|
||||
}
|
||||
|
||||
.header__nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -180,7 +119,9 @@ img {
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 3px;
|
||||
text-decoration-color: rgba(255, 255, 255, 0.2);
|
||||
transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
|
||||
transition:
|
||||
color var(--transition-fast),
|
||||
text-decoration-color var(--transition-fast);
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
@@ -252,7 +193,9 @@ img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform var(--transition-slow), filter var(--transition-slow);
|
||||
transition:
|
||||
transform var(--transition-slow),
|
||||
filter var(--transition-slow);
|
||||
}
|
||||
|
||||
.subpage-grid__item:hover img {
|
||||
@@ -267,9 +210,7 @@ img {
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
padding: 20px;
|
||||
background: linear-gradient(to top,
|
||||
rgba(0, 0, 0, 0.6) 0%,
|
||||
transparent 50%);
|
||||
background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, transparent 50%);
|
||||
opacity: 0;
|
||||
transition: opacity var(--transition-normal);
|
||||
}
|
||||
@@ -307,7 +248,9 @@ img {
|
||||
cursor: pointer;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border-subtle);
|
||||
transition: border-color var(--transition-normal), transform var(--transition-normal);
|
||||
transition:
|
||||
border-color var(--transition-normal),
|
||||
transform var(--transition-normal);
|
||||
}
|
||||
|
||||
.album-card:hover {
|
||||
@@ -319,7 +262,9 @@ img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform var(--transition-slow), filter var(--transition-slow);
|
||||
transition:
|
||||
transform var(--transition-slow),
|
||||
filter var(--transition-slow);
|
||||
}
|
||||
|
||||
.album-card:hover .album-card__image {
|
||||
@@ -430,7 +375,9 @@ img {
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
transition: filter var(--transition-normal), transform var(--transition-slow);
|
||||
transition:
|
||||
filter var(--transition-normal),
|
||||
transform var(--transition-slow);
|
||||
}
|
||||
|
||||
.photo-grid__item:hover img {
|
||||
@@ -463,218 +410,12 @@ img {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* ── Lightbox ─────────────────────────────────────── */
|
||||
.lightbox-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 1000;
|
||||
background: var(--bg-overlay);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
animation: lightbox-fade-in var(--transition-normal) ease forwards;
|
||||
}
|
||||
|
||||
@keyframes lightbox-fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.lightbox-overlay.closing {
|
||||
animation: lightbox-fade-out var(--transition-fast) ease forwards;
|
||||
}
|
||||
|
||||
@keyframes lightbox-fade-out {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.lightbox__image-container {
|
||||
position: relative;
|
||||
max-width: 95vw;
|
||||
max-height: 90vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: var(--radius-sm);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.lightbox__image {
|
||||
max-width: 95vw;
|
||||
max-height: 90vh;
|
||||
object-fit: contain;
|
||||
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 {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 24px;
|
||||
z-index: 1001;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
padding: 8px;
|
||||
transition: color var(--transition-fast);
|
||||
}
|
||||
|
||||
.lightbox__close:hover {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.lightbox__close svg {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.lightbox__nav {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
z-index: 1001;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
backdrop-filter: blur(8px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 50%;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
color: var(--text-secondary);
|
||||
transition: background var(--transition-fast), color var(--transition-fast);
|
||||
}
|
||||
|
||||
.lightbox__nav:hover {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.lightbox__nav--prev {
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
.lightbox__nav--next {
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
.lightbox__nav svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.lightbox__counter {
|
||||
position: fixed;
|
||||
bottom: 24px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-muted);
|
||||
font-weight: 300;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
|
||||
/* ── EXIF Info Panel ──────────────────────────────── */
|
||||
.lightbox__info-toggle {
|
||||
position: fixed;
|
||||
bottom: 24px;
|
||||
right: 24px;
|
||||
z-index: 1001;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
backdrop-filter: blur(8px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 8px 12px;
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
font-size: 0.8rem;
|
||||
font-family: var(--font-sans);
|
||||
transition: background var(--transition-fast), color var(--transition-fast);
|
||||
}
|
||||
|
||||
.lightbox__info-toggle:hover {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.exif-panel {
|
||||
position: fixed;
|
||||
bottom: 60px;
|
||||
right: 24px;
|
||||
z-index: 1001;
|
||||
background: rgba(20, 20, 20, 0.92);
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 20px;
|
||||
min-width: 240px;
|
||||
animation: exif-slide-up var(--transition-normal) ease forwards;
|
||||
}
|
||||
|
||||
@keyframes exif-slide-up {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.exif-panel__row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
padding: 6px 0;
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
}
|
||||
|
||||
.exif-panel__row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.exif-panel__label {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
.exif-panel__value {
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-primary);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* ── Loading States ───────────────────────────────── */
|
||||
.skeleton {
|
||||
background: linear-gradient(90deg, var(--bg-card) 0%, var(--bg-card-hover) 50%, var(--bg-card) 100%);
|
||||
background: linear-gradient(90deg,
|
||||
var(--bg-card) 0%,
|
||||
var(--bg-card-hover) 50%,
|
||||
var(--bg-card) 100%);
|
||||
background-size: 200% 100%;
|
||||
animation: skeleton-shimmer 1.5s infinite;
|
||||
border-radius: var(--radius-sm);
|
||||
@@ -690,6 +431,155 @@ img {
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Fade-In Animations ────────────────────────────── */
|
||||
.fade-in {
|
||||
opacity: 0;
|
||||
transition: opacity 0.6s ease, transform 0.6s ease;
|
||||
}
|
||||
|
||||
.fade-in--up {
|
||||
transform: translateY(20px);
|
||||
}
|
||||
|
||||
.fade-in--visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.fade-in {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Custom Cursor (Photo Grid) ─────────────────── */
|
||||
.photo-grid__item {
|
||||
cursor: crosshair;
|
||||
}
|
||||
|
||||
/* ── Scroll-to-Top Button ────────────────────────── */
|
||||
.scroll-to-top {
|
||||
position: fixed;
|
||||
bottom: 32px;
|
||||
right: 32px;
|
||||
z-index: 90;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid var(--border-subtle);
|
||||
background: var(--bg-card);
|
||||
color: var(--text-secondary);
|
||||
font-size: 1.1rem;
|
||||
font-weight: 300;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transform: translateY(8px);
|
||||
transition:
|
||||
opacity var(--transition-normal),
|
||||
transform var(--transition-normal),
|
||||
background var(--transition-fast),
|
||||
border-color var(--transition-fast),
|
||||
color var(--transition-fast);
|
||||
}
|
||||
|
||||
.scroll-to-top--visible {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.scroll-to-top:hover {
|
||||
background: var(--bg-card-hover);
|
||||
border-color: var(--border-hover);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* ── Theme Toggle ────────────────────────────────── */
|
||||
.theme-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 8px;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
border-radius: var(--radius-sm);
|
||||
transition: color var(--transition-fast);
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.theme-toggle:hover {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* ── Footer ──────────────────────────────────────── */
|
||||
.footer {
|
||||
border-top: 1px solid var(--border-subtle);
|
||||
padding: 32px 24px;
|
||||
max-width: var(--max-width);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.footer__inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.footer__name {
|
||||
font-family: var(--font-sans);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.footer__links {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.footer__link {
|
||||
color: var(--text-muted);
|
||||
transition: color var(--transition-fast);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.footer__link:hover {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* ── Image Count Badge (Subpage Covers) ─────────── */
|
||||
.subpage-grid__item-badge {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: 12px;
|
||||
z-index: 2;
|
||||
padding: 4px 10px;
|
||||
border-radius: 100px;
|
||||
background: rgba(0, 0, 0, 0.55);
|
||||
backdrop-filter: blur(6px);
|
||||
-webkit-backdrop-filter: blur(6px);
|
||||
font-family: var(--font-sans);
|
||||
font-size: 0.65rem;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.05em;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* ── Error / Empty States ─────────────────────────── */
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
@@ -708,97 +598,6 @@ 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 {
|
||||
@@ -860,21 +659,4 @@ img {
|
||||
.subpage-grid__item-overlay {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.lightbox__nav {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.lightbox__nav--prev {
|
||||
left: 8px;
|
||||
}
|
||||
|
||||
.lightbox__nav--next {
|
||||
right: 8px;
|
||||
}
|
||||
|
||||
.password-gate__card {
|
||||
padding: 36px 24px;
|
||||
}
|
||||
}
|
||||
@@ -7,6 +7,9 @@ import type { Metadata } from 'next';
|
||||
import Link from 'next/link';
|
||||
import './globals.css';
|
||||
import { SubpageNav } from '@/components/SubpageNav';
|
||||
import { ThemeToggle } from '@/components/ThemeToggle';
|
||||
import { ScrollToTop } from '@/components/ScrollToTop';
|
||||
import { Footer } from '@/components/Footer';
|
||||
|
||||
const siteTitle = process.env.SITE_TITLE || 'Gallery';
|
||||
const siteDescription = 'A curated photography portfolio';
|
||||
@@ -28,13 +31,9 @@ export const metadata: Metadata = {
|
||||
},
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<html lang="en" suppressHydrationWarning>
|
||||
<body>
|
||||
<header className="header">
|
||||
<nav className="header__nav">
|
||||
@@ -45,9 +44,12 @@ export default function RootLayout({
|
||||
<Link href="/about" className="header__nav-link">
|
||||
About
|
||||
</Link>
|
||||
<ThemeToggle />
|
||||
</nav>
|
||||
</header>
|
||||
<main className="main">{children}</main>
|
||||
<Footer />
|
||||
<ScrollToTop />
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
|
||||
44
app/page.tsx
44
app/page.tsx
@@ -9,6 +9,7 @@ import { immich } from '@/lib/immich';
|
||||
import { getConfig } from '@/lib/config';
|
||||
import { imageUrl, assetPlaceholder } from '@/lib/urls';
|
||||
import { HeroCarousel } from '@/components/HeroCarousel';
|
||||
import { FadeIn } from '@/components/FadeIn';
|
||||
|
||||
// Render at request time — requires live Immich connection
|
||||
export const dynamic = 'force-dynamic';
|
||||
@@ -37,31 +38,29 @@ export default async function HomePage() {
|
||||
{/* ── Left Panel ──────────────────────────────── */}
|
||||
<div className="hero__left">
|
||||
<div className="hero__content">
|
||||
<h1 className="hero__title">{config.siteTitle}</h1>
|
||||
<FadeIn delay={0}>
|
||||
<h1 className="hero__title">{config.siteTitle}</h1>
|
||||
</FadeIn>
|
||||
{config.siteSubtitle && (
|
||||
<p className="hero__subtitle">{config.siteSubtitle}</p>
|
||||
<FadeIn delay={100}>
|
||||
<p className="hero__subtitle">{config.siteSubtitle}</p>
|
||||
</FadeIn>
|
||||
)}
|
||||
|
||||
<nav className="hero__nav">
|
||||
{subpages.map((sp) => (
|
||||
<Link
|
||||
key={sp.slug}
|
||||
href={`/${sp.slug}`}
|
||||
className="hero__nav-link"
|
||||
>
|
||||
{sp.name}
|
||||
</Link>
|
||||
))}
|
||||
{albums.map((album) => (
|
||||
<Link
|
||||
key={album.id}
|
||||
href={`/${album.slug}`}
|
||||
className="hero__nav-link"
|
||||
>
|
||||
{album.albumName}
|
||||
</Link>
|
||||
))}
|
||||
</nav>
|
||||
<FadeIn delay={200}>
|
||||
<nav className="hero__nav">
|
||||
{subpages.map((sp) => (
|
||||
<Link key={sp.slug} href={`/${sp.slug}`} className="hero__nav-link">
|
||||
{sp.name}
|
||||
</Link>
|
||||
))}
|
||||
{albums.map((album) => (
|
||||
<Link key={album.id} href={`/${album.slug}`} className="hero__nav-link">
|
||||
{album.albumName}
|
||||
</Link>
|
||||
))}
|
||||
</nav>
|
||||
</FadeIn>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -72,4 +71,3 @@ export default async function HomePage() {
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
85
app/tokens.css
Normal file
85
app/tokens.css
Normal file
@@ -0,0 +1,85 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Playfair+Display:wght@400;500;600&display=swap');
|
||||
|
||||
/* ── Design Tokens ────────────────────────────────── */
|
||||
:root {
|
||||
--bg-primary: #0a0a0a;
|
||||
--bg-secondary: #111111;
|
||||
--bg-card: #161616;
|
||||
--bg-card-hover: #1a1a1a;
|
||||
--bg-overlay: rgba(0, 0, 0, 0.92);
|
||||
|
||||
--text-primary: #f0f0f0;
|
||||
--text-secondary: #999999;
|
||||
--text-muted: #666666;
|
||||
|
||||
--border-subtle: #222222;
|
||||
--border-hover: #333333;
|
||||
|
||||
--accent: #d4af37;
|
||||
--accent-dim: rgba(212, 175, 55, 0.15);
|
||||
|
||||
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
--font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
|
||||
|
||||
--radius-sm: 4px;
|
||||
--radius-md: 8px;
|
||||
--radius-lg: 12px;
|
||||
|
||||
--transition-fast: 150ms ease;
|
||||
--transition-normal: 300ms ease;
|
||||
--transition-slow: 500ms ease;
|
||||
|
||||
--max-width: 1400px;
|
||||
--header-height: 64px;
|
||||
}
|
||||
|
||||
/* ── Light Theme ──────────────────────────────────── */
|
||||
[data-theme='light'] {
|
||||
--bg-primary: #fafafa;
|
||||
--bg-secondary: #f0f0f0;
|
||||
--bg-card: #ffffff;
|
||||
--bg-card-hover: #f5f5f5;
|
||||
--bg-overlay: rgba(255, 255, 255, 0.92);
|
||||
|
||||
--text-primary: #1a1a1a;
|
||||
--text-secondary: #666666;
|
||||
--text-muted: #999999;
|
||||
|
||||
--border-subtle: #e0e0e0;
|
||||
--border-hover: #cccccc;
|
||||
|
||||
--accent: #b8960e;
|
||||
--accent-dim: rgba(184, 150, 14, 0.12);
|
||||
}
|
||||
|
||||
/* ── Reset ────────────────────────────────────────── */
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-sans);
|
||||
background: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
min-height: 100vh;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
}
|
||||
Reference in New Issue
Block a user