Finding xyo:og:image using Puppeteer Page $ function to reduce fragil…

…ity (was failing on a content without a =" at the end). This allows the page to complete with an empty xyo:og:image content which lets the meta server know it is complete, yet not to replace the image.

src/modules/metaServer/contentHandlers/dynamicShare/lib/image/getImageMeta.ts

@@ -3,6 +3,7 @@ import { IdLogger } from '@xylabs/logger'
 import type {
   Meta, OpenGraphMeta, TwitterMeta,
 } from '@xylabs/sdk-meta'
+import type { Page } from 'puppeteer'
 
 import { defaultViewportSize, getContentType } from '../../../../lib/index.ts'
 import { getImageUrlFromPage } from './getImageUrlFromPage.ts'
@@ -14,23 +15,26 @@ import { getImageUrlFromPage } from './getImageUrlFromPage.ts'
  * @param height The width of the preview image
  * @returns The expected metadata for the preview image of a Live Share page
  */
-export const getImageMeta = (
+export const getImageMeta = async (
   url: string,
-  renderedHtml: string,
+  page: Page,
   width = defaultViewportSize.width,
   height = defaultViewportSize.height,
   logger: Logger = new IdLogger(console, () => `dynamicShare|getImageMeta|${url}`),
-): Meta => {
+): Promise<Meta> => {
   logger.log('generating')
-  const imageUrl = getImageUrlFromPage(url, renderedHtml)
-  const type = getContentType(imageUrl) || 'image/png'
-  const og: OpenGraphMeta = {
-    image: {
-      '': imageUrl, height, 'secure_url': imageUrl, type, 'url': imageUrl, width,
-    },
+  const imageUrl = await getImageUrlFromPage(url, page)
+  if (imageUrl) {
+    const type = getContentType(imageUrl) || 'image/png'
+    const og: OpenGraphMeta = {
+      image: {
+        '': imageUrl, height, 'secure_url': imageUrl, type, 'url': imageUrl, width,
+      },
+    }
+    const twitter: TwitterMeta = { card: 'summary_large_image', image: { '': imageUrl } }
+    const meta = { og, twitter }
+    logger.log(`generated [${imageUrl}]`)
+    return meta
   }
-  const twitter: TwitterMeta = { card: 'summary_large_image', image: { '': imageUrl } }
-  const meta = { og, twitter }
-  logger.log(`generated [${imageUrl}]`)
-  return meta
+  return {}
 }

src/modules/metaServer/contentHandlers/dynamicShare/lib/image/getImageUrlFromPage.ts

@@ -1,9 +1,6 @@
-import { assertEx } from '@xylabs/assert'
-import he from 'he'
-const { decode } = he
-
 import type { Logger } from '@xylabs/logger'
 import { IdLogger } from '@xylabs/logger'
+import type { Page } from 'puppeteer'
 
 /**
  * The property name of the meta element
@@ -12,27 +9,21 @@ import { IdLogger } from '@xylabs/logger'
 const xyoOgImageProperty = 'xyo:og:image'
 
 // Define the regex pattern to match the meta element
-const xyoOgImageElementRegex = /<meta[^>]*property="xyo:og:image"[^>]*content="([^"]*)"[^>]*>/
+// const xyoOgImageElementRegex = /<meta[^>]*property="xyo:og:image"[^>]*content="([^"]*)"[^>]*>/
 
 /**
  * Returns the URL of the image from within the Dynamic Share page's meta tags
  * @param url The URL of the Dynamic Share page
  * @returns The URL of the preview image from within the Dynamic Share page's meta tags
  */
-export const getImageUrlFromPage = (
+export const getImageUrlFromPage = async (
   url: string,
-  renderedHtml: string,
+  page: Page,
   logger: Logger = new IdLogger(console, () => `dynamicShare|getPreviewUrlFromPage|${url}`),
-): string => {
-  // Use the regex to extract the expected meta element
-  const match = renderedHtml.match(xyoOgImageElementRegex)
-  // Extract the preview image URL from the meta element & decode it
-  const imageUrl = decode(
-    assertEx(match?.[1], () => {
-      logger.error(`error, missing meta element with ${xyoOgImageProperty} property`)
-      return 'Error'
-    }),
-  )
+): Promise<string | null | undefined> => {
+  // Use puppeteer $ method to get the meta element
+  const imageUrl = await (await page.$(`meta[property="${xyoOgImageProperty}"]`))?.evaluate(el => el.getAttribute('content'))
+  logger.log('imageUrl', imageUrl)
 
   return imageUrl
 }

src/modules/metaServer/contentHandlers/dynamicShare/lib/image/spec/getImageMeta.spec.ts

@@ -1,13 +1,15 @@
 /* eslint-disable @stylistic/max-len */
+import { getRenderedPage } from '../../../../../lib/index.ts'
 import { getImageMeta } from '../getImageMeta.ts'
 
 describe('getImageMeta', () => {
   const cases = [
     'http://xyo.network',
     'https://beta.foreventory.com/web3/nfts/wallet/0xacdaEEb57ff6886fC8e203B9Dd4C2b241DF89b7a/score/e1b5b2a04069019a2ed2eb14e983b1dfaff96769a98c84fb9502d89615e07398?chainId=1',
   ]
-  it.each(cases)('generates page preview image Meta', (url) => {
-    const actual = getImageMeta(url)
+  it.each(cases)('generates page preview image Meta', async (url) => {
+    const renderedPage = await getRenderedPage(url, 'xyo:og:image')
+    const actual = await getImageMeta(url, renderedPage)
     expect(actual).toMatchSnapshot()
   })
 })

src/modules/metaServer/contentHandlers/dynamicShare/lib/pageStrategies/useIndexAndDynamicPreviewImage/useIndexAndDynamicPreviewImage.ts

@@ -11,7 +11,7 @@ export const useIndexAndDynamicPreviewImage = async (
 ): Promise<string> => {
   const renderedPage = await getRenderedPage(url, 'xyo:og:image')
   logger.log('generating preview image meta')
-  const meta = getImageMeta(url, await renderedPage.content())
+  const meta = await getImageMeta(url, renderedPage)
   meta.title = await renderedPage.title()
   logger.log(`setting title: ${meta.title}`)
   const updatedHtml = metaBuilder(indexHtml, meta)