chore: rework OG images

package.json

@@ -68,6 +68,7 @@
     "@eslint/js": "9.39.5",
     "@expressive-code/plugin-collapsible-sections": "^0.44.0",
     "@expressive-code/plugin-line-numbers": "0.44.0",
+    "@resvg/resvg-wasm": "2.4.0",
     "@sindresorhus/slugify": "^3.0.0",
     "@sumup-oss/circuit-ui": "11.12.0",
     "@sumup-oss/design-tokens": "10.1.0",
@@ -95,14 +96,14 @@
     "react-final-form": "^7.0.1",
     "rumdl": "0.2.34",
     "sass": "^1.101.0",
+    "satori": "0.15.2",
     "satteri": "0.9.5",
     "starlight-links-validator": "^0.25.2",
     "starlight-llms-txt": "0.11.0",
     "tsx": "4.23.1",
     "typescript": "^6.0.3",
     "typescript-eslint": "8.64.0",
     "vitest": "4.1.10",
-    "workers-og": "0.0.27",
     "wrangler": "4.110.0"
   }
 }

src/components/ApiDocs/ApiDocs.astro

@@ -3,20 +3,21 @@ import TopSections from "./TopSections.astro";
 import TagDocs from "./TagDocs.astro";
 
 export interface Props {
+  class?: string;
   tagSlug?: string;
   operationSlug?: string;
   topSection?: "introduction" | "sdks" | "authentication" | "errors";
 }
 
-const { tagSlug, operationSlug, topSection } = Astro.props;
+const { class: className, tagSlug, operationSlug, topSection } = Astro.props;
 const target = tagSlug
   ? operationSlug
     ? `${tagSlug}/${operationSlug}`
     : tagSlug
   : topSection;
 ---
 
-<article data-selected-operation={target}>
+<article class={className} data-selected-operation={target}>
   <div class="specs">
     {!tagSlug && <TopSections topSection={topSection} />}
     {tagSlug && <TagDocs tagSlug={tagSlug} operationSlug={operationSlug} />}

src/env.d.ts

