From 7c8e9fc1a0ae406f674b90978ab5077586ac3383 Mon Sep 17 00:00:00 2001
From: Luca Bosin <luca@bosin.ch>
Date: Mon, 28 Aug 2023 08:39:37 +0200
Subject: [PATCH] Update thumbnail URL structure

---
 src/lib/components/Gallery.svelte               |  5 ++---
 src/lib/components/Photo.svelte                 | 17 ++++++++++-------
 .../[[timestamp]]/i/[...item]/+page.svelte      |  6 +-----
 .../[width]/[...item]}/+server.ts               |  0
 .../[width]/[...item]}/.thumbnail               |  0
 5 files changed, 13 insertions(+), 15 deletions(-)
 rename src/routes/[slug]/[[timestamp]]/{i/[...item]/t/[[width]] => t/[width]/[...item]}/+server.ts (100%)
 rename src/routes/[slug]/[[timestamp]]/{i/[...item]/t/[[width]] => t/[width]/[...item]}/.thumbnail (100%)

diff --git a/src/lib/components/Gallery.svelte b/src/lib/components/Gallery.svelte
index fd07a6d..8645dbf 100644
--- a/src/lib/components/Gallery.svelte
+++ b/src/lib/components/Gallery.svelte
@@ -8,14 +8,13 @@
   export let items: Item[] | null = null;
 
   /** Base URL */
-  export let base = '';
+  export let base: string;
 </script>
 
 <section>
   <ul>
     {#each (items || album.items) as item (item.item)}
-      {@const src = `${base}${item.item}`}
-      <Photo {src} {album} {item} />
+      <Photo {base} {album} {item} />
     {/each}
   </ul>
 </section>
diff --git a/src/lib/components/Photo.svelte b/src/lib/components/Photo.svelte
index 9e567aa..6a5c501 100644
--- a/src/lib/components/Photo.svelte
+++ b/src/lib/components/Photo.svelte
@@ -3,8 +3,8 @@
 	import { getFileName } from "$lib/util/links";
 	import Icon from "./Icon.svelte";
 
-  /** The source of the image. */
-  export let src: string;
+  /** The base url of the image. */
+  export let base: string;
 
   /** The album. */
   export let album: Album;
@@ -29,6 +29,9 @@
     console.log('right click', event);
   }
 
+  const thumbnail = (size: number | 's' | 'm' | 'l' | 'full' = 's') => `${base}/t/${size}/${item.item}`;
+  const detailsPage = () => `${base}/i/${item.item}`;
+
   $: filename = getFileName(item.item);
   $: alt = (item.title ? $strf(item.title) : null) || (item.description ? $strf(item.description) : null) || filename;
   $: title = item.title ? $strf(item.title) : filename;
@@ -48,18 +51,18 @@
 </script>
 
 <li aria-label={title} aria-details={alt}>
-  <figure style="--image: url('{src}/t/3')">
+  <figure style:--image="url('{thumbnail(3)}')">
     <picture>
-      <source media="(min-width: 2560px)" srcset="{src}/t/l" />
-      <source media="(min-width: 1600px)" srcset="{src}/t/m" />
-      <img src="{src}/t" {alt} loading={lazy ? 'lazy' : 'eager'} {title} />
+      <source media="(min-width: 2560px)" srcset={thumbnail('l')} />
+      <source media="(min-width: 1600px)" srcset={thumbnail('m')} />
+      <img src={thumbnail()} {alt} loading={lazy ? 'lazy' : 'eager'} {title} />
     </picture>
     <figcaption>
       <strong>{title}</strong>
       <cite>{author}</cite>
     </figcaption>
   </figure>
-  <a href={src} tabindex="0" aria-label={$str('open-name', title)} on:click={clickHandler} on:contextmenu={rightClickHandler}>
+  <a href={detailsPage()} tabindex="0" aria-label={$str('open-name', title)} on:click={clickHandler} on:contextmenu={rightClickHandler}>
     <Icon class="icon" mdi="arrow-expand" size={2.25}/>
   </a>
 </li>
diff --git a/src/routes/[slug]/[[timestamp]]/i/[...item]/+page.svelte b/src/routes/[slug]/[[timestamp]]/i/[...item]/+page.svelte
index 99d8610..1444d8b 100644
--- a/src/routes/[slug]/[[timestamp]]/i/[...item]/+page.svelte
+++ b/src/routes/[slug]/[[timestamp]]/i/[...item]/+page.svelte
@@ -6,11 +6,7 @@
 </script>
 
 <div class="container">
-  {#if data.item}
-    <img class="image" src="{data.filename}/t/full" alt={(data.item.title ? $strf(data.item.title) : null) || (data.item.description ? $strf(data.item.description) : null) || data.filename} />
-  {:else}
-    Deine Mudda
-  {/if}
+  <img class="image" src="{data.base}/t/full/{data.item?.item}" alt={(data.item?.title ? $strf(data.item.title) : null) || (data.item?.description ? $strf(data.item.description) : null) || data.filename} />
 </div>
 
 <style>
diff --git a/src/routes/[slug]/[[timestamp]]/i/[...item]/t/[[width]]/+server.ts b/src/routes/[slug]/[[timestamp]]/t/[width]/[...item]/+server.ts
similarity index 100%
rename from src/routes/[slug]/[[timestamp]]/i/[...item]/t/[[width]]/+server.ts
rename to src/routes/[slug]/[[timestamp]]/t/[width]/[...item]/+server.ts
diff --git a/src/routes/[slug]/[[timestamp]]/i/[...item]/t/[[width]]/.thumbnail b/src/routes/[slug]/[[timestamp]]/t/[width]/[...item]/.thumbnail
similarity index 100%
rename from src/routes/[slug]/[[timestamp]]/i/[...item]/t/[[width]]/.thumbnail
rename to src/routes/[slug]/[[timestamp]]/t/[width]/[...item]/.thumbnail