Move to TypeScript

src/lib/components/Gallery.svelte

@@ -1,12 +1,13 @@
-<script>
+<script type="ts">
 	import Photo from './Photo.svelte';
 
-  /** @type {Album} */
-  export let album;
+  /** The album. */
+  export let album: Album;
 
-  /** @type {Item[]?} */
-  export let items = null;
+  /** The items to show. Set to `null` (or leave unset) to use all items of the album. */
+  export let items: Item[] | null = null;
 
+  /** Base URL */
   export let base = '';
 </script>
 

src/lib/components/Header.svelte

@@ -1,10 +1,9 @@
-<script>
+<script type="ts">
 	import Icon from "./Icon.svelte";
 
   export let title = 'Galerie';
   export let description = '';
-  /** @type {string | undefined} */
-  export let back = undefined;
+  export let back: string | undefined = undefined;
 </script>
 
 <header>

src/lib/components/Icon.svelte

@@ -1,30 +1,28 @@
-<script>
+<script type="ts">
+  /** Class name for additional CSS styling */
   export let clazz = '';
   export { clazz as class };
+
+  /** Icon color. */
   export let color = 'currentColor';
 
-  /** @type {string} */
-  export let mdi;
+  /** Material Design Icons icon name */
+  export let mdi: string;
 
-  /** @type {number | string} */
-  export let size = 1;
+  /** Icon size. Numbers are treated as `<value>em`, strings as `<value>`. */
+  export let size: number | string = 1;
 
   let mdiOld = '';
   let path = '';
 
-  $: {
-    loadIcon(mdi);
-  }
+  $: loadIcon(mdi);
 
   $: width = size ? (typeof size === 'number' || !Number.isNaN(Number(size)) ? `${size}em` : size) : '1em';
 
-  /**
-	 * @param {string} mdi
-	 */
-  async function loadIcon(mdi) {
+  /** Load the icon from the `$lib/icons` folder. */
+  async function loadIcon(mdi: string) {
     if (mdi === mdiOld) return;
     path = (await import(`$lib/icons/${mdi}.js`)).default;
-    //path = icon.path;
   }
 </script>
 

src/lib/components/Photo.svelte

@@ -1,43 +1,28 @@
-<script>
+<script type="ts">
 	import { strf } from "$lib/data/language";
 	import { getFileName } from "$lib/util/links";
 	import Icon from "./Icon.svelte";
 
-  /**
-   * The source of the image.
-   * @type {string}
-   */
-  export let src;
+  /** The source of the image. */
+  export let src: string;
 
-  /** @type {Album} */
-  export let album;
+  /** The album. */
+  export let album: Album;
 
-  /**
-   * The item.
-   * @type {Item}
-   */
-  export let item;
+  /** The item. */
+  export let item: Item;
 
-  /**
-   * Whether the image is the first one in the viewport.
-   * @type {boolean}
-   */
+  /** Whether the image is the first one in the viewport. */
   export let lazy = false;
 
-  /**
-   * The click handler for the image.
-   * @param {MouseEvent} event
-   */
-  async function clickHandler(event) {
+  /** The click handler for the image. */
+  async function clickHandler(event: MouseEvent) {
     event.preventDefault();
     console.log('click', event);
   }
 
-  /**
-   * The right click handler for the image.
-   * @param {MouseEvent} event
-   */
-  async function rightClickHandler(event) {
+  /** The right click handler for the image. */
+  async function rightClickHandler(event: MouseEvent) {
     event.preventDefault();
     console.log('right click', event);
   }
@@ -83,22 +68,24 @@
     height: fit-content;
     border-radius: 10px;
     overflow: hidden;
-    min-width: 30vw;
+    min-width: 28.125em
   }
 
   figure {
-    width: 30vw;
-    height: 20vw;
+    width: 28.125em;
+    height: 18.75em;
     background-color: rgba(0,0,0,.25);
-    background-image: var(--image);
+    background-image: linear-gradient(rgba(0,0,0,.125), rgba(0,0,0,.25)), var(--image);
     background-position: center;
     background-size: cover;
   }
 
   img {
-    width: 30vw;
-    height: 20vw;
+    position: absolute;
+    width: 28.125em;
+    height: 18.75em;
     object-fit: contain;
+    top: 0;
   }
 
   figcaption {