From 1468f1e536bdc6456164e3b8afb3599b004743ee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julian=20T=C3=B6lle?= <julian.toelle97@gmail.com>
Date: Sat, 4 Nov 2023 02:01:36 +0100
Subject: [PATCH] feat: add metadata (OpenGraph)

---
 src/lib/image.svelte      |  6 +++++-
 src/routes/+layout.svelte | 23 ++++++++++++++++++++---
 2 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/src/lib/image.svelte b/src/lib/image.svelte
index f3410db..8d33c03 100644
--- a/src/lib/image.svelte
+++ b/src/lib/image.svelte
@@ -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}>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 5bb7bb4..cbae9e7 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -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">