docs(get-started): add Cardano Developer Pathway with interactive Mermaid map#1751
docs(get-started): add Cardano Developer Pathway with interactive Mermaid map#1751danbaruka wants to merge 14 commits intocardano-foundation:stagingfrom
Conversation
Add overview with Mermaid pathway map, internal click targets to on-page anchors, deep-link sections, and Explore further links. Register Developer Pathway as first item under Get Started sidebar.
Introduce MermaidDiagramFrame using @theme/Mermaid with toolbar zoom, reset, Ctrl/Cmd+wheel zoom, and fullscreen. Move diagram source to src/data/developer-pathway-chart.js; convert overview to MDX.
Treat DEFAULT_ZOOM (1.55x) as 100% in the toolbar; reset returns there. Enlarge percentage typography (1.25rem, bold).
Add MermaidDiagramFrame with full screen API, zoom +/- and 1:1 reset, and Ctrl/Cmd+scroll zoom over the diagram viewport. Move diagram source to developer-pathway-chart and render via @theme/Mermaid in overview.mdx.
Stretch the diagram to 100% of the frame width (not Mermaid intrinsic px size) so default size matches fenced Mermaid in markdown. Widen viewport min/max height for a larger scroll area.
White canvas in light mode; site dark background in dark mode.
Remove redundant entry from sidebar and streamline internal links in the Developer Pathway overview. Adjust description for clarity and enhance the diagram's click targets for better navigation. Update styles for the Mermaid diagram viewport to improve responsiveness and visual consistency across themes.
Align lockfile with the staging branch baseline for reproducible installs and CONTRIBUTING guidance. Made-with: Cursor
|
Latest version reviewed and tested, PR should be left in /staging or moved to another branch while additional input is considered. Suggested Placement is a new folder (Menu Option) under 'Get Started'. |
|
Hey, like said in the dev ex call, this is a great idea. A few comments on this PR. The DocSidebarItems override (src/theme/DocSidebarItems/index.js) is the main thing that gives me pause. It overrides a core Docusaurus component just to keep sibling items visible, and it relies on hardcoded checks for the "Networks" label and the pathway doc ID. This will likely break on Docusaurus upgrades without warning. Could this be solved by restructuring the sidebar config instead? For example, making Developer Pathway a category with a link doc (like Client SDKs already does) would avoid the swizzle entirely. (Swizzle something is risky and should be last resort) A lot of the click links go nowhere useful as the Mermaid click targets point back to /docs/get-started/developer-pathway/overview/ (the page you're already on) The frontmatter references image: /img/og/og-getstarted-overview.png but the file isn't included in the PR. |
|
Hey @Ranchhand87 should this be merged to staging or to a different branch? I'm asking because of the "PR should be left in /staging". If something is in staging then it will land in main soon after. If we want to work on this on a different branch then @danbaruka should make the PR against the other branch. |
- Remove DocSidebarItems override and avoid swizzling core components - Add Get Started section links and a Developer Pathway category to keep navigation clear - Update Mermaid click targets to point to useful docs - Remove invalid OG image frontmatter reference Made-with: Cursor
Make the diagram movable again by using a scrollable viewport (with hidden scrollbars) and adding click-and-drag grab-to-pan support. Keep Ctrl/Cmd+wheel zoom and fullscreen behavior. Made-with: Cursor
- Refresh Mermaid click URLs to latest targets - Auto-fit diagram to viewport width on load/fullscreen and add toolbar Fit button Made-with: Cursor
Start the Mermaid frame at 0.66x so the full diagram better fits the viewport by default. Reset returns to 66%. Also update pathway click links. Made-with: Cursor
Auto-center the scroll viewport on first render and after zoom reset so the map starts centered at the default 66% zoom. Made-with: Cursor
|
Hey @katomm, Thanks for the feedback. I’ve addressed the previous comments:
Everything should be updated now. We can go ahead and merge this into staging. Let me know if anything else needs adjustment. |
If the mechanics have not been decided RE: Where this fits in the Portal Infrastructure, then it should be pushed a 'given' or New branch for continued work. Ideally, as long as you @katomm comments are addressed, I would love to see this up on the Portal. We could even add an in draft label. The goal here is to get it published, but also to work together without overstepping. Happy to grab a quick call as needed to make a clearer decision. |
3 participants
Updating documentation or Bugfix
This PR adds a Cardano Developer Pathway page under Get Started: a single overview with an interactive Mermaid flowchart that outlines typical learning and delivery paths (orientation, tracks, integration, testnets, and specialisations). Nodes use
clicktargets to external docs and to this page where helpful.Implementation notes
docs/get-started/developer-pathway/overview.mdx, with diagram source insrc/data/developer-pathway-chart.jsand rendering viasrc/components/MermaidDiagramFrame(fullscreen, zoom +/- and 1:1 reset, Ctrl/Cmd + scroll zoom, theme-aware diagram background).sidebars.js.src/theme/DocSidebarItems/index.jskeeps all four Get Started siblings visible when viewing the pathway page (avoids Docusaurus hiding inactive categories so the item no longer looks “first” or alone).Scope / content
clickURLs point at the pathway doc (no orphaned anchors).Please review wording and whether the pathway should stay MDX + custom frame or be simplified later.