feat: get og conf images + calculate metadata dynamically (#1352)

budget.json

@@ -4,7 +4,7 @@
     "resourceSizes": [
       {
         "resourceType": "document",
-        "budget": 11.3
+        "budget": 11.4
       },
       {
         "resourceType": "script",

package.json

@@ -45,6 +45,7 @@
     "globby": "^14.0.0",
     "gray-matter": "4.0.3",
     "h3": "^1.10.0",
+    "image-meta": "^0.2.0",
     "knitwork": "^1.0.0",
     "magic-regexp": "0.7.0",
     "magic-string": "^0.30.5",

src/components/TheHome.server.vue

@@ -27,57 +27,7 @@ const links = [
   },
 ]
 
-const upcomingConferences: Array<{
-  name: string
-  dates: string
-  link: string
-  location: string
-  image: string
-}> = [
-  {
-    name: 'Vue.js Nation',
-    dates: '24-25 January',
-    link: 'https://vuejsnation.com/',
-    location: '🌍',
-    image: 'https://vuejsnation.com/images/thumbnail-2024.jpg',
-  },
-  {
-    name: 'Vue.js Amsterdam',
-    dates: '28-29 February',
-    link: 'https://vuejs.amsterdam/',
-    location: '🇳🇱',
-    image:
-      'https://images.jsworldconference.com/logo_vuejs_amsterdam_b4b41918cb.svg?width=400',
-  },
-  {
-    name: 'CityJS London',
-    dates: '3-5 April',
-    link: 'https://london.cityjsconf.org/',
-    location: '🇬🇧',
-    image: 'https://cityjsconf.org/images/site/2019.jpg',
-  },
-  {
-    name: 'Vue.js Live',
-    dates: '25-26 April',
-    link: 'https://vuejslive.com/',
-    location: '🌍',
-    image: 'https://media.graphassets.com/F36hdpvUSY29kcHkVL3N',
-  },
-  {
-    name: 'Vueconf US',
-    dates: '15-17 May',
-    link: 'https://vueconf.us/',
-    location: '🇺🇸',
-    image: 'https://vueconf.us/__og-image__/image/og.png',
-  },
-  {
-    name: 'Middlesborough FE',
-    dates: '17 July',
-    link: 'https://middlesbroughfe.co.uk/',
-    location: '🇬🇧',
-    image: 'https://www.middlesbroughfe.co.uk/images/Web_OG.png',
-  },
-]
+const { data: upcomingConferences } = await useFetch('/api/upcoming-conferences')
 
 const { data: streams } = await useFetch('/api/streams', {
   transform: streams =>
@@ -271,11 +221,14 @@ const { data: talks } = await useAsyncData(
               class="relative flex flex-col justify-center bg-gray-900 w-[20rem] h-[8rem] overflow-hidden"
             >
               <nuxt-img
+                v-if="conference.image.url"
                 :preload="index < 2"
                 :loading="index > 1 ? 'lazy' : 'eager'"
                 decoding="async"
                 format="webp"
-                :src="conference.image"
+                :src="conference.image.url"
+                :width="conference.image.width"
+                :height="conference.image.height"
                 :alt="`Logo for ${conference.name}`"
                 class="object-cover object-center"
               />

src/server/api/upcoming-conferences.get.ts

@@ -0,0 +1,93 @@
+import { imageMeta } from 'image-meta'
+
+const upcomingConferences: Array<{
+  name: string
+  dates: string
+  link: string
+  location: string
+}> = [
+    {
+      name: 'Vue.js Nation',
+      dates: '24-25 January',
+      link: 'https://vuejsnation.com/',
+      location: '🌍',
+    },
+    {
+      name: 'Vue.js Amsterdam',
+      dates: '28-29 February',
+      link: 'https://vuejs.amsterdam/',
+      location: '🇳🇱',
+    },
+    {
+      name: 'CityJS London',
+      dates: '3-5 April',
+      link: 'https://london.cityjsconf.org/',
+      location: '🇬🇧',
+    },
+    {
+      name: 'Vue.js Live',
+      dates: '25-26 April',
+      link: 'https://vuejslive.com/',
+      location: '🌍',
+    },
+    {
+      name: 'Vueconf US',
+      dates: '15-17 May',
+      link: 'https://vueconf.us/',
+      location: '🇺🇸',
+    },
+    {
+      name: 'Middlesborough FE',
+      dates: '17 July',
+      link: 'https://middlesbroughfe.co.uk/',
+      location: '🇬🇧',
+    },
+  ]
+
+export default defineEventHandler(async () => {
+  if (!import.meta.dev && !import.meta.prerender) return []
+
+  return Promise.all(
+    upcomingConferences.map(async conference => {
+      const html = await $fetch<string>(conference.link)
+      const ogImage = html.match(
+        /<meta[^>]*property="og:image"[^>]*content="([^"]+)"|<meta[^>]*content="([^"]+)"[^>]*property="og:image"/
+      )?.[1]
+
+      if (!ogImage) {
+        return {
+          ...conference,
+          image: {
+            url: null,
+            width: null,
+            height: null,
+          }
+        }
+      }
+
+      // if (import.meta.dev) {
+      //   return {
+      //     ...conference,
+      //     image: {
+      //       url: ogImage,
+      //       width: 1200,
+      //       height: 630,
+      //     },
+      //   }
+      // }
+
+      const res = await $fetch(ogImage!, { responseType: 'arrayBuffer' }) as ArrayBuffer
+      const data = Buffer.from(res)
+      const metadata = imageMeta(data)
+
+      return {
+        ...conference,
+        image: {
+          url: ogImage,
+          width: metadata.width,
+          height: metadata.height,
+        },
+      }
+    })
+  )
+})

test/unit/bundle.spec.ts

@@ -79,12 +79,12 @@ describe('project sizes', () => {
     stats.server = await analyzeSizes(['**/*.mjs', '!node_modules'], serverDir)
     expect
       .soft(roundToKilobytes(stats.server.totalBytes))
-      .toMatchInlineSnapshot(`"419k"`)
+      .toMatchInlineSnapshot(`"420k"`)
 
     const modules = await analyzeSizes('node_modules/**/*', serverDir)
     expect
       .soft(roundToKilobytes(modules.totalBytes))
-      .toMatchInlineSnapshot(`"11234k"`)
+      .toMatchInlineSnapshot(`"11253k"`)
 
     const packages = modules.files
       .filter(m => m.endsWith('package.json'))
@@ -125,6 +125,7 @@ describe('project sizes', () => {
         "hast-util-to-string",
         "hastscript",
         "html-void-elements",
+        "image-meta",
         "is-absolute-url",
         "is-alphabetical",
         "is-alphanumerical",