1
0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2025-02-24 11:33:09 +01:00

140 lines
4.5 KiB
TypeScript
Raw Normal View History

2022-09-08 19:46:38 +04:00
import { Box, Container, Heading, Text } from '@chakra-ui/react';
2021-08-20 17:06:26 +02:00
import { GlobalHeader } from '../components/global-header';
2021-08-14 14:01:42 +02:00
import { Footer } from '../components/footer';
import { OpensourceBanner } from '../components/opensource-banner';
2021-08-14 20:29:05 +02:00
import { DimmedMore } from '../components/dimmed-more';
2021-08-14 22:43:25 +02:00
import { LinksListItem } from '../components/links-list-item';
2021-09-05 18:45:32 +02:00
import { VideoIcon } from '../components/icons/video-icon';
2021-08-14 22:43:25 +02:00
import { LinksList } from '../components/links-list';
2021-08-29 16:05:19 +02:00
import { getFeaturedRoadmaps, RoadmapType } from '../lib/roadmap';
2021-08-29 16:34:00 +02:00
import { getAllGuides, GuideType } from '../lib/guide';
2021-08-29 18:57:23 +02:00
import { getAllVideos, VideoType } from '../lib/video';
2021-09-04 22:58:58 +02:00
import Helmet from '../components/helmet';
2021-11-22 16:49:32 +01:00
import { PageWrapper } from '../components/page-wrapper';
2022-08-18 15:44:03 +04:00
import { FeaturedRoadmapsList } from '../components/home/featured-roadmaps-list';
2022-10-10 16:19:33 +04:00
import { TeamsBanner } from '../components/teams-banner';
2021-08-29 16:05:19 +02:00
type HomeProps = {
2021-08-29 16:34:00 +02:00
roadmaps: RoadmapType[];
guides: GuideType[];
2021-08-29 18:57:23 +02:00
videos: VideoType[];
2021-12-08 19:10:44 +01:00
};
2021-08-29 16:05:19 +02:00
export default function Home(props: HomeProps) {
2021-08-29 18:57:23 +02:00
const { roadmaps, guides, videos } = props;
2021-08-01 13:08:35 +02:00
return (
2021-11-22 16:49:32 +01:00
<PageWrapper>
<GlobalHeader variant={'transparent'} />
2021-12-08 19:10:44 +01:00
<Helmet title="Developer Roadmaps" />
2021-08-01 18:37:32 +02:00
<Box>
2021-12-08 19:10:44 +01:00
<Container maxW="container.md" pb="90px">
<Box py={['23px', '23px', '35px']} color="gray.200">
<Heading
color="gray.50"
fontSize={['22px', '22px', '28px']}
mb={['8px', '8px', '15px']}
>
Hey there! 👋
</Heading>
<Text fontSize={['14px', '14px', '16px']} mb="10px">
<Text fontWeight={500} as="span">
roadmap.sh
</Text>{' '}
is a community effort to create roadmaps, guides and other
educational content to help guide the developers in picking up the
path and guide their learnings.
2021-08-01 18:37:32 +02:00
</Text>
</Box>
2022-08-04 15:59:52 +04:00
2022-08-18 15:44:03 +04:00
<FeaturedRoadmapsList
roadmaps={roadmaps.filter(roadmap => roadmap.type === 'role')}
2022-08-25 20:14:03 +04:00
title={'Role Based' }
2022-08-18 15:44:03 +04:00
/>
2022-08-04 15:59:52 +04:00
2022-08-18 15:44:03 +04:00
<FeaturedRoadmapsList
roadmaps={roadmaps.filter(roadmap => roadmap.type === 'tool')}
title={'Skill Based' }
2022-08-18 15:44:03 +04:00
/>
2021-08-01 18:37:32 +02:00
</Container>
</Box>
2021-08-01 21:38:34 +02:00
2021-12-08 19:10:44 +01:00
<Box bg="white">
<Container maxW="container.md">
<Box pt="60px" mb={['10px', '15px', '20px']}>
<Heading
color="green.500"
fontSize={['20px', '20px', '25px']}
mb="5px"
>
Video Explanations
</Heading>
2021-08-02 18:15:42 +02:00
</Box>
2021-08-03 23:07:54 +02:00
2021-08-14 22:43:25 +02:00
<LinksList>
2021-12-08 19:10:44 +01:00
{videos.map((video) => (
2021-08-29 18:57:23 +02:00
<LinksListItem
2021-10-01 10:59:46 +02:00
target={'_blank'}
2021-09-03 15:59:03 +02:00
key={video.id}
2021-10-01 10:59:46 +02:00
href={video.youtubeLink!}
2022-08-29 17:39:33 +04:00
badgeText={video.isNew ? `NEW · ${(new Date(video.createdAt)).toLocaleDateString('en-us', { month: 'long'})}` : ''}
2021-08-29 18:57:23 +02:00
hideSubtitleOnMobile
title={video.title}
subtitle={video.duration}
icon={
<VideoIcon
style={{
marginRight: '7px',
width: '18px',
height: '18px',
2021-12-08 19:10:44 +01:00
color: '#9c9c9c',
2021-08-29 18:57:23 +02:00
}}
/>
}
/>
))}
2021-12-08 19:10:44 +01:00
<DimmedMore href="/watch" text={'View all Videos'} />
2021-08-14 22:43:25 +02:00
</LinksList>
2021-08-02 18:15:42 +02:00
</Container>
</Box>
2021-08-12 17:09:15 +02:00
2021-12-08 19:10:44 +01:00
<Box pb="80px" bg="white">
<Container maxW="container.md" position="relative">
<Box pt="40px" mb="20px">
<Heading color="green.500" fontSize="25px" mb="5px">
2022-08-29 17:52:33 +04:00
Guides
2021-12-08 19:10:44 +01:00
</Heading>
2021-10-27 00:34:56 +02:00
</Box>
<LinksList>
2021-12-08 19:10:44 +01:00
{guides.map((guide) => (
2021-10-27 00:34:56 +02:00
<LinksListItem
key={guide.id}
href={`/guides/${guide.id}`}
title={guide.title}
2022-08-29 17:52:33 +04:00
badgeText={guide.isNew ? `NEW · ${(new Date(guide.createdAt)).toLocaleDateString('en-us', { month: 'long'})}` : ''}
subtitle={`${guide?.type?.charAt(0).toUpperCase()}${guide?.type?.slice(1)}`}
2021-10-27 00:34:56 +02:00
/>
))}
2021-12-08 19:10:44 +01:00
<DimmedMore href={'/guides'} text="View all Guides" />
2021-10-27 00:34:56 +02:00
</LinksList>
</Container>
</Box>
2021-08-14 14:01:42 +02:00
<OpensourceBanner />
2022-10-10 16:19:33 +04:00
<TeamsBanner />
2021-08-14 14:01:42 +02:00
<Footer />
2021-11-22 16:49:32 +01:00
</PageWrapper>
2021-08-01 18:37:32 +02:00
);
2021-08-01 13:08:35 +02:00
}
2021-08-29 16:05:19 +02:00
export async function getStaticProps() {
return {
props: {
2021-08-29 16:34:00 +02:00
roadmaps: getFeaturedRoadmaps(),
2021-08-29 18:57:23 +02:00
guides: getAllGuides(10),
2021-12-08 19:10:44 +01:00
videos: getAllVideos(10),
},
2021-08-29 16:05:19 +02:00
};
}