@@ -12,3 +12,8 @@ interface ImportMetaEnv {
 interface ImportMeta {
   readonly env: ImportMetaEnv;
 }
+
+declare module "*.wasm" {
+  const module: WebAssembly.Module;
+  export default module;
+}

src/pages/api/[...path].astro

@@ -122,6 +122,7 @@ const canonicalPath = path ? `/api/${path}` : "/api";
 />
 <StarlightPage {...props}>
   <ApiDocs
+    class="api-docs"
     tagSlug={isTopLevelPage ? undefined : segment}
     operationSlug={isTopLevelPage ? undefined : section}
     topSection={topSection}
@@ -135,9 +136,9 @@ const canonicalPath = path ? `/api/${path}` : "/api";
   document.addEventListener("astro:page-load", initApiSidebarNavigation);
 </script>
 
-<style is:global>
+<style>
   /* Wider content */
-  .sl-container {
-    max-width: 80rem !important;
+  :global(.content-panel:has(.api-docs) > .sl-container) {
+    max-width: 80rem;
   }
 </style>

src/pages/og/[...slog].png.ts

@@ -1,10 +1,10 @@
 import { getCollection } from "astro:content";
 import { createElement } from "react";
-import { ImageResponse } from "workers-og";
 
 import SumUpBlackData from "../../assets/fonts/sumup-black-latin-s.ttf";
 import SumUpNarrowMediumData from "../../assets/fonts/sumup-narrow-latin-s-medium.ttf";
 import SumUpNarrowRegularData from "../../assets/fonts/sumup-narrow-latin-s-regular.ttf";
+import { createOgImageResponse } from "../../utils/ogImageResponse";
 
 interface Props {
   params: { slog?: string };
@@ -57,6 +57,13 @@ function getOpenTypeSignature(data: Uint8Array) {
   return String.fromCharCode(...data.subarray(0, 4));
 }
 
+function toArrayBuffer(data: Uint8Array) {
+  return data.buffer.slice(
+    data.byteOffset,
+    data.byteOffset + data.byteLength,
+  ) as ArrayBuffer;
+}
+
 function toSupportedFontData(data: Uint8Array | string, label: string) {
   if (typeof data === "string") {
     console.warn(
@@ -67,12 +74,12 @@ function toSupportedFontData(data: Uint8Array | string, label: string) {
 
   if (getOpenTypeSignature(data) === "wOF2") {
     console.warn(
-      `[og] ${label} uses WOFF2, which Satori/workers-og does not support. Falling back to the default font.`,
+      `[og] ${label} uses WOFF2, which Satori does not support. Falling back to the default font.`,
     );
     return null;
   }
 
-  return data;
+  return toArrayBuffer(data);
 }
 
 function createFontStack(primary: string | null) {
@@ -253,7 +260,7 @@ export async function GET({ params }: Props) {
     ),
   );
 
-  return new ImageResponse(card, {
+  return createOgImageResponse(card, {
     width: 1200,
     height: 600,
     debug: false,
@@ -264,7 +271,7 @@ export async function GET({ params }: Props) {
               name: "SumUp Black",
               data: sumUpBlack,
               style: "normal" as const,
-              weight: 700,
+              weight: 700 as const,
             },
           ]
         : []),
@@ -274,7 +281,7 @@ export async function GET({ params }: Props) {
               name: "SumUp Narrow",
               data: sumUpNarrowRegular,
               style: "normal" as const,
-              weight: 400,
+              weight: 400 as const,
             },
           ]
         : []),
@@ -284,7 +291,7 @@ export async function GET({ params }: Props) {
               name: "SumUp Narrow",
               data: sumUpNarrowMedium,
               style: "normal" as const,
-              weight: 500,
+              weight: 500 as const,
             },
           ]
         : []),

src/utils/ogImageResponse.ts

@@ -0,0 +1,76 @@
+import { Resvg, initWasm } from "@resvg/resvg-wasm";
+import satori from "satori";
+
+import resvgWasm from "@resvg/resvg-wasm/index_bg.wasm";
+
+import type { ReactNode } from "react";
+import type { Font, SatoriOptions } from "satori";
+
+type OgImageResponseOptions = {
+  width: number;
+  height: number;
+  debug?: boolean;
+  fonts: Font[];
+  headers?: HeadersInit;
+  status?: number;
+  statusText?: string;
+};
+
+let resvgInitPromise: Promise<void> | undefined;
+let resvgInitialized = false;
+
+async function ensureResvg() {
+  if (resvgInitialized) {
+    return;
+  }
+
+  resvgInitPromise ??= initWasm(resvgWasm).then(
+    () => {
+      resvgInitialized = true;
+    },
+    (error: unknown) => {
+      resvgInitPromise = undefined;
+      throw error;
+    },
+  );
+
+  await resvgInitPromise;
+}
+
+export async function createOgImageResponse(
+  element: ReactNode,
+  options: OgImageResponseOptions,
+) {
+  await ensureResvg();
+
+  const svg = await satori(element, {
+    width: options.width,
+    height: options.height,
+    debug: options.debug,
+    fonts: options.fonts,
+  } satisfies SatoriOptions);
+  const png = new Resvg(svg, {
+    fitTo: {
+      mode: "width",
+      value: options.width,
+    },
+  })
+    .render()
+    .asPng();
+  const body = png.buffer.slice(
+    png.byteOffset,
+    png.byteOffset + png.byteLength,
+  ) as ArrayBuffer;
+
+  return new Response(body, {
+    headers: {
+      "Content-Type": "image/png",
+      "Cache-Control": options.debug
+        ? "no-cache, no-store"
+        : "public, immutable, no-transform, max-age=31536000",
+      ...options.headers,
+    },
+    status: options.status ?? 200,
+    statusText: options.statusText,
+  });
+}

wrangler.jsonc

@@ -20,6 +20,16 @@
   },
   "observability": {
     "enabled": true,
+    "logs": {
+      "enabled": true,
+      "invocation_logs": true
+    },
+    "traces": {
+      "enabled": true,
+      "destinations": [
+        "otel-live-collector"
+      ]
+    }
   },
   "routes": [
     {