Fix stuff, more HTML

Author: WarningImHack3r

src/routes/og/+server.ts

@@ -12,13 +12,13 @@ import { OG_HEIGHT, OG_WIDTH } from "./constants";
 const sansFont = read(Pretendard).arrayBuffer();
 const displayFont = read(DMSerifDisplay).arrayBuffer();
 
-// Sources: https://github.com/huggingface/chat-ui/blob/main/src/routes/assistant/%5BassistantId%5D/thumbnail.png/%2Bserver.ts#L44-L82,
+// Sources: https://github.com/huggingface/chat-ui/blob/main/src/routes/assistant/%5BassistantId%5D/thumbnail.png/%2Bserver.ts#L44-L82
 // https://geoffrich.net/posts/svelte-social-image/
 export const GET: RequestHandler = async ({ url }) => {
 	const renderedComponent = render(Thumbnail, {
 		props: {
 			title: url.searchParams.get("title") ?? "",
-			description: url.searchParams.get("description")
+			description: url.searchParams.get("description") ?? undefined
 		}
 	});
 
@@ -31,12 +31,14 @@ export const GET: RequestHandler = async ({ url }) => {
 			{
 				name: "Pretendard",
 				data: await sansFont,
-				weight: 400
+				weight: 400,
+				style: "normal"
 			},
 			{
 				name: "DM Serif Display",
 				data: await displayFont,
-				weight: 400
+				weight: 400,
+				style: "normal"
 			}
 		]
 	});

src/routes/og/Thumbnail.svelte

@@ -7,7 +7,9 @@
 	let { title, description = undefined }: Props = $props();
 </script>
 
-<div class="size-full">
-	<p class="font-display">{title}</p>
-	<p class="text-muted-foreground">{description}</p>
+<div class="my-auto flex h-full w-full flex-col justify-center p-4">
+	<p class="font-display text-7xl">{title}</p>
+	{#if description}
+		<p class="text-4xl text-muted-foreground">{description}</p>
+	{/if}
 </div>