Portfolio without downloads; Om mig, Kontakt and Posters come from the portal on the same domain
Linus 2026-11-06: everything public lives on imagesbyolofsson.se (Cleura), the customer subdomain is only for ordering and the logged-in portal; photos are sold as posters instead of being downloadable. - Portfolio: download menu (S/M/L), the original password dialog and /download/original are gone; the lightbox has "Köp som poster" -> /posters instead. - about.astro and contact.astro removed: Caddy on Cleura sends /about, /contact and /posters to the portal, so the About text and collaborations are edited once in admin. They stay in sitemap-0.xml (PORTAL_PAGES); the sitemap index lists /posters/sitemap.xml. - Menu and 404 page link Posters; privacy, robots.txt and llms.txt no longer mention password downloads. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Linus Olofsson
co-authored by
Claude Opus 5.5
Claude Opus 5.5
parent
85bd49b0c3
commit
1b24607e02
+10
-152
@@ -90,23 +90,20 @@ const galleryItems = await Promise.all(Object.entries(imageFiles).map(async ([re
|
||||
].filter(Boolean).join(' ');
|
||||
const alt = meta.alt?.trim() || fallbackAlt.charAt(0).toUpperCase() + fallbackAlt.slice(1);
|
||||
|
||||
// Nedladdning/lightbox: nya, EXIF-fria JPG:er i 800/1600/3000 px
|
||||
// (Astro hoppar över bredder större än originalet).
|
||||
// Lightbox: EXIF-fria JPG:er i 800/1600/3000 px (Astro hoppar över bredder större än originalet).
|
||||
// Ingen nedladdning längre (Linus 2026-11-06): bilderna säljs som posters i stället.
|
||||
const jpg = await getImage({ src: file.default, format: 'jpg', quality: 88, width: 800, widths: [800, 1600, 3000] });
|
||||
const variants = [...jpg.srcSet.values].sort((a, b) => widthOf(a.descriptor ?? '') - widthOf(b.descriptor ?? ''));
|
||||
const small = variants[0]?.url ?? jpg.src;
|
||||
const large = variants[variants.length - 1]?.url ?? jpg.src;
|
||||
const medium = variants.find((v) => widthOf(v.descriptor ?? '') === 1600)?.url ?? large;
|
||||
|
||||
const assetId = key.match(/^immich-([0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12})-/i)?.[1]?.toLowerCase() ?? null;
|
||||
const statKey = ('portfolio/' + key.replace(/[^\w\-.]/g, '_')).slice(0, 150);
|
||||
|
||||
return {
|
||||
img: file.default, key, alt, title: meta.title ?? null,
|
||||
year, month, monthIndex, fullDate, model: exifData?.Model,
|
||||
fStop, shutterSpeed, iso, focalLength,
|
||||
dlS: small, dlM: medium, dlL: large, srcset: jpg.srcSet.attribute,
|
||||
assetId, statKey,
|
||||
large, srcset: jpg.srcSet.attribute,
|
||||
statKey,
|
||||
};
|
||||
}));
|
||||
|
||||
@@ -157,17 +154,13 @@ const uniqueMonths = [...new Map(allMonths.map(item => [item.name, item])).value
|
||||
<div class="columns-1 md:columns-2 lg:columns-3 gap-6 space-y-6" id="gallery-grid">
|
||||
{galleryItems.map((item: any, index: number) => (
|
||||
<a
|
||||
href={item.dlL}
|
||||
href={item.large}
|
||||
class="gallery-item block break-inside-avoid relative group overflow-hidden rounded-lg cursor-pointer bg-neutral-800 shadow-md"
|
||||
data-year={item.year}
|
||||
data-month={item.month}
|
||||
data-src={item.dlL}
|
||||
data-src={item.large}
|
||||
data-srcset={item.srcset}
|
||||
data-dl-s={item.dlS}
|
||||
data-dl-m={item.dlM}
|
||||
data-dl-l={item.dlL}
|
||||
data-key={item.key}
|
||||
data-asset={item.assetId}
|
||||
data-stat={item.statKey}
|
||||
data-alt={item.alt}
|
||||
data-title={item.title}
|
||||
@@ -227,18 +220,9 @@ const uniqueMonths = [...new Map(allMonths.map(item => [item.name, item])).value
|
||||
<p id="lb-model" class="text-gray-400 text-sm font-medium tracking-wide mt-1"></p>
|
||||
</div>
|
||||
<div class="flex flex-wrap items-center gap-4 md:gap-6">
|
||||
<div class="relative">
|
||||
<button type="button" id="lb-download" aria-haspopup="true" aria-expanded="false" class="group inline-flex items-center gap-2 px-6 py-2.5 bg-neutral-700/80 hover:bg-neutral-600/80 text-gray-200 hover:text-white font-semibold text-xs uppercase tracking-widest rounded-full border border-black/60 shadow-lg shadow-black/30 ring-1 ring-white/5 transition-all duration-200 transform hover:scale-105 active:scale-95 active:duration-75">
|
||||
<svg id="lb-dl-arrow" xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 transition-colors duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v12m0 0l-4-4m4 4l4-4M4 19h16"/></svg>
|
||||
Ladda ner
|
||||
</button>
|
||||
<div id="lb-sizes" class="hidden absolute bottom-full mb-3 left-0 md:left-auto md:right-0 min-w-[260px] bg-neutral-900/95 backdrop-blur-md border border-white/10 rounded-xl shadow-2xl z-50 overflow-hidden origin-bottom opacity-0 translate-y-2 transition-all duration-200 ease-out">
|
||||
<button type="button" data-size="s" class="dl-opt w-full text-left group flex items-center justify-between px-5 py-3.5 text-sm text-gray-200 hover:bg-black/40 hover:text-white cursor-pointer transition-colors border-b border-white/5"><span class="font-medium uppercase tracking-widest text-xs">Liten</span><span class="text-gray-400 text-xs font-mono group-hover:text-gray-300 transition-colors">800 px</span></button>
|
||||
<button type="button" data-size="m" class="dl-opt w-full text-left group flex items-center justify-between px-5 py-3.5 text-sm text-gray-200 hover:bg-black/40 hover:text-white cursor-pointer transition-colors border-b border-white/5"><span class="font-medium uppercase tracking-widest text-xs">Mellan</span><span class="text-gray-400 text-xs font-mono group-hover:text-gray-300 transition-colors">1600 px</span></button>
|
||||
<button type="button" data-size="l" class="dl-opt w-full text-left group flex items-center justify-between px-5 py-3.5 text-sm text-gray-200 hover:bg-black/40 hover:text-white cursor-pointer transition-colors border-b border-white/5"><span class="font-medium uppercase tracking-widest text-xs">Stor</span><span class="text-gray-400 text-xs font-mono group-hover:text-gray-300 transition-colors">3000 px</span></button>
|
||||
<button type="button" data-size="orig" class="dl-opt w-full text-left group flex items-center justify-between px-5 py-3.5 text-sm text-gray-200 hover:bg-black/40 hover:text-white cursor-pointer transition-colors "><span class="font-medium uppercase tracking-widest text-xs">Original<span class="block text-[10px] text-gray-400 normal-case tracking-normal mt-0.5">Kräver lösenord</span></span><span class="text-gray-400 text-xs font-mono group-hover:text-gray-300 transition-colors">full storlek</span></button>
|
||||
</div>
|
||||
</div>
|
||||
<a href="/posters" class="inline-flex items-center gap-2 px-6 py-2.5 bg-neutral-700/80 hover:bg-neutral-600/80 text-gray-200 hover:text-white font-semibold text-xs uppercase tracking-widest rounded-full border border-black/60 shadow-lg shadow-black/30 ring-1 ring-white/5 transition-all duration-200 transform hover:scale-105">
|
||||
Köp som poster
|
||||
</a>
|
||||
<div class="flex flex-wrap gap-3 md:gap-6 text-xs md:text-sm font-mono text-gray-300">
|
||||
<div class="flex flex-col md:flex-row md:items-center gap-1"><span class="text-gray-400 uppercase text-[10px] font-bold">Brännvidd</span><span id="lb-focal">--</span></div>
|
||||
<div class="flex flex-col md:flex-row md:items-center gap-1"><span class="text-gray-400 uppercase text-[10px] font-bold">Bländare</span><span id="lb-fstop">--</span></div>
|
||||
@@ -249,21 +233,6 @@ const uniqueMonths = [...new Map(allMonths.map(item => [item.name, item])).value
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Lösenordsruta för ORIGINAL. Originalen ligger inte i repot (27–70 MB/st)
|
||||
utan hämtas från Immich via /download/original, som kräver lösenord. -->
|
||||
<div id="pw-modal" role="dialog" aria-modal="true" aria-labelledby="pw-title" class="hidden fixed inset-0 z-[60] bg-black/85 backdrop-blur-sm flex items-center justify-center p-4">
|
||||
<div class="bg-neutral-900 border border-white/10 rounded-xl shadow-2xl p-7 w-full max-w-sm">
|
||||
<p id="pw-title" class="text-white font-bold text-lg tracking-tight mb-1">Ladda ner original</p>
|
||||
<p class="text-gray-400 text-sm mb-4">Originalfilen är i full upplösning och kräver lösenord.</p>
|
||||
<input id="pw-input" type="password" aria-label="Lösenord" placeholder="Lösenord" autocomplete="current-password"
|
||||
class="w-full bg-black/60 border border-white/20 rounded-lg text-white px-4 py-2.5 mb-2 focus:outline-none focus:border-white/60 focus:ring-1 focus:ring-white/20 transition" />
|
||||
<p id="pw-error" class="hidden text-red-400 text-xs tracking-wide mb-2">Fel lösenord — försök igen.</p>
|
||||
<div class="flex gap-2 justify-end mt-2">
|
||||
<button type="button" id="pw-cancel" class="px-5 py-2.5 text-xs uppercase tracking-widest text-gray-400 hover:text-white rounded-full transition-colors">Avbryt</button>
|
||||
<button type="button" id="pw-ok" class="px-5 py-2.5 text-xs uppercase tracking-widest bg-white text-black font-bold rounded-full hover:bg-gray-200 transition transform hover:scale-105">Ladda ner</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -276,7 +245,7 @@ const uniqueMonths = [...new Map(allMonths.map(item => [item.name, item])).value
|
||||
function statsItem(item?: HTMLElement): string {
|
||||
return item?.dataset.stat || 'portfolio/okand';
|
||||
}
|
||||
function stat(kind: 'view' | 'open' | 'download', item: string) {
|
||||
function stat(kind: 'view' | 'open', item: string) {
|
||||
try {
|
||||
const body = new Blob([JSON.stringify({ kind, item })], { type: 'text/plain' });
|
||||
navigator.sendBeacon?.(STATS_URL, body);
|
||||
@@ -348,115 +317,6 @@ const uniqueMonths = [...new Map(allMonths.map(item => [item.name, item])).value
|
||||
document.body.style.overflow = 'hidden';
|
||||
}
|
||||
|
||||
// --- NEDLADDNING (Small/Medium/Large ur repot, Original via proxy) ---
|
||||
const dlBtn = document.getElementById('lb-download');
|
||||
const dlMenu = document.getElementById('lb-sizes');
|
||||
const pwModal = document.getElementById('pw-modal');
|
||||
const pwInput = document.getElementById('pw-input') as HTMLInputElement;
|
||||
const pwError = document.getElementById('pw-error');
|
||||
|
||||
// Small/Medium/Large är EXIF-fria JPG:er som Astro tar fram vid bygget
|
||||
// (data-dl-s/m/l). Original hämtas från Immich via proxyn och kräver lösenord.
|
||||
function urlForSize(size: string): string | null {
|
||||
const item = visibleItems[currentImageIndex];
|
||||
if (!item) return null;
|
||||
if (size === 's') return item.dataset.dlS || null;
|
||||
if (size === 'm') return item.dataset.dlM || null;
|
||||
if (size === 'l') return item.dataset.dlL || null;
|
||||
if (size === 'orig') return item.dataset.asset ? `/download/original?asset=${item.dataset.asset}` : null;
|
||||
return null;
|
||||
}
|
||||
|
||||
function fileNameFor(size: string): string {
|
||||
const item = visibleItems[currentImageIndex];
|
||||
const key = (item?.dataset.key || 'bild').replace(/[^\w\-]/g, '_');
|
||||
return `imagesbyolofsson-${key}-${size}.jpg`;
|
||||
}
|
||||
|
||||
function startDownload(url: string, filnamn?: string) {
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = filnamn || '';
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
a.remove();
|
||||
}
|
||||
|
||||
const dlArrow = document.getElementById('lb-dl-arrow');
|
||||
|
||||
function visaMeny(visa: boolean) {
|
||||
if (!dlMenu) return;
|
||||
// Pilen går grå medan menyn är öppen och tillbaka till vanligt när den stängs
|
||||
// (både vid val av storlek och när man klickar bort menyn).
|
||||
dlArrow?.classList.toggle('text-gray-500', visa);
|
||||
dlBtn?.setAttribute('aria-expanded', visa ? 'true' : 'false');
|
||||
if (visa) {
|
||||
dlMenu.classList.remove('hidden');
|
||||
requestAnimationFrame(() => dlMenu.classList.remove('opacity-0', 'translate-y-2'));
|
||||
} else {
|
||||
dlMenu.classList.add('opacity-0', 'translate-y-2');
|
||||
setTimeout(() => dlMenu.classList.add('hidden'), 180);
|
||||
}
|
||||
}
|
||||
|
||||
dlBtn?.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
visaMeny(dlMenu?.classList.contains('hidden') ?? true);
|
||||
});
|
||||
|
||||
document.addEventListener('click', (e) => {
|
||||
if (!dlMenu || dlMenu.classList.contains('hidden')) return;
|
||||
if (!dlMenu.contains(e.target as Node) && !dlBtn?.contains(e.target as Node)) visaMeny(false);
|
||||
});
|
||||
|
||||
document.querySelectorAll('.dl-opt').forEach((opt) => {
|
||||
opt.addEventListener('click', () => {
|
||||
const size = (opt as HTMLElement).dataset.size || 'l';
|
||||
visaMeny(false);
|
||||
const url = urlForSize(size);
|
||||
if (!url) { alert('Den storleken saknas för den här bilden.'); return; }
|
||||
stat('download', statsItem(visibleItems[currentImageIndex]));
|
||||
if (size === 'orig') {
|
||||
// Lösenordet sparas bara för fliken, aldrig i localStorage.
|
||||
const sparat = sessionStorage.getItem('dlpw');
|
||||
if (sparat) { startDownload(`${url}&pw=${encodeURIComponent(sparat)}`); return; }
|
||||
pwError?.classList.add('hidden');
|
||||
if (pwInput) pwInput.value = '';
|
||||
pwModal?.classList.remove('hidden');
|
||||
setTimeout(() => pwInput?.focus(), 50);
|
||||
} else {
|
||||
startDownload(url, fileNameFor(size));
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
async function forsokOriginal() {
|
||||
const pw = pwInput?.value || '';
|
||||
if (!pw) return;
|
||||
const url = urlForSize('orig');
|
||||
if (!url) return;
|
||||
// HEAD först: då får vi 401 utan att dra igång en 70 MB-nedladdning.
|
||||
try {
|
||||
const r = await fetch(`${url}&pw=${encodeURIComponent(pw)}`, { method: 'HEAD' });
|
||||
if (r.status === 401) { pwError?.classList.remove('hidden'); return; }
|
||||
if (!r.ok) { alert('Kunde inte hämta originalet just nu.'); return; }
|
||||
} catch { /* nätverksfel -> försök ändå nedan */ }
|
||||
sessionStorage.setItem('dlpw', pw);
|
||||
pwModal?.classList.add('hidden');
|
||||
startDownload(`${url}&pw=${encodeURIComponent(pw)}`);
|
||||
}
|
||||
|
||||
document.getElementById('pw-ok')?.addEventListener('click', forsokOriginal);
|
||||
pwInput?.addEventListener('keydown', (e) => { if ((e as KeyboardEvent).key === 'Enter') forsokOriginal(); });
|
||||
document.getElementById('pw-cancel')?.addEventListener('click', () => pwModal?.classList.add('hidden'));
|
||||
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if ((e as KeyboardEvent).key === 'Escape' && !dlMenu?.classList.contains('hidden')) {
|
||||
e.stopImmediatePropagation();
|
||||
visaMeny(false);
|
||||
}
|
||||
}, true);
|
||||
|
||||
function closeLightbox() {
|
||||
lightbox?.classList.add('opacity-0');
|
||||
setTimeout(() => {
|
||||
@@ -468,8 +328,6 @@ const uniqueMonths = [...new Map(allMonths.map(item => [item.name, item])).value
|
||||
function updateLightboxContent() {
|
||||
const item = visibleItems[currentImageIndex];
|
||||
if (!item) return;
|
||||
visaMeny(false);
|
||||
|
||||
// srcset först så att webbläsaren väljer 800/1600/3000 px efter skärmen.
|
||||
lbImg.srcset = item.dataset.srcset || '';
|
||||
lbImg.src = item.dataset.src || '';
|
||||
|
||||
Reference in New Issue
Block a user