From d94e6d1fc33d98e60e2e700c40f45cec2e5fa5ef Mon Sep 17 00:00:00 2001
From: Bart van der Braak <bartvdbraak@gmail.com>
Date: Sat, 20 Jan 2024 17:53:21 +0100
Subject: [PATCH] refacotr: move fs to server-side code

---
 src/lib/components/site/opengraph-image.svelte | 5 +----
 src/routes/og.png/+server.ts                   | 7 ++++++-
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/lib/components/site/opengraph-image.svelte b/src/lib/components/site/opengraph-image.svelte
index 900527e..23cae70 100644
--- a/src/lib/components/site/opengraph-image.svelte
+++ b/src/lib/components/site/opengraph-image.svelte
@@ -1,13 +1,10 @@
 <script lang="ts">
-	import fs from 'fs';
 	import { Icons } from '.';
 
 	export let title: string = 'I made this for you';
 	export let subTitle: string =
 		'Featuring current work and studies in a SvelteKit-based portfolio.';
-
-	const buffer = fs.readFileSync('src/lib/assets/og/me.jpg');
-	const imageData = buffer.toString('base64');
+	export let imageData: string = '';
 </script>
 
 <div class="flex h-full w-full items-center justify-center bg-black">
diff --git a/src/routes/og.png/+server.ts b/src/routes/og.png/+server.ts
index 39701d1..6b29260 100644
--- a/src/routes/og.png/+server.ts
+++ b/src/routes/og.png/+server.ts
@@ -5,16 +5,21 @@ import { OgImage } from '$lib/components/site';
 import GeistRegular from '$lib/assets/og/Geist-Regular.woff';
 import GeistBold from '$lib/assets/og/Geist-Bold.woff';
 
+import { readFileSync } from 'fs';
+
 const height = 630;
 const width = 1200;
 
+const meImage = readFileSync(`${process.cwd()}/src/lib/assets/og/me.jpg`);
+const imageData = Buffer.from(meImage).toString('base64');
+
 /** @type {import('./$types').RequestHandler} */
 export const GET = async ({ url }) => {
 	const title = url.searchParams.get('title') ?? undefined;
 	const subTitle = url.searchParams.get('subTitle') ?? undefined;
 
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	const result = (OgImage as any).render({ title, subTitle });
+	const result = (OgImage as any).render({ title, subTitle, imageData });
 	const element = toReactNode(`${result.html}<style>${result.css.code}</style>`);
 
 	const svg = await satori(element, {