From 1c84e0c9527da0bfa31cf803eab44ac8b5aa73c6 Mon Sep 17 00:00:00 2001
From: laraproto <laraproto@proton.me>
Date: Sat, 25 Jan 2025 18:07:53 +0200
Subject: [PATCH] add Head

---
 src/lib/components/Head.svelte | 21 +++++++++++++++++++++
 src/routes/+error.svelte       |  3 +++
 src/routes/+page.svelte        |  3 +++
 3 files changed, 27 insertions(+)
 create mode 100644 src/lib/components/Head.svelte
diff --git a/src/lib/components/Head.svelte b/src/lib/components/Head.svelte
new file mode 100644
index 0000000..5582fb2
--- /dev/null
+++ b/src/lib/components/Head.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	interface HeadProps {
+		title: string;
+		ogTitle?: string;
+		ogDescription?: string;
+		ogImage?: string;
+		ogUrl?: string;
+		articleAuthor?: string;
+	}
+
+	let { title, ogTitle = title, ogDescription, ogImage, ogUrl, articleAuthor }: HeadProps = $props();
+</script>
+
+<svelte:head>
+	<meta property="og:title" content="{ogTitle}"/>
+	{#if ogDescription} <meta property="og:description" content={ogDescription}/> {/if}
+	{#if ogImage} <meta property="og:image" content={ogImage}/> {/if}
+	{#if ogUrl} <meta property="og:url" content={ogUrl}/> {/if}
+	{#if articleAuthor} <meta property="article:author" content={articleAuthor}/> {/if}
+	<title>{title} | VilisHost</title>
+</svelte:head>
\ No newline at end of file
diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
index 6e24420..7aded0d 100644
--- a/src/routes/+error.svelte
+++ b/src/routes/+error.svelte
@@ -1,7 +1,10 @@
 <script lang="ts">
 	import { page } from '$app/state';
+	import Head from '$lib/components/Head.svelte';
 </script>
 
+<Head title="Error {page.status} | protogen.social"/>
+
 <h1 class="text-4xl font-bold">No secrets here</h1>
 <p>{page.status} {page.error?.message}</p>
 
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 1e53ec6..b373028 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,10 +1,13 @@
 <script lang="ts">
 	import { formatDistanceToNow } from 'date-fns';
+	import Head from '$lib/components/Head.svelte';
 
 	const prevDate = new Date(2023, 7, 5)
 
 </script>
 
+<Head title="protogen.social" />
+
 <h1 class="text-4xl font-bold">protogen.social</h1>
 <p>I intend to make protogen.social return sometime in the future, if i'm ever able to recover it's data</p>
 <p>The server used to host it is currently down and frankly, I don't know when it might be coming back, I do hope it will tho as i've been damn proud of the mastodon instance i've been running for <span class="font-bold">{formatDistanceToNow(prevDate)}</span> now</p>
