From 6417b110ac327bd9ac41adf5181a41d798be794a Mon Sep 17 00:00:00 2001
From: Gavin McFarland <5551+gavinmcfarland@users.noreply.github.com>
Date: Fri, 1 Nov 2024 19:40:21 +0000
Subject: [PATCH] Updated meta component

---
 packages/website/src/app.html               |  3 -
 packages/website/src/components/Meta.svelte | 81 +++++++++++----------
 packages/website/src/routes/+layout.svelte  |  5 ++
 3 files changed, 47 insertions(+), 42 deletions(-)

diff --git a/packages/website/src/app.html b/packages/website/src/app.html
index 46c0f04..878a56d 100644
--- a/packages/website/src/app.html
+++ b/packages/website/src/app.html
@@ -11,9 +11,6 @@
 	<link rel="manifest" href="/manifest.webmanifest" />
 	<meta name="viewport" content="width=device-width, initial-scale=1" />
 
-	<meta property="og:image" content="https://plugma.dev/og.png">
-	<meta property="og:site_name" content="Plugma">
-
 	%sveltekit.head%
 </head>
 
diff --git a/packages/website/src/components/Meta.svelte b/packages/website/src/components/Meta.svelte
index 875802e..cfdfffe 100644
--- a/packages/website/src/components/Meta.svelte
+++ b/packages/website/src/components/Meta.svelte
@@ -4,48 +4,51 @@
 	export let description: string | undefined = undefined;
 	export let url: string | undefined = undefined;
 	export let image: string | undefined = undefined;
+	export let site: string | undefined = undefined;
 	export let type: string | undefined = undefined;
 </script>
 
-<svelte:head>
-	<!-- Primary Meta Tags -->
-	{#if title}
-		<meta name="title" content={title} />
-	{/if}
-	{#if description}
-		<meta name="description" content={description} />
-	{/if}
+<!-- Primary Meta Tags -->
+{#if title}
+	<meta name="title" content={title} />
+{/if}
+{#if description}
+	<meta name="description" content={description} />
+{/if}
 
-	<!-- Open Graph / Facebook -->
-	{#if url}
-		<meta property="og:url" content={url} />
-	{/if}
-	{#if title}
-		<meta property="og:title" content={title} />
-	{/if}
-	{#if description}
-		<meta property="og:description" content={description} />
-	{/if}
-	{#if image}
-		<meta property="og:image" content={image} />
-	{/if}
+<!-- Open Graph / Facebook -->
+{#if url}
+	<meta property="og:url" content={url} />
+{/if}
+{#if title}
+	<meta property="og:title" content={title} />
+{/if}
+{#if description}
+	<meta property="og:description" content={description} />
+{/if}
+{#if image}
+	<meta property="og:image" content={image} />
+{/if}
 
-	{#if type}
-		<meta property="og:type" content={type} />
-	{/if}
+{#if site}
+	<meta property="og:site" content={site} />
+{/if}
 
-	<!-- Twitter -->
-	<meta property="twitter:card" content="summary_large_image" />
-	{#if url}
-		<meta property="twitter:url" content={url} />
-	{/if}
-	{#if title}
-		<meta property="twitter:title" content={title} />
-	{/if}
-	{#if description}
-		<meta property="twitter:description" content={description} />
-	{/if}
-	{#if image}
-		<meta property="twitter:image" content={image} />
-	{/if}
-</svelte:head>
+{#if type}
+	<meta property="og:type" content={type} />
+{/if}
+
+<!-- Twitter -->
+<meta property="twitter:card" content="summary_large_image" />
+{#if url}
+	<meta property="twitter:url" content={url} />
+{/if}
+{#if title}
+	<meta property="twitter:title" content={title} />
+{/if}
+{#if description}
+	<meta property="twitter:description" content={description} />
+{/if}
+{#if image}
+	<meta property="twitter:image" content={image} />
+{/if}
diff --git a/packages/website/src/routes/+layout.svelte b/packages/website/src/routes/+layout.svelte
index 13855cd..bc07652 100644
--- a/packages/website/src/routes/+layout.svelte
+++ b/packages/website/src/routes/+layout.svelte
@@ -5,6 +5,7 @@
 	import { notifications } from '@/stores';
 	import Notification from '@/components/Notification.svelte';
 	import Icon from '@/components/Icon.svelte';
+	import Meta from '@/components/Meta.svelte';
 
 	inject();
 	injectSpeedInsights();
@@ -17,6 +18,10 @@
 	let currentYear = getCurrentYear();
 </script>
 
+<svelte:head>
+	<Meta image="https://plugma.dev/og.png" site="Plugma" />
+</svelte:head>
+
 <div class="app">
 	<!-- <Header /> -->