Role vs tool distinction in roadmaps

2 years ago · dafaa96360
parent a4d946964f
commit dafaa96360
16 changed files with 61 additions and 38 deletions
--- a/content/roadmaps.json
+++ b/content/roadmaps.json
@ -35,6 +35,7 @@
    "description": "Step by step guide to becoming a modern frontend developer in 2022",
    "featuredTitle": "Frontend",
    "featuredDescription": "Step by step guide to becoming a frontend developer in 2022",
+    "type": "role",
    "author": {
      "name": "Kamran Ahmed",
      "url": "https://twitter.com/kamranahmedse"
@ -82,6 +83,7 @@
    },
    "title": "Backend Developer",
    "description": "Step by step guide to becoming a modern backend developer in 2022",
+    "type": "role",
    "featuredTitle": "Backend",
    "featuredDescription": "Step by step guide to becoming a backend developer in 2022",
    "featured": true,
@ -126,6 +128,7 @@
    "title": "DevOps Roadmap",
    "description": "Step by step guide for DevOps, SRE or any other Operations Role in 2022",
    "featuredTitle": "DevOps",
+    "type": "role",
    "featuredDescription": "Step by step guide for DevOps or operations role in 2022",
    "featured": true,
    "imageUrl": "/roadmaps/devops.png",
@ -169,6 +172,7 @@
    "title": "React Developer",
    "description": "Everything that is there to learn about React and the ecosystem in 2022.",
    "featuredTitle": "React",
+    "type": "tool",
    "featuredDescription": "Step by step guide to become a React Developer in 2022",
    "isTextHeavy": false,
    "isCommunity": false,
@ -211,6 +215,7 @@
    "title": "Angular Developer",
    "description": "Everything that is there to learn about Angular and the ecosystem in 2022.",
    "featuredTitle": "Angular",
+    "type": "tool",
    "featuredDescription": "Step by step guide to become a Angular Developer in 2022",
    "isTextHeavy": false,
    "isCommunity": false,
@ -253,6 +258,7 @@
    "title": "Android Developer",
    "description": "Step by step guide to becoming an Android developer in 2022",
    "featuredTitle": "Android",
+    "type": "role",
    "featuredDescription": "Step by step guide to becoming an Android Developer in 2022",
    "isTextHeavy": true,
    "isCommunity": false,
@ -294,6 +300,7 @@
    "title": "Python Developer",
    "description": "Step by step guide to becoming a Python developer in 2022",
    "featuredTitle": "Python",
+    "type": "tool",
    "featuredDescription": "Step by step guide to becoming a Python Developer in 2022",
    "isTextHeavy": true,
    "isCommunity": false,
@ -344,6 +351,7 @@
    "title": "Go Developer",
    "description": "Step by step guide to becoming a Go developer in 2022",
    "featuredTitle": "Go",
+    "type": "tool",
    "featuredDescription": "Step by step guide to becoming a Go developer in 2022",
    "isTextHeavy": false,
    "isCommunity": false,
@ -395,6 +403,7 @@
    "title": "Java Developer",
    "description": "Step by step guide to becoming a Java developer in 2022",
    "featuredTitle": "Java",
+    "type": "tool",
    "featuredDescription": "Step by step guide to becoming a Java Developer in 2022",
    "isTextHeavy": false,
    "isCommunity": false,
@ -444,6 +453,7 @@
    "title": "PostgreSQL DBA",
    "description": "Step by step guide to becoming a modern PostgreSQL DB Administrator in 2022",
    "featuredTitle": "DBA",
+    "type": "role",
    "featuredDescription": "Step by step guide to become a PostgreSQL DBA in 2022",
    "landingPath": "/roadmaps/109-postgresql-dba/landscape.md",
    "resourcesPath": "/roadmaps/109-postgresql-dba/resources.md",
@ -479,6 +489,7 @@
    "title": "AWS",
    "description": "Everything that is there to learn about AWS and the ecosystem in 2022.",
    "featuredTitle": "AWS",
+    "type": "tool",
    "featuredDescription": "Step by step guide to learn AWS in 2022",
    "isTextHeavy": false,
    "isCommunity": false,
@ -520,6 +531,7 @@
    "title": "QA Engineer",
    "description": "Steps to follow in order to become a modern QA Engineer in 2022",
    "featuredTitle": "QA",
