Updating dependencies and updating the og image generation to use the new read function in SvelteKit v2.

package.json

@@ -21,46 +21,46 @@
 		"@iconify-icons/radix-icons": "^1.2.9",
 		"@iconify-icons/simple-icons": "^1.2.74",
 		"@melt-ui/pp": "^0.1.4",
-		"@playwright/test": "^1.40.1",
+		"@playwright/test": "^1.41.1",
 		"@resvg/resvg-js": "^2.6.0",
-		"@sveltejs/adapter-static": "^3.0.0",
+		"@sveltejs/adapter-static": "^3.0.1",
-		"@sveltejs/adapter-vercel": "^4.0.0",
+		"@sveltejs/adapter-vercel": "^4.0.5",
-		"@sveltejs/enhanced-img": "^0.1.6",
+		"@sveltejs/enhanced-img": "^0.1.8",
-		"@sveltejs/kit": "^2.0.0",
+		"@sveltejs/kit": "^2.4.3",
 		"@sveltejs/vite-plugin-svelte": "^3.0.0",
 		"@typescript-eslint/eslint-plugin": "^5.62.0",
 		"@typescript-eslint/parser": "^5.62.0",
 		"@zerodevx/svelte-img": "^2.1.0",
-		"autoprefixer": "^10.4.16",
+		"autoprefixer": "^10.4.17",
-		"eslint": "^8.55.0",
+		"eslint": "^8.56.0",
 		"eslint-config-prettier": "^8.10.0",
 		"eslint-plugin-svelte": "^2.35.1",
 		"iconify-icon": "^1.0.8",
 		"just-intersect": "^4.3.0",
 		"mdsvex": "^0.10.6",
 		"mdsvex-relative-images": "^1.0.3",
-		"postcss": "^8.4.32",
+		"postcss": "^8.4.33",
 		"postcss-import": "^15.1.0",
 		"postcss-load-config": "^4.0.2",
 		"postcss-preset-env": "^8.5.1",
 		"prettier": "^2.8.8",
 		"prettier-plugin-svelte": "^2.10.1",
-		"sass": "^1.69.5",
+		"sass": "^1.70.0",
 		"satori": "^0.10.11",
 		"satori-html": "^0.3.2",
 		"scrape-it": "^6.1.0",
 		"sharp": "^0.32.6",
-		"svelte": "^4.2.8",
+		"svelte": "^4.2.9",
-		"svelte-check": "^3.6.2",
+		"svelte-check": "^3.6.3",
 		"svelte-meta-tags": "^3.1.0",
-		"svelte-preprocess": "^5.1.2",
+		"svelte-preprocess": "^5.1.3",
 		"svelte-sequential-preprocessor": "^2.0.1",
 		"tslib": "^2.6.2",
 		"typescript": "^5.3.3",
 		"vanilla-lazyload": "^17.8.5",
-		"vite": "^5.0.0",
+		"vite": "^5.0.12",
 		"vite-imagetools": "^5.1.2",
-		"vitest": "^1.0.0"
+		"vitest": "^1.2.1"
 	},
 	"type": "module",
 	"engines": {

src/lib/renderImage.ts

@@ -1,10 +1,13 @@
 import satori from 'satori';
 import { Resvg } from '@resvg/resvg-js';
 import { html as toReactNode } from 'satori-html';
+import { dev } from '$app/environment';
+import { read } from '$app/server';
 
 // we use a Vite plugin to turn this import into the result of fs.readFileSync during build
 import firaSansSemiBold from '$lib/fonts/FiraSans-SemiBold.ttf';
-import { dev } from '$app/environment';
+
+const fontData = read(firaSansSemiBold).arrayBuffer();
 
 export async function componentToPng(component,
 																		 props: Record<string, string | undefined>,
@@ -16,7 +19,7 @@ export async function componentToPng(component,
 		fonts: [
 			{
 				name: 'Fira Sans',
-				data: Buffer.from(firaSansSemiBold),
+				data: await fontData,
 				style: 'normal'
 			}
 		],
@@ -31,9 +34,9 @@ export async function componentToPng(component,
 		}
 	});
 
-	const png = resvg.render();
+	const image = resvg.render();
 
-	return new Response(png.asPng(), {
+	return new Response(image.asPng(), {
 		headers: {
 			'content-type': 'image/png',
 			'cache-control': dev ? 'no-cache, no-store' : 'public, immutable, no-transform, max-age=86400'

src/routes/og/+server.ts

@@ -4,9 +4,11 @@ import { componentToPng } from '$root/lib/renderImage';
 const height = 630;
 const width = 1200;
 
+/** @type {import('./$types').RequestHandler} */
 export async function GET({ url }) {
 	try {
-		const ogImage = `${new URL(url.origin).href}/b_shell_nut_favicon.png`;
+		const faviconImageName = 'b_shell_nut_favicon.png';
+		const image = `${new URL(url.origin).href}${faviconImageName}`;
 		const header = url.searchParams.get('header') ?? undefined;
 		const page = url.searchParams.get('page') ?? undefined;
 		const content = url.searchParams.get('content') ?? '';
@@ -15,7 +17,7 @@ export async function GET({ url }) {
 			header,
 			page,
 			content,
-			image: ogImage,
+			image,
 			width: `${width}`,
 			height: `${height}`,
 			url: new URL(url.origin).href

vite.config.ts

@@ -1,5 +1,4 @@
 import { sveltekit } from '@sveltejs/kit/vite';
-import fs from 'fs';
 import type { UserConfig } from 'vite';
 import { imagetools } from '@zerodevx/svelte-img/vite';
 
@@ -12,27 +11,11 @@ const config: UserConfig = {
 			profiles: {
 				run: new URLSearchParams('?w=300;480;640;1024;1920&format=avif;webp;jpg&as=run:64')
 			}
-		}),
+		})
-		rawFonts(['.ttf'])
 	],
 	test: {
 		include: ['src/**/*.{test,spec}.{js,ts}']
 	}
 };
 
-function rawFonts(ext) {
-	return {
-		name: 'vite-plugin-raw-fonts',
-		resolveId(id) {
-			return ext.some((e) => id.endsWith(e)) ? id : null;
-		},
-		transform(code, id) {
-			if (ext.some((e) => id.endsWith(e))) {
-				const buffer = fs.readFileSync(id);
-				return { code: `export default ${JSON.stringify(buffer)}`, map: null };
-			}
-		}
-	};
-}
-
 export default config;