const { useState, useEffect, useRef, useMemo, useCallback } = React;
// ============ Manifest loader ============
// All content (photos, categories, copy, hero image) is driven by photos.json,
// which is regenerated by scripts/build.sh whenever you add photos to uploads/.
function useManifest() {
const [data, setData] = useState(null);
const [error, setError] = useState(null);
useEffect(() => {
fetch('photos.json', { cache: 'no-cache' }).
then((r) => {
if (!r.ok) throw new Error(`HTTP ${r.status}`);
return r.json();
}).
then(setData).
catch((err) => {
console.error('Failed to load photos.json', err);
setError(err.message);
});
}, []);
return { data, error };
}
// ============ Loader / Error ============
function Loader() {
return (
);
}
function LoadError({ message }) {
return (
Could not load the album.
{message}
Make sure photos.json sits next to this page.
);
}
// ============ Hero ============
function Hero({ manifest, totalCount }) {
return (
);
}
// ============ Filter bar ============
function FilterBar({ categories, active, onPick, counts, onDownload, zipSize }) {
return (
{categories.map((c) =>
onPick(c.id)}>
{c.label}
{counts[c.id]}
)}
onPick(e.target.value)}
aria-label="Filter by category">
{categories.map((c) =>
{c.label} ({counts[c.id]})
)}
Download all{zipSize ? ` (${zipSize})` : ''}
);
}
// ============ Gallery ============
function Gallery({ photos, onOpen }) {
return (
{photos.map((p, i) =>
onOpen(i)}
style={{ animationDelay: `${i % 10 * 45}ms` }}>
)}
{'No photos here yet \u2014 try another moment.'}
}
);
}
// ============ Lightbox ============
function Lightbox({ photos, index, onClose, onNav }) {
const touchStart = useRef(null);
useEffect(() => {
if (index === null) return;
const key = (e) => {
if (e.key === 'Escape') onClose();
if (e.key === 'ArrowRight') onNav(1);
if (e.key === 'ArrowLeft') onNav(-1);
};
window.addEventListener('keydown', key);
document.body.style.overflow = 'hidden';
return () => {
window.removeEventListener('keydown', key);
document.body.style.overflow = '';
};
}, [index, onClose, onNav]);
if (index === null) return null;
const p = photos[index];
const onTouchStart = (e) => {touchStart.current = e.touches[0].clientX;};
const onTouchEnd = (e) => {
if (touchStart.current == null) return;
const dx = e.changedTouches[0].clientX - touchStart.current;
if (Math.abs(dx) > 50) onNav(dx < 0 ? 1 : -1);
touchStart.current = null;
};
const fileName = `pearl-bday-${p.id}.jpg`;
return (
{e.stopPropagation();onNav(-1);}} aria-label="Previous">
{e.stopPropagation();onNav(1);}} aria-label="Next">
e.stopPropagation()}
onTouchStart={onTouchStart}
onTouchEnd={onTouchEnd}>
{p.alt}
{index + 1} / {photos.length}
e.stopPropagation()}>
Save this photo
);
}
// ============ Back-to-top ============
function BackToTop() {
const [show, setShow] = useState(false);
useEffect(() => {
const onScroll = () => setShow(window.scrollY > 800);
window.addEventListener('scroll', onScroll, { passive: true });
return () => window.removeEventListener('scroll', onScroll);
}, []);
if (!show) return null;
return (
window.scrollTo({ top: 0, behavior: 'smooth' })} aria-label="Back to top">
);
}
// ============ App ============
function App() {
const { data, error } = useManifest();
const [filter, setFilter] = useState('all');
const [lbIndex, setLbIndex] = useState(null);
const zipSize = data?.downloadZipSize || '';
const fullZipUrl = data?.downloadZipFull || '';
const fullZipSize = data?.downloadZipFullSize || '';
const photos = data ? data.photos : [];
const categories = useMemo(() => {
if (!data) return [];
return [{ id: 'all', label: 'All Moments' }, ...data.categories];
}, [data]);
const filtered = useMemo(
() => filter === 'all' ? photos : photos.filter((p) => p.cat === filter),
[filter, photos]
);
const counts = useMemo(() => {
const out = { all: photos.length };
for (const c of categories) {
if (c.id === 'all') continue;
out[c.id] = photos.filter((p) => p.cat === c.id).length;
}
return out;
}, [photos, categories]);
const onNav = useCallback((dir) => {
setLbIndex((i) => {
if (i === null) return i;
return (i + dir + filtered.length) % filtered.length;
});
}, [filtered.length]);
const downloadAll = useCallback(() => {
if (!data) return;
const a = document.createElement('a');
a.href = data.downloadZip || 'photos.zip';
a.download = `pearl-bday-photos.zip`;
document.body.appendChild(a);
a.click();
a.remove();
}, [data]);
const downloadFull = useCallback(() => {
if (!fullZipUrl) return;
const a = document.createElement('a');
a.href = fullZipUrl;
a.download = `pearl-bday-photos-full.zip`;
document.body.appendChild(a);
a.click();
a.remove();
}, [fullZipUrl]);
if (error) return
Keep them all, with love.
{'Tap below to save every photograph in a single zip. Unzip it on your phone or computer and the moments are yours forever.'}
Download all {photos.length} photos{zipSize ? ` \u00b7 ${zipSize}` : ''}
{fullZipUrl &&
Full quality{fullZipSize ? ` \u00b7 ${fullZipSize}` : ''}
}
{fullZipUrl ? 'Slow connection? The first download is resized for quick saving. The second has the originals.' : 'Tip: tap-and-hold any single photo above to save it on its own.'}
{data.footer}
{data.footerSmall}
setLbIndex(null)} onNav={onNav} />
);
}
ReactDOM.createRoot(document.getElementById('root')).render(