first commit

scroll-shot.js

@@ -0,0 +1,92 @@
+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);
+});