Fixing up the og image generation, add svg background, add more input params.

src/lib/components/socialImageCard.svelte

@@ -1,36 +1,45 @@
 <script lang="ts">
-	export let title: string;
+	export let header: string;
+	export let page: string;
 	export let image: string;
-	export let description: string;
+	export let content: string;
+	export let width = 1200;
+	export let height = 630;
+	export let url: string;
 </script>
 
-<div class="social-card">
+<div class="social-card" style={`width: ${width}px; height: ${height}px;`}>
 	<div class="social-card-header">
 			<div class="social-card-title">
 				<div class="social-card-image">
 					<img src={image || '/images/bored-game.png'} alt="Bored Game" />
 				</div>
-				<p>{title}</p>
+				<h1>{header}</h1>
 			</div>
 	</div>
 	<div class="social-card-content">
-		<p>{description}</p>
+		<h2 class="page">{page}</h2>
+		<p class="content">{content}</p>
+	</div>
+	<div class="social-card-footer">
+		<footer>
+			<p>Bored Game &copy; {new Date().getFullYear()} | Built by Bradley Shellnut | {url || 'https://boredgame.vercel.app'}</p>
+		</footer>
 	</div>
 </div>
 
 <style>
 	@font-face {
-		font-family: 'Noto Sans';
+		font-family: 'Fira Sans';
-		src: url('/src/lib/NotoSans-Regular.ttf');
+		src: url('/src/lib/FiraSans-Bold.ttf');
 	}
 
 	.social-card {
 		display: flex;
 		flex-direction: column;
-		border-radius: 0.5rem;
+		justify-content: space-between;
-		border-width: 1px;
+		background-color: #DFDBE5;
-		box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+		background-image: url("data:image/svg+xml,%3Csvg width='64' height='64' viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 16c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zm33.414-6l5.95-5.95L45.95.636 40 6.586 34.05.636 32.636 2.05 38.586 8l-5.95 5.95 1.414 1.414L40 9.414l5.95 5.95 1.414-1.414L41.414 8zM40 48c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zM9.414 40l5.95-5.95-1.414-1.414L8 38.586l-5.95-5.95L.636 34.05 6.586 40l-5.95 5.95 1.414 1.414L8 41.414l5.95 5.95 1.414-1.414L9.414 40z' fill='%239C92AC' fill-opacity='0.17' fill-rule='evenodd'/%3E%3C/svg%3E");
-		width: 350px;
 	}
 
 	.social-card-header {
@@ -42,24 +51,48 @@
 
 	.social-card-title {
 		display: flex;
+		align-items: center;
 		gap: 0.25rem;
-		place-items: center;
+		font-size: 1.875rem; /* 30px */
-		font-size: 1.125rem;
+		line-height: 2.25rem; /* 36px */
-		line-height: 1.75rem;
+		font-weight: 700;
-		font-weight: 600;
 		letter-spacing: -0.025em;
-		line-height: 1;
 	}
 
 	.social-card-image {
 		display: flex;
-		width: 2rem;
+		width: 4rem;
-		height: 2rem;
+		height: 4rem;
 	}
 
 	.social-card-content {
 		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 2rem;
 		padding: 1.5rem;
 		padding-top: 0;
 	}
+
+	.page {
+		font-size: 3.75rem; /* 60px */
+		line-height: 1;
+		font-weight: 700;
+		text-transform: uppercase;
+	}
+
+	.content {
+		font-size: 1.25rem; /* 20px */
+		line-height: 1.75rem; /* 28px */
+	}
+
+	.social-card-footer {
+		display: flex;
+		padding: 1.5rem;
+		padding-top: 0;
+		align-items: center;
+		font-size: 1.25rem;
+		line-height: 1.75rem;
+		font-weight: 700;
+	}
 </style>

src/routes/(app)/+page.server.ts

@@ -3,6 +3,13 @@ import { search_schema } from '$lib/zodValidation';
 import type { MetaTagsProps } from 'svelte-meta-tags';
 
 export const load = async ({ fetch, url }) => {
+	const image = {
+		url: `${
+			new URL(url.pathname, url.origin).href
+		}og?header=Bored Game&page=Home&content=Keep track of your games`,
+		width: 1200,
+		height: 630
+	};
 	const metaTags: MetaTagsProps = Object.freeze({
 		title: 'Home',
 		description: 'Home page',
@@ -12,15 +19,19 @@ export const load = async ({ fetch, url }) => {
 			locale: 'en_US',
 			title: 'Home',
 			description: 'Bored Game, keep track of your games',
-			images: [
+			images: [image],
-				{
+			siteName: 'Bored Game'
-					url: `${
+		},
-						new URL(url.pathname, url.origin).href
+		twitter: {
-					}og?title=Home | Bored Game&description=Bored Game, keep track of your games`,
+			handle: '@boredgame',
-					width: 1200,
+			site: '@boredgame',
-					height: 630
+			cardType: 'summary_large_image',
-				}
+			title: 'Home | Bored Game',
-			]
+			description: 'Bored Game, keep track of your games',
+			image: `${
+				new URL(url.pathname, url.origin).href
+			}og?header=Bored Game&page=Home&content=Keep track of your games`,
+			imageAlt: 'Home | Bored Game'
 		}
 	});
 

src/routes/(app)/+page.svelte

@@ -2,7 +2,6 @@
 	// import TextSearch from '$lib/components/search/textSearch/index.svelte';
 	import SocialImageCard from '$components/socialImageCard.svelte';
 	import RandomSearch from '$lib/components/search/random/index.svelte';
-	import { MetaTags } from 'svelte-meta-tags';
 	import logo from '$lib/assets/bored-game.png';
 
 	// import Random from '$lib/components/random/index.svelte';
@@ -27,8 +26,7 @@
 	<!-- <TextSearch showButton advancedSearch data={data.form} /> -->
 </div>
 
-<SocialImageCard title="Home | Bored Game" icon={logo}>
+<SocialImageCard header="Bored Game" page="Home" content="Test" image={logo} width={1200} height={630}>
-	<h2>Bored Game, keep track of your games!</h2>
 </SocialImageCard>
 
 <style lang="scss">

src/routes/og/+server.ts

@@ -11,9 +11,18 @@ const width = 1200;
 export const GET: RequestHandler = async ({ url }) => {
 	try {
 		const ogImage = `${new URL(url.origin).href}images/bored-game.png`;
-		const title = url.searchParams.get('title') ?? undefined;
+		const header = url.searchParams.get('header') ?? undefined;
-		const description = url.searchParams.get('description') ?? '';
+		const page = url.searchParams.get('page') ?? undefined;
-		const result = SocialImageCard.render({ title, image: ogImage, description });
+		const content = url.searchParams.get('content') ?? '';
+		const result = SocialImageCard.render({
+			header,
+			page,
+			content,
+			image: ogImage,
+			width,
+			height,
+			url: new URL(url.origin).href
+		});
 		console.log('result', result);
 		const element = toReactNode(`${result.html}<style>${result.css.code}</style>`);
 		const svg = await satori(element, {