elk/server/api/og-image/[url].ts

import opengraph from 'opengraph-io'

// This API-Endpoint will be cached via nuxt.config.ts -> nitro.routeRules['/api/og-image/**']

type OpenGraphClient = ReturnType<typeof opengraph>

let openGraphClient: OpenGraphClient

function getOpenGraphClient(): OpenGraphClient {
  const appId = useRuntimeConfig().opengraphApi
  if (typeof appId !== 'string')
    throw new Error('Missing NUXT_OPENGRAPH_API environment variable.')

  if (!openGraphClient)
    openGraphClient = opengraph({ appId, fullRender: true })!

  return openGraphClient
}

function extractOgImageUrl(html: string): string {
  const match = html.match(/<meta[^>]*property="og:image"[^>]*content="([^"]+)"|<meta[^>]*content="([^"]+)"[^>]*property="og:image"/)
  return match?.[1] ?? match?.[2] ?? ''
}

async function resolveOgImageUrlManually(cardUrl: string): Promise<string> {
  const html = await $fetch<string>(cardUrl)

  const ogImageUrl = extractOgImageUrl(html)

  if (!ogImageUrl) {
    // Throw an error so we can try to apply another fallback
    throw new Error('Could not find og:image in html.')
  }

  return ogImageUrl
}

export default defineEventHandler(async (event) => {
  const config = useRuntimeConfig()
  const { url } = getRouterParams(event)

  const cardUrl = decodeURIComponent(url)

  if (!cardUrl) {
    sendError(event, {
      statusCode: 422,
      fatal: false,
      message: 'Missing cardUrl.',
      name: 'OgImageError',
      unhandled: false,
    })
    return
  }

  if (typeof cardUrl !== 'string') {
    sendError(event, {
      statusCode: 422,
      fatal: false,
      message: 'cardUrl must be string.',
      name: 'OgImageError',
      unhandled: false,
    })
    return
  }

  // If anything goes wrong, fail gracefully
  try {
    // First we want to try to get the og:image from the html
    // But sometimes it is not included due to async JS loading
    let ogImageUrl = await resolveOgImageUrlManually(cardUrl).catch(() =>
      // Try another fallback
      '',
    )

    if (config.opengraphApi) {
      // If no og:image was found, try to get it from opengraph.io
      if (!ogImageUrl) {
        const response = await getOpenGraphClient().getSiteInfo(cardUrl).catch(() =>
          // Try another fallback
          null,
        )

        ogImageUrl = response?.openGraph?.image?.url || response?.hybridGraph?.image || ''
      }
    }

    if (!ogImageUrl.startsWith('https')) {
      // If the og:image is not https, we can't use it
      sendError(event, {
        statusCode: 404, // Must be 404 so the srcset can fallback to the default image
        fatal: false,
        message: 'og:image must be https.',
        name: 'OgImageError',
        unhandled: false,
      })
      return
    }

    if (!ogImageUrl) {
      // If nothing helped, send 404 so the srcset can fallback to the default image
      sendError(event, {
        statusCode: 404,
        fatal: false,
        message: 'Could not find og:image.',
        name: 'OgImageError',
        unhandled: false,
      })
      return
    }

    await sendRedirect(event, ogImageUrl)
  }
  catch (error) {
    throw createError({
      statusCode: 500,
      statusMessage: (error as Error)?.message || 'Unknown error.',
      cause: error,
    })
  }
})