apricote/ein-pfeil-am-rechten-fleck.de
1
0
Fork 0
mirror of https://github.com/apricote/ein-pfeil-am-rechten-fleck.de.git synced 2026-01-13 21:11:01 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat: add metadata (OpenGraph)

Browse source
This commit is contained in:
Julian Tölle 2023-11-04 02:01:36 +01:00
parent 9cc5427c03
commit 1468f1e536
2 changed files with 25 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/lib/image.svelte
View file

@ -4,6 +4,10 @@
src: string;
}[];
export const getPNGSrc = (img: ImageMetadata) => {
return img.find(({ format }) => format === "png")?.src;
};
const mimeType: Record<string, string> = {
webp: "image/webp",
png: "image/png",
@ -23,7 +27,7 @@
format: mimeType[format],
srcset: src,
}));
const pngSrc = sources.find(({ format }) => format === "image/png")?.srcset;
const pngSrc = getPNGSrc(img);
</script>
<picture class={className}>

23
src/routes/+layout.svelte
View file

@ -1,15 +1,32 @@
<script>
import "../app.css";
import Image from "$lib/image.svelte";
import Image, { getPNGSrc } from "$lib/image.svelte";
import Divider from "$lib/divider.svelte";
import LogoImg from "$lib/images/logo.png?w=512";
</script>
<svelte:head>
<title>Ein Pfeil am rechten Fleck</title>
<meta name="description" content="TODO" />
<link as="font" rel="preload" href="/vinque.ttf" />
<title>Ein Pfeil am rechten Fleck</title>
<meta
name="description"
content="In diesem Hörspiel erwartet dich eine Reise in eine mittelalterliche Welt, gespickt mit einem Hauch Magie. Verfolge die Abenteuer des Unteroffiziers Beyron und des neugierigen Mädchens Blue, deren Schicksale auf unerwartete Weise miteinander verknüpft sind. Lass dich mitreißen von einer fesselnden Erzählung voller Intrigen und überraschenden Wendungen."
/>
<meta name="og:locale" content="de_DE" />
<meta name="og:type" content="website" />
<meta name="og:title" content="Hörbuch: Ein Pfeil am rechten Fleck" />
<meta
name="og:description"
content="In diesem Hörspiel erwartet dich eine Reise in eine mittelalterliche Welt, gespickt mit einem Hauch Magie."
/>
<meta name="og:image" content={getPNGSrc(LogoImg)} />
<meta name="og:image:width" content="512" />
<meta name="og:image:height" content="512" />
<meta
name="og:image:alt"
content="Logo, Illustration von einem Pfeil über einem Herz"
/>
</svelte:head>
<header class="flex justify-center">