From a93db5fdf70fb0a6bf9c36284f0f5f60cbd26321 Mon Sep 17 00:00:00 2001
From: Mihkel Martin Kasterpalu <qpeuitovxg@use.startmail.com>
Date: Wed, 22 Jan 2025 18:08:27 +0200
Subject: [PATCH] Fix metadata and og image handling

---
 src/lib/config.ts                    |  7 ++++++-
 src/routes/(games)/+layout.server.ts |  6 +++---
 src/routes/(games)/+layout.svelte    | 16 ++++++++--------
 src/routes/+layout.svelte            |  3 ++-
 src/routes/+page.svelte              | 14 +++++++-------
 5 files changed, 26 insertions(+), 20 deletions(-)

diff --git a/src/lib/config.ts b/src/lib/config.ts
index 39bcc8f..4aed43c 100644
--- a/src/lib/config.ts
+++ b/src/lib/config.ts
@@ -1,6 +1,11 @@
 import type { GamesObj } from './types';
 
-export const siteName = 'Stuff.Kasterpalu';
+export const site = {
+	name: 'Stuff.Kasterpalu',
+	author: 'Mihkel Martin Kasterpalu',
+	description: 'Minimängud ja muud huvitavat.',
+	image: '/web-app-manifest-512x512.png'
+};
 
 export const baseURL = 'https://stuff.kasterpalu.ee';
 
diff --git a/src/routes/(games)/+layout.server.ts b/src/routes/(games)/+layout.server.ts
index 4f7e758..911b523 100644
--- a/src/routes/(games)/+layout.server.ts
+++ b/src/routes/(games)/+layout.server.ts
@@ -1,5 +1,5 @@
 import type { LayoutServerData } from './$types';
-import { games } from '$lib/config';
+import { games, site } from '$lib/config';
 
 export const load: LayoutServerData = async ({ url }) => {
 	if (!url?.pathname) {
@@ -14,7 +14,7 @@ export const load: LayoutServerData = async ({ url }) => {
 
 	return {
 		name: game.name,
-		description: game.description,
-		image: game.image
+		description: game.description || site.description,
+		image: game.image || site.image
 	};
 };
diff --git a/src/routes/(games)/+layout.svelte b/src/routes/(games)/+layout.svelte
index 2a4bf53..9d21c6d 100644
--- a/src/routes/(games)/+layout.svelte
+++ b/src/routes/(games)/+layout.svelte
@@ -1,22 +1,22 @@
 <script lang="ts">
-	import { siteName } from '$lib/config.js';
+	import { baseURL, site } from '$lib/config.js';
 
 	let { children, data } = $props();
+
+	const title = data?.name ? `${data.name} | ${site.name}` : site.name;
 </script>
 
 <svelte:head>
-	{#if data.name}
-		<title>{data.name} | {siteName}</title>
-		<meta property="og:title" content={data.name + ' | ' + siteName} />
-	{/if}
+	<title>{title}</title>
+	<meta property="og:title" content={title} />
 
-	{#if data.desctiption}
+	{#if data?.description}
 		<meta name="description" content={data.description} />
 		<meta property="og:description" content={data.description} />
 	{/if}
 
-	{#if data.image}
-		<meta property="og:image" content={data.image} />
+	{#if data?.image}
+		<meta property="og:image" content={baseURL + data.image} />
 	{/if}
 </svelte:head>
 
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index cfeb31c..465c3ae 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -9,6 +9,7 @@
 	import Sun from 'lucide-svelte/icons/sun';
 	import Moon from 'lucide-svelte/icons/moon';
 	import LaptopMinimal from 'lucide-svelte/icons/laptop-minimal';
+	import { site } from '$lib/config';
 
 	let { children } = $props();
 
@@ -29,7 +30,7 @@
 </script>
 
 <svelte:head>
-	<meta name="author" content="Mihkel Martin Kasterpalu" />
+	<meta name="author" content={site.author} />
 </svelte:head>
 
 <ModeWatcher />
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index d795cef..74e01d4 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,18 +1,18 @@
 <script lang="ts">
-	import { games, siteName, baseURL } from '$lib/config';
+	import { games, site, baseURL } from '$lib/config';
 </script>
 
 <svelte:head>
-	<title>{siteName}</title>
-	<meta property="og:title" content={siteName} />
+	<title>{site.name}</title>
+	<meta property="og:title" content={site.name} />
 
-	<meta name="description" content="Minimängud ja muud huvitavat." />
-	<meta property="og:description" content="Minimängud ja muud huvitavat." />
+	<meta name="description" content={site.description} />
+	<meta property="og:description" content={site.description} />
 
-	<meta property="og:image" content={baseURL + '/favicon.svg'} />
+	<meta property="og:image" content={baseURL + site.image} />
 </svelte:head>
 
-<header class="font-title mb-24 flex flex-col items-center">
+<header class="mb-24 flex flex-col items-center font-title">
 	<h1 class="mb-1 scroll-m-20 text-5xl font-extrabold tracking-tight lg:text-6xl">
 		stuff.kasterpalu.ee
 	</h1>