Skip to content

Highlight the Concerto Playground as the primary quick-start#136

Merged
mttrbrts merged 7 commits into
mainfrom
docs/highlight-playground
May 31, 2026
Merged

Highlight the Concerto Playground as the primary quick-start#136
mttrbrts merged 7 commits into
mainfrom
docs/highlight-playground

Conversation

@mttrbrts
Copy link
Copy Markdown
Member

Summary

Make the in-browser Concerto Playground the headline way to get started on the docs homepage, and fix a few things noticed along the way.

Homepage

  • Hero path chooser — replaces the two old buttons with a four-card chooser (Try the Playground / Learn the language / Use the SDK / Use the CLI), with the Playground featured as "Recommended".
  • Live Playground embed — a new "Try Concerto in your browser" section near the top embeds the live Playground in an iframe (browser-chrome styling) with an "Open full Playground" CTA.
  • Reworked "Give it a try" — leads with the no-install Playground (step 1), then the CLI (step 2), then Quick Start / SDK Reference links.
  • Navbar — adds a persistent Playground link.

Card / link destinations

  • Learn the language → /docs/design/specification/model-introduction
  • Use the SDK → /docs/category/using-the-api (card description says TypeScript)
  • "Give it a try" SDK Reference → https://concerto.accordproject.org/docs/category/using-the-api

Fixes & cleanup

  • Mermaid rendering — the homepage UML example previously showed raw classDiagram source because mermaid.contentLoaded() ran during render, before the node was in the DOM. Now renders via mermaid.render() in a post-mount effect (with a cancellation guard for StrictMode and .catch so failures don't surface as a dev-server overlay).
  • Removed the Twitter "Follow @accordhq" hero button and its now-orphaned styles.
  • Added rel="noopener noreferrer" to homepage buttons that open in a new tab.

Test plan

  • Hero chooser renders; Playground card highlighted; all four cards navigate to the right pages
  • Live Playground iframe loads and is interactive
  • "Give it a try" SDK Reference points to the production Using the API page
  • UML tab renders an actual diagram (verified SVG + no error overlay), and survives switching tabs
  • Responsive: chooser collapses to 2-up / 1-up on tablet / mobile
  • Reviewer sanity-check of copy and destinations

🤖 Generated with Claude Code

mttrbrts and others added 6 commits May 31, 2026 11:39
… homepage

Make the in-browser Playground the headline way to get started: a four-way
hero path chooser (Playground / language / SDK / CLI) with the Playground
featured, a live embedded Playground iframe section near the top, a reworked
"Give it a try" flow that leads with the no-install Playground, and a
persistent Playground link in the navbar.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Signed-off-by: Matt Roberts <code@rbrts.uk>
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Signed-off-by: Matt Roberts <code@rbrts.uk>
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Signed-off-by: Matt Roberts <code@rbrts.uk>
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Signed-off-by: Matt Roberts <code@rbrts.uk>
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Signed-off-by: Matt Roberts <code@rbrts.uk>
…dy up

- SDK Reference button now links to the production Using the API docs
- Render Mermaid diagrams via mermaid.render() in an effect after mount, so
  the homepage UML example actually renders (it previously showed raw source
  because contentLoaded ran during render, before the node was in the DOM)
- Add rel="noopener noreferrer" to ActionButtons that open in a new tab
- Remove the now-orphaned Twitter follow button styles

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Signed-off-by: Matt Roberts <code@rbrts.uk>
@netlify
Copy link
Copy Markdown

netlify Bot commented May 31, 2026

Deploy Preview for concerto-docs ready!

Name Link
🔨 Latest commit 26915f2
🔍 Latest deploy log https://app.netlify.com/projects/concerto-docs/deploys/6a1c13e2fc18dc0008bf54c7
😎 Deploy Preview https://deploy-preview-136--concerto-docs.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

The UML/TypeScript/JSON Schema tabbed examples are now redundant with
the embedded live Playground. Drop the CodeSamples component, delete the
now-unused Mermaid and samples helpers, and collapse the Cross-Platform
section to a single centered text column.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Signed-off-by: Matt Roberts <code@rbrts.uk>
@mttrbrts mttrbrts merged commit c17d26c into main May 31, 2026
8 checks passed
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