Render hub get-started steps as chevrons

docs/syntax/get-started.md

@@ -57,9 +57,10 @@ Every field except `title` is optional. The [example hub](../examples/products/d
 
 There is no fixed number. The layout arranges whatever you write:
 
-- A step carrying `options` spans the full row.
+- A step carrying `options` spans the full row, as one chevron with the choices inside it.
 - The remaining steps share the row, three across when they divide by three, two when they are even, so the last row is never short.
-- Below a narrow width the steps stack into one column.
+- A step that ends up alone on its row stays the width of one step and is centered.
+- Below a narrow width the steps stack into one column, and the content in each step is centered.
 
 Keep the list short enough to read as one path. Four steps still scan. Ten do not.
 
@@ -74,7 +75,7 @@ A step takes one of three shapes.
   description: Serve the site locally, then publish it.
 ```
 
-**Link.** Add `link` and `link-label`, and the whole step card becomes clickable.
+**Link.** Add `link` and `link-label`. The step shows that label as a text link. The chevron itself is not the link.
 
 ```yaml
 - title: Write your first page
@@ -98,7 +99,7 @@ A step takes one of three shapes.
       url-label: How to publish
 ```
 
-Steps are numbered automatically, in source order. The number sits before the title, because the section describes a sequence and the number is what carries that.
+Steps are numbered automatically, in source order. Each number sits in a badge on the left of its chevron. The number carries the sequence, and a line joins one row to the next.
 
 ## Links
 

src/Elastic.Documentation.Site/Assets/copybutton.css

@@ -37,6 +37,13 @@ div.highlight {
 	position: relative;
 }
 
+/* A get-started option command is a one-line chip. Center the button in it. */
+.hub-get-started .hub-get-started-install > .copybtn {
+	top: 50%;
+	right: 6px;
+	transform: translateY(-50%);
+}
+
 /* Show the copybutton */
 .highlight:hover button.copybtn,
 button.copybtn.success {

src/Elastic.Documentation.Site/Assets/get-started.ts

@@ -0,0 +1,107 @@
+const STACK_WIDTH = 720
+const observers = new WeakMap<HTMLElement, ResizeObserver>()
+
+// Draws the wrap line from the point of one chevron row into the next.
+// The line is a position calculation, so it stays out of the markup.
+export function initGetStarted() {
+    document
+        .querySelectorAll<HTMLElement>('.hub-get-started-track')
+        .forEach((track) => {
+            draw(track)
+            if (observers.has(track)) return
+
+            const observer = new ResizeObserver(() => {
+                if (!track.isConnected) {
+                    observer.disconnect()
+                    observers.delete(track)
+                    return
+                }
+                draw(track)
+            })
+            observer.observe(track)
+            observers.set(track, observer)
+        })
+}
+
+function draw(track: HTMLElement) {
+    track.querySelector(':scope > .hub-get-started-track-svg')?.remove()
+    if (track.clientWidth <= STACK_WIDTH) return
+
+    const rows = [
+        ...track.querySelectorAll<HTMLElement>(':scope > .hub-get-started-row'),
+    ]
+    if (rows.length < 2) return
+
+    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
+    svg.classList.add('hub-get-started-track-svg')
+    svg.setAttribute('aria-hidden', 'true')
+    const box = track.getBoundingClientRect()
+    const stroke =
+        getComputedStyle(document.documentElement)
+            .getPropertyValue('--color-blue-midnight')
+            .trim() || '#20377d'
+
+    rows.slice(0, -1).forEach((row, index) => {
+        const from = row.querySelector<HTMLElement>(
+            ':scope > .hub-get-started-step:last-child'
+        )
+        const to = rows[index + 1].querySelector<HTMLElement>(
+            ':scope > .hub-get-started-step'
+        )
+        if (!from || !to) return
+
+        const fromBox = from.getBoundingClientRect()
+        const toBox = to.getBoundingClientRect()
+        const x1 = fromBox.right - box.left
+        const y1 = fromBox.top + fromBox.height / 2 - box.top
+        const x2 = toBox.left - box.left
+        const y2 = toBox.top + toBox.height / 2 - box.top
+        const right = x1 + 22
+        const left = x2 - 36
+        const gapY = (fromBox.bottom + toBox.top) / 2 - box.top
+
+        const path = document.createElementNS(
+            'http://www.w3.org/2000/svg',
+            'path'
+        )
+        path.setAttribute(
+            'd',
+            `M ${x1} ${y1} H ${right} V ${gapY} H ${left} V ${y2} H ${x2 - 16}`
+        )
+        path.setAttribute('fill', 'none')
+        path.setAttribute('stroke', stroke)
+        path.setAttribute('stroke-width', '1.5')
+        path.setAttribute('stroke-linejoin', 'miter')
+        svg.append(path)
+
+        const cx = x2 - 8
+        const circle = document.createElementNS(
+            'http://www.w3.org/2000/svg',
+            'circle'
+        )
+        circle.setAttribute('cx', String(cx))
+        circle.setAttribute('cy', String(y2))
+        circle.setAttribute('r', '11')
+        circle.setAttribute('fill', '#ffffff')
+        circle.setAttribute('stroke', stroke)
+        circle.setAttribute('stroke-width', '1.5')
+        svg.append(circle)
+
+        const arrow = document.createElementNS(
+            'http://www.w3.org/2000/svg',
+            'path'
+        )
+        arrow.setAttribute(
+            'd',
+            `M ${cx - 4} ${y2 - 4} L ${cx + 3} ${y2} L ${cx - 4} ${y2 + 4}`
+        )
+        arrow.setAttribute('fill', 'none')
+        arrow.setAttribute('stroke', stroke)
+        arrow.setAttribute('stroke-width', '1.5')
+        arrow.setAttribute('stroke-linejoin', 'miter')
+        arrow.setAttribute('stroke-linecap', 'round')
+        svg.append(arrow)
+    })
+
+    track.prepend(svg)
+}

src/Elastic.Documentation.Site/Assets/main.ts

@@ -3,6 +3,7 @@ import { initApiDocs } from './api-docs'
 import { initAppliesSwitch } from './applies-switch'
 import { config } from './config'
 import { initCopyButton } from './copybutton'
+import { initGetStarted } from './get-started'
 import { initHighlight } from './hljs'
 import { initImageCarousel } from './image-carousel'
 import { initListing } from './listing'
@@ -200,6 +201,7 @@ document.addEventListener('DOMContentLoaded', function () {
         ['initMath', initMath],
         ['initMermaid', initMermaid],
         ['initCtaImpressions', initCtaImpressions],
+        ['initGetStarted', initGetStarted],
     ])
 })
 
@@ -218,6 +220,7 @@ document.addEventListener('htmx:load', function () {
         ['initSmoothScroll', initSmoothScroll],
         ['openDetailsWithAnchor', openDetailsWithAnchor],
         ['initImageCarousel', initImageCarousel],
+        ['initGetStarted', initGetStarted],
         ['initListing', initListing],
         ['initTable', initTable],
         ['initApiDocs', initApiDocs],