Add pdf links

3 years ago · 929e6c0a51
parent 9b97fce431
commit 929e6c0a51
11 changed files with 54 additions and 33 deletions
--- a/content/roadmaps.json
+++ b/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"
  }
-]
+]
--- a/content/roadmaps/1-frontend/meta.json
+++ b/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"
 }
--- a/content/roadmaps/2-backend/meta.json
+++ b/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"
 }
--- a/content/roadmaps/3-devops/meta.json
+++ b/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"
 }
--- a/content/roadmaps/4-react/meta.json
+++ b/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"
 }
--- a/content/roadmaps/5-postgresql-dba/meta.json
+++ b/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",
--- a/content/roadmaps/6-android/meta.json
+++ b/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,
--- a/content/roadmaps/7-qa/meta.json
+++ b/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": {
--- a/lib/roadmap.ts
+++ b/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 {
--- a/pages/[roadmap]/index.tsx
+++ b/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 }
-          subtitle={ roadmap.description }
+          title={roadmap.title}
+          subtitle={roadmap.description}
        >
          <Stack mt='20px' isInline>
-            <Button size='xs' py='14px' px='10px' leftIcon={<DownloadIcon />} colorScheme='yellow' variant='solid'>
-              Download PDF
-            </Button>
-            <Button size='xs' py='14px' px='10px' leftIcon={<EmailIcon />} colorScheme='yellow' variant='solid'>
+            {roadmap.pdfUrl && (
+              <Button as={Link}
+                      href={roadmap.pdfUrl}
+                      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>
--- a/scripts/roadmaps-meta.js
+++ b/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
    }
  ];
 }, []);