| 1 | /** |
| 2 | * <GettingStartedSteps> — renders the shared new-user path from |
| 3 | * web/lib/content/getting-started.ts: install → provider connection → |
| 4 | * first task → optional Fleet setup. |
| 5 | * |
| 6 | * Used by the homepage and the /docs/guide page so the path reads |
| 7 | * identically in both places. Server component, SSG-safe. |
| 8 | */ |
| 9 | |
| 10 | import Link from "next/link"; |
| 11 | import { GETTING_STARTED_STEPS } from "@/lib/content/getting-started"; |
| 12 | import { pickText } from "@/lib/i18n/dictionaries"; |
| 13 | import { Icon } from "./icon"; |
| 14 | |
| 15 | export function GettingStartedSteps({ |
| 16 | locale = "en", |
| 17 | headingLevel = 3, |
| 18 | }: { |
| 19 | locale?: string; |
| 20 | /** 2 when the steps sit directly under the page title, 3 under a section. */ |
| 21 | headingLevel?: 2 | 3; |
| 22 | }) { |
| 23 | const StepHeading = headingLevel === 2 ? "h2" : "h3"; |
| 24 | return ( |
| 25 | <ol className="gs-steps"> |
| 26 | {GETTING_STARTED_STEPS.map((step, index) => ( |
| 27 | <li key={step.id} data-step-id={step.id}> |
| 28 | <span className="gs-step-index" aria-hidden="true"> |
| 29 | {index + 1} |
| 30 | </span> |
| 31 | <StepHeading className="gs-step-title">{pickText(step.title, locale)}</StepHeading> |
| 32 | <p>{pickText(step.body, locale)}</p> |
| 33 | {step.commands.length > 0 && ( |
| 34 | <pre tabIndex={0} className="code-block gs-step-commands"><code>{step.commands.join("\n")}</code></pre> |
| 35 | )} |
| 36 | <Link href={`/${locale}${step.link.href}`} className="gs-step-link"> |
| 37 | {pickText(step.link.label, locale)} |
| 38 | <Icon name="arrow-right" className="icon icon-flip" /> |
| 39 | </Link> |
| 40 | </li> |
| 41 | ))} |
| 42 | </ol> |
| 43 | ); |
| 44 | } |
| 45 |