Notes
Hello world: the smallest thing that works
This is the first post written in site-gen-app. It exists for one reason: to prove the pipeline works end-to-end. Theme JSON in. Block JSON in. Themed HTML out.
What a post is
A post is a list of typed blocks plus some metadata: title, date, author, category, reading time, optional excerpt. The post renderer wraps its content in .prose.prose-article, which means every <h2>, <p>, <ul>, <blockquote> in the body picks up the article typography automatically.
What's themed automatically
- Headings — h1 through h6, with proportional rhythm
- Paragraphs — slightly larger, looser line-height for readability
- Lists — indented, spaced, list-marker preserved
- Links — primary color, underlined, with offset
- Blockquotes — italic, primary-color left border
- Code — inline and block, mono font on surface background
- Images, figures, captions — rounded, centered captions
- Horizontal rules — themed border color
The best technology disappears. You should think about the content, not the markup.
Tables work too
Tables in long-form content auto-style:
| Block | Purpose | v1? |
|---|---|---|
| hero | Eyebrow + heading + subheading + CTAs | ✓ |
| text | Long-form HTML or short styled text | ✓ |
| image | Image + optional caption | ✓ |
| cta | Mid-page call to action | ✓ |
| menu | Renders a named menu | ✓ |
| quote | Pull-quote with attribution | ✓ |
Next
Read Designing with tokens next.