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.
49 lines
1.5 KiB
JavaScript
49 lines
1.5 KiB
JavaScript
import fs from 'fs';
|
|
import path from 'path';
|
|
import { fileURLToPath } from 'url';
|
|
|
|
// The three chunk must never enter the initial bundle: rigs reach the heavy
|
|
// zones only through next/dynamic. This reads the production build manifest
|
|
// and fails if any initial chunk contains the three marker.
|
|
const packageRoot = path.join(
|
|
path.dirname(fileURLToPath(import.meta.url)),
|
|
'..',
|
|
);
|
|
const manifestPath = path.join(packageRoot, '.next', 'build-manifest.json');
|
|
|
|
if (!fs.existsSync(manifestPath)) {
|
|
console.error(
|
|
'check-visual-bundle: run `next build` first (.next/build-manifest.json missing).',
|
|
);
|
|
process.exit(1);
|
|
}
|
|
|
|
const manifest = JSON.parse(fs.readFileSync(manifestPath, 'utf8'));
|
|
const initialChunks = new Set([
|
|
...(manifest.rootMainFiles ?? []),
|
|
...Object.values(manifest.pages ?? {}).flat(),
|
|
]);
|
|
|
|
const offending = [];
|
|
for (const chunk of initialChunks) {
|
|
if (!chunk.endsWith('.js')) continue;
|
|
const chunkPath = path.join(packageRoot, '.next', chunk);
|
|
if (!fs.existsSync(chunkPath)) continue;
|
|
const content = fs.readFileSync(chunkPath, 'utf8');
|
|
if (content.includes('WebGLRenderer') || content.includes('three.module')) {
|
|
offending.push(chunk);
|
|
}
|
|
}
|
|
|
|
if (offending.length > 0) {
|
|
console.error(
|
|
'check-visual-bundle: FAILED — three reached the initial bundle:',
|
|
);
|
|
for (const chunk of offending) console.error(` ${chunk}`);
|
|
process.exit(1);
|
|
}
|
|
|
|
console.log(
|
|
`check-visual-bundle: OK (${initialChunks.size} initial chunks, three absent)`,
|
|
);
|