layout

.sbl/layout.tsx is a React component that wraps every .mdx page in its folder (and all subfolders unless overridden).

file location

mysite/
  .sbl/
    layout.tsx    ← wraps all .mdx pages in mysite/ and below
  index.mdx
  about.mdx
  blog/
    .sbl/
      layout.tsx  ← overrides the parent layout for blog/ and below
    post1.mdx

closest .sbl/layout.tsx wins. every folder is autonomous — a subfolder can override its parent.

contract

default export is a React component that receives { children }.

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).

import type { ReactNode } from 'react';


export default function Layout({ children }: { children: ReactNode }) {
  return (
    <>
      <header><nav><a href="/">home</a></nav></header>
      <main>{children}</main>
      <footer>built with sublimated</footer>
    </>
  );
}

cascade

when 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.

limitations

• SSR only. layout is not included in the client hydration bundle

• no hooks that rely on client state (useState, useEffect) — they won't run on the server

• <a href> links work; <Link> from frameworks doesn't

• use class names, not inline styles, if you want theme.css to style things