🛡️ Sentinel: [HIGH] Fix missing rate limiting on /api/exif/[id]
Co-authored-by: ralksta <16941050+ralksta@users.noreply.github.com>
This commit is contained in:
google-labs-jules[bot]
@@ -6,36 +6,40 @@ import type { GridConfig } from '@/lib/config';
|
||||
import React from 'react';
|
||||
|
||||
interface AlbumDetailViewProps {
|
||||
album: ImmichAlbum;
|
||||
images: PhotoItem[];
|
||||
layout: GridConfig['layout'];
|
||||
gridStyle: React.CSSProperties;
|
||||
backLinkHref: string;
|
||||
backLinkLabel: string;
|
||||
subtitle?: string;
|
||||
album: ImmichAlbum;
|
||||
images: PhotoItem[];
|
||||
layout: GridConfig['layout'];
|
||||
gridStyle: React.CSSProperties;
|
||||
backLinkHref: string;
|
||||
backLinkLabel: string;
|
||||
subtitle?: string;
|
||||
}
|
||||
|
||||
export function AlbumDetailView({
|
||||
album,
|
||||
images,
|
||||
layout,
|
||||
gridStyle,
|
||||
backLinkHref,
|
||||
backLinkLabel,
|
||||
subtitle,
|
||||
album,
|
||||
images,
|
||||
layout,
|
||||
gridStyle,
|
||||
backLinkHref,
|
||||
backLinkLabel,
|
||||
subtitle,
|
||||
}: AlbumDetailViewProps) {
|
||||
return (
|
||||
<>
|
||||
<div className="album-header">
|
||||
<BackLink href={backLinkHref} label={backLinkLabel} />
|
||||
<h1 className="album-header__title">{album.albumName}</h1>
|
||||
{subtitle && <p className="subpage-subtitle" style={{ textAlign: "left", marginLeft: 0 }}>{subtitle}</p>}
|
||||
<p className="album-header__meta">
|
||||
{images.length} {images.length === 1 ? 'photo' : 'photos'}
|
||||
{album.description && ` · ${album.description}`}
|
||||
</p>
|
||||
</div>
|
||||
<PhotoGrid assets={images} layout={layout} gridStyle={gridStyle} />
|
||||
</>
|
||||
);
|
||||
return (
|
||||
<>
|
||||
<div className="album-header">
|
||||
<BackLink href={backLinkHref} label={backLinkLabel} />
|
||||
<h1 className="album-header__title">{album.albumName}</h1>
|
||||
{subtitle && (
|
||||
<p className="subpage-subtitle" style={{ textAlign: 'left', marginLeft: 0 }}>
|
||||
{subtitle}
|
||||
</p>
|
||||
)}
|
||||
<p className="album-header__meta">
|
||||
{images.length} {images.length === 1 ? 'photo' : 'photos'}
|
||||
{album.description && ` · ${album.description}`}
|
||||
</p>
|
||||
</div>
|
||||
<PhotoGrid assets={images} layout={layout} gridStyle={gridStyle} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -4,143 +4,146 @@ import { imageUrl } from '@/lib/urls';
|
||||
import { SubpageSectionConfig } from '@/lib/config';
|
||||
|
||||
interface SubpageAlbum {
|
||||
id: string;
|
||||
slug: string;
|
||||
albumName: string;
|
||||
assetCount: number;
|
||||
albumThumbnailAssetId: string | null;
|
||||
id: string;
|
||||
slug: string;
|
||||
albumName: string;
|
||||
assetCount: number;
|
||||
albumThumbnailAssetId: string | null;
|
||||
}
|
||||
|
||||
interface Placeholder {
|
||||
blurDataURL?: string;
|
||||
dominantColor?: string;
|
||||
blurDataURL?: string;
|
||||
dominantColor?: string;
|
||||
}
|
||||
|
||||
interface SubpageGridViewProps {
|
||||
slug: string;
|
||||
title?: string;
|
||||
subtitle?: string;
|
||||
albums: SubpageAlbum[];
|
||||
coverPlaceholders: (Placeholder | null)[];
|
||||
sections?: SubpageSectionConfig[];
|
||||
slug: string;
|
||||
title?: string;
|
||||
subtitle?: string;
|
||||
albums: SubpageAlbum[];
|
||||
coverPlaceholders: (Placeholder | null)[];
|
||||
sections?: SubpageSectionConfig[];
|
||||
}
|
||||
|
||||
function AlbumGrid({
|
||||
albums,
|
||||
albumMap,
|
||||
placeholderMap,
|
||||
slug,
|
||||
albums,
|
||||
albumMap,
|
||||
placeholderMap,
|
||||
slug,
|
||||
}: {
|
||||
albums: SubpageAlbum[];
|
||||
albumMap: Map<string, SubpageAlbum>;
|
||||
placeholderMap: Map<string, Placeholder | null>;
|
||||
slug: string;
|
||||
albums: SubpageAlbum[];
|
||||
albumMap: Map<string, SubpageAlbum>;
|
||||
placeholderMap: Map<string, Placeholder | null>;
|
||||
slug: string;
|
||||
}) {
|
||||
return (
|
||||
<div className="subpage-grid">
|
||||
{albums.map((album) => {
|
||||
const ph = placeholderMap.get(album.id) ?? null;
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
export function SubpageGridView({ slug, title, subtitle, albums, coverPlaceholders, sections }: SubpageGridViewProps) {
|
||||
// Build lookup maps once
|
||||
const albumMap = new Map(albums.map((a) => [a.id, a]));
|
||||
const placeholderMap = new Map(albums.map((a, i) => [a.id, coverPlaceholders[i] ?? null]));
|
||||
|
||||
const hasSections = sections && sections.length > 0;
|
||||
|
||||
return (
|
||||
<div className="subpage-container">
|
||||
{(title || subtitle) && (
|
||||
<header className="subpage-header">
|
||||
{title && <h1 className="subpage-title">{title}</h1>}
|
||||
{subtitle && <p className="subpage-subtitle">{subtitle}</p>}
|
||||
</header>
|
||||
)}
|
||||
|
||||
{/* Typographic Table of Contents */}
|
||||
{hasSections && (
|
||||
<nav className="subpage-toc" aria-label="Sections">
|
||||
{sections.map((sec, i) => (
|
||||
<span key={sec.slug} className="subpage-toc__entry">
|
||||
<a href={`#${sec.slug}`} className="subpage-toc__link">
|
||||
<span className="subpage-toc__num">
|
||||
{String(i + 1).padStart(2, '0')}
|
||||
</span>
|
||||
<span className="subpage-toc__label">{sec.title}</span>
|
||||
</a>
|
||||
</span>
|
||||
))}
|
||||
</nav>
|
||||
)}
|
||||
|
||||
{/* Sectioned layout */}
|
||||
{hasSections ? (
|
||||
sections.map((sec) => {
|
||||
const sectionAlbums = sec.albumIds
|
||||
.map((id) => albumMap.get(id))
|
||||
.filter(Boolean) as SubpageAlbum[];
|
||||
|
||||
return (
|
||||
<section key={sec.slug} id={sec.slug} className="subpage-section">
|
||||
<header className="subpage-section__header">
|
||||
<h2 className="subpage-section__title">{sec.title}</h2>
|
||||
{sec.description && (
|
||||
<p className="subpage-section__desc">{sec.description}</p>
|
||||
)}
|
||||
<div className="subpage-section__rule" aria-hidden="true" />
|
||||
</header>
|
||||
<AlbumGrid
|
||||
albums={sectionAlbums}
|
||||
albumMap={albumMap}
|
||||
placeholderMap={placeholderMap}
|
||||
slug={slug}
|
||||
/>
|
||||
</section>
|
||||
);
|
||||
})
|
||||
return (
|
||||
<div className="subpage-grid">
|
||||
{albums.map((album) => {
|
||||
const ph = placeholderMap.get(album.id) ?? null;
|
||||
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 } : {})}
|
||||
/>
|
||||
) : (
|
||||
/* Flat layout (no sections) */
|
||||
<AlbumGrid
|
||||
albums={albums}
|
||||
albumMap={albumMap}
|
||||
placeholderMap={placeholderMap}
|
||||
slug={slug}
|
||||
/>
|
||||
<div className="skeleton" style={{ width: '100%', height: '100%' }} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
||||
export function SubpageGridView({
|
||||
slug,
|
||||
title,
|
||||
subtitle,
|
||||
albums,
|
||||
coverPlaceholders,
|
||||
sections,
|
||||
}: SubpageGridViewProps) {
|
||||
// Build lookup maps once
|
||||
const albumMap = new Map(albums.map((a) => [a.id, a]));
|
||||
const placeholderMap = new Map(albums.map((a, i) => [a.id, coverPlaceholders[i] ?? null]));
|
||||
|
||||
const hasSections = sections && sections.length > 0;
|
||||
|
||||
return (
|
||||
<div className="subpage-container">
|
||||
{(title || subtitle) && (
|
||||
<header className="subpage-header">
|
||||
{title && <h1 className="subpage-title">{title}</h1>}
|
||||
{subtitle && <p className="subpage-subtitle">{subtitle}</p>}
|
||||
</header>
|
||||
)}
|
||||
|
||||
{/* Typographic Table of Contents */}
|
||||
{hasSections && (
|
||||
<nav className="subpage-toc" aria-label="Sections">
|
||||
{sections.map((sec, i) => (
|
||||
<span key={sec.slug} className="subpage-toc__entry">
|
||||
<a href={`#${sec.slug}`} className="subpage-toc__link">
|
||||
<span className="subpage-toc__num">{String(i + 1).padStart(2, '0')}</span>
|
||||
<span className="subpage-toc__label">{sec.title}</span>
|
||||
</a>
|
||||
</span>
|
||||
))}
|
||||
</nav>
|
||||
)}
|
||||
|
||||
{/* Sectioned layout */}
|
||||
{hasSections ? (
|
||||
sections.map((sec) => {
|
||||
const sectionAlbums = sec.albumIds
|
||||
.map((id) => albumMap.get(id))
|
||||
.filter(Boolean) as SubpageAlbum[];
|
||||
|
||||
return (
|
||||
<section key={sec.slug} id={sec.slug} className="subpage-section">
|
||||
<header className="subpage-section__header">
|
||||
<h2 className="subpage-section__title">{sec.title}</h2>
|
||||
{sec.description && <p className="subpage-section__desc">{sec.description}</p>}
|
||||
<div className="subpage-section__rule" aria-hidden="true" />
|
||||
</header>
|
||||
<AlbumGrid
|
||||
albums={sectionAlbums}
|
||||
albumMap={albumMap}
|
||||
placeholderMap={placeholderMap}
|
||||
slug={slug}
|
||||
/>
|
||||
</section>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
/* Flat layout (no sections) */
|
||||
<AlbumGrid
|
||||
albums={albums}
|
||||
albumMap={albumMap}
|
||||
placeholderMap={placeholderMap}
|
||||
slug={slug}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -119,4 +119,4 @@
|
||||
.about__name {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,12 +5,13 @@
|
||||
* The :token is an encoded asset ID (not a raw UUID).
|
||||
*/
|
||||
|
||||
import { NextResponse } from 'next/server';
|
||||
import { NextRequest, NextResponse } from 'next/server';
|
||||
import { immich } from '@/lib/immich';
|
||||
import { decodeAssetId } from '@/lib/tokens';
|
||||
import { getConfig } from '@/lib/config';
|
||||
import { checkRateLimit } from '@/lib/rate-limit';
|
||||
|
||||
export async function GET(_request: Request, { params }: { params: Promise<{ id: string }> }) {
|
||||
export async function GET(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
|
||||
const config = getConfig();
|
||||
|
||||
// Security: If EXIF is globally disabled, do not serve it via API either
|
||||
@@ -18,6 +19,21 @@ export async function GET(_request: Request, { params }: { params: Promise<{ id:
|
||||
return NextResponse.json({ error: 'EXIF metadata is disabled' }, { status: 403 });
|
||||
}
|
||||
|
||||
// ── Rate limiting ──────────────────────────────────
|
||||
// Security: Prioritize x-real-ip (set by trusted reverse proxies like nginx/Traefik)
|
||||
// over x-forwarded-for which can be spoofed by clients.
|
||||
const ip =
|
||||
request.headers.get('x-real-ip') ??
|
||||
request.headers.get('x-forwarded-for')?.split(',')[0].trim() ??
|
||||
'unknown';
|
||||
const { success, resetAt } = checkRateLimit(`exif:${ip}`, config.rateLimitRpm);
|
||||
|
||||
if (!success) {
|
||||
const retryAfter = Math.ceil((resetAt - Date.now()) / 1000);
|
||||
console.warn(`[EXIF API] ⚠️ Rate limit exceeded for IP: ${ip}. Retry after ${retryAfter}s`);
|
||||
return NextResponse.json({ error: 'Too many requests' }, { status: 429 });
|
||||
}
|
||||
|
||||
const { id: token } = await params;
|
||||
|
||||
// Decode the opaque token back to an Immich asset ID
|
||||
|
||||
@@ -197,8 +197,8 @@
|
||||
}
|
||||
|
||||
/* HeroCarousel images fill the entire container */
|
||||
.hero--fullbleed>span,
|
||||
.hero--fullbleed>img {
|
||||
.hero--fullbleed > span,
|
||||
.hero--fullbleed > img {
|
||||
position: absolute !important;
|
||||
inset: 0;
|
||||
width: 100% !important;
|
||||
@@ -218,14 +218,21 @@
|
||||
padding: 64px 40px;
|
||||
/* Multi-stop for contrast on any image brightness */
|
||||
background:
|
||||
radial-gradient(ellipse at center, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.0) 70%),
|
||||
linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.15) 40%, rgba(0, 0, 0, 0.45) 100%);
|
||||
radial-gradient(ellipse at center, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 70%),
|
||||
linear-gradient(
|
||||
to bottom,
|
||||
rgba(0, 0, 0, 0.4) 0%,
|
||||
rgba(0, 0, 0, 0.15) 40%,
|
||||
rgba(0, 0, 0, 0.45) 100%
|
||||
);
|
||||
}
|
||||
|
||||
.hero--fullbleed .hero__title {
|
||||
color: #fff;
|
||||
font-size: 4rem;
|
||||
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7), 0 8px 48px rgba(0, 0, 0, 0.6);
|
||||
text-shadow:
|
||||
0 2px 8px rgba(0, 0, 0, 0.7),
|
||||
0 8px 48px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.hero--fullbleed .hero__subtitle {
|
||||
@@ -299,7 +306,12 @@
|
||||
right: 0;
|
||||
z-index: 2;
|
||||
padding: 48px 40px;
|
||||
background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.3) 50%, transparent 100%);
|
||||
background: linear-gradient(
|
||||
to top,
|
||||
rgba(0, 0, 0, 0.8) 0%,
|
||||
rgba(0, 0, 0, 0.3) 50%,
|
||||
transparent 100%
|
||||
);
|
||||
}
|
||||
|
||||
.hero--stacked .hero__title {
|
||||
@@ -589,7 +601,7 @@
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.subpage-toc__entry+.subpage-toc__entry::before {
|
||||
.subpage-toc__entry + .subpage-toc__entry::before {
|
||||
content: '·';
|
||||
padding: 0 12px;
|
||||
color: var(--text-muted);
|
||||
@@ -658,7 +670,6 @@
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
.subpage-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
@@ -763,10 +774,12 @@
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
padding: 24px;
|
||||
background: linear-gradient(to top,
|
||||
rgba(0, 0, 0, 0.8) 0%,
|
||||
rgba(0, 0, 0, 0.3) 40%,
|
||||
transparent 100%);
|
||||
background: linear-gradient(
|
||||
to top,
|
||||
rgba(0, 0, 0, 0.8) 0%,
|
||||
rgba(0, 0, 0, 0.3) 40%,
|
||||
transparent 100%
|
||||
);
|
||||
opacity: 0;
|
||||
transition: opacity var(--transition-normal);
|
||||
}
|
||||
@@ -981,10 +994,12 @@
|
||||
|
||||
/* ── 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);
|
||||
@@ -1513,4 +1528,4 @@
|
||||
[data-preset='monograph'] .album-header__title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -65,28 +65,71 @@ export default function RootLayout({ children }: { children: React.ReactNode })
|
||||
return (
|
||||
<html lang="en" suppressHydrationWarning>
|
||||
<body>
|
||||
<div style={{
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
minHeight: '100dvh', padding: '2rem', backgroundColor: '#ffffff',
|
||||
color: '#111111', fontFamily: 'system-ui, sans-serif'
|
||||
}}>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
minHeight: '100dvh',
|
||||
padding: '2rem',
|
||||
backgroundColor: '#ffffff',
|
||||
color: '#111111',
|
||||
fontFamily: 'system-ui, sans-serif',
|
||||
}}
|
||||
>
|
||||
<div style={{ maxWidth: '600px', width: '100%' }}>
|
||||
<h1 style={{ fontSize: 'clamp(2rem, 5vw, 3rem)', fontWeight: 500, marginBottom: '0.5rem', letterSpacing: '-0.02em' }}>
|
||||
<h1
|
||||
style={{
|
||||
fontSize: 'clamp(2rem, 5vw, 3rem)',
|
||||
fontWeight: 500,
|
||||
marginBottom: '0.5rem',
|
||||
letterSpacing: '-0.02em',
|
||||
}}
|
||||
>
|
||||
Setup Required
|
||||
</h1>
|
||||
<p style={{ fontSize: '1.125rem', opacity: 0.7, marginBottom: '2rem', lineHeight: 1.5 }}>
|
||||
Immich Folio is running, but it looks like your configuration files or environment variables are missing.
|
||||
<p
|
||||
style={{
|
||||
fontSize: '1.125rem',
|
||||
opacity: 0.7,
|
||||
marginBottom: '2rem',
|
||||
lineHeight: 1.5,
|
||||
}}
|
||||
>
|
||||
Immich Folio is running, but it looks like your configuration files or environment
|
||||
variables are missing.
|
||||
</p>
|
||||
<div style={{ backgroundColor: 'rgba(0, 0, 0, 0.03)', padding: '1.5rem', borderRadius: '8px', fontSize: '0.95rem', lineHeight: 1.6 }}>
|
||||
<p style={{ marginBottom: '1rem' }}>To get started, follow these steps in your repository or mounted <code>content/</code> volume:</p>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.03)',
|
||||
padding: '1.5rem',
|
||||
borderRadius: '8px',
|
||||
fontSize: '0.95rem',
|
||||
lineHeight: 1.6,
|
||||
}}
|
||||
>
|
||||
<p style={{ marginBottom: '1rem' }}>
|
||||
To get started, follow these steps in your repository or mounted{' '}
|
||||
<code>content/</code> volume:
|
||||
</p>
|
||||
<ol style={{ margin: 0, paddingLeft: '1.25rem' }}>
|
||||
<li style={{ marginBottom: '0.5rem' }}>Copy <code>.env.example</code> to <code>.env.local</code> and fill in your Immich API URL and Key</li>
|
||||
<li style={{ marginBottom: '0.5rem' }}>Copy <code>settings.yaml.example</code> to <code>settings.yaml</code></li>
|
||||
<li style={{ marginBottom: '0.5rem' }}>Copy <code>gallery.yaml.example</code> to <code>gallery.yaml</code></li>
|
||||
<li style={{ marginBottom: '0.5rem' }}>Copy <code>about.md.example</code> to <code>about.md</code> (optional)</li>
|
||||
<li style={{ marginBottom: '0.5rem' }}>
|
||||
Copy <code>.env.example</code> to <code>.env.local</code> and fill in your
|
||||
Immich API URL and Key
|
||||
</li>
|
||||
<li style={{ marginBottom: '0.5rem' }}>
|
||||
Copy <code>settings.yaml.example</code> to <code>settings.yaml</code>
|
||||
</li>
|
||||
<li style={{ marginBottom: '0.5rem' }}>
|
||||
Copy <code>gallery.yaml.example</code> to <code>gallery.yaml</code>
|
||||
</li>
|
||||
<li style={{ marginBottom: '0.5rem' }}>
|
||||
Copy <code>about.md.example</code> to <code>about.md</code> (optional)
|
||||
</li>
|
||||
</ol>
|
||||
<p style={{ marginTop: '1.5rem', marginBottom: 0 }}>
|
||||
Open <code>gallery.yaml</code> and add the album IDs you want to display, then <strong>restart your server</strong>.
|
||||
Open <code>gallery.yaml</code> and add the album IDs you want to display, then{' '}
|
||||
<strong>restart your server</strong>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
188
app/map/map.css
188
app/map/map.css
@@ -1,174 +1,174 @@
|
||||
/* ── Map Page ──────────────────────────────────────────────── */
|
||||
|
||||
.map-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: calc(100vh - var(--header-height, 64px));
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: calc(100vh - var(--header-height, 64px));
|
||||
}
|
||||
|
||||
.map-page__header {
|
||||
padding: 2rem var(--page-padding, 2rem) 1rem;
|
||||
padding: 2rem var(--page-padding, 2rem) 1rem;
|
||||
}
|
||||
|
||||
.map-page__title {
|
||||
font-family: var(--font-heading);
|
||||
font-size: clamp(1.5rem, 4vw, 2.5rem);
|
||||
font-weight: 600;
|
||||
margin: 0.5rem 0 0.25rem;
|
||||
color: var(--text-primary);
|
||||
font-family: var(--font-heading);
|
||||
font-size: clamp(1.5rem, 4vw, 2.5rem);
|
||||
font-weight: 600;
|
||||
margin: 0.5rem 0 0.25rem;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.map-page__subtitle {
|
||||
font-family: var(--font-body);
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-secondary);
|
||||
margin: 0;
|
||||
font-family: var(--font-body);
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-secondary);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ── Map Container ─────────────────────────────────────────── */
|
||||
|
||||
.map-container {
|
||||
flex: 1;
|
||||
min-height: 500px;
|
||||
margin: 0 var(--page-padding, 2rem) 2rem;
|
||||
border-radius: var(--radius, 0);
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--border-color, rgba(128, 128, 128, 0.15));
|
||||
flex: 1;
|
||||
min-height: 500px;
|
||||
margin: 0 var(--page-padding, 2rem) 2rem;
|
||||
border-radius: var(--radius, 0);
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--border-color, rgba(128, 128, 128, 0.15));
|
||||
}
|
||||
|
||||
.map-container__loading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 500px;
|
||||
color: var(--text-secondary);
|
||||
font-family: var(--font-body);
|
||||
font-size: 0.875rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 500px;
|
||||
color: var(--text-secondary);
|
||||
font-family: var(--font-body);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
/* ── Map Popups ────────────────────────────────────────────── */
|
||||
|
||||
.leaflet-popup-content-wrapper {
|
||||
background: var(--bg-primary, #1a1a1a) !important;
|
||||
color: var(--text-primary, #fff) !important;
|
||||
border-radius: var(--radius, 4px) !important;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
|
||||
border: 1px solid var(--border-color, rgba(128, 128, 128, 0.15)) !important;
|
||||
padding: 0 !important;
|
||||
overflow: hidden;
|
||||
background: var(--bg-primary, #1a1a1a) !important;
|
||||
color: var(--text-primary, #fff) !important;
|
||||
border-radius: var(--radius, 4px) !important;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
|
||||
border: 1px solid var(--border-color, rgba(128, 128, 128, 0.15)) !important;
|
||||
padding: 0 !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.leaflet-popup-tip {
|
||||
background: var(--bg-primary, #1a1a1a) !important;
|
||||
border: 1px solid var(--border-color, rgba(128, 128, 128, 0.15)) !important;
|
||||
border-top: none !important;
|
||||
border-left: none !important;
|
||||
background: var(--bg-primary, #1a1a1a) !important;
|
||||
border: 1px solid var(--border-color, rgba(128, 128, 128, 0.15)) !important;
|
||||
border-top: none !important;
|
||||
border-left: none !important;
|
||||
}
|
||||
|
||||
.leaflet-popup-content {
|
||||
margin: 0 !important;
|
||||
min-width: 200px;
|
||||
margin: 0 !important;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.map-popup {
|
||||
font-family: var(--font-body);
|
||||
font-family: var(--font-body);
|
||||
}
|
||||
|
||||
.map-popup__cover {
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.map-popup__body {
|
||||
padding: 0.75rem 1rem;
|
||||
padding: 0.75rem 1rem;
|
||||
}
|
||||
|
||||
.map-popup__city {
|
||||
font-family: var(--font-heading);
|
||||
font-size: 0.9375rem;
|
||||
font-weight: 600;
|
||||
margin: 0 0 0.125rem;
|
||||
color: var(--text-primary);
|
||||
font-family: var(--font-heading);
|
||||
font-size: 0.9375rem;
|
||||
font-weight: 600;
|
||||
margin: 0 0 0.125rem;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.map-popup__country {
|
||||
font-family: var(--font-caption);
|
||||
font-size: 0.6875rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--text-secondary);
|
||||
margin: 0 0 0.5rem;
|
||||
font-family: var(--font-caption);
|
||||
font-size: 0.6875rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--text-secondary);
|
||||
margin: 0 0 0.5rem;
|
||||
}
|
||||
|
||||
.map-popup__count {
|
||||
font-family: var(--font-caption);
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 0.5rem;
|
||||
font-family: var(--font-caption);
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.map-popup__albums {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.map-popup__album-link {
|
||||
font-size: 0.8125rem;
|
||||
color: var(--accent, #e60012);
|
||||
text-decoration: none;
|
||||
transition: opacity 0.15s;
|
||||
font-size: 0.8125rem;
|
||||
color: var(--accent, #e60012);
|
||||
text-decoration: none;
|
||||
transition: opacity 0.15s;
|
||||
}
|
||||
|
||||
.map-popup__album-link:hover {
|
||||
opacity: 0.7;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* ── Custom Marker ─────────────────────────────────────────── */
|
||||
|
||||
.map-marker {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent, #e60012);
|
||||
color: #fff;
|
||||
font-family: var(--font-caption);
|
||||
font-size: 0.6875rem;
|
||||
font-weight: 700;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
||||
border: 2px solid rgba(255, 255, 255, 0.9);
|
||||
cursor: pointer;
|
||||
transition: transform 0.15s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent, #e60012);
|
||||
color: #fff;
|
||||
font-family: var(--font-caption);
|
||||
font-size: 0.6875rem;
|
||||
font-weight: 700;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
||||
border: 2px solid rgba(255, 255, 255, 0.9);
|
||||
cursor: pointer;
|
||||
transition: transform 0.15s ease;
|
||||
}
|
||||
|
||||
.map-marker:hover {
|
||||
transform: scale(1.15);
|
||||
transform: scale(1.15);
|
||||
}
|
||||
|
||||
/* ── Leaflet overrides ─────────────────────────────────────── */
|
||||
|
||||
.leaflet-control-attribution {
|
||||
background: var(--bg-primary, #1a1a1a) !important;
|
||||
color: var(--text-secondary, #888) !important;
|
||||
font-size: 0.625rem !important;
|
||||
opacity: 0.7;
|
||||
background: var(--bg-primary, #1a1a1a) !important;
|
||||
color: var(--text-secondary, #888) !important;
|
||||
font-size: 0.625rem !important;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.leaflet-control-attribution a {
|
||||
color: var(--text-secondary, #888) !important;
|
||||
color: var(--text-secondary, #888) !important;
|
||||
}
|
||||
|
||||
.leaflet-control-zoom a {
|
||||
background: var(--bg-primary, #1a1a1a) !important;
|
||||
color: var(--text-primary, #fff) !important;
|
||||
border-color: var(--border-color, rgba(128, 128, 128, 0.15)) !important;
|
||||
background: var(--bg-primary, #1a1a1a) !important;
|
||||
color: var(--text-primary, #fff) !important;
|
||||
border-color: var(--border-color, rgba(128, 128, 128, 0.15)) !important;
|
||||
}
|
||||
|
||||
.leaflet-control-zoom a:hover {
|
||||
background: var(--bg-secondary, #222) !important;
|
||||
}
|
||||
background: var(--bg-secondary, #222) !important;
|
||||
}
|
||||
|
||||
@@ -198,7 +198,7 @@
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
[data-preset='classic'] .subpage-toc__entry+.subpage-toc__entry::before {
|
||||
[data-preset='classic'] .subpage-toc__entry + .subpage-toc__entry::before {
|
||||
content: '◆';
|
||||
padding: 0 14px;
|
||||
font-size: 0.45rem;
|
||||
@@ -260,4 +260,4 @@
|
||||
font-size: 0.55rem;
|
||||
letter-spacing: 0.2em;
|
||||
color: var(--accent);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -181,7 +181,7 @@
|
||||
margin-bottom: 64px;
|
||||
}
|
||||
|
||||
[data-preset='editorial'] .subpage-toc__entry+.subpage-toc__entry::before {
|
||||
[data-preset='editorial'] .subpage-toc__entry + .subpage-toc__entry::before {
|
||||
content: '/';
|
||||
padding: 0 12px;
|
||||
font-family: var(--font-caption);
|
||||
@@ -234,4 +234,4 @@
|
||||
border-left: 3px solid var(--accent);
|
||||
margin-bottom: -16px;
|
||||
width: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -198,7 +198,7 @@
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
|
||||
[data-preset='minimal'] .subpage-toc__entry+.subpage-toc__entry::before {
|
||||
[data-preset='minimal'] .subpage-toc__entry + .subpage-toc__entry::before {
|
||||
content: '—';
|
||||
padding: 0 10px;
|
||||
font-size: 0.6rem;
|
||||
@@ -242,4 +242,4 @@
|
||||
[data-preset='minimal'] .subpage-section__rule {
|
||||
background: var(--text-primary);
|
||||
height: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -164,7 +164,7 @@
|
||||
}
|
||||
|
||||
/* Main: extra generous margins */
|
||||
[data-preset='monograph']~body .main {
|
||||
[data-preset='monograph'] ~ body .main {
|
||||
padding: 80px 60px 120px;
|
||||
}
|
||||
|
||||
@@ -203,7 +203,7 @@
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
[data-preset='monograph'] .subpage-toc__entry+.subpage-toc__entry::before {
|
||||
[data-preset='monograph'] .subpage-toc__entry + .subpage-toc__entry::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -395,4 +395,4 @@
|
||||
[data-preset='monograph'] .album-header__title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -111,7 +111,7 @@
|
||||
margin-bottom: 56px;
|
||||
}
|
||||
|
||||
[data-preset='noir'] .subpage-toc__entry+.subpage-toc__entry::before {
|
||||
[data-preset='noir'] .subpage-toc__entry + .subpage-toc__entry::before {
|
||||
content: '|';
|
||||
padding: 0 12px;
|
||||
font-family: var(--font-caption);
|
||||
@@ -161,4 +161,4 @@
|
||||
background: linear-gradient(to right, var(--accent), transparent);
|
||||
opacity: 0.35;
|
||||
height: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -251,4 +251,4 @@ button:focus-visible,
|
||||
input:focus-visible {
|
||||
outline: 2px solid var(--text-primary);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user