Change many lines

src/lib/components/Footer.svelte

@@ -0,0 +1,7 @@
+<footer>
+
+</footer>
+
+<style>
+
+</style>

src/lib/components/Gallery.svelte

@@ -0,0 +1,36 @@
+<script>
+  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;
+    });
+  }
+
+  /** @type {Item[]} */
+  export let items = [];
+
+  export let base = '';
+</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> {$strf(item.title)}<br />
+        <b>Description:</b> {#if item.description}{$strf(item.description)}{:else}<i>no description</i>{/if}
+      </p>
+      <img src={`${base}&item=${item.item}`} alt={$strf(item.title)} />
+    </li>
+  {/each}
+  </ul>
+</section>
+
+<style>
+
+</style>

src/lib/components/Header.svelte

@@ -0,0 +1,20 @@
+<script>
+	import Icon from "./Icon.svelte";
+
+  export let title = 'Galerie';
+  export let description = '';
+  /** @type {string | undefined} */
+  export let back = undefined;
+</script>
+
+<header>
+  <section class="title">
+    {#if back}
+      <a href={back}>
+        <Icon name="arrow-left" />
+      </a>
+    {/if}
+    <h1>{title}</h1>
+    <p>{description}</p>
+  </section>
+</header>

src/lib/components/Icon.svelte

@@ -0,0 +1,10 @@
+<script>
+  export let name = '';
+  name;
+</script>
+
+
+
+<style>
+
+</style>

src/lib/components/Photo.svelte

@@ -0,0 +1,32 @@
+<script>
+  /**
+   * The source of the image.
+   * @type {string}
+   */
+  export let src;
+
+  /**
+   * Alternative text for the image. Used for accessibility.
+   * @type {string | undefined}
+   */
+  export let alt = undefined;
+
+  /**
+   * The click handler for the image.
+   * @param {MouseEvent} event
+   */
+  async function clickHandler(event) {
+    event.preventDefault();
+
+  }
+</script>
+
+<a href="{src}" on:click={clickHandler}>
+  <figure class="photo">
+    <img src="{src}" alt="{alt}" />
+  </figure>
+</a>
+
+<style>
+
+</style>