Abdullah.
465eb05aaf
twenty-website had accumulated structural problems that were cheaper to fix by rebuilding than to refactor in place: - Drift had no guardrails. Values were matched at call sites instead of single-sourced, so things silently diverged — e.g. the radius token base was wrong for days (every radius() consumer rendered double) because nothing measured it against the old site's CSS variables. - A whole tree escaped quality checks. src/lib/ (~9.8k lines) was never format-checked, because oxfmt silently ignores directories named lib/. - Inconsistent rhythm. Hero spacing varied 24–88px between pages (CEO-flagged), because section spacing wasn't a token. - Over-extraction. -config.ts sprawl pulled single-component configuration out into the wrong place. The goal: a ground-up rebuild where drift is structurally impossible, held to a Linear / Railway / Notion / Attio quality bar. The old site is treated as source of intent only — nothing is blindly ported; every piece is re-decided and A/B-verified. **Rebuild** A full rebuild on Next 16 + Turbopack + Linaria (zero-runtime CSS), ~1,100 files. Marketing pages (home, product, pricing, partners + marketplace, customers/case-studies, why-twenty, releases, legal), the interactive AppPreview product mockup, the platform/visuals WebGL system (engine + rigs, three code-split off every initial chunk), and the standalone /halftone studio (the dev tool that generates the site's halftone art — engine, exporters, and full UI ported as an isolated island). **Architecture & guarantees** - Parity by construction. src/tokens/definitions.ts is the only file with raw values; the :root CSS-variable block is generated from it at build time and accessors derive var names through the same helpers — derived alpha tokens appear in served CSS without ever being hand-written. - Mobile-first by API shape. mediaUp() is the only media helper (no max-width helper exists, on purpose). - Section rhythm is a token (RHYTHM.section) — the hero-spacing inconsistency class is fixed by construction. - Fluid type ramps interpolate font-size and line-height between designed endpoints [390px → md]; TYPE_SCALE is the single source. - three.js never enters an initial chunk — confined to platform/visuals heavy zones, reached only via dynamic(ssr:false), enforced by check-visual-bundle.
64 lines
1.9 KiB
JavaScript
64 lines
1.9 KiB
JavaScript
import { chromium } from 'playwright';
|
|
|
|
// The shared chassis every parity battery runs on: one place for the
|
|
// pass/fail ledger, the A/B compare funnel and page setup. New batteries
|
|
// MUST build on this — and when the old site retires, compare() is the
|
|
// single seam where frozen fixtures replace live :3002 values.
|
|
export const OLD_BASE = process.env.MOCKUP_OLD_URL ?? 'http://localhost:3002';
|
|
export const NEW_BASE =
|
|
process.env.VISUAL_BATTERY_URL ?? 'http://localhost:3004';
|
|
|
|
export const VIEWPORT = { width: 1440, height: 900 };
|
|
|
|
const ok = (label, detail) =>
|
|
console.log(` ✓ ${label}${detail ? ` (${detail})` : ''}`);
|
|
|
|
export function createBattery(name) {
|
|
const failures = [];
|
|
|
|
const fail = (label, detail) => {
|
|
failures.push(`${label}: ${detail}`);
|
|
console.log(` ✗ ${label}: ${detail}`);
|
|
};
|
|
|
|
const compare = (label, oldValue, newValue) => {
|
|
const oldText = JSON.stringify(oldValue);
|
|
const newText = JSON.stringify(newValue);
|
|
if (oldText === newText) {
|
|
ok(label, oldText.length > 90 ? undefined : oldText);
|
|
} else {
|
|
fail(label, `old ${oldText} vs new ${newText}`);
|
|
}
|
|
};
|
|
|
|
const finish = async (browser) => {
|
|
await browser?.close();
|
|
if (failures.length > 0) {
|
|
console.error(`${name}: FAILED (${failures.length})`);
|
|
process.exitCode = 1;
|
|
} else {
|
|
console.log(`${name}: OK`);
|
|
}
|
|
};
|
|
|
|
return { compare, fail, finish, ok };
|
|
}
|
|
|
|
export function launchBrowser() {
|
|
return chromium.launch({ channel: 'chrome', headless: true });
|
|
}
|
|
|
|
export async function openPage(
|
|
browser,
|
|
url,
|
|
{ reducedMotion = false, settleMs = 800, viewport = VIEWPORT } = {},
|
|
) {
|
|
const page = await browser.newPage({
|
|
viewport: { width: viewport.width, height: viewport.height },
|
|
reducedMotion: reducedMotion ? 'reduce' : 'no-preference',
|
|
});
|
|
await page.goto(url, { waitUntil: 'load', timeout: 240000 });
|
|
await page.waitForTimeout(settleMs);
|
|
return page;
|
|
}
|