feat(website): ✨ add embed metadata

website/src/app.html

@@ -11,6 +11,8 @@
 	<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#ffa360">
 	<meta name="msapplication-TileColor" content="#da532c">
 	<meta name="theme-color" content="#f8e4d5">
+	<meta content="https://pesde.daimond113.com" property="og:url" />
+	<meta content="https://pesde.daimond113.com/logo.png" property="og:image" />
 	%sveltekit.head%
 </head>
 

website/src/routes/+layout.svelte

@@ -50,7 +50,7 @@
 	<header
 		class="flex-0 flex flex-col lg:flex-row relative items-center gap-4 lg:gap-0 min-h-12 w-full"
 	>
-		<div class="flex items-center gap-8">
+		<div class="flex items-center gap-8 z-10">
 			<a href="/" class="inline-block lg:absolute top-0 left-0">
 				<img src="/logo.svg" alt="pesde" class="h-12" />
 			</a>
@@ -69,10 +69,10 @@
 					<Menu class="size-8" />
 				</button>
 				<div
-					class="absolute top-8 right-0 bg-paper-1-alt z-10 flex flex-col gap-4 px-2 py-4 rounded-md *:no-underline *:text-standard-text hover:*:brightness-110 *:max-w-60 *:w-max"
+					class="absolute top-8 right-0 bg-paper-1-alt z-10 flex flex-col gap-4 p-4 rounded-md *:no-underline *:text-standard-text hover:*:brightness-110 *:max-w-60"
 					class:hidden={!linksOpen}
 				>
-					<a href="https://github.com/daimond113/pesde">GitHub Repository</a>
+					<a href="https://github.com/daimond113/pesde" class="w-max">GitHub Repository</a>
 					<a href="/policies">Policies</a>
 				</div>
 			</div>

website/src/routes/+page.svelte

@@ -2,10 +2,16 @@
 	import type { PageData } from './$types';
 
 	export let data: PageData;
+
+	const tagline =
+		'pesde is a package manager for Roblox that is designed to be feature-rich and easy to use.';
 </script>
 
 <svelte:head>
 	<title>pesde</title>
+	<meta content="pesde" property="og:title" />
+	<meta content={tagline} name="description" />
+	<meta content={tagline} property="og:description" />
 </svelte:head>
 
 <section
@@ -15,7 +21,7 @@
 		pesde - the feature-rich Roblox package manager
 	</h1>
 	<div class="text-xl font-medium text-balance">
-		pesde is a package manager for Roblox that is designed to be feature-rich and easy to use.
+		{tagline}
 	</div>
 	<div>
 		<a

website/src/routes/packages/[scope]/[name]/[version]/+page.svelte

@@ -60,6 +60,11 @@
 
 <svelte:head>
 	<title>{data.scope}/{data.name}@{data.version}</title>
+	<meta content="{data.scope}/{data.name}@{data.version} - pesde" property="og:title" />
+	{#if data.description}
+		<meta content={data.description} name="description" />
+		<meta content={data.description} property="og:description" />
+	{/if}
 </svelte:head>
 
 <div class="flex flex-col lg:flex-row">

website/src/routes/policies/+page.svelte

@@ -1,5 +1,8 @@
 <svelte:head>
 	<title>Policies</title>
+	<meta content="Policies for content on the public pesde registry" property="og:title" />
+	<meta content="Rules about content on the public pesde registry" name="description" />
+	<meta content="Rules about content on the public pesde registry" property="og:description" />
 </svelte:head>
 
 <div class="max-w-prose">