feat(seo): dynamic OG images

package.json

@@ -22,6 +22,7 @@
 		"@neoconfetti/svelte": "^2.2.2",
 		"@octokit/graphql-schema": "^15.26.0",
 		"@prgm/sveltekit-progress-bar": "^3.0.2",
+		"@resvg/resvg-js": "^2.6.2",
 		"@shikijs/langs": "^3.13.0",
 		"@shikijs/rehype": "^3.13.0",
 		"@shikijs/themes": "^3.13.0",
@@ -57,6 +58,8 @@
 		"remark-gemoji": "^8.0.0",
 		"remark-github": "^12.0.0",
 		"runed": "^0.34.0",
+		"satori": "^0.18.3",
+		"satori-html": "^0.3.2",
 		"semver": "^7.7.2",
 		"shiki": "^3.13.0",
 		"svelte": "^5.39.7",

src/routes/[pid=pid]/[org]/[repo]/[id=number]/+page.ts

@@ -1,10 +1,25 @@
 import type { MetaTagsProps } from "svelte-meta-tags";
 
-export function load({ data }) {
+export function load({ data, url }) {
 	return {
 		...data,
 		pageMetaTags: Object.freeze({
-			title: `Detail of ${data.itemMetadata.org}/${data.itemMetadata.repo}#${data.itemMetadata.id}`
+			title: `Detail of ${data.itemMetadata.org}/${data.itemMetadata.repo}#${data.itemMetadata.id}`,
+			openGraph: {
+				images: [
+					{
+						get url() {
+							const ogUrl = new URL("og", url.origin);
+							ogUrl.searchParams.set("title", data.item.info.title);
+							ogUrl.searchParams.set(
+								"description",
+								`${data.itemMetadata.org}/${data.itemMetadata.repo}#${data.itemMetadata.id}`
+							);
+							return ogUrl.href;
+						}
+					}
+				]
+			}
 		}) satisfies MetaTagsProps
 	};
 }

src/routes/devlog/v2/+page.ts

@@ -1,12 +1,20 @@
 import type { MetaTagsProps } from "svelte-meta-tags";
 
-export function load() {
+export function load({ url }) {
 	return {
 		pageMetaTags: Object.freeze({
 			title: "v2 • Devlog",
 			description: "The development blog of Svelte Changelog",
-			twitter: {
-				description: "The development blog of Svelte Changelog"
+			openGraph: {
+				images: [
+					{
+						get url() {
+							const ogUrl = new URL("og", url.origin);
+							ogUrl.searchParams.set("title", "v2 • Devlog");
+							return ogUrl.href;
+						}
+					}
+				]
 			}
 		}) satisfies MetaTagsProps
 	};

src/routes/og/+server.ts

@@ -0,0 +1,78 @@
+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";
+import type { RequestHandler } from "./$types";
+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/ebeff50ac0ac4367a8e1a32b46dcc5ac2e8fc43f/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") ?? undefined
+		}
+	});
+
+	const reactLike = html(`<style>${renderedComponent.head}</style>${renderedComponent.body}`);
+
+	const svg = await satori(reactLike, {
+		width: OG_WIDTH,
+		height: OG_HEIGHT,
+		fonts: [
+			{
+				name: "SansFont",
+				data: await sansFont,
+				weight: 400,
+				style: "normal"
+			},
+			{
+				name: "SansFontSemibold",
+				data: await sansFontSemibold,
+				weight: 600,
+				style: "normal"
+			},
+			{
+				name: "DisplayFont",
+				data: await displayFont,
+				weight: 400,
+				style: "normal"
+			}
+		]
+	});
+
+	const png = new Resvg(svg, {
+		fitTo: {
+			mode: "original"
+		}
+	})
+		.render()
+		.asPng();
+
+	// `png` is not usable directly inside `new Response()` for some reason, TS says
+	let bodyData;
+	if (png instanceof ArrayBuffer) {
+		bodyData = png;
+	} else if (png.buffer instanceof ArrayBuffer) {
+		bodyData = png.buffer;
+	} else {
+		bodyData = new Uint8Array(png);
+	}
+
+ return new Response(bodyData, {
+   headers: {
+    "Content-Type": "image/png",
+    "Cache-Control": "public, max-age=31536000, immutable"
+   }
+ });
+};

src/routes/og/Thumbnail.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	type Props = {
+		title: string;
+		description?: string;
+	};
+
+	let { title, description }: Props = $props();
+</script>
+
+<div class="flex h-full w-full border-b border-orange-600" style:border-bottom-width="32px">
+	<img
+		src="https://raw.githubusercontent.com/sveltejs/branding/master/svelte-logo.svg"
+		alt="Svelte"
+		class="absolute -top-40 -right-40 opacity-20"
+		style:height="150%"
+	/>
+	<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>
+		<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>

src/routes/og/constants.ts

@@ -0,0 +1,4 @@
+// Source: https://vercel.com/docs/og-image-generation#technical-details
+
+export const OG_WIDTH = 1_200;
+export const OG_HEIGHT = 630;

src/routes/package/[...package]/+page.ts

@@ -1,10 +1,25 @@
 import type { MetaTagsProps } from "svelte-meta-tags";
 
-export function load({ data }) {
+export function load({ data, url }) {
 	return {
 		...data,
 		pageMetaTags: Object.freeze({
-			title: data.currentPackage.pkg.name
+			title: data.currentPackage.pkg.name,
+			openGraph: {
+				images: [
+					{
+						get url() {
+							const ogUrl = new URL("og", url.origin);
+							ogUrl.searchParams.set("title", data.currentPackage.pkg.name);
+							ogUrl.searchParams.set(
+								"description",
+								`${data.currentPackage.repoOwner}/${data.currentPackage.repoName}`
+							);
+							return ogUrl.href;
+						}
+					}
+				]
+			}
 		}) satisfies MetaTagsProps
 	};
 }

src/routes/packages/+page.ts

@@ -1,10 +1,21 @@
 import type { MetaTagsProps } from "svelte-meta-tags";
 
-export function load({ data }) {
+export function load({ data, url }) {
 	return {
 		...data,
 		pageMetaTags: Object.freeze({
-			title: "All Packages"
+			title: "All Packages",
+			openGraph: {
+				images: [
+					{
+						get url() {
+							const ogUrl = new URL("og", url.origin);
+							ogUrl.searchParams.set("title", "All Packages");
+							return ogUrl.href;
+						}
+					}
+				]
+			}
 		}) satisfies MetaTagsProps
 	};
 }

src/routes/tracker/[org]/[repo]/+page.ts

@@ -1,10 +1,21 @@
 import type { MetaTagsProps } from "svelte-meta-tags";
 
-export function load({ data, params }) {
+export function load({ data, params, url }) {
 	return {
 		...data,
 		pageMetaTags: Object.freeze({
-			title: `Tracker for ${params.org}/${params.repo}`
+			title: `Tracker for ${params.org}/${params.repo}`,
+			openGraph: {
+				images: [
+					{
+						get url() {
+							const ogUrl = new URL("og", url.origin);
+							ogUrl.searchParams.set("title", `Tracker • ${params.org}/${params.repo}`);
+							return ogUrl.href;
+						}
+					}
+				]
+			}
 		}) satisfies MetaTagsProps
 	};
 }