From 791d2cae8ff08ddb59d88a4353005aef37e1eb6e Mon Sep 17 00:00:00 2001
From: Bart van der Braak <bartvdbraak@gmail.com>
Date: Mon, 22 Jan 2024 03:34:15 +0100
Subject: [PATCH] fix: make sure vite is doing its thing

---
 .../components/site/opengraph-image.svelte    |  3 +++
 src/routes/og.png/+server.ts                  |  4 ++--
 vite.config.ts                                | 20 ++++++++++++++-----
 3 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/src/lib/components/site/opengraph-image.svelte b/src/lib/components/site/opengraph-image.svelte
index 23cae70..969c133 100644
--- a/src/lib/components/site/opengraph-image.svelte
+++ b/src/lib/components/site/opengraph-image.svelte
@@ -26,4 +26,7 @@
 	h2 {
 		font-family: 'Geist Bold', 'Geist Sans';
 	}
+	p {
+		font-family: 'Geist Regular', 'Geist Sans';
+	}
 </style>
diff --git a/src/routes/og.png/+server.ts b/src/routes/og.png/+server.ts
index d1349fb..c82931d 100644
--- a/src/routes/og.png/+server.ts
+++ b/src/routes/og.png/+server.ts
@@ -1,6 +1,6 @@
 import satori from 'satori';
 import { Resvg } from '@resvg/resvg-js';
-import { html as toReactNode } from 'satori-html';
+import { html } from 'satori-html';
 import { OgImage } from '$lib/components/site';
 import GeistRegular from '$lib/assets/og/Geist-Regular.woff';
 import GeistBold from '$lib/assets/og/Geist-Bold.woff';
@@ -16,7 +16,7 @@ export const GET = async ({ url }) => {
 
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	const result = (OgImage as any).render({ title, subTitle, imageData });
-	const element = toReactNode(`${result.html}<style>${result.css.code}</style>`);
+	const element = html(`${result.html}<style>${result.css.code}</style>`);
 
 	const svg = await satori(element, {
 		fonts: [
diff --git a/vite.config.ts b/vite.config.ts
index 96526fa..e651b8d 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -4,7 +4,7 @@ import { defineConfig } from 'vite';
 import fs from 'fs';
 
 export default defineConfig({
-	plugins: [base64(['.jpg']), enhancedImages(), rawFonts(['.woff']), sveltekit()],
+	plugins: [base64(), enhancedImages(), rawFonts(['.woff']), sveltekit()],
 	define: {
 		'import.meta.env.VERCEL_URL': JSON.stringify(process.env.VERCEL_URL)
 	}
@@ -22,15 +22,25 @@ function rawFonts(ext: string[]) {
 	};
 }
 
-function base64(ext: string[]) {
+function base64() {
 	return {
 		name: 'vite-plugin-base64-loader',
+		// transform(_code: string, id: string) {
+		// 	const [path, query] = id.split('?');
+		// 	if (query === 'base64' && ext.some((e) => id.endsWith(e))) {
+		// 		const base64 = fs.readFileSync(path, { encoding: 'base64' });
+		// 		return { code: `export default ${JSON.stringify(base64)}`, map: null };
+		// 	}
+		// }
 		transform(_code: string, id: string) {
 			const [path, query] = id.split('?');
-			if (query === 'base64' && ext.some((e) => id.endsWith(e))) {
-				const base64 = fs.readFileSync(path, { encoding: 'base64' });
-				return { code: `export default ${JSON.stringify(base64)}`, map: null };
+
+			if (query !== 'base64') {
+				return null;
 			}
+
+			const base64 = fs.readFileSync(path, { encoding: 'base64' });
+			return { code: `export default ${JSON.stringify(base64)}`, map: null };
 		}
 	};
 }