Add pdf links

content/roadmaps.json

@@ -31,7 +31,6 @@
     "description": "Step by step guide to becoming a modern frontend developer in 2021",
     "featuredTitle": "Frontend",
     "featuredDescription": "Step by step guide to becoming a frontend developer in 2021",
-    "isUpcoming": false,
     "author": {
       "name": "Kamran Ahmed",
       "url": "https://twitter.com/kamranahmedse"
@@ -39,7 +38,9 @@
     "featured": true,
     "imagePath": "/roadmaps/frontend.png",
     "resourcesPath": "/roadmaps/1-frontend/resources.md",
-    "id": "frontend"
+    "pdfUrl": "https://kamranahmedse.gumroad.com/l/frontend-roadmap",
+    "id": "frontend",
+    "isUpcoming": false
   },
   {
     "seo": {
@@ -76,12 +77,13 @@
     "featured": true,
     "imagePath": "/roadmaps/backend.png",
     "resourcesPath": "/roadmaps/2-backend/resources.md",
-    "isUpcoming": false,
     "author": {
       "name": "Kamran Ahmed",
       "url": "https://twitter.com/kamranahmedse"
     },
-    "id": "backend"
+    "pdfUrl": "https://kamranahmedse.gumroad.com/l/backend-roadmap",
+    "id": "backend",
+    "isUpcoming": false
   },
   {
     "seo": {
@@ -117,12 +119,13 @@
       "2018",
       "2017"
     ],
-    "isUpcoming": false,
     "author": {
       "name": "Kamran Ahmed",
       "url": "https://twitter.com/kamranahmedse"
     },
-    "id": "devops"
+    "pdfUrl": "https://kamranahmedse.gumroad.com/l/devops-roadmap",
+    "id": "devops",
+    "isUpcoming": false
   },
   {
     "seo": {
@@ -156,12 +159,13 @@
       "2018",
       "2017"
     ],
-    "isUpcoming": false,
     "author": {
       "name": "Kamran Ahmed",
       "url": "https://twitter.com/kamranahmedse"
     },
-    "id": "react"
+    "pdfUrl": "https://kamranahmedse.gumroad.com/l/react-roadmap",
+    "id": "react",
+    "isUpcoming": false
   },
   {
     "seo": {
@@ -194,7 +198,6 @@
     "featuredDescription": "Step by step guide to become a PostgreSQL DBA in 2021",
     "contentPath": "/roadmaps/5-postgresql-dba/landscape.md",
     "resourcesPath": "/roadmaps/5-postgresql-dba/resources.md",
-    "isUpcoming": false,
     "author": {
       "name": "Alexey Lesovsky",
       "url": "https://github.com/lesovsky"
@@ -204,7 +207,8 @@
     "featured": true,
     "detailed": false,
     "versions": [],
-    "id": "postgresql-dba"
+    "id": "postgresql-dba",
+    "isUpcoming": false
   },
   {
     "seo": {
@@ -238,12 +242,12 @@
       "2018",
       "2017"
     ],
-    "isUpcoming": false,
     "author": {
       "name": "Kamran Ahmed",
       "url": "https://twitter.com/kamranahmedse"
     },
-    "id": "android"
+    "id": "android",
+    "isUpcoming": false
   },
   {
     "seo": {
@@ -268,13 +272,13 @@
     "description": "Steps to follow in order to become a modern QA Engineer in 2021",
     "featuredTitle": "QA",
     "featuredDescription": "Step by step guide to becoming a modern QA Engineer in 2021",
+    "isUpcoming": true,
     "contentPath": "/roadmaps/7-qa/landscape.md",
     "resourcesPath": "/roadmaps/7-qa/resources.md",
-    "isUpcoming": true,
     "author": {
       "name": "Anas Fitiani",
       "url": "https://github.com/anas-qa"
     },
     "id": "qa"
   }
-]
+]

content/roadmaps/1-frontend/meta.json

@@ -27,7 +27,7 @@
     ]
   },
   "title": "Frontend Developer",
-  "description": "Step by step guide to becoming a modern frontend developer",
+  "description": "Step by step guide to becoming a modern frontend developer in 2021",
   "featuredTitle": "Frontend",
   "featuredDescription": "Step by step guide to becoming a frontend developer in 2021",
   "author": {
@@ -36,5 +36,6 @@
   },
   "featured": true,
   "imagePath": "/roadmaps/frontend.png",
-  "resourcesPath": "./resources.md"
+  "resourcesPath": "./resources.md",
+  "pdfUrl": "https://kamranahmedse.gumroad.com/l/frontend-roadmap"
 }

content/roadmaps/2-backend/meta.json

@@ -27,7 +27,7 @@
     ]
   },
   "title": "Backend Developer",
-  "description": "Step by step guide to becoming a modern backend developer",
+  "description": "Step by step guide to becoming a modern backend developer in 2021",
   "featuredTitle": "Backend",
   "featuredDescription": "Step by step guide to becoming a backend developer in 2021",
   "featured": true,
