github
/
developer-roadmap
mirror of https://github.com/kamranahmedse/developer-roadmap.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add roadmaps listing

Browse Source
pull/1331/head
Kamran Ahmed 3 years ago
parent 1b9bb03cde
commit ad427eceee
5 changed files with 74 additions and 91 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  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

2
components/global-header.tsx
Unescape View File

@ -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 />

20
content/roadmaps.json
Unescape View File

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

1
lib/roadmap.ts
Unescape View File

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

41
pages/roadmaps/components/roadmap-grid-item.tsx
Unescape View File

@ -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>
);
}

101
pages/roadmaps/index.tsx
Unescape View File

@ -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()
}
};
}

Write Preview
Loading…
Cancel
Save