+    "type": "role",
    "featuredDescription": "Step by step guide to becoming a modern QA Engineer in 2022",
    "isUpcoming": true,
    "featured": true,
--- a/content/roadmaps/100-frontend/meta.json
+++ b/content/roadmaps/100-frontend/meta.json
@ -34,6 +34,7 @@
  "description": "Step by step guide to becoming a modern frontend developer in 2022",
  "featuredTitle": "Frontend",
  "featuredDescription": "Step by step guide to becoming a frontend developer in 2022",
+  "type": "role",
  "author": {
    "name": "Kamran Ahmed",
    "url": "https://twitter.com/kamranahmedse"
--- a/content/roadmaps/101-backend/meta.json
+++ b/content/roadmaps/101-backend/meta.json
@ -31,6 +31,7 @@
  },
  "title": "Backend Developer",
  "description": "Step by step guide to becoming a modern backend developer in 2022",
+  "type": "role",
  "featuredTitle": "Backend",
  "featuredDescription": "Step by step guide to becoming a backend developer in 2022",
  "featured": true,
--- a/content/roadmaps/102-devops/meta.json
+++ b/content/roadmaps/102-devops/meta.json
@ -26,6 +26,7 @@
  "title": "DevOps Roadmap",
  "description": "Step by step guide for DevOps, SRE or any other Operations Role in 2022",
  "featuredTitle": "DevOps",
+  "type": "role",
  "featuredDescription": "Step by step guide for DevOps or operations role in 2022",
  "featured": true,
  "imageUrl": "/roadmaps/devops.png",
--- a/content/roadmaps/103-react/meta.json
+++ b/content/roadmaps/103-react/meta.json
@ -21,6 +21,7 @@
  "title": "React Developer",
  "description": "Everything that is there to learn about React and the ecosystem in 2022.",
  "featuredTitle": "React",
+  "type": "tool",
  "featuredDescription": "Step by step guide to become a React Developer in 2022",
  "isTextHeavy": false,
  "isCommunity": false,
--- a/content/roadmaps/104-angular/meta.json
+++ b/content/roadmaps/104-angular/meta.json
@ -19,6 +19,7 @@
  "title": "Angular Developer",
  "description": "Everything that is there to learn about Angular and the ecosystem in 2022.",
  "featuredTitle": "Angular",
+  "type": "tool",
  "featuredDescription": "Step by step guide to become a Angular Developer in 2022",
  "isTextHeavy": false,
  "isCommunity": false,
--- a/content/roadmaps/105-android/meta.json
+++ b/content/roadmaps/105-android/meta.json
@ -19,6 +19,7 @@
  "title": "Android Developer",
  "description": "Step by step guide to becoming an Android developer in 2022",
  "featuredTitle": "Android",
+  "type": "role",
  "featuredDescription": "Step by step guide to becoming an Android Developer in 2022",
  "isTextHeavy": true,
  "isCommunity": false,
--- a/content/roadmaps/106-python/meta.json
+++ b/content/roadmaps/106-python/meta.json
@ -19,6 +19,7 @@
  "title": "Python Developer",
  "description": "Step by step guide to becoming a Python developer in 2022",
  "featuredTitle": "Python",
+  "type": "tool",
  "featuredDescription": "Step by step guide to becoming a Python Developer in 2022",
  "isTextHeavy": true,
  "isCommunity": false,
--- a/content/roadmaps/107-golang/meta.json
+++ b/content/roadmaps/107-golang/meta.json
@ -29,6 +29,7 @@
  "title": "Go Developer",
  "description": "Step by step guide to becoming a Go developer in 2022",
  "featuredTitle": "Go",
+  "type": "tool",
  "featuredDescription": "Step by step guide to becoming a Go developer in 2022",
  "isTextHeavy": false,
  "isCommunity": false,
--- a/content/roadmaps/108-java/meta.json
+++ b/content/roadmaps/108-java/meta.json
@ -28,6 +28,7 @@
  "title": "Java Developer",
  "description": "Step by step guide to becoming a Java developer in 2022",
  "featuredTitle": "Java",
+  "type": "tool",
  "featuredDescription": "Step by step guide to becoming a Java Developer in 2022",
  "isTextHeavy": false,
  "isCommunity": false,
