Remix og-images

og.server.ts

export const generateSvg = async ({
    title='',
    subtitle='',
}) => {
    const res = await fetch('https://codedgeekery.com/fonts/hack/woff/hack-regular.woff');
    const font = await res.arrayBuffer();

    const {default: satori} = await import('satori');
    return satori(
        <div 
            style={{
                fontSize: 128,
                fontFamily: 'Hack',
                background: 'white',
                width: '100%',
                height: '100%',
                display: 'flex',
                textAlign: 'center',
                alignItems: 'center',
                justifyContent: 'center',
            }}
        >
            {title}
        </div>,
        {
          width: 1200,
          height: 600,
          embedFont: false,
          fonts: [
            {
                name: 'Hack',
                data: font,
                weight: 400,
                style: 'normal',
            }
          ],
        },
      )
}

ogimage.tsx

import type { MetaFunction, LoaderArgs, HeadersFunction } from "@remix-run/node";
import { renderAsync } from '@resvg/resvg-js'
import { generateSvg } from '~/utils/og.server'

import {getPostById} from '~/services/directus.server';

export let headers: HeadersFunction = () => {
	return { "Cache-Control": new CacheControl("swr").toString() };
};

export async function loader ({ request }: LoaderArgs) {
	const url = new URL(request.url);

	let pid = url.searchParams.get("p") ?? null;
	let type = url.searchParams.get("type") || "svg";

	if( pid ) {
		const post = await getPostById(pid);
		title = post.title;
		subtitle = post.slug;
	}

	const svg = await generateSvg({ 
		title: decodeURIComponent(title),
		subtitle: `https://codedgeekery.com/blog/${decodeURIComponent(subtitle)}`
	})

	if (type === 'svg') {
		return new Response(svg, {
			headers: {
				"Content-Type": "image/svg+xml",
				"Cache-Control": new CacheControl("swr").toString(),
			},
		});
	}
	// otherwise, generate a png file
	const data = await renderAsync(svg, {
		fitTo: {
			mode: 'width',
			value: 1200,
		},
		font: {
			loadSystemFonts: false,
		},
	})
	return new Response(data.asPng(), {
		headers: {
			"Content-Type": "image/png",
		},
	});
}