feat: add custom renderer for roadmaps (#5691)

* wip

* fix: update packages

* wip

* wip

* feat: editor content generator

* fix: add dimensions

* feat: add renderer

* feat: add progress modal renderer

* Add API design roadmap

* Update API roadmap rendering

* fix: button click

* fix: link item

* feat: render pdf for editor roadmaps

* Add API roadmap

* Fix broken link of full-stack roadmap

* Update content dir

* Fix typos in api roadmap

* Add assets for pdf and svg

* Add content for api roadmap

* Add todo

* fix: close on editor roadmap select

* Update link not working

* Add api roadmap to get-started and roadmaps page

---------

Co-authored-by: Arik Chakma <arikchangma@gmail.com>

src/components/UserProgress/UserProgressModal.tsx

@@ -11,6 +11,9 @@ import { useAuth } from '../../hooks/use-auth';
 import { ModalLoader } from './ModalLoader.tsx';
 import { UserProgressModalHeader } from './UserProgressModalHeader';
 import { X } from 'lucide-react';
+import type { PageType } from '../CommandMenu/CommandMenu.tsx';
+import type { AllowedRoadmapRenderer } from '../../lib/roadmap.ts';
+import { renderFlowJSON } from '../../../editor/renderer/renderer.ts';
 
 export type ProgressMapProps = {
   userId?: string;
@@ -18,6 +21,7 @@ export type ProgressMapProps = {
   resourceType: ResourceType;
   onClose?: () => void;
   isCustomResource?: boolean;
+  renderer?: AllowedRoadmapRenderer;
 };
 
 export type UserProgressResponse = {
@@ -39,6 +43,7 @@ export function UserProgressModal(props: ProgressMapProps) {
     resourceType,
     userId: propUserId,
     onClose: onModalClose,
+    renderer = 'balsamiq',
   } = props;
 
   const { s: userId = propUserId } = getUrlParams();
@@ -87,15 +92,18 @@ export function UserProgressModal(props: ProgressMapProps) {
 
   async function getRoadmapSVG(
     jsonUrl: string,
+    renderer: AllowedRoadmapRenderer = 'balsamiq',
   ): Promise<SVGElement | undefined> {
     const { error, response: roadmapJson } = await httpGet(jsonUrl);
     if (error || !roadmapJson) {
       throw error || new Error('Something went wrong. Please try again!');
     }
 
-    return await wireframeJSONToSVG(roadmapJson, {
-      fontURL: '/fonts/balsamiq.woff2',
-    });
+    return renderer === 'editor'
+      ? await renderFlowJSON(roadmapJson as any)
+      : await wireframeJSONToSVG(roadmapJson, {
+          fontURL: '/fonts/balsamiq.woff2',
+        });
   }
 
   function onClose() {
@@ -124,8 +132,10 @@ export function UserProgressModal(props: ProgressMapProps) {
     }
 
     setIsLoading(true);
+    setError('');
+
     Promise.all([
-      getRoadmapSVG(resourceJsonUrl),
+      getRoadmapSVG(resourceJsonUrl, renderer),
       getUserProgress(userId, resourceType, resourceId),
     ])
       .then(([svg, user]) => {