+server.js

// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-nocheck
import { html as toReactNode } from 'satori-html';
import { Resvg } from '@resvg/resvg-js';
import DMSans from '$lib/fonts/DMSans-Bold.ttf';

import OpenGraph from '$lib/components/OpenGraph.svelte';
import satori from 'satori';

const height = 630;
const width = 1200;

export const GET = async ({ url }) => {
	const heading = url.searchParams.get('heading') ?? undefined;
	const bgColor = url.searchParams.get('bgColor') ?? undefined;

	const result = OpenGraph.render({ heading, bgColor });

	const element = toReactNode(`<style>${result.css.code}</style>${result.html}`);

	const svg = await satori(element, {
		fonts: [
			{
				name: 'DM Sans',
				data: Buffer.from(DMSans),
				style: 'normal'
			}
		],
		height,
		width
	});

	const resvg = new Resvg(svg, {
		fitTo: {
			mode: 'width',
			value: width
		}
	});

	const image = resvg.render();

	return new Response(image.asPng(), {
		headers: {
			'content-type': 'image/png'
		}
	});
};

Head.svelte

<svelte:head>
	<meta property="og:image" content={`https://tommyp.org/og?${ogParams.toString()}`} />
	<meta property="twitter:image" content={`https://tommyp.org/og?${ogParams.toString()}`} />
	<meta property="twitter:title" content={title} />
	<meta property="og:title" content={title} />
	<title>{title}</title>
</svelte:head>

OpenGraph.svelte

<script>
	import { unescape } from 'html-escaper';

	export let heading = undefined;
	export let bgColor = '04d704';
</script>

{#if heading}
	<div style={`background: #${bgColor};`} class="combo">
		<p class="big-text">
			{unescape(heading)}
		</p>
		<p class="footer">Tommy Palmer is a web developer in London</p>
	</div>
{:else}
	<div class="big-text" style={`background: #${bgColor};`}>
		Tommy Palmer is a web developer in London
	</div>
{/if}

<style>
	div {
		font-family: 'DM Sans';
		display: flex;
		flex-direction: column;
		height: 100%;
		width: 100%;
		align-items: flex-start;
		justify-content: center;
		margin: 0;
		padding: 0;
	}

	.combo {
		justify-content: flex-start;
		padding-top: 2rem;
	}

	p {
		margin: 0;
	}

	.big-text {
		font-size: 4rem;
		line-height: 7rem;
		font-size: 120px;
		padding: 0 4rem;
	}

	.footer {
		background: #04d704;
		width: 100%;
		padding: 2rem 4rem;
		font-size: 45px;
		position: absolute;
		bottom: 0;
	}
</style>