Skip to content

docs: add interactive ControlPlane lifecycle demo - #207

Draft
jn-av wants to merge 1 commit into
mainfrom
feat/controlplane-interactive-demo
Draft

docs: add interactive ControlPlane lifecycle demo#207
jn-av wants to merge 1 commit into
mainfrom
feat/controlplane-interactive-demo

Conversation

@jn-av

@jn-av jn-av commented Aug 21, 2026

Copy link
Copy Markdown
Contributor

Summary

  • Adds a 7-step browser-based interactive demo page at /users/concepts/controlplane-demo
  • Architecture diagram builds up step-by-step (Cluster Provider → Onboarding → Platform → ControlPlane)
  • Animated balls show the reconciliation message flow after kubectl apply
  • User types commands themselves in interactive terminals (Steps 5 & 6)
  • Step 7 links to the local quickstart

Components added

  • src/components/ControlPlaneDemo/ — React component suite (SVG diagram with rAF ball animation, interactive terminals, step boxes with IntersectionObserver)
  • docs/users/concepts/controlplane-demo.mdx — doc page, auto-picked up by the autogenerated sidebar

Test plan

  • npm start and visit /users/concepts/controlplane-demo
  • Steps 1–3: verify diagram boxes appear one by one
  • Step 4: YAML displayed correctly
  • Step 5: type kubectl apply -f controlplane.yaml, verify balls animate through all components and ControlPlane box spawns
  • Step 6: type kubectl get deployments -n crossplane-system after Step 5 completes
  • Step 7: CTA card links to /operators/quickstart
  • No layout shift, no page scroll on spacebar

Adds a 7-step browser-based interactive demo to the Concepts section
that walks users through the full ManagedControlPlane provisioning flow:
- Steps 1-3: architecture diagram builds up box-by-box
- Step 4: ManagedControlPlane YAML shown
- Step 5: user types kubectl apply, animated balls show reconciliation flow
- Step 6: user types kubectl get deployments on the new ControlPlane
- Step 7: CTA linking to the local quickstart

Components: ControlPlaneDemo (index, ArchDiagram, InteractiveTerminal,
FakeTerminal, demo-config, styles)

Signed-off-by: Jan Säck <jan.saeck@sap.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant