--- title: Blocks showcase description: Every block — a live example and the parity-measurement target. --- ## Callout :::callout{intent="info" title="Heads up"} An informational callout with a title and a short body line. ::: :::callout{intent="warning"} A warning callout without a title (renders the `caution` tone). ::: :::callout{intent="tip" title="Pro tip"} Tips render with the success tint. ::: :::callout{intent="danger" title="Careful"} Danger callouts use the destructive tint. ::: ## Table | Method | Path | Description | | ------ | --------------- | -------------- | | GET | `/pets` | List all pets | | POST | `/pets/{petId}` | Create a pet | ### Table with width, hidden, frozen, and align/valign extras (`:::table-meta`) :::table-meta{columns="160,auto,120,auto" halign="left,left,center,right" valign="top,top,middle,middle" freeze="0" hidden="3"} | Endpoint | Description | Auth | Internal notes | | -------- | -------------------- | ------ | --------------- | | /pets | List all pets | none | legacy alias | | /pets/:id| Fetch a single pet | apiKey | cache 60s | | /orders | List orders for a user| bearer | rate-limited | ::: ### Table cards view (collapses to stacked cards under 50rem) :::table-meta{cards} | Plan | Price | Seats | | ---- | ----- | ----- | | Starter | $0 | 1 | | Team | $49 | 10 | ::: ## Tabs Two independent groups share the same titles so same-title sync can be verified; `sync="pkg"` also deep-links via `?pkg=npm|pnpm`. ::::tabs{labels="npm, pnpm" sync="pkg"} :::tab{title="npm"} Install via npm. ::: :::tab{title="pnpm"} Install via pnpm. ::: :::: ::::tabs{labels="npm, pnpm" sync="runtime"} :::tab{title="npm"} Second group — npm panel (syncs by title with the group above). ::: :::tab{title="pnpm"} Second group — pnpm panel. ::: :::: A group whose author named NO `sync` key still gets shareable URL state: E13's default key. The Code power set below is that group — one tab strip proving both features, because every strip on a page spends one of A5's twelve accents. ## Code block ```ts export function greet(name: string): string { return `Hello, ${name}!`; } ``` ### Titled code frame ```ts title="src/greet.ts" showLineNumbers import { greet } from './greet'; // The caption bar, the opt-in gutter and the rest-visible copy control (B7). export const hello = greet('world'); ``` ### Code power set E5's per-line metas, all resolved at BUILD time — no JavaScript runs to paint any of this. `{1,4-6}` beds the named lines, `focus=` dims everything else (hover restores it), `diff` moves the `+`/`-` out of the copyable text and into the gutter rail, and `expandable` clamps a long block to ten lines behind one zero-JS expander. This group names no `sync` key, so E13 assigns it the default `tab` one: `?tab=focus` deep-links straight to the focus panel. ::::code-group{labels="Highlight, Focus, Diff, Collapse"} ```ts title="highlight.ts" {2,4-5} showLineNumbers const config = loadConfig(); const client = createClient(config); // Only the lines the author named wear the signal-soft bed. await client.connect(); await client.publish('docs'); ``` ```ts focus=3-4 const noise = prepare(); const more = noise.map(String); const answer = compute(noise); return answer; ``` ```diff diff showLineNumbers const client = createClient(config); -await client.publishLegacy('docs'); +await client.publish('docs'); ``` ```ts expandable showLineNumbers const one = 1; const two = 2; const three = 3; const four = 4; const five = 5; const six = 6; const seven = 7; const eight = 8; const nine = 9; const ten = 10; const eleven = 11; const twelve = 12; const thirteen = 13; ``` :::: ## Steps ::::steps{title="Getting started"} :::step{title="Install the CLI"} Run `npm install -g doctorine`. ::: :::step{title="Authenticate"} Run `doctorine login`. ::: :::step{title="Publish"} Run `doctorine publish`. A one-liner too long for the column takes the `wrap` fence meta, so it soft-wraps instead of hiding past the right edge — and a block that never scrolls never wears the scroll fade. ```bash wrap curl -X POST 'https://api.example.com/v1/pets?limit=25&sort=created_at&expand=owner,vet' -H 'Authorization: Bearer EXAMPLE_TOKEN_NOT_A_REAL_KEY' -d '{"name":"Ada","tag":"good-dog"}' ``` ::: :::: ## Accordion :::accordion{title="What is Doctorine?"} A Git-safe, OpenAPI-first developer-docs platform. ::: :::accordion{title="What is Doctorine?"} The repeated title proves deterministic `-2` hash deduplication. ::: :::accordion{title="Empty accordion body"} ::: ::::accordion{title="Nested deep-link host"} A deep link into a CLOSED accordion has to open every accordion above its target, or the reader follows a link to content they cannot see. :::accordion{title="Nested deep-link target"} Reached by `#dt-accordion-nested-deep-link-target` with the parent closed. ::: :::: ## Cards ::::card-grid{columns="2"} :::card{title="Quickstart" icon="rocket"} Get started fast. ::: :::card{title="API reference" cover="/covers/api-reference.svg" coverAlt="API reference cover"} Browse the API. ::: :::: ## Columns :::::columns{count="2"} ::::column Left column content — a callout inside a column keeps its own radius and spacing. :::callout{intent="tip" title="Nested"} Callouts nest cleanly inside columns. ::: :::: ::::column Right column content, sized identically to the left track. :::: ::::: ## Prose primitives > A blockquote renders as `.dt-md-quote`. #### A fourth-level heading The type scale runs all the way to h4 (18/28/600) — this heading is what the `type-scale` gate measures, so the level cannot drift back to Starlight's own scale unnoticed. ## Inline marks This endpoint is Beta. The API key (Used to authenticate requests) field is required. **Strong wraps stable** while `code` (A literal identifier) keeps code as the leaf mark. ## API operation embeds A RESOLVED embed — the identity is in the build's public operation projection, so the card carries the method badge, the path with its `{param}` chip, the summary and the parameter list (E3): ::openapi-operation{identity="GET /pets/{petId}"} The same operation with `expanded`, so the parameters are open on first paint: ::openapi-operation{identity="GET /pets/{petId}" expanded="true"} …and an UNRESOLVED one, which degrades to the inert identity chip. This is also exactly what an `x-internal` operation renders as, because the public projection does not contain it — the confidential case must look like an ordinary miss (`machine-surface-leak.e2e.ts` pins that degrade across every built artifact): ::openapi-operation{identity="DELETE /internal/rotate-keys"} ## Page links ::page-link{page="getting-started" title="Getting started"} ## Glossary A resolved defined term: ::glossary-term{term="Idempotency key" ref="idempotency-key"} …and an unresolved one, which must render as plain text with no affordance: ::glossary-term{term="Undefined term" ref="not-in-the-glossary"} An empty tooltip renders bare label with no wrapper at all. ## Image dark variant An `::image-figure` with a `darkSrc` ships BOTH pictures and lets the stylesheet choose (E14) — the theme pill, not just the OS preference, decides which one is the picture. Both assets resolve through the shared `/media/` route exactly like any other R2-keyed figure. ::image-figure{src="fixtures/diagram-light.svg" darkSrc="fixtures/diagram-dark.svg" alt="Request flow: client, edge, origin" caption="One diagram, drawn twice"} A figure with no dark asset is untouched — one ``, same bytes as always: ::image-figure{src="fixtures/diagram-light.svg" alt="Request flow with no dark variant"} ## Image zoom A content image (click to zoom; opt out with `data-no-zoom`): ![Sample portal cover](/covers/api-reference.svg) Zoom opt-out sample - An unordered list item - Another item 1. A nested ordered item 2. Another nested item - [x] A checked task - [ ] An unchecked task --- The separator above renders as `.dt-separator.dt-md-hr`. ## Responsive image (transformable) A PNG figure resolves through `/media/` and, being a width-transformable extension, carries a `?w=` `srcset` ladder + `sizes` so the browser fetches a column-appropriate variant (L5). At 390 px the picked `currentSrc` carries a `?w=` query. ::image-figure{src="fixtures/sample-photo.png" alt="A width-transformable sample photo" caption="Served with a ?w= srcset ladder"} ## File download A downloadable attachment renders as a card and opts OUT of hover-prefetch (`data-astro-prefetch="false"`) so a mouseover never pulls the file itself (B16): ::file{src="fixtures/sample-photo.png" name="sample-photo.png" variant="card" size="12 KB"} ## Related pages - [/](../index.md) - [/guides/copy-page-off](./copy-page-off.md) - [/guides/frame-block](./frame-block.md) - [/guides/getting-started](./getting-started.md) - [/guides/no-page-title-toc](./no-page-title-toc.md) - [/guides/prompt-block](./prompt-block.md) - [/guides/recipe-in-guide](./recipe-in-guide.md) - [/guides/single-entry-toc](./single-entry-toc.md) - [/guides/visibility-audience](./visibility-audience.md) # Agent Instructions This portal answers questions programmatically. To receive a synthesized, source-cited answer instead of crawling page by page, append the `?ask=` query parameter to any page URL on this site: /guides/quickstart?ask=how+do+I+authenticate Optional parameters: - `&goal=` steers the answer toward your objective (e.g. `&goal=write+a+python+client`). - `&version=