datadesk · cjbt · Jan 15, 2025 · Nov 8, 2024 · Nov 8, 2024 · Nov 8, 2024
diff --git 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
@@ -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('<body> 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}`);