Add responsive and lazy image loading

src/lib/components/Gallery.svelte

@@ -1,37 +1,37 @@
 <script>
 	import { getFileName } from '$lib/util/links';
   import { strf } from '$lib/data/language.js';
-
-  function sortItems() {
-    items.sort((a, b) => {
-      if (a.item < b.item) return -1;
-      if (a.item > b.item) return 1;
-      return 0;
-    });
-  }
+	import Photo from './Photo.svelte';
 
   /** @type {Item[]} */
   export let items = [];
 
   export let base = '';
+
+  export let layout = 'grid';
 </script>
 
-<section class="gallery">
-  <ul>
-  {#each items as item (item.item)}
-    <!-- <Photo src={`${uriBase}&item=${item.item}`} alt={$strf(item.title)} /> -->
-    <li>
-      <h3>{item.item}</h3>
-      <p>
-        <b>Title:</b> {#if item.title}{$strf(item.title)}{:else}<i>no title</i>{/if}<br />
-        <b>Description:</b> {#if item.description}{$strf(item.description)}{:else}<i>no description</i>{/if}<br />
-        <b>Links:</b> <a href={`${base}${item.item}`}>Open</a> &bullet; <a href={`${base}${item.item}/download`}>Download</a><br />
-        <b>Thumbnails:</b> <a href={`${base}${item.item}/t/s`}>Small</a> &bullet; <a href={`${base}${item.item}/t/m`}>Medium</a> &bullet; <a href={`${base}${item.item}/t/l`}>Large</a> &bullet; <a href={`${base}${item.item}/t/full`}>Full</a>
-      </p>
-      <img src={`${base}${item.item}/t`} alt={(item.title ? $strf(item.title) : null) || (item.description ? $strf(item.description) : null) || getFileName(item.item)} />
-    </li>
-  {/each}
-  </ul>
+<section class="gallery"
+  class:gallery--grid={layout === 'grid'}>
+  {#if layout === 'grid'}
+    <ul>
+    {#each items as item (item.item)}
+      <!-- <Photo src={`${uriBase}&item=${item.item}`} alt={$strf(item.title)} /> -->
+      <li>
+        <h3>{item.item}</h3>
+        <p>
+          <b>Title:</b> {#if item.title}{$strf(item.title)}{:else}<i>no title</i>{/if}<br />
+          <b>Description:</b> {#if item.description}{$strf(item.description)}{:else}<i>no description</i>{/if}<br />
+          <b>Links:</b> <a href={`${base}${item.item}`}>Open</a> &bullet; <a href={`${base}${item.item}/download`}>Download</a><br />
+          <b>Thumbnails:</b> <a href={`${base}${item.item}/t/s`}>Small</a> &bullet; <a href={`${base}${item.item}/t/m`}>Medium</a> &bullet; <a href={`${base}${item.item}/t/l`}>Large</a> &bullet; <a href={`${base}${item.item}/t/full`}>Full</a>
+        </p>
+        <Photo src={`${base}${item.item}`} alt={(item.title ? $strf(item.title) : null) || (item.description ? $strf(item.description) : null) || getFileName(item.item)} />
+      </li>
+    {/each}
+    </ul>
+  {:else}
+    <i>layout not available</i>
+  {/if}
 </section>
 
 <style>

src/lib/components/Photo.svelte

@@ -11,6 +11,12 @@
    */
   export let alt = undefined;
 
+  /**
+   * Whether the image is the first one in the viewport.
+   * @type {boolean}
+   */
+  export let firstViewport = false;
+
   /**
    * The click handler for the image.
    * @param {MouseEvent} event
@@ -21,10 +27,12 @@
   }
 </script>
 
-<a href="{src}" on:click={clickHandler}>
-  <figure class="photo">
-    <img src="{src}" alt="{alt}" />
-  </figure>
+<a href={src} on:click={clickHandler}>
+  <picture>
+    <source media="(min-width: 850px)" srcset="{src}/t/l" />
+    <source media="(min-width: 450px)" srcset="{src}/t/m" />
+    <img src="{src}/t" {alt} loading={firstViewport ? 'eager' : 'lazy'} />
+  </picture>
 </a>
 
 <style>

src/lib/styles/base.css

@@ -0,0 +1,34 @@
+:root {
+  --main-text-color: #1a1a1a;
+  --main-bg-color: #fff;
+}
+
+@media screen and (prefers-color-scheme: dark) {
+  :root {
+    --main-text-color: #e7e7e7;
+    --main-bg-color: #1a1a1a;
+  }
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  box-sizing: border-box;
+  font-size: 1em;
+  font-family: 'Roboto', 'Open Sans', sans-serif;
+}
+
+html,
+body,
+.container,
+.footer {
+  width: 100%;
+  max-width: 100%;
+}
+
+body {
+  font-family: sans-serif;
+  background-color: var(--main-bg-color);
+  color: var(--main-text-color);
+}

src/lib/types.d.ts

@@ -43,5 +43,3 @@ type Album = AlbumMetadata & {
 type ApiError = {
   error: string;
 };
-
-type GetFileFunction = (zipName: string, entryName: string, keepOpen: T) => Promise<T extends true ? { content: Buffer, zip: import('node-stream-zip').StreamZipAsync } : Buffer>;

src/lib/util/album.js

@@ -3,7 +3,14 @@ import StreamZip from "node-stream-zip";
 
 /** @param {string} zipName */
 async function _getZip(zipName) {
-  return new StreamZip.async({ file: `./zip/${zipName}` });
+  let zip = null;
+  try {
+    zip = new StreamZip.async({ file: `./zip/${zipName}` });
+  } catch (err) {
+    console.error(`${err.stack}`.replaceAll('/home/sveltekit', '.'));
+    throw error(404, `Album not found.`);
+  }
+  return zip;
 }
 /** @param {import('node-stream-zip').StreamZipAsync} zip @param {string} entryName */
 async function _getFile(zip, entryName) {