Add design system roadmap

components/home/featured-roadmaps-list.tsx

@@ -19,12 +19,6 @@ export const upcomingRoadmaps = [
     title: 'React Native',
     description: 'Step by step guide to become a React Native Developer',
     id: 'react-native'
-  },
-  {
-    type: 'Skill Based',
-    title: 'Design System',
-    description: 'Flowchart to help you plan and build your Design System',
-    id: 'design-system'
   }
 ];
 

content/pages/pdfs.md

@@ -14,6 +14,7 @@ Here is the list of PDF links for each of the roadmaps.
 * **Angular Roadmap** - [Roadmap Link](https://roadmap.sh/angular) / [PDF Link](https://roadmap.sh/pdfs/angular.pdf)
 * **React Roadmap** - [Roadmap Link](https://roadmap.sh/react) / [PDF Link](https://roadmap.sh/pdfs/react.pdf)
 * **Vue Roadmap** - [Roadmap Link](https://roadmap.sh/vue) / [PDF Link](https://roadmap.sh/pdfs/vue.pdf)
+* **Design System Roadmap** - [Roadmap Link](https://roadmap.sh/design-system) / [PDF Link](https://roadmap.sh/pdfs/design-system.pdf)
 * **Blockchain Roadmap** - [Roadmap Link](https://roadmap.sh/blockchain) / [PDF Link](https://roadmap.sh/pdfs/blockchain.pdf)
 * **Go Roadmap** - [Roadmap Link](https://roadmap.sh/go) / [PDF Link](https://roadmap.sh/pdfs/go.pdf)
 * **Java Roadmap** - [Roadmap Link](https://roadmap.sh/java) / [PDF Link](https://roadmap.sh/pdfs/java.pdf)

content/roadmaps.json

@@ -692,6 +692,59 @@
     "id": "java",
     "metaPath": "/roadmaps/110-java/meta.json"
   },
+  {
+    "seo": {
+      "title": "How to Create a Design System",
+      "description": "Learn how to create a design system or become a design system engineer with this step by step guide with resources.",
+      "keywords": [
+        "guide to create a design system",
+        "guide to becoming a design system engineer",
+        "design system engineer",
+        "design system engineer",
+        "design system skills",
+        "guide to design system",
+        "design system roadmap",
+        "design system skills",
+        "design system skills test",
+        "skills for design system",
+        "what is design system",
+        "design system quiz",
+        "design system interview questions",
+        "design system engineer roadmap",
+        "design system engineer roadmap",
+        "become a design system engineer",
+        "design system engineer career path",
+        "design system engineer",
+        "modern design system engineer"
+      ]
+    },
+    "title": "Design System",
+    "description": "Learn how to create a design system with this step by step guide",
+    "featuredTitle": "Design System",
+    "type": "tool",
+    "featuredDescription": "Step by step guide to building a modern Design System",
+    "isTextHeavy": false,
+    "isCommunity": false,
+    "isUpcoming": false,
+    "featured": true,
+    "jsonUrl": "/project/design-system.json",
+    "author": {
+      "name": "Kamran Ahmed",
+      "url": "https://twitter.com/kamranahmedse"
+    },
+    "pdfUrl": "/pdfs/design-system.pdf",
+    "contentPathsFilePath": "/roadmaps/111-design-system/content-paths.json",
+    "relatedRoadmaps": [
+      "frontend",
+      "javascript",
+      "react",
+      "vue",
+      "angular",
+      "nodejs"
+    ],
+    "id": "design-system",
+    "metaPath": "/roadmaps/111-design-system/meta.json"
+  },
   {
     "seo": {
       "title": "DBA Roadmap: Learn to become a database administrator with PostgreSQL",

content/roadmaps/111-design-system/meta.json

@@ -0,0 +1,51 @@
+{
+  "seo": {
+    "title": "How to Create a Design System",
+    "description": "Learn how to create a design system or become a design system engineer with this step by step guide with resources.",
+    "keywords": [
+      "guide to create a design system",
+      "guide to becoming a design system engineer",
+      "design system engineer",
+      "design system engineer",
+      "design system skills",
+      "guide to design system",
+      "design system roadmap",
+      "design system skills",
+      "design system skills test",
+      "skills for design system",
+      "what is design system",
+      "design system quiz",
+      "design system interview questions",
+      "design system engineer roadmap",
+      "design system engineer roadmap",
+      "become a design system engineer",
+      "design system engineer career path",
+      "design system engineer",
+      "modern design system engineer"
+    ]
+  },
+  "title": "Design System",
+  "description": "Learn how to create a design system with this step by step guide",
+  "featuredTitle": "Design System",
+  "type": "tool",
+  "featuredDescription": "Step by step guide to building a modern Design System",
+  "isTextHeavy": false,
+  "isCommunity": false,
+  "isUpcoming": false,
+  "featured": true,
+  "jsonUrl": "/project/design-system.json",
+  "author": {
+    "name": "Kamran Ahmed",
+    "url": "https://twitter.com/kamranahmedse"
+  },
+  "pdfUrl": "/pdfs/design-system.pdf",
+  "contentPathsFilePath": "./content-paths.json",
+  "relatedRoadmaps": [
+    "frontend",
+    "javascript",
+    "react",
+    "vue",
+    "angular",
+    "nodejs"
+  ]
+}

lib/roadmap.ts

@@ -49,5 +49,5 @@ export function getFeaturedRoadmaps(): RoadmapType[] {
 }
 
 export function isInteractiveRoadmap(id: string): boolean {
-  return ['frontend', 'backend', 'devops', 'react', 'vue', 'python', 'java', 'blockchain', 'golang', 'javascript', 'nodejs', 'qa'].includes(id);
+  return ['frontend', 'backend', 'devops', 'react', 'vue', 'python', 'java', 'blockchain', 'golang', 'javascript', 'nodejs', 'qa', 'design-system'].includes(id);
 }

pages/[roadmap]/interactive.tsx

@@ -158,6 +158,10 @@ export function InteractiveRoadmapRenderer(props: RoadmapProps) {
     minHeight = ['865px', '1610px', '1610px', '2200px', '2200px', '2200px'];
   }
 
+  if (roadmap.id === 'design-system') {
+    minHeight = ['915px', '1760px', '1880px', '2370px', '2370px', '2370px'];
+  }
+
   return (
     <Container maxW={'container.lg'} position="relative" minHeight={minHeight}>
       {(isLoading || isRendering) && <RoadmapLoader />}

public/sitemap.xml

@@ -72,6 +72,12 @@
               <lastmod>2022-09-08T15:56:13.247Z</lastmod>
               <priority>1.0</priority>
           </url>
+<url>
+              <loc>https://roadmap.sh/design-system</loc>
+              <changefreq>monthly</changefreq>
+              <lastmod>2022-09-13T11:35:13.011Z</lastmod>
+              <priority>1.0</priority>
+          </url>
 <url>
               <loc>https://roadmap.sh/postgresql-dba</loc>
               <changefreq>monthly</changefreq>