@@ -36,5 +36,6 @@
   "author": {
     "name": "Kamran Ahmed",
     "url": "https://twitter.com/kamranahmedse"
-  }
+  },
+  "pdfUrl": "https://kamranahmedse.gumroad.com/l/backend-roadmap"
 }

content/roadmaps/3-devops/meta.json

@@ -21,7 +21,7 @@
     ]
   },
   "title": "DevOps Roadmap",
-  "description": "Step by step guide for DevOps or any other Operations Role",
+  "description": "Step by step guide for DevOps, SRE or any other Operations Role in 2021",
   "featuredTitle": "DevOps",
   "featuredDescription": "Step by step guide for DevOps or operations role in 2021",
   "featured": true,
@@ -35,5 +35,6 @@
   "author": {
     "name": "Kamran Ahmed",
     "url": "https://twitter.com/kamranahmedse"
-  }
+  },
+  "pdfUrl": "https://kamranahmedse.gumroad.com/l/devops-roadmap"
 }

content/roadmaps/4-react/meta.json

@@ -33,5 +33,6 @@
   "author": {
     "name": "Kamran Ahmed",
     "url": "https://twitter.com/kamranahmedse"
-  }
+  },
+  "pdfUrl": "https://kamranahmedse.gumroad.com/l/react-roadmap"
 }

content/roadmaps/5-postgresql-dba/meta.json

@@ -24,7 +24,7 @@
     ]
   },
   "title": "PostgreSQL DBA",
-  "description": "Step by step guide to becoming a modern PostgreSQL DBA",
+  "description": "Step by step guide to becoming a modern PostgreSQL DB Administrator in 2021",
   "featuredTitle": "DBA",
   "featuredDescription": "Step by step guide to become a PostgreSQL DBA in 2021",
   "contentPath": "./landscape.md",

content/roadmaps/6-android/meta.json

@@ -17,7 +17,7 @@
     ]
   },
   "title": "Android Developer",
-  "description": "Step by step guide to becoming an Android developer",
+  "description": "Step by step guide to becoming an Android developer in 2021",
   "featuredTitle": "Android",
   "featuredDescription": "Step by step guide to becoming an Android Developer in 2021",
   "isTextHeavy": true,

content/roadmaps/7-qa/meta.json

@@ -21,7 +21,7 @@
   "description": "Steps to follow in order to become a modern QA Engineer in 2021",
   "featuredTitle": "QA",
   "featuredDescription": "Step by step guide to becoming a modern QA Engineer in 2021",
-  "upcoming": true,
+  "isUpcoming": true,
   "contentPath": "./landscape.md",
   "resourcesPath": "./resources.md",
   "author": {

lib/roadmap.ts

@@ -21,6 +21,7 @@ export type RoadmapType = {
   isCommunity: boolean;
   isUpcoming: boolean;
   id: string;
+  pdfUrl?: string;
 };
 
 export function getRoadmapById(id: string): RoadmapType | undefined {

pages/[roadmap]/index.tsx

@@ -1,4 +1,4 @@
-import { Box, Button, Container, Stack } from '@chakra-ui/react';
+import { Box, Button, Container, Link, Stack } from '@chakra-ui/react';
 import { DownloadIcon, EmailIcon } from '@chakra-ui/icons';
 import { GlobalHeader } from '../../components/global-header';
 import { OpensourceBanner } from '../../components/opensource-banner';
@@ -54,14 +54,26 @@ export default function Roadmap(props: RoadmapProps) {
       <GlobalHeader />
       <Box mb='60px'>
         <PageHeader
-          title={ roadmap.title }
+          title={roadmap.title}
-          subtitle={ roadmap.description }
+          subtitle={roadmap.description}
         >
           <Stack mt='20px' isInline>
-            <Button size='xs' py='14px' px='10px' leftIcon={<DownloadIcon />} colorScheme='yellow' variant='solid'>
+            {roadmap.pdfUrl && (
-              Download PDF
+              <Button as={Link}
-            </Button>
+                      href={roadmap.pdfUrl}
-            <Button size='xs' py='14px' px='10px' leftIcon={<EmailIcon />} colorScheme='yellow' variant='solid'>
+                      target='_blank'
+                      size='xs'
+                      py='14px'
+                      px='10px'
+                      leftIcon={<DownloadIcon />}
+                      colorScheme='yellow'
+                      variant='solid'
+                      _hover={{ textDecoration: 'none' }}>
+                Download PDF
+              </Button>
+            )}
+            <Button as={Link} href={'/signup'} size='xs' py='14px' px='10px' leftIcon={<EmailIcon />}
+                    colorScheme='yellow' variant='solid' _hover={{ textDecoration: 'none' }}>
               Subscribe
             </Button>
           </Stack>

scripts/roadmaps-meta.js

@@ -34,9 +34,9 @@ const roadmapsMeta = roadmapDirs.reduce((metaAcc, roadmapDirName) => {
     {
       ...roadmapMeta,
       id: roadmapSlug,
-      url: `/${roadmapSlug}`,
       contentPath: contentPath,
-      resourcesPath: resourcesPath
+      resourcesPath: resourcesPath,
+      isUpcoming: roadmapMeta.isUpcoming || false
     }
   ];
 }, []);