| 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 band 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 | |
| 14 | export function GettingStartedSteps({ locale = "en" }: { locale?: string }) { |
| 15 | return ( |
| 16 | <ol className="gs-steps"> |
| 17 | {GETTING_STARTED_STEPS.map((step, index) => ( |
| 18 | <li key={step.id} data-step-id={step.id}> |
| 19 | <span className="gs-step-index" aria-hidden="true"> |
| 20 | {String(index + 1).padStart(2, "0")} |
| 21 | </span> |
| 22 | <h3>{pickText(step.title, locale)}</h3> |
| 23 | <p>{pickText(step.body, locale)}</p> |
| 24 | {step.commands.length > 0 && ( |
| 25 | <pre className="code-block gs-step-commands"><code>{step.commands.join("\n")}</code></pre> |
| 26 | )} |
| 27 | <Link href={`/${locale}${step.link.href}`} className="gs-step-link"> |
| 28 | {pickText(step.link.label, locale)} → |
| 29 | </Link> |
| 30 | </li> |
| 31 | ))} |
| 32 | </ol> |
| 33 | ); |
| 34 | } |
| 35 |