--- a/content/roadmaps/109-postgresql-dba/meta.json
+++ b/content/roadmaps/109-postgresql-dba/meta.json
@ -26,6 +26,7 @@
  "title": "PostgreSQL DBA",
  "description": "Step by step guide to becoming a modern PostgreSQL DB Administrator in 2022",
  "featuredTitle": "DBA",
+  "type": "role",
  "featuredDescription": "Step by step guide to become a PostgreSQL DBA in 2022",
  "landingPath": "./landscape.md",
  "resourcesPath": "./resources.md",
--- a/content/roadmaps/110-aws/meta.json
+++ b/content/roadmaps/110-aws/meta.json
@ -17,6 +17,7 @@
  "title": "AWS",
  "description": "Everything that is there to learn about AWS and the ecosystem in 2022.",
  "featuredTitle": "AWS",
+  "type": "tool",
  "featuredDescription": "Step by step guide to learn AWS in 2022",
  "isTextHeavy": false,
  "isCommunity": false,
--- a/content/roadmaps/111-qa/meta.json
+++ b/content/roadmaps/111-qa/meta.json
@ -20,6 +20,7 @@
  "title": "QA Engineer",
  "description": "Steps to follow in order to become a modern QA Engineer in 2022",
  "featuredTitle": "QA",
+  "type": "role",
  "featuredDescription": "Step by step guide to becoming a modern QA Engineer in 2022",
  "isUpcoming": true,
  "featured": true,
--- a/lib/roadmap.ts
+++ b/lib/roadmap.ts
@ -14,6 +14,7 @@ export type RoadmapType = {
    name: string;
    url: string;
  };
+  type: "role" | "tool";
  featured: boolean;
  imageUrl?: string;
  jsonUrl?: string;
--- a/pages/index.tsx
+++ b/pages/index.tsx
@ -3,9 +3,9 @@ import {
  Container,
  Heading,
  Link,
-  SimpleGrid,
+  SimpleGrid, Tag,
  Text,
-  useMediaQuery,
+  useMediaQuery
 } from '@chakra-ui/react';
 import { GlobalHeader } from '../components/global-header';
 import { Footer } from '../components/footer';
