From b5b12ae5d52d0670ca9c7c4eba57de7ab973ee55 Mon Sep 17 00:00:00 2001
From: Bart van der Braak <bartvdbraak@gmail.com>
Date: Mon, 22 Jan 2024 09:46:02 +0100
Subject: [PATCH] feat: add preview and side margins

---
 src/lib/components/site/opengraph-image.svelte | 10 +++++-----
 src/routes/og.png/preview/+page.svelte         | 10 +++++++---
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/lib/components/site/opengraph-image.svelte b/src/lib/components/site/opengraph-image.svelte
index 969c133..5cddeb2 100644
--- a/src/lib/components/site/opengraph-image.svelte
+++ b/src/lib/components/site/opengraph-image.svelte
@@ -7,16 +7,16 @@
 	export let imageData: string = '';
 </script>
 
-<div class="flex h-full w-full items-center justify-center bg-black">
-	<div class="flex flex-row items-center rounded-lg p-4 shadow-md">
-		<div class="ml-10 flex w-7/12 flex-col">
+<div class="flex h-full w-full items-center justify-center bg-black px-24">
+	<div class="flex flex-row items-center rounded-lg shadow-md">
+		<div class="flex w-7/12 flex-col">
 			<Icons.logo />
-			<h2 class="leading-tighter mb-0 text-6xl font-bold tracking-tighter text-white">{title}</h2>
+			<h2 class="mb-0 text-6xl font-bold leading-tight tracking-tighter text-white">{title}</h2>
 			<p class="mt-0 text-3xl font-thin text-gray-400">
 				{subTitle}
 			</p>
 		</div>
-		<div class="mt-0 flex w-5/12">
+		<div class="mb--50 mt-0 flex w-5/12">
 			<img class="rounded-xl" src={`data:image/jpeg;base64,${imageData}`} width={400} alt="" />
 		</div>
 	</div>
diff --git a/src/routes/og.png/preview/+page.svelte b/src/routes/og.png/preview/+page.svelte
index 62720c1..4f50c8f 100644
--- a/src/routes/og.png/preview/+page.svelte
+++ b/src/routes/og.png/preview/+page.svelte
@@ -1,7 +1,11 @@
 <script>
 	import { OgImage } from '$lib/components/site';
+	import meInline from '$lib/assets/og/me-inline.jpg';
+	import fs from 'fs';
+	import path from 'path';
+	const imageData = fs.readFileSync(path.join(process.cwd(), meInline), 'base64');
 </script>
 
-<div class="h-[630px] w-[1200px]">
-	<OgImage />
-</div>
+<section class="h-[630px] w-[1200px]">
+	<OgImage {imageData} />
+</section>