finalize design, fix CSS issues

Author: WarningImHack3r

src/routes/og/+page.svelte

@@ -2,6 +2,7 @@ import { render } from "svelte/server";
 import { read } from "$app/server";
 import DMSerifDisplay from "@fontsource/dm-serif-display/files/dm-serif-display-latin-400-normal.woff";
 import Pretendard from "@fontsource/pretendard/files/pretendard-latin-400-normal.woff";
+import PretendardSemibold from "@fontsource/pretendard/files/pretendard-latin-600-normal.woff";
 import { Resvg } from "@resvg/resvg-js";
 import satori from "satori";
 import { html } from "satori-html";
@@ -10,6 +11,7 @@ import Thumbnail from "./Thumbnail.svelte";
 import { OG_HEIGHT, OG_WIDTH } from "./constants";
 
 const sansFont = read(Pretendard).arrayBuffer();
+const sansFontSemibold = read(PretendardSemibold).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
@@ -29,13 +31,19 @@ export const GET: RequestHandler = async ({ url }) => {
 		height: OG_HEIGHT,
 		fonts: [
 			{
-				name: "Pretendard",
+				name: "SansFont",
 				data: await sansFont,
 				weight: 400,
 				style: "normal"
 			},
 			{
-				name: "DM Serif Display",
+				name: "SansFontSemibold",
+				data: await sansFontSemibold,
+				weight: 600,
+				style: "normal"
+			},
+			{
+				name: "DisplayFont",
 				data: await displayFont,
 				weight: 400,
 				style: "normal"

src/routes/og/+page.ts

@@ -2,14 +2,34 @@
 	type Props = {
 		title: string;
 		description?: string;
+		secondaryIconUrl?: string;
 	};
 
-	let { title, description = undefined }: Props = $props();
+	let { title, description, secondaryIconUrl }: Props = $props();
 </script>
 
-<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 class="flex h-full w-full border-b border-orange-600" style:border-bottom-width="32px">
+	<div class="flex flex-col p-8">
+		<div class="flex items-center" style:gap="8">
+			<img
+				src="https://raw.githubusercontent.com/sveltejs/branding/master/svelte-logo.svg"
+				alt="Svelte"
+				class="w-16"
+			/>
+			<span class="flex text-4xl" style:gap="6">
+				<span style:font-family="DisplayFont">Svelte</span>
+				<span class="text-orange-600" style:font-family="SansFontSemibold">Changelog</span>
+			</span>
+		</div>
+		{#if secondaryIconUrl}
+			{@const src = secondaryIconUrl}
+			<img {src} alt="Secondary icon" class="ml-auto w-16" />
+		{/if}
+		<div class="my-auto flex flex-col justify-center">
+			<p class="text-7xl" style:font-family="DisplayFont">{title}</p>
+			{#if description}
+				<p class="text-4xl text-gray-600" style:font-family="SansFont">{description}</p>
+			{/if}
+		</div>
+	</div>
 </div>