Free OG image generator

import { ImageResponse } from "next/og"

export const alt = "Ship the post people actually share"
export const size = { width: 1200, height: 630 }
export const contentType = "image/png"

// Template: blog
export default async function Image() {
  const font = await loadFont("Syne")
  return new ImageResponse(
    (
      <div style={{ width: "100%", height: "100%", display: "flex", flexDirection: "column", background: "#0C0C0C", color: "#E7EEF3", fontFamily: "Syne", padding: "64px 72px 64px 84px" }}>
        <div style={{ position: "absolute", left: 0, top: 0, width: 16, height: "100%", background: "#8FB4C9", display: "flex" }} />
        <div style={{ display: "flex", justifyContent: "space-between" }}>
          <div style={{ display: "flex", fontSize: 22, letterSpacing: 6, fontWeight: 700, color: "#8FB4C9" }}>BLOG</div>
          <div style={{ display: "flex", fontSize: 26, color: "rgba(231, 238, 243, 0.72)" }}>{"Waseem Anjum"}</div>
        </div>
        <div style={{ display: "flex", flexDirection: "column", flexGrow: 1, justifyContent: "flex-end" }}>
          <div style={{ display: "flex", fontSize: 70, fontWeight: 700, lineHeight: 1.02, letterSpacing: -2, maxWidth: 980 }}>{"Ship the post people actually share"}</div>
          <div style={{ display: "flex", marginTop: 22, fontSize: 30, lineHeight: 1.35, color: "rgba(231, 238, 243, 0.72)", maxWidth: 900 }}>{"A readable 1200×630 card for every essay."}</div>
        </div>
        <div style={{ display: "flex", alignItems: "center", marginTop: 36 }}>
          <div style={{ width: 72, height: 8, borderRadius: 99, background: "#8FB4C9", display: "flex" }} />
          <div style={{ display: "flex", marginLeft: 16, fontSize: 22, letterSpacing: 2, color: "rgba(231, 238, 243, 0.72)" }}>1200 × 630</div>
        </div>
      </div>
    ),
    {
      ...size,
      fonts: font
        ? [{ name: "Syne", data: font, style: "normal", weight: 700 }]
        : undefined,
    }
  )
}

async function loadFont(family: string) {
  const css = await fetch(
    `https://fonts.googleapis.com/css2?family=${encodeURIComponent(family)}:wght@700&display=swap`,
    {
      headers: {
        "User-Agent":
          "Mozilla/5.0 (Windows NT 6.1; Trident/7.0; rv:11.0) like Gecko",
      },
    }
  ).then((res) => res.text())
  const match = css.match(/url\((https:\/\/fonts\.gstatic\.com\/[^)]+)\)/)
  if (!match) return null
  return fetch(match[1]).then((res) => res.arrayBuffer())
}