Hello, zfb

Welcome to basic-blog. This is a working zfb site: a content collection, a handful of routes, one interactive island, and Tailwind 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 Preact 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 Tailwind 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.