diff --git a/components/global-header.tsx b/components/global-header.tsx
index 3b083bd60..4ca90171b 100644
--- a/components/global-header.tsx
+++ b/components/global-header.tsx
@@ -99,7 +99,7 @@ export function GlobalHeader() {
_hover={{ textDecoration: 'none' }}
fontSize='18px'>
- roadmap.sh
+ roadmap.sh
diff --git a/content/roadmaps.json b/content/roadmaps.json
index 23d4bbe2d..c5137659e 100644
--- a/content/roadmaps.json
+++ b/content/roadmaps.json
@@ -28,9 +28,10 @@
]
},
"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",
+ "isUpcoming": false,
"author": {
"name": "Kamran Ahmed",
"url": "https://twitter.com/kamranahmedse"
@@ -70,12 +71,13 @@
]
},
"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,
"imagePath": "/roadmaps/backend.png",
"resourcesPath": "/roadmaps/2-backend/resources.md",
+ "isUpcoming": false,
"author": {
"name": "Kamran Ahmed",
"url": "https://twitter.com/kamranahmedse"
@@ -106,7 +108,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,
@@ -117,6 +119,7 @@
"2018",
"2017"
],
+ "isUpcoming": false,
"author": {
"name": "Kamran Ahmed",
"url": "https://twitter.com/kamranahmedse"
@@ -156,6 +159,7 @@
"2018",
"2017"
],
+ "isUpcoming": false,
"author": {
"name": "Kamran Ahmed",
"url": "https://twitter.com/kamranahmedse"
@@ -189,11 +193,12 @@
]
},
"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": "/roadmaps/5-postgresql-dba/landscape.md",
"resourcesPath": "/roadmaps/5-postgresql-dba/resources.md",
+ "isUpcoming": false,
"author": {
"name": "Alexey Lesovsky",
"url": "https://github.com/lesovsky"
@@ -225,7 +230,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,
@@ -238,6 +243,7 @@
"2018",
"2017"
],
+ "isUpcoming": false,
"author": {
"name": "Kamran Ahmed",
"url": "https://twitter.com/kamranahmedse"
@@ -268,9 +274,9 @@
"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,
"contentPath": "/roadmaps/7-qa/landscape.md",
"resourcesPath": "/roadmaps/7-qa/resources.md",
+ "isUpcoming": true,
"author": {
"name": "Anas Fitiani",
"url": "https://github.com/anas-qa"
@@ -278,4 +284,4 @@
"id": "qa",
"url": "/qa"
}
-]
\ No newline at end of file
+]
diff --git a/lib/roadmap.ts b/lib/roadmap.ts
index 2d821b195..9f529f3a7 100644
--- a/lib/roadmap.ts
+++ b/lib/roadmap.ts
@@ -19,6 +19,7 @@ export type RoadmapType = {
contentPath?: string;
resourcesPath: string;
isCommunity: boolean;
+ isUpcoming: boolean;
id: string;
url: string;
};
diff --git a/pages/roadmaps/components/roadmap-grid-item.tsx b/pages/roadmaps/components/roadmap-grid-item.tsx
index 6aa2c343e..c79bc7008 100644
--- a/pages/roadmaps/components/roadmap-grid-item.tsx
+++ b/pages/roadmaps/components/roadmap-grid-item.tsx
@@ -1,10 +1,12 @@
-import { Badge, Box, Heading, Link, Text } from '@chakra-ui/react';
+import { Badge, Box, Flex, Heading, Link, Text, Tooltip } from '@chakra-ui/react';
+import { InfoIcon } from '@chakra-ui/icons';
type RoadmapGridItemProps = {
title: string;
subtitle: string;
- date: string;
+ href: string;
isCommunity?: boolean;
+ isUpcoming?: boolean;
colorIndex?: number;
};
@@ -51,16 +53,37 @@ const bgColorList = [
];
export function RoadmapGridItem(props: RoadmapGridItemProps) {
- const { title, subtitle, date, isCommunity = false, colorIndex = 0 } = props;
+ const { title, subtitle, isCommunity = false, isUpcoming = false, colorIndex = 0, href = '/' } = props;
return (
-
+
+
+ {isCommunity && (
+
+
+
+ )}
+
{title}
{subtitle}
- {isCommunity &&
- Community
- }
-
+
+ {isUpcoming && (
+
+ Upcoming
+
+
+ )}
+
);
}
diff --git a/pages/roadmaps/index.tsx b/pages/roadmaps/index.tsx
index 4dfa8d901..42597b5f3 100644
--- a/pages/roadmaps/index.tsx
+++ b/pages/roadmaps/index.tsx
@@ -5,8 +5,15 @@ import { UpdatesBanner } from '../../components/updates-banner';
import { Footer } from '../../components/footer';
import { PageHeader } from '../../components/page-header';
import { RoadmapGridItem } from './components/roadmap-grid-item';
+import { getAllRoadmaps, RoadmapType } from '../../lib/roadmap';
+
+type RoadmapsProps = {
+ roadmaps: RoadmapType[];
+};
+
+export default function Roadmaps(props: RoadmapsProps) {
+ const { roadmaps } = props;
-export default function Roadmaps() {
return (
@@ -17,79 +24,17 @@ export default function Roadmaps() {
/>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ {roadmaps.map((roadmap, counter) => (
+
+ ))}
@@ -100,3 +45,11 @@ export default function Roadmaps() {
);
}
+
+export async function getStaticProps() {
+ return {
+ props: {
+ roadmaps: getAllRoadmaps()
+ }
+ };
+}