index.tsx

import * as React from "react";
import { ImageResponse } from "workers-og";

interface Env {}

export default {
  async fetch(
    request: Request,
    env: Env,
    ctx: ExecutionContext
  ): Promise<Response> {
    const params = new URLSearchParams(new URL(request.url).search);
    const title = params.get("title") || "Lorem ipsum";

    return new ImageResponse(<Card title={title} />, {
      width: 1200,
      height: 630,
      fonts: [
        {
          name: "Roboto",
          data: await fetch(
            "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/fonts/roboto/Roboto-Regular.ttf"
          ).then((res) => res.arrayBuffer()),
          weight: 400,
          style: "normal",
        },
      ],
    });
  },
};

function Card({ title }: { title: string }) {
  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
        height: "100vh",
        width: "100vw",
        fontFamily: "sans-serif",
        background: "#160f29",
      }}
    >
      <div
        style={{ display: "flex", width: "100vw", padding: 40, color: "white" }}
      >
        <h1
          style={{
            fontSize: "60px",
            fontWeight: "600",
            margin: 0,
            fontFamily: "Roboto",
          }}
        >
          ${title}
        </h1>
      </div>
    </div>
  );
}

wrangler.toml

name = "nordevcon-cards-worker"
main = "src/index.tsx"
compatibility_date = "2022-12-22"
compatibility_flags = [ "streams_enable_constructors" ]