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)