From 0c6493818e52766d71e3afe260b5cc9961610201 Mon Sep 17 00:00:00 2001 From: "C. J. Tantay" Date: Fri, 8 Nov 2024 09:08:59 -0800 Subject: [PATCH 01/19] specify content height --- lib/index.js | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/lib/index.js b/lib/index.js index 8c2cd788..c5c4df44 100644 --- a/lib/index.js +++ b/lib/index.js @@ -406,15 +406,10 @@ export class Baker extends EventEmitter { // set the viewport to the content height const contentHeight = await page.evaluate(() => { - return Math.max( - document.body.scrollHeight, - document.documentElement.scrollHeight, - document.body.offsetHeight, - document.documentElement.offsetHeight, - document.body.clientHeight, - document.documentElement.clientHeight - ); + const content = document.body.firstElementChild; + return content.clientHeight; }); + await page.setViewport({ width: FIXED_FALLBACK_SCREENSHOT_WIDTH, height: contentHeight, From 380ac1e3bac485438d0964f92c5a5c360509e035 Mon Sep 17 00:00:00 2001 From: "C. J. Tantay" Date: Fri, 8 Nov 2024 09:11:41 -0800 Subject: [PATCH 02/19] add change log --- CHANGELOG.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index df759c51..be55ccd3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,9 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). +## [0.47.5] - 2024-11-08 +- Updated `contentHeight` calculation to use `clientHeight` of ``'s first element child for more precise sizing + ## [0.47.4] - 2024-11-07 - Updated manifest to correctly source assets in link tags, removing incorrect file references From f43d36f808357f5d3dfbaf08ccca4075a51632a1 Mon Sep 17 00:00:00 2001 From: "C. J. Tantay" Date: Fri, 8 Nov 2024 09:49:50 -0800 Subject: [PATCH 03/19] fix content height --- lib/index.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/lib/index.js b/lib/index.js index c5c4df44..b0206286 100644 --- a/lib/index.js +++ b/lib/index.js @@ -406,8 +406,7 @@ export class Baker extends EventEmitter { // set the viewport to the content height const contentHeight = await page.evaluate(() => { - const content = document.body.firstElementChild; - return content.clientHeight; + return document.body.clientHeight; }); await page.setViewport({ From a4abe8850ffcdc0ff86a8ff6d0782c541c1f86dd Mon Sep 17 00:00:00 2001 From: "C. J. Tantay" Date: Fri, 8 Nov 2024 10:04:20 -0800 Subject: [PATCH 04/19] update change log --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index be55ccd3..f6da521c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,7 +6,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). ## [0.47.5] - 2024-11-08 -- Updated `contentHeight` calculation to use `clientHeight` of ``'s first element child for more precise sizing +- Updated `contentHeight` calculation to use `clientHeight` of `` for more precise sizing ## [0.47.4] - 2024-11-07 - Updated manifest to correctly source assets in link tags, removing incorrect file references From a252019dd2df7bb3b5bd4244ebb26620d27e0bfe Mon Sep 17 00:00:00 2001 From: "C. J. Tantay" Date: Fri, 8 Nov 2024 14:18:44 -0800 Subject: [PATCH 05/19] update logic --- lib/index.js | 22 ++++++++++++++++++---- lib/utils.js | 12 ++++++++++++ 2 files changed, 30 insertions(+), 4 deletions(-) diff --git a/lib/index.js b/lib/index.js index b0206286..5f5785bf 100644 --- a/lib/index.js +++ b/lib/index.js @@ -16,6 +16,7 @@ import puppeteer from 'puppeteer'; // local import { isProductionEnv, getBasePath } from './env.js'; import { + calculateContentHeight, clearConsole, onError, printInstructions, @@ -401,13 +402,26 @@ export class Baker extends EventEmitter { const page = await browser.newPage(); await page.goto(screenshotLocalUrl, { - waitUntil: 'networkidle0', + waitUntil: ['networkidle0', 'domcontentloaded'], }); // set the viewport to the content height - const contentHeight = await page.evaluate(() => { - return document.body.clientHeight; - }); + const bodyElement = await page.$('body'); + if (!bodyElement) { + console.error('Element with body selector not found.'); + return; + } + + const boundingBox = await bodyElement.boundingBox(); + if (!boundingBox) { + console.error('Could not retrieve bounding box for element with body selector.'); + return; + } + const contentHeight = calculateContentHeight( + FIXED_FALLBACK_SCREENSHOT_WIDTH, + boundingBox.width, + boundingBox.height + ); await page.setViewport({ width: FIXED_FALLBACK_SCREENSHOT_WIDTH, diff --git a/lib/utils.js b/lib/utils.js index 05750ab8..b3f62efb 100644 --- a/lib/utils.js +++ b/lib/utils.js @@ -170,3 +170,15 @@ export function isObject(value) { return value != null && (type === 'object' || type === 'function'); } + +/** + * Calculates the content height of an element based on a fixed width and element width. + * @param fixedWidth {number} The fixed width of the viewport. + * @param elementWidth {number} The width of the bounding box of the element. + * @param elementHeight {number} The height of the bounding box of the element. + * @returns {number} The calculated content height. + */ +export function calculateContentHeight(fixedWidth, elementWidth, elementHeight) { + const scaleFactor = fixedWidth / elementWidth; + return Math.round(elementHeight * scaleFactor); +} From 24f9ea022b77328cea1ba35d10d2da63cda70632 Mon Sep 17 00:00:00 2001 From: "C. J. Tantay" Date: Fri, 8 Nov 2024 14:25:53 -0800 Subject: [PATCH 06/19] add extra content height --- lib/index.js | 4 +++- lib/utils.js | 10 ++++++++-- 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/lib/index.js b/lib/index.js index 5f5785bf..40fb08ec 100644 --- a/lib/index.js +++ b/lib/index.js @@ -54,6 +54,7 @@ const CROSSWALK_ALLOWED_EXTS = { }; const FIXED_FALLBACK_SCREENSHOT_WIDTH = 375; +const EXTRA_CONTENT_HEIGHT = 200; /** * @typedef {Object} BakerOptions @@ -420,7 +421,8 @@ export class Baker extends EventEmitter { const contentHeight = calculateContentHeight( FIXED_FALLBACK_SCREENSHOT_WIDTH, boundingBox.width, - boundingBox.height + boundingBox.height, + EXTRA_CONTENT_HEIGHT ); await page.setViewport({ diff --git a/lib/utils.js b/lib/utils.js index b3f62efb..d21bd893 100644 --- a/lib/utils.js +++ b/lib/utils.js @@ -176,9 +176,15 @@ export function isObject(value) { * @param fixedWidth {number} The fixed width of the viewport. * @param elementWidth {number} The width of the bounding box of the element. * @param elementHeight {number} The height of the bounding box of the element. + * @param extraContentHeight {number} The additional height to add to the calculated content height. * @returns {number} The calculated content height. */ -export function calculateContentHeight(fixedWidth, elementWidth, elementHeight) { +export function calculateContentHeight( + fixedWidth, + elementWidth, + elementHeight, + extraContentHeight = 0 +){ const scaleFactor = fixedWidth / elementWidth; - return Math.round(elementHeight * scaleFactor); + return Math.round(elementHeight * scaleFactor) + extraContentHeight; } From fd6618525bfc71777fcdda1a965a545b9cfbc911 Mon Sep 17 00:00:00 2001 From: "C. J. Tantay" Date: Fri, 8 Nov 2024 14:26:19 -0800 Subject: [PATCH 07/19] lint fix --- lib/utils.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/utils.js b/lib/utils.js index d21bd893..2efd15be 100644 --- a/lib/utils.js +++ b/lib/utils.js @@ -184,7 +184,7 @@ export function calculateContentHeight( elementWidth, elementHeight, extraContentHeight = 0 -){ +) { const scaleFactor = fixedWidth / elementWidth; return Math.round(elementHeight * scaleFactor) + extraContentHeight; } From 31960003ea9c3be8861b8cfe1f309b5f64bce6b5 Mon Sep 17 00:00:00 2001 From: "C. J. Tantay" Date: Fri, 8 Nov 2024 14:52:27 -0800 Subject: [PATCH 08/19] updated changelog --- CHANGELOG.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index f6da521c..14934158 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,7 +6,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). ## [0.47.5] - 2024-11-08 -- Updated `contentHeight` calculation to use `clientHeight` of `` for more precise sizing +- Adjusted viewport settings to dynamically set content height based on the `` element. +- Introduced `calculateContentHeight` function to dynamically scale the height of fallback images based on a fixed content width. ## [0.47.4] - 2024-11-07 - Updated manifest to correctly source assets in link tags, removing incorrect file references From dd38ae0288acafc2a89e834cdf710d9773b21cbb Mon Sep 17 00:00:00 2001 From: "C. J. Tantay" Date: Fri, 8 Nov 2024 15:33:02 -0800 Subject: [PATCH 09/19] fix scaling logic --- lib/utils.js | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/lib/utils.js b/lib/utils.js index 2efd15be..5522fba1 100644 --- a/lib/utils.js +++ b/lib/utils.js @@ -185,6 +185,14 @@ export function calculateContentHeight( elementHeight, extraContentHeight = 0 ) { - const scaleFactor = fixedWidth / elementWidth; - return Math.round(elementHeight * scaleFactor) + extraContentHeight; + // If the element width is greater than the fixed width, + // scale the height based on the ratio of the fixed width to the element width and add extra content height. + if (elementWidth > fixedWidth) { + const scaleFactor = fixedWidth / elementWidth; + return Math.round(elementHeight * scaleFactor) + extraContentHeight; + } + + // If the element width is less than the fixed width, + // don't scale the height and just return the element height with extra content height. + return Math.round(elementHeight) + extraContentHeight; } From 062295cef446a1143eeb568b1ee08fc205ff1138 Mon Sep 17 00:00:00 2001 From: "C. J. Tantay" Date: Fri, 8 Nov 2024 17:56:21 -0800 Subject: [PATCH 10/19] update getcontentheight --- lib/index.js | 8 +++----- lib/utils.js | 57 +++++++++++++++++++++++++++++++++++++++++----------- 2 files changed, 48 insertions(+), 17 deletions(-) diff --git a/lib/index.js b/lib/index.js index 40fb08ec..d9229387 100644 --- a/lib/index.js +++ b/lib/index.js @@ -16,8 +16,8 @@ import puppeteer from 'puppeteer'; // local import { isProductionEnv, getBasePath } from './env.js'; import { - calculateContentHeight, clearConsole, + getContentHeight, onError, printInstructions, validAudioExtensions, @@ -54,7 +54,6 @@ const CROSSWALK_ALLOWED_EXTS = { }; const FIXED_FALLBACK_SCREENSHOT_WIDTH = 375; -const EXTRA_CONTENT_HEIGHT = 200; /** * @typedef {Object} BakerOptions @@ -418,11 +417,10 @@ export class Baker extends EventEmitter { console.error('Could not retrieve bounding box for element with body selector.'); return; } - const contentHeight = calculateContentHeight( + const contentHeight = getContentHeight( FIXED_FALLBACK_SCREENSHOT_WIDTH, boundingBox.width, - boundingBox.height, - EXTRA_CONTENT_HEIGHT + boundingBox.height ); await page.setViewport({ diff --git a/lib/utils.js b/lib/utils.js index 5522fba1..f5c5cded 100644 --- a/lib/utils.js +++ b/lib/utils.js @@ -171,28 +171,61 @@ export function isObject(value) { return value != null && (type === 'object' || type === 'function'); } +/** + * Obtains content height value + * + * @param fixedWidth {number} + * @param elementWidth {number} + * @param elementHeight {number} + * @param scaleFactor {number} + * @returns {number} + */ +function calculateContentHeight(fixedWidth, elementWidth, elementHeight, scaleFactor) { + let contentHeight; + if (elementWidth > fixedWidth) { + contentHeight = Math.round(elementHeight * scaleFactor); + } else { + contentHeight = Math.round(elementHeight); + } + + return contentHeight; +} + +/** + * Obtains extra content height value + * + * @param minExtraContentHeight {number} + * @param maxExtraContentHeight {number} + * @param scaleFactor {number} + * @returns {number} + */ +function calculateExtraContentHeight(minExtraContentHeight, maxExtraContentHeight, scaleFactor) { + return Math.round( + minExtraContentHeight + (1 - scaleFactor) * (maxExtraContentHeight - minExtraContentHeight) + ); +} + /** * Calculates the content height of an element based on a fixed width and element width. * @param fixedWidth {number} The fixed width of the viewport. * @param elementWidth {number} The width of the bounding box of the element. * @param elementHeight {number} The height of the bounding box of the element. - * @param extraContentHeight {number} The additional height to add to the calculated content height. + * @param minExtraContentHeight {number} The minimum additional height to add to the calculated content height. + * @param maxExtraContentHeight {number} The maximum additional height to add to the calculated content height. * @returns {number} The calculated content height. */ -export function calculateContentHeight( +export function getContentHeight( fixedWidth, elementWidth, elementHeight, - extraContentHeight = 0 + minExtraContentHeight = 20, + maxExtraContentHeight = 40 ) { - // If the element width is greater than the fixed width, - // scale the height based on the ratio of the fixed width to the element width and add extra content height. - if (elementWidth > fixedWidth) { - const scaleFactor = fixedWidth / elementWidth; - return Math.round(elementHeight * scaleFactor) + extraContentHeight; - } + const scaleFactor = fixedWidth / elementWidth; + const contentHeight = calculateContentHeight(fixedWidth, elementWidth, elementHeight, scaleFactor); + const extraContentHeight = calculateExtraContentHeight(minExtraContentHeight, maxExtraContentHeight, scaleFactor); + + console.log({contentHeight, extraContentHeight, totalHeight: contentHeight + extraContentHeight}); - // If the element width is less than the fixed width, - // don't scale the height and just return the element height with extra content height. - return Math.round(elementHeight) + extraContentHeight; + return contentHeight + extraContentHeight; } From 3965e60ccb4eabcdf7836041def927bb3992ebf1 Mon Sep 17 00:00:00 2001 From: "C. J. Tantay" Date: Mon, 11 Nov 2024 04:13:10 -0800 Subject: [PATCH 11/19] finalize screenshot update --- lib/index.js | 23 ++++++++++++-------- lib/utils.js | 59 ---------------------------------------------------- 2 files changed, 14 insertions(+), 68 deletions(-) diff --git a/lib/index.js b/lib/index.js index d9229387..c663418e 100644 --- a/lib/index.js +++ b/lib/index.js @@ -17,7 +17,6 @@ import puppeteer from 'puppeteer'; import { isProductionEnv, getBasePath } from './env.js'; import { clearConsole, - getContentHeight, onError, printInstructions, validAudioExtensions, @@ -54,6 +53,7 @@ const CROSSWALK_ALLOWED_EXTS = { }; const FIXED_FALLBACK_SCREENSHOT_WIDTH = 375; +const EXTRA_CONTENT_HEIGHT = 20; /** * @typedef {Object} BakerOptions @@ -417,16 +417,13 @@ export class Baker extends EventEmitter { console.error('Could not retrieve bounding box for element with body selector.'); return; } - const contentHeight = getContentHeight( - FIXED_FALLBACK_SCREENSHOT_WIDTH, - boundingBox.width, - boundingBox.height - ); + + const currentViewport = page.viewport(); await page.setViewport({ width: FIXED_FALLBACK_SCREENSHOT_WIDTH, - height: contentHeight, - deviceScaleFactor: 2, + height: currentViewport.height, + deviceScaleFactor: 2 }); await page.waitForNetworkIdle(); @@ -440,7 +437,15 @@ export class Baker extends EventEmitter { const screenshotStoragePath = join(screenshotEmbedDir, 'fallback.png'); console.log(`Storing the fallback image at: ${screenshotStoragePath}.`); - await page.screenshot({ path: screenshotStoragePath, fullPage: true }); + await page.screenshot({ + path: screenshotStoragePath, + clip: { + x: boundingBox.x, + y: boundingBox.y, + width: FIXED_FALLBACK_SCREENSHOT_WIDTH, + height: boundingBox.height + EXTRA_CONTENT_HEIGHT + } + }); await page.close(); } catch (err) { console.error(`Failed to process ${embedName}: ${err.message}`); diff --git a/lib/utils.js b/lib/utils.js index f5c5cded..05750ab8 100644 --- a/lib/utils.js +++ b/lib/utils.js @@ -170,62 +170,3 @@ export function isObject(value) { return value != null && (type === 'object' || type === 'function'); } - -/** - * Obtains content height value - * - * @param fixedWidth {number} - * @param elementWidth {number} - * @param elementHeight {number} - * @param scaleFactor {number} - * @returns {number} - */ -function calculateContentHeight(fixedWidth, elementWidth, elementHeight, scaleFactor) { - let contentHeight; - if (elementWidth > fixedWidth) { - contentHeight = Math.round(elementHeight * scaleFactor); - } else { - contentHeight = Math.round(elementHeight); - } - - return contentHeight; -} - -/** - * Obtains extra content height value - * - * @param minExtraContentHeight {number} - * @param maxExtraContentHeight {number} - * @param scaleFactor {number} - * @returns {number} - */ -function calculateExtraContentHeight(minExtraContentHeight, maxExtraContentHeight, scaleFactor) { - return Math.round( - minExtraContentHeight + (1 - scaleFactor) * (maxExtraContentHeight - minExtraContentHeight) - ); -} - -/** - * Calculates the content height of an element based on a fixed width and element width. - * @param fixedWidth {number} The fixed width of the viewport. - * @param elementWidth {number} The width of the bounding box of the element. - * @param elementHeight {number} The height of the bounding box of the element. - * @param minExtraContentHeight {number} The minimum additional height to add to the calculated content height. - * @param maxExtraContentHeight {number} The maximum additional height to add to the calculated content height. - * @returns {number} The calculated content height. - */ -export function getContentHeight( - fixedWidth, - elementWidth, - elementHeight, - minExtraContentHeight = 20, - maxExtraContentHeight = 40 -) { - const scaleFactor = fixedWidth / elementWidth; - const contentHeight = calculateContentHeight(fixedWidth, elementWidth, elementHeight, scaleFactor); - const extraContentHeight = calculateExtraContentHeight(minExtraContentHeight, maxExtraContentHeight, scaleFactor); - - console.log({contentHeight, extraContentHeight, totalHeight: contentHeight + extraContentHeight}); - - return contentHeight + extraContentHeight; -} From 9b1f31cd9229c3328fa26d009e9b5eb76ed3aa82 Mon Sep 17 00:00:00 2001 From: "C. J. Tantay" Date: Mon, 11 Nov 2024 04:13:38 -0800 Subject: [PATCH 12/19] lint fix --- lib/index.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/lib/index.js b/lib/index.js index c663418e..6ba36710 100644 --- a/lib/index.js +++ b/lib/index.js @@ -423,7 +423,7 @@ export class Baker extends EventEmitter { await page.setViewport({ width: FIXED_FALLBACK_SCREENSHOT_WIDTH, height: currentViewport.height, - deviceScaleFactor: 2 + deviceScaleFactor: 2, }); await page.waitForNetworkIdle(); @@ -443,8 +443,8 @@ export class Baker extends EventEmitter { x: boundingBox.x, y: boundingBox.y, width: FIXED_FALLBACK_SCREENSHOT_WIDTH, - height: boundingBox.height + EXTRA_CONTENT_HEIGHT - } + height: boundingBox.height + EXTRA_CONTENT_HEIGHT, + }, }); await page.close(); } catch (err) { From 6d5e925fa8c1ec3709e1c58d71a0be2c36fca69c Mon Sep 17 00:00:00 2001 From: "C. J. Tantay" Date: Mon, 11 Nov 2024 04:15:22 -0800 Subject: [PATCH 13/19] updated changelog --- CHANGELOG.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 14934158..676b5669 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,8 +6,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). ## [0.47.5] - 2024-11-08 -- Adjusted viewport settings to dynamically set content height based on the `` element. -- Introduced `calculateContentHeight` function to dynamically scale the height of fallback images based on a fixed content width. +- Adjusted screenshot viewport settings to dynamically set content height based on the `` element. ## [0.47.4] - 2024-11-07 - Updated manifest to correctly source assets in link tags, removing incorrect file references From 145451b0428492d07feaf30a44663aada787b264 Mon Sep 17 00:00:00 2001 From: "C. J. Tantay" Date: Mon, 11 Nov 2024 04:17:03 -0800 Subject: [PATCH 14/19] update changelog --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 676b5669..50e78551 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,7 +6,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). ## [0.47.5] - 2024-11-08 -- Adjusted screenshot viewport settings to dynamically set content height based on the `` element. +- Adjusted screenshot viewport settings to dynamically set content height based on the embed content and location. ## [0.47.4] - 2024-11-07 - Updated manifest to correctly source assets in link tags, removing incorrect file references From 14577bc60e9bb7506b20b696cf8303787e983009 Mon Sep 17 00:00:00 2001 From: "C. J. Tantay" Date: Mon, 11 Nov 2024 06:19:49 -0800 Subject: [PATCH 15/19] fix screenshot height --- lib/index.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/lib/index.js b/lib/index.js index 6ba36710..f6b2bebd 100644 --- a/lib/index.js +++ b/lib/index.js @@ -418,11 +418,13 @@ export class Baker extends EventEmitter { return; } - const currentViewport = page.viewport(); + const scrollHeight = await page.evaluate(() => { + return document.body.scrollHeight; + }); await page.setViewport({ width: FIXED_FALLBACK_SCREENSHOT_WIDTH, - height: currentViewport.height, + height: scrollHeight, deviceScaleFactor: 2, }); @@ -437,13 +439,15 @@ export class Baker extends EventEmitter { const screenshotStoragePath = join(screenshotEmbedDir, 'fallback.png'); console.log(`Storing the fallback image at: ${screenshotStoragePath}.`); + const clipHeight = scrollHeight + EXTRA_CONTENT_HEIGHT; + await page.screenshot({ path: screenshotStoragePath, clip: { x: boundingBox.x, y: boundingBox.y, width: FIXED_FALLBACK_SCREENSHOT_WIDTH, - height: boundingBox.height + EXTRA_CONTENT_HEIGHT, + height: clipHeight, }, }); await page.close(); From ad4c497712ced60e1c9b1961c9468bdd76fb3d2b Mon Sep 17 00:00:00 2001 From: "C. J. Tantay" Date: Thu, 5 Dec 2024 11:47:09 -0800 Subject: [PATCH 16/19] fix view height bug --- lib/index.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/lib/index.js b/lib/index.js index f6b2bebd..cb6a1cb5 100644 --- a/lib/index.js +++ b/lib/index.js @@ -418,13 +418,13 @@ export class Baker extends EventEmitter { return; } - const scrollHeight = await page.evaluate(() => { + const currentScrollHeight = await page.evaluate(() => { return document.body.scrollHeight; }); await page.setViewport({ width: FIXED_FALLBACK_SCREENSHOT_WIDTH, - height: scrollHeight, + height: currentScrollHeight, deviceScaleFactor: 2, }); @@ -439,7 +439,11 @@ export class Baker extends EventEmitter { const screenshotStoragePath = join(screenshotEmbedDir, 'fallback.png'); console.log(`Storing the fallback image at: ${screenshotStoragePath}.`); - const clipHeight = scrollHeight + EXTRA_CONTENT_HEIGHT; + const updatedScrollHeight = await page.evaluate(() => { + return document.body.scrollHeight; + }); + + const clipHeight = updatedScrollHeight + EXTRA_CONTENT_HEIGHT; await page.screenshot({ path: screenshotStoragePath, From cc54b0e5fa88ff16197c927287ad852d332e3a24 Mon Sep 17 00:00:00 2001 From: "C. J. Tantay" Date: Fri, 10 Jan 2025 11:17:54 -0800 Subject: [PATCH 17/19] Adaptable widths --- lib/index.js | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/lib/index.js b/lib/index.js index d80dd5c5..8ad5a7b1 100644 --- a/lib/index.js +++ b/lib/index.js @@ -51,7 +51,6 @@ const CROSSWALK_ALLOWED_EXTS = { vid: validVideoExtensions.map((ext) => ext.replace('.', '')), }; -const FIXED_FALLBACK_SCREENSHOT_WIDTH = 375; const EXTRA_CONTENT_HEIGHT = 20; /** @@ -410,7 +409,7 @@ export class Baker extends EventEmitter { // set the viewport to the content height const bodyElement = await page.$('body'); if (!bodyElement) { - console.error('Element with body selector not found.'); + console.error(' not found in document. Exiting.'); return; } @@ -424,8 +423,12 @@ export class Baker extends EventEmitter { return document.body.scrollHeight; }); + const scrollWidth = await page.evaluate(() => { + return document.body.scrollWidth; + }); + await page.setViewport({ - width: FIXED_FALLBACK_SCREENSHOT_WIDTH, + width: scrollWidth, height: currentScrollHeight, deviceScaleFactor: 2, }); @@ -452,7 +455,7 @@ export class Baker extends EventEmitter { clip: { x: boundingBox.x, y: boundingBox.y, - width: FIXED_FALLBACK_SCREENSHOT_WIDTH, + width: scrollWidth, height: clipHeight, }, }); From 28caa4dd93a5d2c1545cc5103c1f91161900de7c Mon Sep 17 00:00:00 2001 From: "C. J. Tantay" Date: Mon, 13 Jan 2025 11:00:24 -0800 Subject: [PATCH 18/19] add comments and revert width --- lib/index.js | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/lib/index.js b/lib/index.js index 8ad5a7b1..ed72a2b3 100644 --- a/lib/index.js +++ b/lib/index.js @@ -51,6 +51,9 @@ const CROSSWALK_ALLOWED_EXTS = { vid: validVideoExtensions.map((ext) => ext.replace('.', '')), }; +// Default to 375px snapshot width to accommodate mobile viewports +// TODO: Allow for both desktop and mobile optimized screenshots +const FIXED_FALLBACK_SCREENSHOT_WIDTH = 375; const EXTRA_CONTENT_HEIGHT = 20; /** @@ -423,12 +426,8 @@ export class Baker extends EventEmitter { return document.body.scrollHeight; }); - const scrollWidth = await page.evaluate(() => { - return document.body.scrollWidth; - }); - await page.setViewport({ - width: scrollWidth, + width: FIXED_FALLBACK_SCREENSHOT_WIDTH, height: currentScrollHeight, deviceScaleFactor: 2, }); @@ -455,7 +454,7 @@ export class Baker extends EventEmitter { clip: { x: boundingBox.x, y: boundingBox.y, - width: scrollWidth, + width: FIXED_FALLBACK_SCREENSHOT_WIDTH, height: clipHeight, }, }); From 7be5dbfe47797d61717424cdc4840fff60318a68 Mon Sep 17 00:00:00 2001 From: "C. J. Tantay" Date: Wed, 15 Jan 2025 15:22:05 -0800 Subject: [PATCH 19/19] fix changelog --- CHANGELOG.md | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index dab82d09..6b43715c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,12 +5,10 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). -## [0.47.6] - 2024-12-06 -- Adjusted screenshot viewport settings to dynamically set content height based on the embed content and location. +## [0.47.6] - 2025-01-15 +- Adjusted viewport settings to dynamically fix content height and add 20px bottom padding for fallback images ## [0.47.5] - 2024-12-05 - -### Changed - Patched mini-sync to run on 127.0.0.1 and added option `port` option to baker config ## [0.47.4] - 2024-11-07