Update thumbnail URL structure

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 {base} {album} {item} />
-      <Photo {src} {album} {item} />
     {/each}
   </ul>
 </section>

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. */
+  /** The base url of the image. */
-  export let src: string;
+  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: 2560px)" srcset={thumbnail('l')} />
-      <source media="(min-width: 1600px)" srcset="{src}/t/m" />
+      <source media="(min-width: 1600px)" srcset={thumbnail('m')} />
-      <img src="{src}/t" {alt} loading={lazy ? 'lazy' : 'eager'} {title} />
+      <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>

src/routes/[slug]/[[timestamp]]/i/[...item]/+page.svelte

@@ -6,11 +6,7 @@
 </script>
 
 <div class="container">
-  {#if data.item}
+  <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} />
-    <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}
 </div>
 
 <style>