Hub pages 3/4: {get-started}

[florent-leborgne]

Part 3 of 4, based on #3826. Implements elastic/docs-content-internal#1382.

Demo: https://docs-v3-preview.elastic.dev/elastic/docs-builder/pull/3827/examples/products/docs-builder

The onboarding section of a hub page. It gives a new reader one opinionated path to a first success, before they face the full link list. The section is optional.

Structure

A numbered list of steps, of any length. The first often offers two equally weighted ways to start, and the rest are single steps.

Shape	Fields	Renders as
Options	title, options[]	Two or more equally weighted paths side by side, each with a command or a link
Link	title, description, link, link-label	The whole card is clickable
Plain	title, description	A static card

Nothing renders between the intro and the numbered list. An install command belongs in steps[0].options[], which keeps the whole path inside the numbered sequence. The prototype's install and tutorial fields are removed: they placed content above the steps, which the structure does not call for.

Implementation choices

A linked step hovers grey, not blue. Blue makes one step in a sequence look like the call to action, and it differed from the other card types. Every card on a hub page that is itself a link now hovers the same way, matching {page-card}.

The step count is not fixed. The prototype's layout assumed three. The directive now counts the steps that flow in columns and sets the track count: three across when they divide by three, two when they are even, so the last row is never short. A step carrying options spans the full row and takes no track. Below 640px of available width the steps stack into one column, measured on the section rather than the viewport, because the left sidebar narrows the body.

A step option's command uses the standard code block. It renders inside .highlight pre with a language class, which is what the site's copy button and syntax highlighter select on. Both attach with no extra wiring, because the hub layout kept the markdown-content id in #3825. That gives the Copy affordance the designs show.

Step numbering sits before the title. The section describes a sequence, and the number is what carries that. The designs put it in the card corner, which turns it into a decorative counter the reader meets after the title.

No per-step icon. The prototype has steps[].icon, resolved through EuiSvgIcons. It is removed. In the designs the icons restate the step title, the number badge is already the card's visual anchor, and a schema field that exists for decoration means every author picks icons that then drift between hubs.

Machine-readable output. The LLM export renders steps as an ordered list, with options as sub-items carrying their command or link. The search body gets nothing, as with the other hub directives.

Example page

The example hub's section uses every field once and shows all three step shapes. It carries four steps, so the preview shows a section that is not the three-step case the prototype assumed.

Testing

./build.sh unit-test passes. dotnet format and npm run fmt:check are clean. A full docs build reports 0 errors and 0 warnings.

tests/authoring/Blocks/Hub/GetStarted.fs covers all three step shapes, the track count for four steps with and without a wide step, a step option's command landing in a highlightable code block, automatic numbering, that nothing renders above the steps, and two failure paths.

Screenshots to add or update

None attached. The side-by-side option layout in step one is worth checking on the preview.