Add roadmaps listing

pull/1331/head
Kamran Ahmed 3 years ago
parent 1b9bb03cde
commit ad427eceee
  1. 2
      components/global-header.tsx
  2. 20
      content/roadmaps.json
  3. 1
      lib/roadmap.ts
  4. 41
      pages/roadmaps/components/roadmap-grid-item.tsx
  5. 101
      pages/roadmaps/index.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 />

@ -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"
}
]
]

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

@ -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'
rounded='10px' bg={bgColorList[colorIndex] ?? bgColorList[0]} flex={1}>
<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} 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>
</Text>}
</Link>
{isUpcoming && (
<Flex
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>
);
}

@ -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']}>
<RoadmapGridItem
colorIndex={0} title={'Frontend'}
subtitle={'Step by step guide to becoming a frontend developer in 2021'}
date={'June 12, 2021'}
/>
<RoadmapGridItem
colorIndex={1}
title={'Backend'}
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'}
/>
{roadmaps.map((roadmap, counter) => (
<RoadmapGridItem
key={roadmap.id}
href={`/${roadmap.id}`}
colorIndex={counter}
title={roadmap.featuredTitle}
subtitle={roadmap.description}
isCommunity={roadmap.isCommunity}
isUpcoming={roadmap.isUpcoming}
/>
))}
</SimpleGrid>
</Container>
</Box>
@ -100,3 +45,11 @@ export default function Roadmaps() {
</Box>
);
}
export async function getStaticProps() {
return {
props: {
roadmaps: getAllRoadmaps()
}
};
}

Loading…
Cancel
Save