Roadmap to becoming a developer in 2022
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

166 lines
4.8 KiB

import { Box, Button, Text, Container, Link, Stack, Badge } from '@chakra-ui/react';
import { ArrowBackIcon, AtSignIcon, DownloadIcon, ViewIcon } from '@chakra-ui/icons';
import { GlobalHeader } from '../../components/global-header';
import { OpensourceBanner } from '../../components/opensource-banner';
import { UpdatesBanner } from '../../components/updates-banner';
import { Footer } from '../../components/footer';
import { PageHeader } from '../../components/page-header';
import { getAllRoadmaps, getRoadmapById, RoadmapType } from '../../lib/roadmap';
import MdRenderer from '../../components/md-renderer';
import Helmet from '../../components/helmet';
import siteConfig from '../../content/site.json';
import React from 'react';
import { event } from '../../lib/gtag';
3 years ago
type RoadmapProps = {
roadmap: RoadmapType;
};
3 years ago
function ImageRoadmap(props: RoadmapProps) {
const { roadmap } = props;
if (!roadmap.imagePath) {
return null;
3 years ago
}
return (
<Container maxW={'900px'} position='relative'>
<Box mb='30px'>
<img alt='Frontend Roadmap' src={roadmap.imagePath} />
</Box>
</Container>
);
}
3 years ago
function TextualRoadmap(props: RoadmapProps) {
const { roadmap } = props;
if (!roadmap.contentPath) {
return null;
3 years ago
}
// Remove trailing slashes
const normalizedPath = roadmap.contentPath.replace(/^\//, '');
const RoadmapContent = require(`../../content/${normalizedPath}`).default;
return (
<Container maxW={'container.md'} position='relative'>
<MdRenderer>
<RoadmapContent />
</MdRenderer>
</Container>
);
}
3 years ago
export function NewBanner() {
return (
<Text _hover={{ textDecoration: 'none', color: 'blue.700', '& .new-badge': { bg: 'blue.700' } }}
as={Link}
href={siteConfig.url.youtube}
d='block'
target='_blank'
color='red.700'
fontSize='sm'
mb='10px'
fontWeight={500}
onClick={() => event({
category: 'Subscription',
action: 'Clicked the YouTube banner',
label: 'YouTube Alert on Roadmap'
})}>
<Badge transition={'all 300ms'} className='new-badge' mr='7px' colorScheme='red' variant='solid'>New</Badge>
<Text textDecoration='underline' as='span' d={['none', 'inline']}>Roadmap topics to be covered on our YouTube
Channel</Text>
<Text textDecoration='underline' as='span' d={['inline', 'none']}>Topic videos being made on YouTube</Text>
<Text as='span' ml='5px'>&raquo;</Text>
</Text>
);
}
export default function Roadmap(props: RoadmapProps) {
const { roadmap } = props;
3 years ago
return (
<Box bg='white' minH='100vh'>
<GlobalHeader />
<Helmet
title={roadmap?.seo?.title || roadmap.title}
description={roadmap?.seo?.description || roadmap.description}
keywords={roadmap?.seo.keywords || []}
/>
3 years ago
<Box mb='60px'>
<PageHeader
beforeTitle={<NewBanner />}
3 years ago
title={roadmap.title}
subtitle={roadmap.description}
3 years ago
>
<Stack mt='20px' isInline>
<Button d={['flex', 'flex']} as={Link} href={'/roadmaps'} size='xs' py='14px' px='10px'
colorScheme='teal' variant='solid' _hover={{ textDecoration: 'none' }}>
&larr; <Text as='span' d={['none', 'inline']} ml='5px'>All Roadmaps</Text>
</Button>
3 years ago
{roadmap.pdfUrl && (
<Button as={Link}
href={roadmap.pdfUrl}
target='_blank'
size='xs'
py='14px'
px='10px'
leftIcon={<DownloadIcon />}
colorScheme='yellow'
variant='solid'
_hover={{ textDecoration: 'none' }}>
Download
3 years ago
</Button>
)}
<Button as={Link} href={'/signup'} size='xs' py='14px' px='10px' leftIcon={<AtSignIcon />}
3 years ago
colorScheme='yellow' variant='solid' _hover={{ textDecoration: 'none' }}>
3 years ago
Subscribe
</Button>
</Stack>
</PageHeader>
<ImageRoadmap roadmap={roadmap} />
<TextualRoadmap roadmap={roadmap} />
3 years ago
</Box>
<OpensourceBanner />
<UpdatesBanner />
<Footer />
</Box>
);
}
type StaticPathItem = {
params: {
roadmap: string
}
};
export async function getStaticPaths() {
const roadmaps = getAllRoadmaps();
const paramsList: StaticPathItem[] = roadmaps.map(roadmap => ({
params: { 'roadmap': roadmap.id }
}));
return {
paths: paramsList,
fallback: false
};
}
type ContextType = {
params: {
roadmap: string
}
};
export async function getStaticProps(context: ContextType) {
const roadmapId: string = context?.params?.roadmap;
return {
props: {
roadmap: getRoadmapById(roadmapId)
}
};
}