Nuxt

IMEJIS_API_KEY=your_api_key
IMEJIS_DESIGN_ID=your_design_id

export default defineNuxtConfig({
  runtimeConfig: {
    // Server only. Never sent to the browser, so the render call has to happen
    // in a server route — which is the point.
    imejisApiKey: process.env.IMEJIS_API_KEY,
    public: {
      imejisRenderUrl:
        process.env.IMEJIS_RENDER_URL || "https://render.imejis.io",
      imejisDesignId: process.env.IMEJIS_DESIGN_ID,
      // The variation id of a multi-size design's second canvas — what the
      // /og-size route maps its "story" size to.
      imejisVariationId: process.env.IMEJIS_VARIATION_ID || "story",
      // PUBLIC on purpose, and only for the direct-<img> block below: that one
      // puts the key in the markup. Leave it unset unless you mean to expose
      // one.
      imejisApiKey: process.env.IMEJIS_PUBLIC_API_KEY,
    },
  },
})

// Render on demand and return the image straight from the route. The key stays
// on the server — point an <img src>, or an og:image, at /og.
//
// `?format=` decides what comes back — png · jpeg · webp · pdf — and with no
// format the render host's default (jpeg) applies. Either way the response
// carries whatever type the render API set, passed straight through: a PDF
// labelled `image/jpeg` is a file the browser, the email client and Slack all
// refuse to open.
const FORMATS = ["png", "jpeg", "webp", "pdf"]
 
export default defineEventHandler(async (event) => {
  const { title = "Hello from Nuxt", subtitle = "", format: requested = "" } =
    getQuery(event)
  const config = useRuntimeConfig()
  const params = new URLSearchParams()
  if (FORMATS.includes(String(requested))) params.set("format", String(requested))
 
  const upstream = await fetch(
    `${config.public.imejisRenderUrl}/v1/${config.public.imejisDesignId}?${params}`,
    {
      method: "POST",
      headers: {
        "dma-api-key": config.imejisApiKey as string,
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        "headline.text": String(title),
        "subtitle.text": String(subtitle),
      }),
    }
  )
  if (!upstream.ok) {
    throw createError({
      statusCode: 502,
      statusMessage: `render failed: ${upstream.status}`,
    })
  }
 
  setResponseHeader(
    event,
    "content-type",
    upstream.headers.get("content-type") ?? "image/jpeg"
  )
  // Renders are deterministic, so cache aggressively at the edge/CDN — and
  // every request to the render API is one metered render.
  setResponseHeader(
    event,
    "cache-control",
    "public, immutable, no-transform, max-age=31536000"
  )
  return Buffer.from(await upstream.arrayBuffer())
})

// One design, several canvases — an OG image, a square post, a vertical
// story. `?variation=<id>` picks which one you get; with none you get the base
// size. Map YOUR OWN size names to the ids (the design's Share / API panel
// lists them) so a page asks for "story", not for an id.
//
// `?quality=` trades file size for fidelity on JPEG only — png, webp and pdf
// ignore it.
const FORMATS = ["png", "jpeg", "webp", "pdf"]
 
export default defineEventHandler(async (event) => {
  const { size = "og", title = "Every size", format: requested = "", quality } =
    getQuery(event)
  const config = useRuntimeConfig()
  // `null` is the base canvas: a render with no `variation` at all.
  const SIZES: Record<string, string | null> = {
    og: null,
    story: config.public.imejisVariationId as string,
  }
  if (!(String(size) in SIZES)) {
    throw createError({ statusCode: 404, statusMessage: `unknown size: ${size}` })
  }
 
  const params = new URLSearchParams()
  const variation = SIZES[String(size)]
  if (variation) params.set("variation", variation)
  if (FORMATS.includes(String(requested))) params.set("format", String(requested))
  if (Number(quality) >= 1 && Number(quality) <= 100) {
    params.set("quality", String(quality))
  }
 
  const upstream = await fetch(
    `${config.public.imejisRenderUrl}/v1/${config.public.imejisDesignId}?${params}`,
    {
      method: "POST",
      headers: {
        "dma-api-key": config.imejisApiKey as string,
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ "headline.text": String(title) }),
    }
  )
  if (!upstream.ok) {
    throw createError({
      statusCode: 502,
      statusMessage: `render failed: ${upstream.status}`,
    })
  }
 
  setResponseHeader(
    event,
    "content-type",
    upstream.headers.get("content-type") ?? "image/jpeg"
  )
  setResponseHeader(
    event,
    "cache-control",
    "public, immutable, no-transform, max-age=31536000"
  )
  return Buffer.from(await upstream.arrayBuffer())
})

