Abdullah.
569d887d1e
Renaming the package so any further PRs directed to the website are targeted to the reworked code instead of diverging. Once merged, I will start preparing this for deployment to dev to test before releasing to prod. Any improvements will also be applied to this package. I avoided making significant changes to API routes so nothing breaks, but will test it thoroughly today to confirm. That said, everything is ported - double checked. Big diff PR, impossible to review, but last one! No more rebuilds.
104 lines
3.1 KiB
JavaScript
104 lines
3.1 KiB
JavaScript
import { readFileSync } from 'node:fs';
|
|
|
|
import {
|
|
createBattery,
|
|
launchBrowser,
|
|
NEW_BASE,
|
|
openPage,
|
|
} from './battery-kit.mjs';
|
|
|
|
// Decorative section backgrounds (gradients, halftones, notched cards,
|
|
// crosshairs) must never bleed past the content column — only the section's
|
|
// solid colour is full-bleed. The cap is read from the token itself, so this
|
|
// guard can never drift from it. Measured well past the cap so the centring is
|
|
// exercised: every [data-background-layer] must land <= the cap and centred.
|
|
const tokenSource = readFileSync(
|
|
new URL('../src/tokens/max-content-width.ts', import.meta.url),
|
|
'utf8',
|
|
);
|
|
const MAX_CONTENT_WIDTH_PX = Number(
|
|
/MAX_CONTENT_WIDTH_PX\s*=\s*(\d+)/.exec(tokenSource)?.[1],
|
|
);
|
|
const WIDE_VIEWPORT = { height: 1200, width: 2400 };
|
|
const PAGES = [
|
|
'/',
|
|
'/product',
|
|
'/pricing',
|
|
'/customers',
|
|
'/partners',
|
|
'/why-twenty',
|
|
'/releases',
|
|
];
|
|
|
|
const battery = createBattery('background-cap');
|
|
const browser = await launchBrowser();
|
|
|
|
for (const pagePath of PAGES) {
|
|
// eslint-disable-next-line no-await-in-loop
|
|
const page = await openPage(browser, `${NEW_BASE}${pagePath}`, {
|
|
settleMs: 1000,
|
|
viewport: WIDE_VIEWPORT,
|
|
});
|
|
|
|
// eslint-disable-next-line no-await-in-loop
|
|
const pageHeight = await page.evaluate(
|
|
() => document.documentElement.scrollHeight,
|
|
);
|
|
for (let y = 0; y <= pageHeight; y += 800) {
|
|
// eslint-disable-next-line no-await-in-loop
|
|
await page.evaluate((scrollY) => window.scrollTo(0, scrollY), y);
|
|
// eslint-disable-next-line no-await-in-loop
|
|
await page.waitForTimeout(150);
|
|
}
|
|
|
|
// eslint-disable-next-line no-await-in-loop
|
|
const layers = await page.evaluate(() =>
|
|
[...document.querySelectorAll('[data-background-layer]')]
|
|
.map((element) => element.getBoundingClientRect())
|
|
.filter((rect) => rect.width > 0)
|
|
.map((rect) => ({
|
|
leftMargin: Math.round(rect.left),
|
|
rightMargin: Math.round(window.innerWidth - rect.right),
|
|
width: Math.round(rect.width),
|
|
})),
|
|
);
|
|
// eslint-disable-next-line no-await-in-loop
|
|
await page.close();
|
|
|
|
if (layers.length === 0) {
|
|
battery.ok(`${pagePath} — no capped background layers rendered`, 'none');
|
|
continue;
|
|
}
|
|
|
|
const overflowing = layers.filter(
|
|
(layer) => layer.width > MAX_CONTENT_WIDTH_PX + 1,
|
|
);
|
|
const offCentre = layers.filter(
|
|
(layer) => Math.abs(layer.leftMargin - layer.rightMargin) > 2,
|
|
);
|
|
|
|
if (overflowing.length > 0) {
|
|
battery.fail(
|
|
`${pagePath} background layers exceed ${MAX_CONTENT_WIDTH_PX}px`,
|
|
JSON.stringify(overflowing),
|
|
);
|
|
}
|
|
if (offCentre.length > 0) {
|
|
battery.fail(
|
|
`${pagePath} background layers not centred`,
|
|
JSON.stringify(offCentre),
|
|
);
|
|
}
|
|
if (overflowing.length === 0 && offCentre.length === 0) {
|
|
const widths = [...new Set(layers.map((layer) => layer.width))].toSorted(
|
|
(first, second) => second - first,
|
|
);
|
|
battery.ok(
|
|
`${pagePath} — ${layers.length} background layers capped + centred`,
|
|
`widths ${widths.join(', ')}px <= ${MAX_CONTENT_WIDTH_PX}`,
|
|
);
|
|
}
|
|
}
|
|
|
|
await battery.finish(browser);
|