Wombosvideo/f.bosin.ch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Begin SEO and accessibility optimizations

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

7
src/app.d.ts vendored
View File

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

2
src/app.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="%lang%">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" /> <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)),
});
};

6
src/lib/components/Photo.svelte
View File

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

2
src/lib/data/language.ts
View File

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

4
src/lib/util/links.ts
View File

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

6
src/routes/+layout.svelte
View File

@ -1,5 +1,11 @@
<script lang="ts"> <script lang="ts">
import { page } from '$app/stores';
import "$lib/styles/base.css"; import "$lib/styles/base.css";
</script> </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 /> <slot />