Hello, zfb

Welcome to basic-blog. This is a working zfb site: a content collection, a handful of routes, one interactive island, and zudo-wind for styling. It is small enough to read end to end in a few minutes, which is the point.

How a page becomes HTML

Every file under pages/ is a route. A page exports a component, and optionally a getStaticProps() (static route) or paths() (dynamic route) function that runs at build time. pages/blog/[slug].tsx uses paths() to turn each entry in the blog collection into its own page — including this one.

The collection itself is declared in zfb.config.ts, pointing at content/blog/. Frontmatter is parsed into entry.data, and the body is compiled into entry.Content, a component you render like any other.

This file is MDX

.md and .mdx both work in a collection, and both go through the same pipeline. The difference is that .mdx lets you write JSX in the body — the <Tip> above is a real zudo-react component from components/callout.tsx, resolved through the project-root mdx-components.tsx map.

That same map is what makes GitHub-style alerts work in plain .md files:

See markdown-showcase for the full set of markdown features this starter turns on, and styling with zudo-wind for how the CSS is organised.

Only one island

The theme toggle in the header is marked "use client" and wrapped in <Island when="idle">. It is the only component that ships JavaScript to the browser; everything else on this page is static HTML by the time it reaches you.

To add your own interactive component, mark it "use client", wrap it in <Island> where you use it, and leave the rest of the page alone.