fix: editor roadmap rendering style

* Improve personal dashboard design

* Add projects toggle

* Improve UI for AI roadmaps

* Add builtin roadmaps and best practices

* Collapse and expand

* Move to separate files

* Refactor hero items group

* Collapse expand

* Add expand collapse in hero title

* Add collapse expand of groups

* Style updates

* Collapse expand

* Remove global collapse expand

* Update hero title

* Fix spacing

* Empty screen handling

* Add empty message

* Add profile button

* Add questions listing on dashboard

* Add guides and videos on dashboard

* Responsiveness

* Update messaging

public/roadmap-content/system-design.json

@@ -1326,16 +1326,10 @@
       }
     ]
   },
-  "LncTxPg-wx8loy55r5NmV": {
+  "queu-based-load-leveling@LncTxPg-wx8loy55r5NmV.md": {
     "title": "Queu-based Load Leveling",
-    "description": "Use a queue that acts as a buffer between a task and a service it invokes in order to smooth intermittent heavy loads that can cause the service to fail or the task to time out. This can help to minimize the impact of peaks in demand on availability and responsiveness for both the task and the service.\n\nLearn more from the following links:",
-    "links": [
-      {
-        "title": "Queue-Based Load Leveling pattern",
-        "url": "https://learn.microsoft.com/en-us/azure/architecture/patterns/queue-based-load-leveling",
-        "type": "article"
-      }
-    ]
+    "description": "",
+    "links": []
   },
   "2ryzJhRDTo98gGgn9mAxR": {
     "title": "Publisher/Subscriber",

src/components/Dashboard/DashboardPage.tsx

@@ -82,17 +82,16 @@ export function DashboardPage(props: DashboardPageProps) {
           'striped-loader-slate': isLoading,
         })}
       >
-        <div className="bg-slate-800/30 py-5">
+        <div className="bg-slate-800/30 py-5 min-h-[70px]">
           <div className="container flex flex-wrap items-center gap-1.5">
