Add roadmaps listing

components/global-header.tsx

@@ -99,7 +99,7 @@ export function GlobalHeader() {
                   _hover={{ textDecoration: 'none' }}
                   fontSize='18px'>
               <Image h='30px' w='30px' src='/logo.svg' mr='10px' />
-              <Text d={['block', 'block', 'block']} as='span'>roadmap.sh</Text>
+              <Text d={['block', 'none', 'block']} as='span'>roadmap.sh</Text>
             </Link>
           </Box>
           <DesktopMenuLinks />

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"

lib/roadmap.ts

@@ -19,6 +19,7 @@ export type RoadmapType = {
   contentPath?: string;
   resourcesPath: string;
   isCommunity: boolean;
+  isUpcoming: boolean;
   id: string;
   url: string;
 };

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 (
-    <Link _hover={{ textDecoration: 'none', transform: 'scale(1.02)' }} as={Box} href='#' shadow='xl' p='20px'
+    <Box _hover={{ textDecoration: 'none', transform: 'scale(1.02)' }} as={Link} href={href} shadow='xl' p='20px'
-          rounded='10px' bg={bgColorList[colorIndex] ?? bgColorList[0]} flex={1}>
+          rounded='10px' bg={bgColorList[colorIndex] ?? bgColorList[0]} flex={1} pos='relative'>
+
+      {isCommunity && (
+        <Tooltip label={'Community contribution'} hasArrow placement='top'>
+          <InfoIcon opacity={0.5} color='gray.100' position='absolute' top='10px' right='10px' />
+        </Tooltip>
+      )}
+
       <Heading color='white' mb={'6px'} fontSize='20px'>{title}</Heading>
       <Text color='gray.300' fontSize='14px'>{subtitle}</Text>
-      {isCommunity && <Text mt='10px' fontSize='13px' color='gray.400'>
+
-        <Badge colorScheme={'yellow'} mr='10px'>Community</Badge>
+      {isUpcoming && (
-      </Text>}
+        <Flex
-    </Link>
+          alignItems='center'
+          justifyContent='center'
+          pos='absolute'
+          left={0}
+          right={0}
+          top={0}
+          bottom={0}
+          rounded='10px'
+        >
+          <Text color='white' bg='yellow.900' zIndex={1} fontWeight={600} p={'5px 10px'}
+                rounded='10px'>Upcoming</Text>
+          <Box bg={'black'} pos='absolute' top={0} left={0} right={0} bottom={0} rounded={'10px'} opacity={0.5} />
+        </Flex>
+      )}
+    </Box>
   );
 }

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 (
     <Box bg='white' minH='100vh'>
       <GlobalHeader />
@@ -17,79 +24,17 @@ export default function Roadmaps() {
         />
         <Container maxW='container.md' position='relative'>
           <SimpleGrid columns={[1, 1, 2, 2]} mb='30px' spacing={['10px', '10px', '15px']}>
+            {roadmaps.map((roadmap, counter) => (
               <RoadmapGridItem
-              colorIndex={0} title={'Frontend'}
+                key={roadmap.id}
-              subtitle={'Step by step guide to becoming a frontend developer in 2021'}
+                href={`/${roadmap.id}`}
-              date={'June 12, 2021'}
+                colorIndex={counter}
-            />
+                title={roadmap.featuredTitle}
-            <RoadmapGridItem
+                subtitle={roadmap.description}
-              colorIndex={1}
+                isCommunity={roadmap.isCommunity}
-              title={'Backend'}
+                isUpcoming={roadmap.isUpcoming}
-              subtitle={'Step by step guide to becoming a backend developer in 2021'}
-              date='June 15, 2021'
-            />
-
-            <RoadmapGridItem
-              date={'August 25, 2021'}
-              colorIndex={2}
-              title={'DevOps'}
-              subtitle={'Step by step guide for DevOps or Operations role in 2021'}
-            />
-
-            <RoadmapGridItem
-              date={'August 25, 2021'}
-              colorIndex={3}
-              title={'React'}
-              subtitle={'Step by step guide to become a React Developer in 2021'}
-            />
-            <RoadmapGridItem
-              date={'August 25, 2021'}
-              colorIndex={4}
-              title={'DBA'}
-              subtitle={'Step by step guide to becoming a PostgreSQL Database Administrator in 2021'}
-            />
-            <RoadmapGridItem
-              date={'August 25, 2021'}
-              colorIndex={5}
-              title={'Android'}
-              subtitle={'Step by step guide to become an Android Developer in 2021'}
-            />
-            <RoadmapGridItem
-              date={'August 25, 2021'}
-              colorIndex={6}
-              title={'QA Engineer'}
-              subtitle={'Step by step guide to become a Quality Assurance Engineer in 2021'}
-            />
-            <RoadmapGridItem
-              date={'August 25, 2021'}
-              colorIndex={7}
-              title={'AI Engineer'}
-              subtitle={'Step by step guide to become a Quality Assurance Engineer in 2021'}
-            />
-            <RoadmapGridItem
-              date={'August 25, 2021'}
-              colorIndex={8}
-              title={'iOS Engineer'}
-              subtitle={'Step by step guide to become a Quality Assurance Engineer in 2021'}
-            />
-            <RoadmapGridItem
-              date={'August 25, 2021'}
-              colorIndex={9}
-              title={'Golang'}
-              subtitle={'Step by step guide to become a Quality Assurance Engineer in 2021'}
-            />
-            <RoadmapGridItem
-              date={'August 25, 2021'}
-              colorIndex={10}
-              title={'Java'}
-              subtitle={'Step by step guide to become a Quality Assurance Engineer in 2021'}
-            />
-            <RoadmapGridItem
-              date={'August 25, 2021'}
-              colorIndex={10}
-              title={'Angular'}
-              subtitle={'Step by step guide to become a Quality Assurance Engineer in 2021'}
               />
+            ))}
           </SimpleGrid>
         </Container>
       </Box>
@@ -100,3 +45,11 @@ export default function Roadmaps() {
     </Box>
   );
 }
+
+export async function getStaticProps() {
+  return {
+    props: {
+      roadmaps: getAllRoadmaps()
+    }
+  };
+}