diff --git a/CHANGELOG.md b/CHANGELOG.md index 3404f201..6b43715c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,9 +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.5] - 2024-12-05 +## [0.47.6] - 2025-01-15 +- Adjusted viewport settings to dynamically fix content height and add 20px bottom padding for fallback images -### Changed +## [0.47.5] - 2024-12-05 - Patched mini-sync to run on 127.0.0.1 and added option `port` option to baker config ## [0.47.4] - 2024-11-07 diff --git a/lib/index.js b/lib/index.js index 0bcf4d91..ed72a2b3 100644 --- a/lib/index.js +++ b/lib/index.js @@ -51,7 +51,10 @@ 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; /** * @typedef {Object} BakerOptions @@ -403,23 +406,29 @@ 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 Math.max( - document.body.scrollHeight, - document.documentElement.scrollHeight, - document.body.offsetHeight, - document.documentElement.offsetHeight, - document.body.clientHeight, - document.documentElement.clientHeight - ); + const bodyElement = await page.$('body'); + if (!bodyElement) { + console.error(' not found in document. Exiting.'); + return; + } + + const boundingBox = await bodyElement.boundingBox(); + if (!boundingBox) { + console.error('Could not retrieve bounding box for element with body selector.'); + return; + } + + const currentScrollHeight = await page.evaluate(() => { + return document.body.scrollHeight; }); + await page.setViewport({ width: FIXED_FALLBACK_SCREENSHOT_WIDTH, - height: contentHeight, + height: currentScrollHeight, deviceScaleFactor: 2, }); @@ -434,7 +443,21 @@ 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 }); + const updatedScrollHeight = await page.evaluate(() => { + return document.body.scrollHeight; + }); + + const clipHeight = updatedScrollHeight + EXTRA_CONTENT_HEIGHT; + + await page.screenshot({ + path: screenshotStoragePath, + clip: { + x: boundingBox.x, + y: boundingBox.y, + width: FIXED_FALLBACK_SCREENSHOT_WIDTH, + height: clipHeight, + }, + }); await page.close(); } catch (err) { console.error(`Failed to process ${embedName}: ${err.message}`);