93 lines
3.4 KiB
JavaScript
93 lines
3.4 KiB
JavaScript
const puppeteer = require("puppeteer-core");
|
|
|
|
const [, , url, prefix] = process.argv;
|
|
if (!url || !prefix) {
|
|
console.error("usage: node scroll-shot.js <url> <outPrefix>");
|
|
process.exit(1);
|
|
}
|
|
|
|
(async () => {
|
|
const browser = await puppeteer.launch({
|
|
executablePath: "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome",
|
|
headless: "new",
|
|
defaultViewport: { width: 1920, height: 1080 },
|
|
args: ["--disable-gpu", "--hide-scrollbars"],
|
|
});
|
|
const page = await browser.newPage();
|
|
await page.goto(url, { waitUntil: "networkidle2", timeout: 30000 });
|
|
await new Promise((r) => setTimeout(r, 2500));
|
|
|
|
// Scroll to bottom to render footer
|
|
await page.evaluate(() => window.scrollTo({ top: document.body.scrollHeight, behavior: "instant" }));
|
|
await new Promise((r) => setTimeout(r, 1500));
|
|
|
|
await page.screenshot({ path: `${prefix}-footer.png`, captureBeyondViewport: false });
|
|
|
|
const info = await page.evaluate(() => {
|
|
// Try to find the heading and tagline
|
|
const heading = document.querySelector(".elementor-element-e6af8aa");
|
|
const divider = document.querySelector(".elementor-element-54629ca");
|
|
const bottomRow = document.querySelector(".elementor-element-3f1ba7a");
|
|
const logo = document.querySelector(".elementor-element-b5c897d img");
|
|
const socialIcons = document.querySelectorAll(".elementor-element-e4e6486 a");
|
|
|
|
const dim = (el) => {
|
|
if (!el) return null;
|
|
const r = el.getBoundingClientRect();
|
|
const cs = getComputedStyle(el);
|
|
return {
|
|
h: Math.round(r.height),
|
|
w: Math.round(r.width),
|
|
font: cs.fontFamily.split(",")[0].trim(),
|
|
size: cs.fontSize,
|
|
weight: cs.fontWeight,
|
|
color: cs.color,
|
|
bg: cs.backgroundColor,
|
|
};
|
|
};
|
|
const topIcons = document.querySelectorAll(".elementor-element-a6bccba a.elementor-social-icon");
|
|
const bottomIcons = document.querySelectorAll(".elementor-element-e4e6486 a.elementor-social-icon");
|
|
const iconSize = (a) => {
|
|
if (!a) return null;
|
|
const r = a.getBoundingClientRect();
|
|
const cs = getComputedStyle(a);
|
|
const svg = a.querySelector("svg");
|
|
const svgR = svg?.getBoundingClientRect();
|
|
return {
|
|
wrapper: { w: Math.round(r.width), h: Math.round(r.height) },
|
|
svg: svg ? { w: Math.round(svgR.width), h: Math.round(svgR.height) } : null,
|
|
fontSize: cs.fontSize,
|
|
padding: cs.padding,
|
|
};
|
|
};
|
|
const sep = document.querySelector(".elementor-element-54629ca .elementor-divider-separator");
|
|
const sepCs = sep ? getComputedStyle(sep) : null;
|
|
const sepRect = sep?.getBoundingClientRect();
|
|
return {
|
|
heading: dim(heading),
|
|
divider: dim(divider),
|
|
separator: sep ? {
|
|
w: Math.round(sepRect.width),
|
|
h: Math.round(sepRect.height),
|
|
display: sepCs.display,
|
|
borderTop: sepCs.borderTop,
|
|
width: sepCs.width,
|
|
} : null,
|
|
bottomRow: dim(bottomRow),
|
|
logoSrc: logo?.getAttribute("src"),
|
|
logoWidth: logo?.getBoundingClientRect().width,
|
|
socialCount: socialIcons.length,
|
|
topSocial: topIcons[0] ? iconSize(topIcons[0]) : null,
|
|
topSocialCount: topIcons.length,
|
|
bottomSocial: bottomIcons[0] ? iconSize(bottomIcons[0]) : null,
|
|
bottomSocialCount: bottomIcons.length,
|
|
};
|
|
});
|
|
console.log(JSON.stringify(info, null, 2));
|
|
|
|
await browser.close();
|
|
})().catch((e) => {
|
|
console.error(e);
|
|
process.exit(1);
|
|
});
|