| 1 | /** |
| 2 | * <GettingStartedSteps> — renders the shared new-user path from |
| 3 | * web/lib/content/getting-started.ts: install → first offline session → |
| 4 | * provider connection → first Fleet workflow. |
| 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 | |
| 13 | export function GettingStartedSteps({ locale = "en" }: { locale?: string }) { |
| 14 | const isZh = locale === "zh"; |
| 15 | |
| 16 | return ( |
| 17 | <ol className="gs-steps"> |
| 18 | {GETTING_STARTED_STEPS.map((step, index) => ( |
| 19 | <li key={step.id} data-step-id={step.id}> |
| 20 | <span className="gs-step-index" aria-hidden="true"> |
| 21 | {String(index + 1).padStart(2, "0")} |
| 22 | </span> |
| 23 | <h3>{isZh ? step.title.zh : step.title.en}</h3> |
| 24 | <p>{isZh ? step.body.zh : step.body.en}</p> |
| 25 | {step.commands.length > 0 && ( |
| 26 | <pre className="code-block gs-step-commands"><code>{step.commands.join("\n")}</code></pre> |
| 27 | )} |
| 28 | <Link href={`/${locale}${step.link.href}`} className="gs-step-link"> |
| 29 | {isZh ? step.link.label.zh : step.link.label.en} → |
| 30 | </Link> |
| 31 | </li> |
| 32 | ))} |
| 33 | </ol> |
| 34 | ); |
| 35 | } |
| 36 |