1# layout
2
3`.sbl/layout.tsx` is a React component that wraps every `.mdx` page in its folder (and all subfolders unless overridden).
4
5## file location
6
7```
8mysite/
9  .sbl/
10    layout.tsx    ← wraps all .mdx pages in mysite/ and below
11  index.mdx
12  about.mdx
13  blog/
14    .sbl/
15      layout.tsx  ← overrides the parent layout for blog/ and below
16    post1.mdx
17```
18
19closest `.sbl/layout.tsx` wins. every folder is autonomous — a subfolder can override its parent.
20
21## contract
22
23`default` export is a React component that receives `{ children }`.
24
25`children` is already `<article class="prose"><MDXContent/></article>` — the page content wrapped in a prose article. your layout decides what goes around it (header, nav, footer, sidebar).
26
27```tsx
28import type { ReactNode } from 'react';
29
30export default function Layout({ children }: { children: ReactNode }) {
31  return (
32    <>
33      <header><nav><a href="/">home</a></nav></header>
34      <main>{children}</main>
35      <footer>built with sublimated</footer>
36    </>
37  );
38}
39```
40
41## cascade
42
43when you push `.sbl/layout.tsx`, sublimated rebundles the layout and cascades the new hash to every dependent page. no page recompilation — the next request serves the new layout.
44
45## limitations
46
47- SSR only. layout is not included in the client hydration bundle
48- no hooks that rely on client state (`useState`, `useEffect`) — they won't run on the server
49- `<a href>` links work; `<Link>` from frameworks doesn't
50- use class names, not inline styles, if you want [theme.css](theme.md) to style things