Kitchen sink:
every component
A testbed for every component in the theme: one instance of each shortcode, callout, code block, diagram and widget on a single page — so design changes have something to test against, and guide authors have something to peek at and copy.
#Headings and anchors
Level two — with the # character, level three — with ##. Inline: italic, bold,
code, an internal link to the reference guide.
##Third-level subheading
Checks that render-heading attaches ## and an anchor to h3.
#Code
Go is highlighted server-side (Chroma in the palette's colors):
type Point struct {
X, Y int64
}
func dist(a, b Point) int64 { return (a.X-b.X)*(a.X-b.X) }With a file caption and line highlighting ({label=… hl_lines=[2]}):
func mallocgc(size uintptr) unsafe.Pointer {
c := getMCache() // hot path — no locks
return c.alloc(size)
}Other lit languages wear the same roles — blue for a structural name, copper for a number, one tone for strings, muted italic for a comment:
{
"items": [
{"price": 123, "shipped": true},
{"price": 101} // a trailing comment is fine
]
}export GODEBUG=schedtrace=1000
go build ./... && ./app --addr "$HOST:8080" # both, or nothingA bare fence, text or txt is the plain form — flat .nohl, which is what a
transcript wants:
$ go build ./...
ok taiga/internals 0.312s#Table
A Markdown table; render-table attaches the .tbl-wrap wrapper:
| Type | Size | Alignment |
|---|---|---|
bool | 1 | 1 |
int64 | 8 | 8 |
[]T | 24 | 8 |
#Callouts
The main idea with the default label. Inside — markdown and code.
A trap with the default label.
An "under the hood" callout with an overridden label.
A historical footnote — the quietest type.
A caution — the loudest type, in red.
#Fold
A collapsible inline note — icon, summary, and a toggle; the panel slides open
by height. title= is inline Markdown, the body is Markdown.
There is also a video version of this guide. ПодробнееСвернуть
Watch first, then read to cement it — some things land better on screen, others in text. The link above opens the video without toggling the panel.
A simplification made on purpose. ПодробнееСвернуть
The real thing is a little more involved, but the simpler model is right in the essentials — the details come later.
A full listing, rendered already open. Show codeHide
func main() { println("hello") }Past roughly half a screen of prose the fold switches register on its own: the
summary is set at reading size, the block takes its own air, and the panel ends
with an explicit toggle so a long aside can be closed from where the reading
stopped. size= forces either register — here it is used to show the section
one without pasting a wall of text.
Primer: the aside that grew into a chapter ExpandCollapse
An aside that runs for screens is not a footnote any more, and setting it two sizes down punished the reader for opening it: the click is them agreeing to read this.
So the revealed panel is prose — same size, same colour as the article around it — and what says "inset" is structure: this summary row, the rail down the left, and the closing row below.
The rail is the part that survives scrolling. Past the first screen the summary is gone, and the line is the only thing left saying you are still inside something the article offered to skip.
#Terms
Hover an underlined word and its definition opens as a card; a click pins the card so you can read it and follow the link inside. With JavaScript off every definition sits as a list at the foot of the page, and each word links to its own.
The plainest form — a word and a definition, default type: every P owns an mcache, and hitting it is the cheapest allocation there is.
With a type label, its colour, and a link in the card's footer:
the compiler inserts a write barrier — which is why a pointer write costs more than an int write.
A definition renders through the same pipeline as the article, so a listing inside a card is lit exactly as it would be in the prose: the path is a JSON Pointer, not a dotted path.
When the word reads differently in the sentence than it should in the card's
heading, title= splits the two:
the data lives in the core's caches, not in RAM.
#Diagrams
A memory diagram and a byte strip — raw HTML via {{< raw >}}:
Point{X, Y int64} → 16 bytes, zero padding#Widgets
Form 1 — an empty mount, brought to life by Taiga.widget from widgets.js:
Form 2 — a mount with a static fallback inside (visible without JS):
Form 3 — no id, arbitrary HTML directly in the figure:
#Card
To the reference → A guide is a folder A big CTA card: kicker, title, caption.#Link previews
On a fine pointer, hover any link below to see its preview card — the physics of the term card, one popover, built from a build-time fragment (internal) or a pre-rendered card (Telegram, YouTube).
Internal links open a window into the page: a whole guide preview, a section anchor that scopes the card to one section, and a series index that lists the parts.
Telegram — a post from the author's own channel earns a card scraped at build time: post 409 and post 410. A missing post degrades to the channel card, and a foreign channel gets only the ✈ mark, no card.
YouTube — a talk on the Go scheduler opens a video card with its thumbnail, duration and view count.
An ordinary outbound link carries only the ↗ mark.
Wikipedia — a work-stealing scheduler and preemptive multitasking each open a summary card built from Wikimedia's REST API, carrying the W mark.
The Go blog — a preview of loop-variable scoping and the classic error handling in Go open a card with the italic Go mark, the byline and the post's opening.
#Newsletter
The subscription blocks, on a site that runs a newsletter
(params.newsletter.enable — newsletter.md).
This demo has no endpoint behind them, so a submission ends in the error state —
which is itself the degradation worth seeing.
The mid-text block, placed by hand, with a close button (dismiss=) whose
verdict is remembered per block:
The bare form for a page written as prose (newsletter-inline), the same
component the subscribe page uses:
A demo form: there is no endpoint behind it.
The card at the foot of this page is the third one — newsletter-cta, inserted
automatically here by placements.articleEnd.
