elk/server/api/og-image/[url].ts
2022-12-12 22:46:37 +01:00

121 lines
3.2 KiB
TypeScript

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,
})
}
})