refactor: simplify handler and remove opengraph section

.env.example

@@ -10,3 +10,5 @@ NUXT_STORAGE_DRIVER=
 NUXT_STORAGE_FS_BASE=
 
 NUXT_PUBLIC_DISABLE_VERSION_CHECK=
+
+NUXT_OPENGRAPH_API=

components/common/CommonBlurhash.ts

@@ -17,7 +17,7 @@ export default defineComponent({
       required: false,
     },
   },
-  setup(props, { attrs }) {
+  setup(props, { attrs, emit }) {
     const placeholderSrc = ref<string>()
     const isLoaded = ref(false)
 
@@ -26,6 +26,9 @@ export default defineComponent({
       img.onload = () => {
         isLoaded.value = true
       }
+      img.onerror = (ev) => {
+        emit('onerror', ev)
+      }
       img.src = props.src
       if (props.srcset)
         img.srcset = props.srcset

components/status/StatusPreviewCard.vue

@@ -11,6 +11,11 @@ const props = defineProps<{
 const alt = $computed(() => `${props.card.title} - ${props.card.title}`)
 const isSquare = $computed(() => props.smallPictureOnly || props.card.width === props.card.height)
 const providerName = $computed(() => props.card.providerName ? props.card.providerName : new URL(props.card.url).hostname)
+const useFallback = ref(false)
+const imageSrcset = $computed(() => props.card.image
+  ? `${props.card.image}${useFallback.value ? '' : `, /api/og-image/${encodeURIComponent(props.card.url)} 2x`}`
+  : '',
+)
 
 // TODO: handle card.type: 'photo' | 'video' | 'rich';
 </script>
@@ -42,10 +47,13 @@ const providerName = $computed(() => props.card.providerName ? props.card.provid
       <CommonBlurhash
         :blurhash="card.blurhash"
         :src="card.image"
+        :srcset="imageSrcset"
         :width="card.width"
         :height="card.height"
         :alt="alt"
-        w-full h-full object-cover
+        w-full
+        h-full object-cover
+        @onerror="useFallback = true"
       />
     </div>
     <div

nuxt.config.ts

@@ -1,6 +1,6 @@
 import { fileURLToPath } from 'node:url'
 import Inspect from 'vite-plugin-inspect'
-import { isCI } from 'std-env'
+import { isCI, isDevelopment } from 'std-env'
 import { i18n } from './config/i18n'
 
 const isPreview = process.env.PULL_REQUEST === 'true'
@@ -65,6 +65,7 @@ export default defineNuxtConfig({
       namespaceId: '',
       apiToken: '',
     },
+    opengraphApi: '',
     public: {
       env: isCI ? isPreview ? 'staging' : 'production' : 'local',
       translateApi: '',
@@ -86,6 +87,14 @@ export default defineNuxtConfig({
       crawlLinks: false,
       routes: ['/', '/200.html'],
     },
+    routeRules: {
+      '/api/og-image/**': {
+        static: isCI,
+        cache: !isCI && !isDevelopment
+          ? { maxAge: 86400 } // 1 day
+          : {},
+      },
+    },
   },
   app: {
     keepalive: true,

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

@@ -0,0 +1,47 @@
+// This API-Endpoint will be cached via netlify builder function -> nitro.routeRules['/api/og-image/**']
+
+export default defineEventHandler(async (event) => {
+  const { url } = getRouterParams(event)
+
+  const cardUrl = decodeURIComponent(url || '')
+
+  if (!cardUrl) {
+    sendError(event, {
+      statusCode: 422,
+      fatal: false,
+      message: 'Missing cardUrl.',
+      name: 'OgImageError',
+      unhandled: false,
+    })
+    return
+  }
+
+  // First we want to try to get the og:image from the html
+  // But sometimes it is not included due to async JS loading
+  const ogImageUrl = await resolveOgImageUrlManually(cardUrl)
+
+  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
+  }
+
+  return $fetch(ogImageUrl, {
+    responseType: 'stream',
+  })
+})
+
+const OG_IMAGE_RE = /<meta[^>]*property="og:image"[^>]*content="([^"]+)"|<meta[^>]*content="([^"]+)"[^>]*property="og:image"/
+
+async function resolveOgImageUrlManually(cardUrl: string): Promise<string> {
+  const html = await $fetch<string>(cardUrl)
+
+  const match = html.match(OG_IMAGE_RE)
+  return match?.[1] ?? match?.[2] ?? ''
+}