Begin SEO and accessibility optimizations

This commit is contained in:
Luca Bosin
2023-08-25 16:48:04 +02:00
parent 447077835e
commit 5ecaa5560d
7 changed files with 33 additions and 6 deletions

7
src/app.d.ts vendored
View File

@ -2,7 +2,12 @@
// for information about these interfaces
declare global {
namespace App {
// interface Error {}
/*
interface Error {
code: string;
id: string;
}
*/
// interface Locals {}
// interface PageData {}
// interface Platform {}

View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en">
<html lang="%lang%">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />

12
src/hooks.server.ts Normal file
View File

@ -0,0 +1,12 @@
import type { Handle } from '@sveltejs/kit';
function getLanguage(event: any) {
console.log("Getting language from event", event);
return 'de';
}
export const handle: Handle = ({ event, resolve }) => {
return resolve(event, {
transformPageChunk: ({ html }) => html.replace('%lang%', getLanguage(event)),
});
};

View File

@ -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>

View File

@ -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',
}

View File

@ -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) :''}`;
}

View File

@ -1,5 +1,11 @@
<script lang="ts">
import { page } from '$app/stores';
import "$lib/styles/base.css";
</script>
<svelte:head>
<title>{$page.data.title || 'Galerie'} | bosin.ch</title>
<meta name="description" content={$page.data.description || 'Fotogalerie von Luca Bosin'} />
</svelte:head>
<slot />