/* global React, ReactDOM,
CoverBoard,
BlogIG_Editorial, BlogLI_TwoCol, BlogIG_Dark,
UseIG_Stat, UseLI_Side, UseIG_Steps,
TestIG_Pullquote, TestLI_Side, TestIG_Stack,
UpdateIG_UI, UpdateLI_Changelog, UpdateIG_Big,
EmailLaunch, EmailDigest, EmailWelcome */
// ─────────────────────────────────────────────────────────────
// Stratum case-study page — narrative chapters with the actual
// artboard components rendered inline as framed, scaled cards.
// ─────────────────────────────────────────────────────────────
// Per-format design dimensions
const DESIGN = {
cover: { w: 760, h: 560 },
ig: { w: 600, h: 600 },
li: { w: 760, h: 398 },
email: { w: 580, h: 760 },
};
function Chapter({ num, title, story, vibe, children }) {
return (
);
}
// Artboard — measures its frame width and scales the design-sized inner
// post via transform so the natural fonts/paddings don't overflow.
function Artboard({ format = "ig", mark, caption, children }) {
const frameRef = React.useRef(null);
const [scale, setScale] = React.useState(1);
const design = DESIGN[format] || DESIGN.ig;
React.useEffect(() => {
const el = frameRef.current;
if (!el) return;
function update() {
const w = el.clientWidth || 0;
const s = w / design.w;
setScale(s);
}
update();
const ro = new ResizeObserver(update);
ro.observe(el);
return () => ro.disconnect();
}, [design.w]);
return (
);
}
function App() {
// Ensure body doesn't have the grain class (let the .post.grain children
// control their own texture)
React.useEffect(() => {
document.body.classList.remove("no-grain");
}, []);
return (
);
}
ReactDOM.createRoot(document.getElementById("root")).render();