From f41bbf36847c014e889908eee734b744b533d78b Mon Sep 17 00:00:00 2001
From: cirroskais <cirroskais@madhouselabs.net>
Date: Mon, 22 Apr 2024 08:46:37 -0400
Subject: [PATCH] meta component

---
 src/lib/components/Meta.svelte      | 24 ++++++++++++++++++++++++
 src/routes/+layout.svelte           | 17 ++++-------------
 src/routes/+page.svelte             |  5 ++---
 src/routes/blog/+page.svelte        |  5 ++---
 src/routes/blog/[slug]/+page.svelte |  6 +++---
 src/routes/projects/+page.svelte    |  9 ++++++---
 static/blog/hardware.md             |  2 +-
 7 files changed, 42 insertions(+), 26 deletions(-)
 create mode 100644 src/lib/components/Meta.svelte

diff --git a/src/lib/components/Meta.svelte b/src/lib/components/Meta.svelte
new file mode 100644
index 0000000..184f08d
--- /dev/null
+++ b/src/lib/components/Meta.svelte
@@ -0,0 +1,24 @@
+<script>
+	import { page } from '$app/stores';
+
+	export let title = '',
+		image = '',
+		descripton = '',
+		bigImage = '';
+
+	// hate
+	page.subscribe((_) => {
+		if (!image.length) image = _.url.origin + '/api/avatar';
+	});
+</script>
+
+<svelte:head>
+	<title>{title}</title>
+	<meta property="og:title" content={title} />
+	{#if bigImage.length}
+		<meta property="og:thumbnail" content={bigImage} />
+	{:else}
+		<meta property="og:image" content={image} />
+	{/if}
+	<meta property="og:description" content={descripton} />
+</svelte:head>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 1bfa647..01de0fc 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -4,25 +4,16 @@
 	import { page } from '$app/stores';
 	import { fade } from 'svelte/transition';
 
+	import config from '$lib/config';
+
 	import Header from '$lib/components/Header.svelte';
 	import Footer from '$lib/components/Footer.svelte';
-
-	let avatarApi = '';
-
-	page.subscribe((pg) => {
-		const url = new URL(pg.url);
-		url.pathname = '/api/avatar';
-		avatarApi = url.toString();
-	});
 </script>
 
 <svelte:head>
-	<link href="https://chadthundercock.com/@cirroskais" rel="me" />
-	<link rel="icon" type="image/png" href={avatarApi} />
-	<meta property="og:title" content={$page.data.discord.username} />
+	<link href={config.FEDIVERSE} rel="me" />
+	<link rel="icon" type="image/png" href={$page.url.origin + '/api/avatar'} />
 	<meta property="og:url" content={$page.url.toString()} />
-	<meta property="og:image" content={avatarApi} />
-	<meta property="og:description" content="snow leopard that likes computers." />
 	<meta property="og:site_name" content={$page.url.hostname} />
 	<meta name="theme-color" content="#c4bef3" />
 </svelte:head>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 20c8b01..f08a79b 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -2,6 +2,7 @@
 	import { page } from '$app/stores';
 	import config from '$lib/config';
 
+	import Meta from '$lib/components/Meta.svelte';
 	import SocialIcon from '$lib/components/Home/SocialIcon.svelte';
 	import HeroContainer from '$lib/components/Home/HeroContainer.svelte';
 	import ImgButton from '$lib/components/Home/Button.svelte';
@@ -15,9 +16,7 @@
 	import Bluesky from '$lib/components/Icons/Bluesky.svelte';
 </script>
 
-<svelte:head>
-	<title>/{$page.data.discord?.username}/home</title>
-</svelte:head>
+<Meta title="{$page.data.discord?.username}/home" descripton="snow leopard that likes computers" />
 
 <div class="hero w-full h-[calc(100vh-5.125rem)] rounded-lg mx-auto my-auto">
 	<div class="flex p-4 h-full rounded-lg">
diff --git a/src/routes/blog/+page.svelte b/src/routes/blog/+page.svelte
index 7f1fe90..d4bbbf1 100644
--- a/src/routes/blog/+page.svelte
+++ b/src/routes/blog/+page.svelte
@@ -3,6 +3,7 @@
 	import { page } from '$app/stores';
 	import blog from '$lib/blog';
 
+	import Meta from '$lib/components/Meta.svelte';
 	import ListedPost from '$lib/components/Blog/ListedPost.svelte';
 	import Back from '$lib/components/Icons/Back.svelte';
 	import Next from '$lib/components/Icons/Next.svelte';
@@ -35,9 +36,7 @@
 	});
 </script>
 
-<svelte:head>
-	<title>/{$page.data.discord?.username}/blog</title>
-</svelte:head>
+<Meta title="{$page.data.discord?.username}/home" descripton="snow leopard that likes computers" />
 
 <div class="flex flex-col w-full">
 	<div class="flex flex-col my-auto space-y-2">
diff --git a/src/routes/blog/[slug]/+page.svelte b/src/routes/blog/[slug]/+page.svelte
index 0d9fbbf..263007f 100644
--- a/src/routes/blog/[slug]/+page.svelte
+++ b/src/routes/blog/[slug]/+page.svelte
@@ -11,6 +11,8 @@
 
 	export let data;
 
+	import Meta from '$lib/components/Meta.svelte';
+
 	let markdown = '';
 	let thisPost = blog.find((post) => post.slug === data.slug);
 
@@ -30,9 +32,7 @@
 	});
 </script>
 
-<svelte:head>
-	<title>/{$page.data.discord?.username}/blog/{thisPost?.slug}</title>
-</svelte:head>
+<Meta title="{$page.data.discord?.username}/blog/{thisPost?.slug}" bigImage={thisPost?.image} />
 
 <div class="flex flex-col mx-auto space-y-2 max-w-[65ch]">
 	<div class="mx-auto w-full">
diff --git a/src/routes/projects/+page.svelte b/src/routes/projects/+page.svelte
index 762de34..ecd719f 100644
--- a/src/routes/projects/+page.svelte
+++ b/src/routes/projects/+page.svelte
@@ -1,10 +1,13 @@
 <script>
 	import { page } from '$app/stores';
+
+	import Meta from '$lib/components/Meta.svelte';
 </script>
 
-<svelte:head>
-	<title>/{$page.data.discord?.username}/projects</title>
-</svelte:head>
+<Meta
+	title="{$page.data.discord?.username}/projects"
+	descripton="snow leopard that likes computers"
+/>
 
 <div class="flex w-full h-[calc(100vh-5.125rem)]">
 	<p class="m-auto text-2xl italic text-neutral-700">
diff --git a/static/blog/hardware.md b/static/blog/hardware.md
index e5c114d..e2185bb 100644
--- a/static/blog/hardware.md
+++ b/static/blog/hardware.md
@@ -1,6 +1,6 @@
 ## My Devices
 
-I currently own/administrate 3 devices. Here's there specs.
+I currently own/administrate 3 devices. Here's the specs.
 
 ### :archlinux: :windows10: Desktop (cirro-desktop)