diff --git a/src/modules/metaServer/contentHandlers/dynamicShare/lib/image/getImageMeta.ts b/src/modules/metaServer/contentHandlers/dynamicShare/lib/image/getImageMeta.ts
index 2e1eb4e..2194b7f 100644
--- a/src/modules/metaServer/contentHandlers/dynamicShare/lib/image/getImageMeta.ts
+++ b/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 => {
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 {}
}
diff --git a/src/modules/metaServer/contentHandlers/dynamicShare/lib/image/getImageUrlFromPage.ts b/src/modules/metaServer/contentHandlers/dynamicShare/lib/image/getImageUrlFromPage.ts
index 1ae3c8d..116589c 100644
--- a/src/modules/metaServer/contentHandlers/dynamicShare/lib/image/getImageUrlFromPage.ts
+++ b/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 = /]*property="xyo:og:image"[^>]*content="([^"]*)"[^>]*>/
+// const xyoOgImageElementRegex = /]*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 => {
+ // 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
}
diff --git a/src/modules/metaServer/contentHandlers/dynamicShare/lib/image/spec/getImageMeta.spec.ts b/src/modules/metaServer/contentHandlers/dynamicShare/lib/image/spec/getImageMeta.spec.ts
index 280a7e1..aa99f17 100644
--- a/src/modules/metaServer/contentHandlers/dynamicShare/lib/image/spec/getImageMeta.spec.ts
+++ b/src/modules/metaServer/contentHandlers/dynamicShare/lib/image/spec/getImageMeta.spec.ts
@@ -1,4 +1,5 @@
/* eslint-disable @stylistic/max-len */
+import { getRenderedPage } from '../../../../../lib/index.ts'
import { getImageMeta } from '../getImageMeta.ts'
describe('getImageMeta', () => {
@@ -6,8 +7,9 @@ describe('getImageMeta', () => {
'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()
})
})
diff --git a/src/modules/metaServer/contentHandlers/dynamicShare/lib/pageStrategies/useIndexAndDynamicPreviewImage/useIndexAndDynamicPreviewImage.ts b/src/modules/metaServer/contentHandlers/dynamicShare/lib/pageStrategies/useIndexAndDynamicPreviewImage/useIndexAndDynamicPreviewImage.ts
index 85991d8..173c945 100644
--- a/src/modules/metaServer/contentHandlers/dynamicShare/lib/pageStrategies/useIndexAndDynamicPreviewImage/useIndexAndDynamicPreviewImage.ts
+++ b/src/modules/metaServer/contentHandlers/dynamicShare/lib/pageStrategies/useIndexAndDynamicPreviewImage/useIndexAndDynamicPreviewImage.ts
@@ -11,7 +11,7 @@ export const useIndexAndDynamicPreviewImage = async (
): Promise => {
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)