// Ask for a stored URL instead of bytes. `hosted` is public and permanent;
// `signed` is private and expires (`expiresIn` is minutes).
export default defineEventHandler(async (event) => {
  const query = getQuery(event)
  const config = useRuntimeConfig()
 
  const delivery = query.private ? "signed" : "hosted"
  const params = new URLSearchParams({ delivery })
  // The stored URL carries the extension of the format it was rendered in, so
  // pass the format through here too — a recipient that sniffs by extension
  // (an email client, a Slack unfurl) needs `.pdf` to say pdf.
  const FORMATS = ["png", "jpeg", "webp", "pdf"]
  if (FORMATS.includes(String(query.format ?? ""))) {
    params.set("format", String(query.format))
  }
  if (delivery === "signed") params.set("expiresIn", "30")
 
  const stored = await $fetch<{
    url: string
    format: string
    file: { size: number }
    expiresAt?: string
  }>(
    `${config.public.imejisRenderUrl}/v1/${config.public.imejisDesignId}?${params}`,
    {
      method: "POST",
      headers: {
        "dma-api-key": config.imejisApiKey as string,
        "Content-Type": "application/json",
      },
      body: { "headline.text": String(query.title ?? "Shared card") },
    }
  )
 
  return {
    url: stored.url,
    format: stored.format,
    expiresAt: stored.expiresAt ?? null,
  }
})

// One POST renders many images and returns a URL for each, in the order sent —
// a row per record, or one per size.
export default defineEventHandler(async (event) => {
  const { rows = [] } = await readBody<{
    rows: { name: string; role?: string }[]
  }>(event)
  const config = useRuntimeConfig()
 
  const bulk = await $fetch<{
    summary: { total: number; succeeded: number; failed: number }
    results: { url?: string }[]
  }>(`${config.public.imejisRenderUrl}/bulk`, {
    method: "POST",
    headers: {
      "dma-api-key": config.imejisApiKey as string,
      "Content-Type": "application/json",
    },
    body: {
      designId: config.public.imejisDesignId,
      delivery: "hosted",
      format: "png",
      data: rows.map((row) => ({
        "headline.text": row.name,
        "subtitle.text": row.role ?? "",
      })),
    },
  })
 
  return { summary: bulk.summary, urls: bulk.results.map((r) => r.url ?? null) }
})

<script setup lang="ts">
const route = useRoute()
const config = useRuntimeConfig()
const title = (route.query.title as string) ?? "Straight from a URL"
 
// og:image points at YOUR OWN route (the proxy above), so crawlers and social
// platforms fetch your domain and the key stays server-side. useRequestURL()
// gives the absolute URL a crawler needs.
useSeoMeta({
  title,
  ogImage: `${useRequestURL().origin}/og?title=${encodeURIComponent(title)}`,
  twitterCard: "summary_large_image",
})
 
// For a PUBLIC design you can skip the proxy and point an <img> straight at
// the render URL — but the key then ships in the markup, so it has to be one
// you are happy to expose (hence runtimeConfig.public below). Keep the proxy
// whenever the key must stay private: that is the right default.
const direct = new URL(
  `${config.public.imejisRenderUrl}/v1/${config.public.imejisDesignId}`
)
direct.searchParams.set("dma-api-key", config.public.imejisApiKey as string)
direct.searchParams.set("headline.text", title)
const directSrc = direct.toString()
</script>
 
<template>
  <img
    :src="directSrc"
    width="1200"
    height="630"
    :alt="`Card for ${title}`"
  />
</template>