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

chore: production-readiness audit fixes and linting cleanup

Browse Source
This commit is contained in:
ralksta
2026-03-08 16:26:05 +01:00
parent 270768d330
commit ea72d720df
9 changed files with 111 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -55,6 +55,9 @@ export function PhotoGrid({ assets, layout = 'masonry', gridStyle }: PhotoGridPr
useEffect(() => {
const idx = parsePhotoHash(window.location.hash);
if (idx !== null && idx < assets.length) {
// state from URL hash on mount only (equivalent to useState lazy initializer for
// client-only browser APIs).
// eslint-disable-next-line react-hooks/set-state-in-effect
setLightboxIndex(idx);
}
}, [assets.length]);
@@ -139,7 +142,8 @@ export function PhotoGrid({ assets, layout = 'masonry', gridStyle }: PhotoGridPr
{assets.map((asset, index) => (
<FadeIn key={asset.id} delay={index < 12 ? index * 50 : 0}>
<div
className={`photo-grid__item${layout === 'showcase' && index === 0 ? ' photo-grid__featured' : ''
className={`photo-grid__item${
layout === 'showcase' && index === 0 ? ' photo-grid__featured' : ''
}`}
onClick={() => openLightbox(index)}
onKeyDown={(e) => {

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

@@ -288,11 +288,7 @@ export default async function PathPage({ params }: PathPageProps) {
{album.description && ` · ${album.description}`}
</p>
</div>
<PhotoGrid
assets={images}
layout={resolveLayout()}
gridStyle={buildGridStyle()}
/>
<PhotoGrid assets={images} layout={resolveLayout()} gridStyle={buildGridStyle()} />
</>
);
}

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

@@ -64,8 +64,6 @@ export async function GET(request: NextRequest, { params }: { params: Promise<{
return NextResponse.json({ error: 'Asset not found' }, { status: 404 });
}
console.log(`[Image API] ✅ Serving ${assetId} (${size}) - Type: ${result.contentType}`);
const headers: Record<string, string> = {
'Content-Type': result.contentType.includes('application/octet-stream')
? 'image/jpeg'
@@ -73,7 +71,6 @@ export async function GET(request: NextRequest, { params }: { params: Promise<{
// Images are immutable once uploaded to Immich — cache aggressively
'Cache-Control': 'public, max-age=31536000, immutable',
'X-RateLimit-Remaining': String(remaining),
'Access-Control-Allow-Origin': '*', // Allow cross-origin for lightbox
};
if (result.contentLength) {

4
app/api/og/route.tsx
View File

@@ -12,8 +12,8 @@ import { getConfig } from '@/lib/config';
export async function GET(request: NextRequest) {
const { searchParams } = request.nextUrl;
const title = searchParams.get('title') || 'Gallery';
const subtitle = searchParams.get('subtitle') || '';
const title = (searchParams.get('title') || 'Gallery').slice(0, 200);
const subtitle = (searchParams.get('subtitle') || '').slice(0, 100);
const { theme } = getConfig();
return new ImageResponse(

42
components/DevToolbar.tsx
View File

@@ -28,11 +28,11 @@ type Tab = 'theme' | 'grid' | 'server';
const PRESET_FONTS: Record<string, { heading: string; body: string; caption: string }> = {
studio: { heading: 'Playfair Display', body: 'DM Sans', caption: 'EB Garamond' },
minimal: { heading: 'Geist', body: 'Geist', caption: 'IBM Plex Mono' },
editorial: { heading: 'Bodoni Moda', body: 'Newsreader', caption: 'IBM Plex Mono' },
classic: { heading: 'Cinzel', body: 'Crimson Pro', caption: 'EB Garamond' },
noir: { heading: 'Libre Baskerville', body: 'Source Sans 3', caption: 'IBM Plex Mono' },
monograph: { heading: 'Instrument Serif', body: 'Inter', caption: 'JetBrains Mono' },
botanica: { heading: 'Cormorant Garamond', body: 'Nunito Sans', caption: 'Lora' },
editorial: { heading: 'Bodoni Moda', body: 'Newsreader', caption: 'Spectral' },
classic: { heading: 'Cinzel', body: 'Crimson Pro', caption: 'Crimson Pro' },
noir: { heading: 'Libre Baskerville', body: 'Source Sans 3', caption: 'Space Mono' },
monograph: { heading: 'Instrument Serif', body: 'Inter', caption: 'IBM Plex Mono' },
botanica: { heading: 'Cormorant Garamond', body: 'Nunito Sans', caption: 'Inconsolata' },
};
const PRESET_ACCENTS: Record<string, string> = {
@@ -307,7 +307,6 @@ exifOnHover: ${exifOnHover}`;
{/* ── Tab Content ──────────────────────── */}
<div style={{ padding: '12px 16px' }}>
{/* ── THEME TAB ── */}
{tab === 'theme' && (
<div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
@@ -325,10 +324,7 @@ exifOnHover: ${exifOnHover}`;
</div>
<div>
<Label>Film Grain</Label>
<ToggleButton
on={grain === 'true'}
onClick={toggleGrain}
/>
<ToggleButton on={grain === 'true'} onClick={toggleGrain} />
</div>
<div>
<Label>EXIF on Hover</Label>
@@ -364,7 +360,11 @@ exifOnHover: ${exifOnHover}`;
</div>
<div>
<Label>Aspect Ratio</Label>
<PillGrid items={ASPECT_RATIOS} active={aspectRatio} onSelect={updateAspectRatio} />
<PillGrid
items={ASPECT_RATIOS}
active={aspectRatio}
onSelect={updateAspectRatio}
/>
</div>
</div>
)}
@@ -395,8 +395,8 @@ exifOnHover: ${exifOnHover}`;
{copiedYaml === 'layout' && <CopyBadge />}
</div>
<p style={{ color: '#52525b', fontSize: 10, margin: 0, lineHeight: 1.5 }}>
These settings require a server re-render. Click to copy the YAML snippet, then paste into{' '}
<code style={{ color: '#a1a1aa' }}>content/settings.yaml</code>.
These settings require a server re-render. Click to copy the YAML snippet, then
paste into <code style={{ color: '#a1a1aa' }}>content/settings.yaml</code>.
</p>
</div>
)}
@@ -416,8 +416,7 @@ exifOnHover: ${exifOnHover}`;
padding: '9px 0',
borderRadius: 10,
border: 'none',
background:
copiedYaml === 'all' ? '#16a34a' : 'rgba(255,255,255,0.92)',
background: copiedYaml === 'all' ? '#16a34a' : 'rgba(255,255,255,0.92)',
color: copiedYaml === 'all' ? '#fff' : '#111',
fontWeight: 600,
fontSize: 12,
@@ -465,13 +464,9 @@ function ToggleButton({ on, onClick }: { on: boolean; onClick: () => void }) {
fontWeight: 500,
cursor: 'pointer',
transition: 'all 0.12s ease',
background: on
? '#166534'
: 'rgba(255,255,255,0.06)',
background: on ? '#166534' : 'rgba(255,255,255,0.06)',
color: on ? '#86efac' : '#71717a',
border: on
? '1px solid #166534'
: '1px solid rgba(255,255,255,0.08)',
border: on ? '1px solid #166534' : '1px solid rgba(255,255,255,0.08)',
}}
>
{on ? '● On' : '○ Off'}
@@ -506,10 +501,7 @@ function PillGrid({
onClick={() => onSelect(item)}
style={{
...pillStyle,
background:
item === active
? 'rgba(255,255,255,0.9)'
: 'rgba(255,255,255,0.06)',
background: item === active ? 'rgba(255,255,255,0.9)' : 'rgba(255,255,255,0.06)',
color: item === active ? '#111' : '#71717a',
border:
item === active

20
lib/config.ts
View File

@@ -442,12 +442,22 @@ export function getConfig(): AppConfig {
}
// If it's an object, it might have password, grid, albums
const sp = value as any;
interface SubpageObjectValue {
albums?: Array<string | Record<string, string>>;
password?: string;
grid?: {
columns?: number;
gap?: number;
aspectRatio?: string;
layout?: string;
};
}
const sp = value as SubpageObjectValue;
const albumEntries = sp.albums || [];
return {
name,
slug: slugify(name),
albumIds: albumEntries.map((entry: any) => processAlbumEntry(entry, `subpage "${name}"`)),
albumIds: albumEntries.map((entry) => processAlbumEntry(entry, `subpage "${name}"`)),
password: sp.password,
...(sp.grid
? {
@@ -486,7 +496,11 @@ export function getConfig(): AppConfig {
siteSubtitle: settings.subtitle ?? env.SITE_SUBTITLE,
seo: {
title: settings.seo?.title || settings.title || env.SITE_TITLE || 'Gallery',
description: settings.seo?.description || settings.subtitle || env.SITE_SUBTITLE || 'A curated photography portfolio',
description:
settings.seo?.description ||
settings.subtitle ||
env.SITE_SUBTITLE ||
'A curated photography portfolio',
noIndex: settings.seo?.noIndex === true,
noFollow: settings.seo?.noFollow === true,
},

10
lib/immich.ts
View File

@@ -77,11 +77,13 @@ export interface SubpageSummary {
coverAssetId: string | null;
}
// Module-level flag so the album summary is only logged once even if the
// ImmichClient singleton is replaced in hot-reload scenarios.
let _hasLoggedAlbums = false;
// ── API Client ─────────────────────────────────────────────────
class ImmichClient {
private hasLoggedAlbums = false;
private get config() {
return getConfig();
}
@@ -176,8 +178,8 @@ class ImmichClient {
});
// Log album summary on first load so admins can see what's published
if (!this.hasLoggedAlbums) {
this.hasLoggedAlbums = true;
if (!_hasLoggedAlbums) {
_hasLoggedAlbums = true;
console.log('\n[Lightbox] Published albums:');
console.log('─'.repeat(80));

5
lib/tokens.ts
View File

@@ -24,8 +24,9 @@ function getKey(): Buffer {
*/
export function encodeAssetId(assetId: string): string {
const key = getKey();
// Deterministic IV from asset ID (same input → same token)
const iv = crypto.createHash('md5').update(assetId).digest();
// Deterministic IV from asset ID (same input → same token).
// SHA-256 slice → first 16 bytes. MD5 was deprecated for cryptographic use.
const iv = crypto.createHash('sha256').update(assetId).digest().subarray(0, 16);
const cipher = crypto.createCipheriv('aes-256-cbc', key, iv);
const encrypted = Buffer.concat([cipher.update(assetId, 'utf8'), cipher.final()]);
// Compact: base64url(iv + ciphertext)

2
next.config.ts
View File

@@ -4,7 +4,7 @@ import type { NextConfig } from 'next';
// Locks down the public-facing site to only trusted sources.
const cspDirectives = [
"default-src 'self'",
"script-src 'self' 'unsafe-inline' 'unsafe-eval'", // Added unsafe-eval for some client-side libs if needed
"script-src 'self' 'unsafe-inline'",
"style-src 'self' 'unsafe-inline' https://fonts.googleapis.com https://unpkg.com",
"font-src 'self' https://fonts.gstatic.com",
"img-src 'self' data: blob: https://*.basemaps.cartocdn.com https://*.tile.openstreetmap.org https://unpkg.com", // Added blob: and osm