Begin SEO and accessibility optimizations

src/lib/components/Photo.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { strf } from "$lib/data/language";
+	import { str, strf } from "$lib/data/language";
 	import { getFileName } from "$lib/util/links";
 	import Icon from "./Icon.svelte";
 
@@ -45,7 +45,7 @@
               "Luca Bosin";
 </script>
 
-<li>
+<li aria-label={title} aria-details={alt}>
   <figure style="--image: url('{src}/t/3')">
     <picture>
       <source media="(min-width: 2560px)" srcset="{src}/t/l" />
@@ -57,7 +57,7 @@
       <cite>{author}</cite>
     </figcaption>
   </figure>
-  <a href={src} on:click={clickHandler} on:contextmenu={rightClickHandler}>
+  <a href={src} 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/lib/data/language.ts

@@ -16,6 +16,7 @@ const translations: Record<TranslationKey, Record<string, string>> = {
     'medium': 'Mittel',
     'large': 'Groß',
     'open': 'Öffnen',
+    'open-name': '{0} öffnen',
     'download': 'Herunterladen',
     'download-all': 'Alle herunterladen',
   },
@@ -32,6 +33,7 @@ const translations: Record<TranslationKey, Record<string, string>> = {
     'medium': 'Medium',
     'large': 'Large',
     'open': 'Open',
+    'open-name': 'Open {0}',
     'download': 'Download',
     'download-all': 'Download all',
   }

src/lib/util/links.ts

@@ -1,3 +1,5 @@
+import { base } from '$app/paths';
+
 export function safe(str: string): string {
   return str.replace(/[^\w.-]/gi, '');
 }
@@ -18,5 +20,5 @@ export function getZipName(params: any): string {
 
 export function getAlbumUri(params: any): string {
   const { slug, timestamp } = params;
-  return `/g/${safe(slug)}${timestamp ? '/' + safe(timestamp) :''}`;
+  return `${base}/${safe(slug)}${timestamp ? '/' + safe(timestamp) :''}`;
 }