mirror of
https://github.com/CopilotKit/CopilotKit.git
synced 2026-09-14 16:26:20 +08:00
Sam Julien
62facacee1
Every integration quickstart in docs/ and showcase/shell-docs/ now opens with a "Create a free account" step that points the reader at the Enterprise Intelligence Platform before the framework path. Existing top-of-page <OpsPlatformCTA> blocks on the six integrations that already had one are left in place. - New <SignupLink surface="docs_<int>_quickstart_step1">…</SignupLink> MDX component in both apps. It mirrors OpsPlatformCTA's URL+UTM contract (https://dashboard.operations.copilotkit.ai/ with the canonical docs UTMs, picked up from NEXT_PUBLIC_INTELLIGENCE_SIGNUP_URL when set) and fires the same PostHog event the other CTAs use: posthog.capture("try_for_free_clicked", { location: surface }). - Registered as an MDX global in: docs/app/integrations/[[...slug]]/page.tsx docs/app/(home)/[[...slug]]/page.tsx showcase/shell-docs/src/lib/mdx-registry.tsx - All 28 integration quickstart .mdx files now lead with a Step that uses this component as an inline link inside a single sentence of prose — no CTA card inside <Steps>. The <TailoredContent> "Choose your starting point" / "How do you want to get started?" selector is now wrapped in its own <Step> so it advances the counter, and the inner CLI/manual paths render as steps 3, 4, 5, … instead of 2, 3, 4, …. Applies to all 20 quickstarts that use the picker. - Indigo→purple gradient text on the Step 1 heading on both surfaces (`.fd-steps > .fd-step:first-child h3` on docs/, `.docs-steps > div:first-child h3` on shell-docs). Direct-child combinator scopes it to the outer first Step so inner first-children inside TailoredContentOption don't pick it up. Bump weight to 700 and font-size to 1.375rem on docs/ to compensate for the background-clip:text rendering path (grayscale AA, no solid fill) which makes glyphs look lighter/smaller than the adjacent solid 600/20px headings. - Tone down the selected TailoredContent option card on both surfaces to a near-grayscale wash (from-slate-50 → to-indigo-50/30) and shorten the card itself (smaller padding, smaller icon, smaller title; extra left padding for breathing room) so the picker takes less vertical space and doesn't compete with the Step 1 gradient heading. Indigo ring still does the "selected" signal. - Bump the tablist's bottom margin in shell-docs (my-2 → mt-2 mb-6) so the gap between the picker and the first inner Step matches the 1.5rem gap that every other consecutive-Step transition uses. - Black SignupLink color in Step 1 on shell-docs so the link doesn't clash with the gradient heading above it. - Shell-docs: reset margin-top on the first heading inside any Step so the badge and heading align, and nudge the badge top from -0.125rem to 0.1875rem so its vertical center matches the heading line center. Moved the badge's appearance (background/border/color/font-weight) out of inline style and into globals.css so :first-child overrides can win without fighting inline-style specificity.
88 lines
2.6 KiB
TypeScript
88 lines
2.6 KiB
TypeScript
// <Steps>/<Step> — numbered step blocks with a left-side connector line.
|
||
//
|
||
// Reference (docs.copilotkit.ai) uses fumadocs' `Steps`: each step is
|
||
// numbered via a small circle on the left and a thin vertical line
|
||
// connects consecutive steps. We approximate that here in pure CSS —
|
||
// no client-side JS needed, so this works inside RSC-rendered MDX.
|
||
//
|
||
// Numbering is CSS counter-driven (see `.docs-steps` / `.docs-step__badge`
|
||
// in `globals.css`) rather than React-injected indices. That way a
|
||
// `<Step>` hidden by a gate like `<WhenFrameworkHas>` doesn't advance
|
||
// the counter — visible steps stay 1, 2, 3, … in the reader's view
|
||
// regardless of which gates pass.
|
||
|
||
import React from "react";
|
||
|
||
export function Steps({ children }: { children: React.ReactNode }) {
|
||
return (
|
||
<div
|
||
className="docs-steps"
|
||
style={{
|
||
position: "relative",
|
||
paddingLeft: "2rem",
|
||
borderLeft: "1px solid var(--border)",
|
||
marginLeft: "0.75rem",
|
||
margin: "1.5rem 0 1.5rem 0.75rem",
|
||
}}
|
||
>
|
||
{children}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
interface StepProps {
|
||
title?: string;
|
||
children?: React.ReactNode;
|
||
}
|
||
|
||
export function Step({ title, children }: StepProps) {
|
||
return (
|
||
<div
|
||
style={{
|
||
position: "relative",
|
||
paddingBottom: "1.5rem",
|
||
}}
|
||
>
|
||
{/* numbered badge — number rendered via CSS counter (globals.css).
|
||
* Appearance (background/border/color) lives in globals.css so
|
||
* `.docs-steps > div:first-child .docs-step__badge` can override
|
||
* it for Step 1 without fighting inline-style specificity. */}
|
||
<div
|
||
aria-hidden
|
||
className="docs-step__badge"
|
||
style={{
|
||
position: "absolute",
|
||
left: "-2.75rem",
|
||
// Badge center sits ~midway up the first heading line:
|
||
// h3 is 1.125rem with line-height 1.65 ≈ 29.7px → text center at
|
||
// ~14.85px from the Step's top. Badge is 1.5rem (24px) so its
|
||
// half-height is 12px; top = 14.85 − 12 ≈ 0.1875rem.
|
||
top: "0.1875rem",
|
||
width: "1.5rem",
|
||
height: "1.5rem",
|
||
borderRadius: "999px",
|
||
fontSize: "0.75rem",
|
||
display: "flex",
|
||
alignItems: "center",
|
||
justifyContent: "center",
|
||
lineHeight: 1,
|
||
}}
|
||
/>
|
||
{title && (
|
||
<h4
|
||
style={{
|
||
fontWeight: 600,
|
||
marginBottom: "0.375rem",
|
||
marginTop: 0,
|
||
fontSize: "1rem",
|
||
color: "var(--text)",
|
||
}}
|
||
>
|
||
{title}
|
||
</h4>
|
||
)}
|
||
<div style={{ fontSize: "0.9375rem", lineHeight: 1.65 }}>{children}</div>
|
||
</div>
|
||
);
|
||
}
|