@ -55,29 +55,27 @@ export default function Home(props: HomeProps) {
              educational content to help guide the developers in picking up the
              path and guide their learnings.
            </Text>
-
-            <Text fontSize={['14px', '14px', '16px']}>
-              We also have a{' '}
-              <Link
-                textDecoration={'underline'}
-                href={siteConfig.url.youtube}
-                onClick={() =>
-                  event({
-                    category: 'Subscription',
-                    action: 'Clicked the YouTube link',
-                    label: 'YouTube link on home',
-                  })
-                }
-                target="_blank"
-                fontWeight={600}
-              >
-                YouTube channel
-              </Link>{' '}
-              which we hope you are going to love.
-            </Text>
          </Box>
-          <SimpleGrid columns={[1, 2, 3]} spacing={['10px', '10px', '15px']}>
-            {roadmaps.map((roadmap: RoadmapType, counter: number) => (
+
+          <Tag bg='gray.400' mb={4}>Role Based Roadmaps</Tag>
+          <SimpleGrid columns={[1, 2, 3]} spacing={['10px', '10px', '15px']} mb='40px'>
+            {roadmaps.filter(roadmap => roadmap.type === 'role').map((roadmap: RoadmapType, counter: number) => (
+              <HomeRoadmapItem
+                isUpcoming={roadmap.isUpcoming}
+                url={`/${roadmap.id}`}
+                key={roadmap.id}
+                colorIndex={counter}
+                title={roadmap.featuredTitle}
+                isCommunity={roadmap.isCommunity}
+                subtitle={roadmap.featuredDescription}
+              />
+            ))}
+          </SimpleGrid>
+
+          <Tag bg='gray.400' mb={4}>Tool Based Skill Trees</Tag>
+
+          <SimpleGrid columns={[1, 2, 3]} spacing={['10px', '10px', '15px']} mb='30px'>
+            {roadmaps.filter(roadmap => roadmap.type === 'tool').map((roadmap: RoadmapType, counter: number) => (
              <HomeRoadmapItem
                isUpcoming={roadmap.isUpcoming}
                url={`/${roadmap.id}`}
--- a/public/sitemap.xml
+++ b/public/sitemap.xml
@ -3,73 +3,73 @@
 <url>
              <loc>https://roadmap.sh/frontend</loc>
              <changefreq>monthly</changefreq>
-              <lastmod>2022-06-14T16:21:44.766Z</lastmod>
+              <lastmod>2022-08-04T11:36:54.909Z</lastmod>
              <priority>1.0</priority>
          </url>
 <url>
              <loc>https://roadmap.sh/backend</loc>
              <changefreq>monthly</changefreq>
-              <lastmod>2022-06-14T16:21:44.766Z</lastmod>
+              <lastmod>2022-08-04T11:37:35.841Z</lastmod>
              <priority>1.0</priority>
          </url>
 <url>
              <loc>https://roadmap.sh/devops</loc>
              <changefreq>monthly</changefreq>
-              <lastmod>2022-08-03T15:24:13.858Z</lastmod>
+              <lastmod>2022-08-04T11:37:35.845Z</lastmod>
              <priority>1.0</priority>
          </url>
 <url>
              <loc>https://roadmap.sh/react</loc>
              <changefreq>monthly</changefreq>
-              <lastmod>2022-06-14T16:21:44.767Z</lastmod>
+              <lastmod>2022-08-04T11:37:35.834Z</lastmod>
              <priority>1.0</priority>
          </url>
 <url>
              <loc>https://roadmap.sh/angular</loc>
              <changefreq>monthly</changefreq>
-              <lastmod>2022-06-14T16:21:44.767Z</lastmod>
+              <lastmod>2022-08-04T11:37:35.838Z</lastmod>
              <priority>1.0</priority>
          </url>
 <url>
              <loc>https://roadmap.sh/android</loc>
              <changefreq>monthly</changefreq>
-              <lastmod>2022-01-01T14:32:00.124Z</lastmod>
+              <lastmod>2022-08-04T11:37:35.837Z</lastmod>
              <priority>1.0</priority>
          </url>
 <url>
              <loc>https://roadmap.sh/python</loc>
              <changefreq>monthly</changefreq>
-              <lastmod>2022-06-14T16:21:44.768Z</lastmod>
+              <lastmod>2022-08-04T11:37:35.844Z</lastmod>
              <priority>1.0</priority>
          </url>
 <url>
              <loc>https://roadmap.sh/golang</loc>
              <changefreq>monthly</changefreq>
-              <lastmod>2022-06-14T16:21:44.768Z</lastmod>
+              <lastmod>2022-08-04T11:37:35.847Z</lastmod>
              <priority>1.0</priority>
          </url>
 <url>
              <loc>https://roadmap.sh/java</loc>
              <changefreq>monthly</changefreq>
-              <lastmod>2022-06-14T16:21:44.768Z</lastmod>
+              <lastmod>2022-08-04T11:37:35.840Z</lastmod>
              <priority>1.0</priority>
          </url>
 <url>
              <loc>https://roadmap.sh/postgresql-dba</loc>
              <changefreq>monthly</changefreq>
-              <lastmod>2022-01-01T14:31:59.273Z</lastmod>
+              <lastmod>2022-08-04T11:37:35.848Z</lastmod>
              <priority>1.0</priority>
          </url>
 <url>
              <loc>https://roadmap.sh/aws</loc>
              <changefreq>monthly</changefreq>
-              <lastmod>2022-01-01T14:31:59.852Z</lastmod>
+              <lastmod>2022-08-04T11:37:35.842Z</lastmod>
              <priority>1.0</priority>
          </url>
 <url>
              <loc>https://roadmap.sh/qa</loc>
              <changefreq>monthly</changefreq>
-              <lastmod>2022-01-01T14:31:59.633Z</lastmod>
+              <lastmod>2022-08-04T11:37:35.836Z</lastmod>
              <priority>1.0</priority>
          </url>
 <url>
@ -255,7 +255,7 @@
 <url>
              <loc>https://roadmap.sh/</loc>
              <changefreq>monthly</changefreq>
-              <lastmod>2022-01-13T15:46:46.881Z</lastmod>
+              <lastmod>2022-08-04T11:36:26.733Z</lastmod>
              <priority>1.0</priority>
          </url>
 <url>