refactor(website,guide): cloudflare workers support (#11204)

apps/website/src/app/opengraph-image.tsx

@@ -2,8 +2,6 @@
 
 import { ImageResponse } from 'next/og';
 
-export const runtime = 'edge';
-
 export const size = {
 	width: 1_200,
 	height: 630,
@@ -11,11 +9,23 @@ export const size = {
 
 export const contentType = 'image/png';
 
-export default async function Image() {
-	const fontData = await fetch(new URL('../assets/Geist-Black.ttf', import.meta.url), { cache: 'force-cache' }).then(
-		async (res) => res.arrayBuffer(),
-	);
+async function loadGoogleFont(font: string, text: string) {
+	const url = `https://fonts.googleapis.com/css2?family=${font}&text=${encodeURIComponent(text)}`;
+	const css = await (await fetch(url)).text();
+	// eslint-disable-next-line prefer-named-capture-group
+	const resource = /src: url\((.+)\) format\('(opentype|truetype)'\)/.exec(css);
 
+	if (resource) {
+		const response = await fetch(resource[1]!);
+		if (response.status === 200) {
+			return response.arrayBuffer();
+		}
+	}
+
+	throw new Error('failed to load font data');
+}
+
+export default async function Image() {
 	return new ImageResponse(
 		(
 			<div tw="flex bg-[#121214] h-full w-full">
@@ -39,7 +49,7 @@ export default async function Image() {
 			fonts: [
 				{
 					name: 'Geist',
-					data: fontData,
+					data: await loadGoogleFont('Geist:wght@900', 'The most popular way to build Discord bots.'),
 					weight: 900,
 					style: 'normal',
 				},