-            <DashboardTabButton
-              label="Personal"
-              isActive={!selectedTeamId && !isTeamPage}
-              href="/dashboard"
-              avatar={userAvatar}
-            />
-
             {!isLoading && (
               <>
+                <DashboardTabButton
+                  label="Personal"
+                  isActive={!selectedTeamId && !isTeamPage}
+                  href="/dashboard"
+                  avatar={userAvatar}
+                />
                 {teamList.map((team) => {
                   const { avatar } = team;
                   const avatarUrl = avatar

src/components/TeamProgress/MemberProgressModal.tsx

@@ -1,7 +1,8 @@
+import '../FrameRenderer/FrameRenderer.css';
+import '../EditorRoadmap/EditorRoadmapRenderer.css';
 import { useEffect, useRef, useState } from 'react';
 import { wireframeJSONToSVG } from 'roadmap-renderer';
 import { Spinner } from '../ReactIcons/Spinner';
-import '../FrameRenderer/FrameRenderer.css';
 import { useOutsideClick } from '../../hooks/use-outside-click';
 import { useKeydown } from '../../hooks/use-keydown';
 import type { TeamMember } from './TeamProgressPage';
@@ -18,6 +19,9 @@ import { pageProgressMessage } from '../../stores/page';
 import { MemberProgressModalHeader } from './MemberProgressModalHeader';
 import { replaceChildren } from '../../lib/dom.ts';
 import { XIcon } from 'lucide-react';
+import type { PageType } from '../CommandMenu/CommandMenu.tsx';
+import { renderFlowJSON } from '../../../editor/renderer/renderer.ts';
+import { getResourceMeta } from '../../lib/roadmap.ts';
 
 export type ProgressMapProps = {
   member: TeamMember;
@@ -56,6 +60,7 @@ export function MemberProgressModal(props: ProgressMapProps) {
     useState<MemberProgressResponse>();
   const [isLoading, setIsLoading] = useState(true);
   const toast = useToast();
+  const [renderer, setRenderer] = useState<PageType['renderer']>('balsamiq');
 
   let resourceJsonUrl = import.meta.env.DEV
     ? 'http://localhost:3000'
@@ -88,14 +93,25 @@ export function MemberProgressModal(props: ProgressMapProps) {
   }
 
   async function renderResource(jsonUrl: string) {
+    const page = await getResourceMeta(resourceType, resourceId);
+    if (!page) {
+      toast.error('Resource not found');
+      return;
+    }
+
+    const renderer = page.renderer || 'balsamiq';
+    setRenderer(renderer);
+
     const res = await fetch(jsonUrl, {});
     const json = await res.json();
-    const svg: SVGElement | null = await wireframeJSONToSVG(json, {
-      fontURL: '/fonts/balsamiq.woff2',
-    });
+    const svg =
+      renderer === 'editor'
+        ? await renderFlowJSON(json as any)
+        : await wireframeJSONToSVG(json, {
+            fontURL: '/fonts/balsamiq.woff2',
+          });
 
     replaceChildren(containerEl.current!, svg);
-    // containerEl.current?.replaceChildren(svg);
   }
 
   useKeydown('Escape', () => {
@@ -136,10 +152,10 @@ export function MemberProgressModal(props: ProgressMapProps) {
           skipped = [],
         } = memberProgress;
 
-        done.forEach((id: string) => renderTopicProgress(id, 'done'));
-        learning.forEach((id: string) => renderTopicProgress(id, 'learning'));
-        skipped.forEach((id: string) => renderTopicProgress(id, 'skipped'));
-        removed.forEach((id: string) => renderTopicProgress(id, 'removed'));
+        done.forEach((id) => renderTopicProgress(id, 'done'));
+        learning.forEach((id) => renderTopicProgress(id, 'learning'));
+        skipped.forEach((id) => renderTopicProgress(id, 'skipped'));
+        removed.forEach((id) => renderTopicProgress(id, 'removed'));
       })
       .catch((err) => {
         console.error(err);
@@ -262,7 +278,7 @@ export function MemberProgressModal(props: ProgressMapProps) {
   return (
     <div className="fixed left-0 right-0 top-0 z-[100] h-full items-center justify-center overflow-y-auto overflow-x-hidden overscroll-contain bg-black/50">
       <div
-        id={'customized-roadmap'}
+        id={renderer === 'editor' ? undefined : 'customized-roadmap'}
         className="relative mx-auto h-full w-full max-w-4xl p-4 md:h-auto"
       >
         <div

src/components/UserProgress/UserProgressModal.tsx

@@ -11,7 +11,6 @@ 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';
 

src/data/roadmaps/cpp/content/112-idioms/106-copy-write.md

@@ -20,7 +20,7 @@ public:
     // Make a copy only if we want to modify the data.
     void write(const std::string &str) {
         // Check if there's more than one reference.
-        if(!data.unique()) {
+        if(data.use_count() > 1) {
             data = std::make_shared<std::string>(*data);
             std::cout << "Copy is actually made for writing." << std::endl;
         }

src/lib/roadmap.ts

@@ -1,4 +1,7 @@
+import type { PageType } from '../components/CommandMenu/CommandMenu';
 import type { MarkdownFileType } from './file';
+import { httpGet } from './http';
+import type { ResourceType } from './resource-progress';
 
 export function resourceTitleFromId(id: string): string {
   if (id === 'devops') {
@@ -150,3 +153,29 @@ export async function getRoadmapFaqsById(roadmapId: string): Promise<string[]> {
 
   return faqs || [];
 }
+
+export async function getResourceMeta(
+  resourceType: ResourceType,
+  resourceId: string,
+) {
+  const { error, response } = await httpGet<PageType[]>(`/pages.json`);
+  if (error || !response) {
+    return null;
+  }
+
+  const page = response.find((page) => {
+    if (resourceType === 'roadmap') {
+      return page.url === `/${resourceId}`;
+    } else if (resourceType === 'best-practice') {
+      return page.url === `/best-practices/${resourceId}`;
+    }
+
+    return false;
+  });
+
+  if (!page) {
+    return null;
+  }
+
+  return page;
+}