fix: social thumbnail assistants (#732)

src/ambient.d.ts

@@ -0,0 +1,4 @@
+declare module "*.ttf" {
+	const value: ArrayBuffer;
+	export default value;
+}

src/routes/assistant/[assistantId]/thumbnail.png/+server.ts

@@ -8,9 +8,11 @@ import type { SvelteComponent } from "svelte";
 import { Resvg } from "@resvg/resvg-js";
 import satori from "satori";
 import { html } from "satori-html";
-import { base } from "$app/paths";
 
-export const GET: RequestHandler = (async ({ url, params, fetch }) => {
+import InterRegular from "../../../../../static/fonts/Inter-Regular.ttf";
+import InterBold from "../../../../../static/fonts/Inter-Bold.ttf";
+
+export const GET: RequestHandler = (async ({ url, params }) => {
 	const assistant = await collections.assistants.findOne({
 		_id: new ObjectId(params.assistantId),
 	});
@@ -39,12 +41,12 @@ export const GET: RequestHandler = (async ({ url, params, fetch }) => {
 		fonts: [
 			{
 				name: "Inter",
-				data: await fetch(base + "/fonts/Inter-Regular.ttf").then((r) => r.arrayBuffer()),
+				data: InterRegular as unknown as ArrayBuffer,
 				weight: 500,
 			},
 			{
 				name: "Inter",
-				data: await fetch(base + "/fonts/Inter-Bold.ttf").then((r) => r.arrayBuffer()),
+				data: InterBold as unknown as ArrayBuffer,
 				weight: 700,
 			},
 		],

src/routes/assistant/[assistantId]/thumbnail.png/ChatThumbnail.svelte

@@ -21,10 +21,10 @@
 				<img class="mr-1.5 h-8 w-8" src={imgUrl} alt="app logo" />
 				AI assistant
 			</p>
-			<h1 class="m-0 {name.length < 38 ? 'text-5xl' : 'text-4xl'} text-balance font-black">
+			<h1 class="m-0 {name.length < 38 ? 'text-5xl' : 'text-4xl'} font-black">
 				{name}
 			</h1>
-			<p class="mb-8 text-pretty text-2xl">
+			<p class="mb-8 text-2xl">
 				{description.slice(0, 160)}
 				{#if description.length > 160}...{/if}
 			</p>

vite.config.ts

@@ -1,6 +1,21 @@
 import { sveltekit } from "@sveltejs/kit/vite";
-import { defineConfig } from "vite";
+import { defineConfig, type PluginOption } from "vite";
 import Icons from "unplugin-icons/vite";
+import { promises } from "fs";
+
+// used to load fonts server side for thumbnail generation
+function loadTTFAsArrayBuffer(): PluginOption {
+	return {
+		name: "load-ttf-as-array-buffer",
+		async transform(_src, id) {
+			if (id.endsWith(".ttf")) {
+				return `export default new Uint8Array([
+			${new Uint8Array(await promises.readFile(id))}
+		  ]).buffer`;
+			}
+		},
+	};
+}
 
 export default defineConfig({
 	plugins: [
@@ -8,6 +23,7 @@ export default defineConfig({
 		Icons({
 			compiler: "svelte",
 		}),
+		loadTTFAsArrayBuffer(),
 	],
 	optimizeDeps: {
 		include: ["browser-image-resizer"],