meta component

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>

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>

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">

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">

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">

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">

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)