Add roadmaps listing
This commit is contained in:
Kamran Ahmed
@ -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()
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user