gaspersic/developer-roadmap
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Homepage links update

Browse Source
This commit is contained in:
Kamran Ahmed
2021-09-01 14:45:26 +02:00
parent ec1725e312
commit c097017520
6 changed files with 61 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
components/dimmed-more.tsx
View File

@ -2,10 +2,11 @@ import { Box, Link, Text } from '@chakra-ui/react';
type DimmedMoreProps = { type DimmedMoreProps = {
text: string; text: string;
href: string;
}; };
export function DimmedMore(props: DimmedMoreProps) { export function DimmedMore(props: DimmedMoreProps) {
const { text } = props; const { text, href } = props;
return ( return (
<Box position='relative' textAlign='center' bottom='20px'> <Box position='relative' textAlign='center' bottom='20px'>
@ -25,7 +26,7 @@ export function DimmedMore(props: DimmedMoreProps) {
bg='green.600' bg='green.600'
color='white' color='white'
p='7px 20px' p='7px 20px'
href={'#'} href={href}
fontWeight={800} fontWeight={800}
fontSize='11px' fontSize='11px'
textTransform='uppercase' textTransform='uppercase'

46
components/footer.tsx
View File

@ -1,25 +1,33 @@
import { Box, Container, Flex, Image, Link, Stack, Text } from '@chakra-ui/react'; import { Box, Container, Flex, Image, Link, Stack, Text } from '@chakra-ui/react';
import siteConfig from '../content/site.json';
function NavigationLinks() { function NavigationLinks() {
return ( return (
<> <>
<Stack isInline d={['none', 'none', 'flex']} color='gray.400' fontWeight={600} spacing='30px'> <Stack isInline d={['none', 'none', 'flex']} color='gray.400' fontWeight={600} spacing='30px'>
<Link _hover={{ color: 'white' }} href='#'>Roadmaps</Link> <Link _hover={{ color: 'white' }} href='/roadmaps'>Roadmaps</Link>
<Link _hover={{ color: 'white' }} href='#'>Guides</Link> <Link _hover={{ color: 'white' }} href='/guides'>Guides</Link>
<Link _hover={{ color: 'white' }} href='#'>Videos</Link> <Link _hover={{ color: 'white' }} href='/watch'>Videos</Link>
<Link _hover={{ color: 'white' }} href='#'>Podcasts</Link> <Link _hover={{ color: 'white' }} href='/podcasts'>Podcasts</Link>
<Link _hover={{ color: 'white' }} href='#'>About</Link> <Link _hover={{ color: 'white' }} href='/about'>About</Link>
<Link _hover={{ color: 'white' }} href='#'>YouTube</Link> <Link _hover={{ color: 'white' }} href={siteConfig.url.youtube} target='_blank'>YouTube</Link>
</Stack> </Stack>
<Stack d={['flex', 'flex', 'none']} color='gray.400' fontWeight={600} spacing={0}> <Stack d={['flex', 'flex', 'none']} color='gray.400' fontWeight={600} spacing={0}>
<Link py='7px' borderBottomWidth={1} borderBottomColor='gray.800' _hover={{ color: 'white' }} href='#'>Roadmaps</Link> <Link py='7px' borderBottomWidth={1} borderBottomColor='gray.800' _hover={{ color: 'white' }}
<Link py='7px' borderBottomWidth={1} borderBottomColor='gray.800' _hover={{ color: 'white' }} href='#'>Guides</Link> href='/roadmaps'>Roadmaps</Link>
<Link py='7px' borderBottomWidth={1} borderBottomColor='gray.800' _hover={{ color: 'white' }} href='#'>Videos</Link> <Link py='7px' borderBottomWidth={1} borderBottomColor='gray.800' _hover={{ color: 'white' }}
<Link py='7px' borderBottomWidth={1} borderBottomColor='gray.800' _hover={{ color: 'white' }} href='#'>Podcasts</Link> href='/guides'>Guides</Link>
<Link py='7px' borderBottomWidth={1} borderBottomColor='gray.800' _hover={{ color: 'white' }} href='#'>Thanks</Link> <Link py='7px' borderBottomWidth={1} borderBottomColor='gray.800' _hover={{ color: 'white' }}
<Link py='7px' borderBottomWidth={1} borderBottomColor='gray.800' _hover={{ color: 'white' }} href='#'>About</Link> href='/watch'>Videos</Link>
<Link py='7px' _hover={{ color: 'white' }} href='#'>YouTube</Link> <Link py='7px' borderBottomWidth={1} borderBottomColor='gray.800' _hover={{ color: 'white' }}
href='/podcasts'>Podcasts</Link>
<Link py='7px' borderBottomWidth={1} borderBottomColor='gray.800' _hover={{ color: 'white' }}
href='/thanks'>Thanks</Link>
<Link py='7px' borderBottomWidth={1} borderBottomColor='gray.800' _hover={{ color: 'white' }}
href='/about'>About</Link>
<Link py='7px' _hover={{ color: 'white' }} target='_blank'
href={siteConfig.url.youtube}>YouTube</Link>
</Stack> </Stack>
</> </>
); );
@ -40,7 +48,8 @@ export function Footer() {
</Link> </Link>
<Text as='span' mx='7px'>by</Text> <Text as='span' mx='7px'>by</Text>
<Link bg='blue.500' px='6px' py='2px' rounded='4px' color='white' fontWeight={600} fontSize='13px' <Link bg='blue.500' px='6px' py='2px' rounded='4px' color='white' fontWeight={600} fontSize='13px'
_hover={{ textDecoration: 'none', bg: 'blue.600' }} href='/'>@kamranahmedse</Link> _hover={{ textDecoration: 'none', bg: 'blue.600' }} href={siteConfig.url.twitter}
target='_blank'>@kamranahmedse</Link>
</Flex> </Flex>
<Text my='15px' fontSize='14px' color='gray.500'>Community created roadmaps, articles, resources and <Text my='15px' fontSize='14px' color='gray.500'>Community created roadmaps, articles, resources and
@ -48,9 +57,12 @@ export function Footer() {
<Text fontSize='14px' color='gray.500'> <Text fontSize='14px' color='gray.500'>
<Text as='span' mr='10px'>&copy; roadmap.sh</Text>&middot; <Text as='span' mr='10px'>&copy; roadmap.sh</Text>&middot;
<Link _hover={{ textDecoration: 'none', color: 'white' }} color='gray.400' mx='10px'>FAQs</Link>&middot; <Link href='/about' _hover={{ textDecoration: 'none', color: 'white' }} color='gray.400'
<Link _hover={{ textDecoration: 'none', color: 'white' }} color='gray.400' mx='10px'>Terms</Link>&middot; mx='10px'>FAQs</Link>&middot;
<Link _hover={{ textDecoration: 'none', color: 'white' }} color='gray.400' mx='10px'>Privacy</Link> <Link href='/terms' _hover={{ textDecoration: 'none', color: 'white' }} color='gray.400'
mx='10px'>Terms</Link>&middot;
<Link href='/privacy' _hover={{ textDecoration: 'none', color: 'white' }} color='gray.400'
mx='10px'>Privacy</Link>
</Text> </Text>
</Box> </Box>
</Container> </Container>

11
components/global-header.tsx
View File

@ -42,7 +42,7 @@ function DesktopMenuLinks() {
<Link ml='10px' bgGradient='linear(to-l, yellow.700, red.600)' p='7px 10px' rounded='4px' <Link ml='10px' bgGradient='linear(to-l, yellow.700, red.600)' p='7px 10px' rounded='4px'
_hover={{ textDecoration: 'none', bgGradient: 'linear(to-l, red.800, yellow.700)' }} _hover={{ textDecoration: 'none', bgGradient: 'linear(to-l, red.800, yellow.700)' }}
fontWeight={500} href={'#'}>Subscribe</Link> fontWeight={500} href={'/signup'}>Subscribe</Link>
</Stack> </Stack>
); );
} }
@ -59,13 +59,14 @@ function MobileMenuLinks() {
cursor='pointer' cursor='pointer'
/> />
<MenuList py={'4px'} rounded='3px' minWidth='150px'> <MenuList py={'4px'} rounded='3px' minWidth='150px'>
<MenuItem py='4px' borderColor='gray.100' borderBottomWidth={1} fontSize='13px' <MenuItem href={'/roadmaps'} as={Link} py='4px' borderColor='gray.100' borderBottomWidth={1} fontSize='13px'
color='gray.600'>Roadmaps</MenuItem> color='gray.600'>Roadmaps</MenuItem>
<MenuItem py='4px' borderColor='gray.100' borderBottomWidth={1} fontSize='13px' <MenuItem href={'/guides'} as={Link} py='4px' borderColor='gray.100' borderBottomWidth={1} fontSize='13px'
color='gray.600'>Guides</MenuItem> color='gray.600'>Guides</MenuItem>
<MenuItem py='4px' borderColor='gray.100' borderBottomWidth={1} fontSize='13px' <MenuItem href={'/watch'} as={Link} py='4px' borderColor='gray.100' borderBottomWidth={1} fontSize='13px'
color='gray.600'>Videos</MenuItem> color='gray.600'>Videos</MenuItem>
<MenuItem py='4px' borderColor='gray.100' fontSize='13px' color='gray.600'>Subscribe</MenuItem> <MenuItem href='/signup' as={Link} py='4px' borderColor='gray.100' fontSize='13px'
color='gray.600'>Subscribe</MenuItem>
</MenuList> </MenuList>
</Menu> </Menu>
); );

20
components/updates-banner.tsx
View File

@ -1,8 +1,10 @@
import { Box, Button, Container, Flex, Heading, Stack, Text } from '@chakra-ui/react'; import { Box, Button, Container, Flex, Heading, Link, Text } from '@chakra-ui/react';
import siteConfig from '../content/site.json';
export function UpdatesBanner() { export function UpdatesBanner() {
return ( return (
<Box borderTopWidth={1} mt='60px' pt={['40px', '40px', '70px']} pb={['40px', '45px', '80px']} textAlign='left' bg='gray.800'> <Box borderTopWidth={1} mt='60px' pt={['40px', '40px', '70px']} pb={['40px', '45px', '80px']} textAlign='left'
bg='gray.800'>
<Container maxW='container.md'> <Container maxW='container.md'>
<Heading color={'gray.100'} fontSize={['25px', '25px', '35px']} mb={['5px', '5px', '15px']}>Stay <Heading color={'gray.100'} fontSize={['25px', '25px', '35px']} mb={['5px', '5px', '15px']}>Stay
Informed</Heading> Informed</Heading>
@ -12,15 +14,21 @@ export function UpdatesBanner() {
<Flex flexDirection={['column', 'column', 'row']}> <Flex flexDirection={['column', 'column', 'row']}>
<Box mr={['0', '0', '20px']} mb={['15px', '15px', 0]}> <Box mr={['0', '0', '20px']} mb={['15px', '15px', 0]}>
<Button width={['full', 'auto']} fontSize={['14px', '14px', '16px']} variant='outline' borderWidth={2} <Button as={Link} href='/signup' width={['full', 'auto']} fontSize={['14px', '14px', '16px']}
colorScheme='green' _hover={{ color: 'green.200' }}> variant='outline' borderWidth={2}
colorScheme='green' _hover={{ color: 'green.200', textDecoration: 'none' }}>
Subscribe to Updates Subscribe to Updates
</Button> </Button>
<Text color='gray.500' fontSize='13px' mt='5px'>Free subscription for updates</Text> <Text color='gray.500' fontSize='13px' mt='5px'>Free subscription for updates</Text>
</Box> </Box>
<Box> <Box>
<Button width={['full', 'auto']} fontSize={['14px', '14px', '16px']} colorScheme='yellow'>Updates & Paid <Button as={Link}
Content</Button> href={siteConfig.url.sponsor}
target='_blank'
width={['full', 'auto']}
fontSize={['14px', '14px', '16px']}
_hover={{ textDecoration: 'none', bg: 'yellow.500' }}
colorScheme='yellow'>Updates & Paid Content</Button>
<Text color='gray.500' fontSize='13px' mt='5px'>Support the project by paying as little as <Text as='span' <Text color='gray.500' fontSize='13px' mt='5px'>Support the project by paying as little as <Text as='span'
fontWeight={600}>5$ fontWeight={600}>5$
per month</Text></Text> per month</Text></Text>

3
content/site.json
View File

@ -9,7 +9,10 @@
"logoSquare": "/brand-square.png", "logoSquare": "/brand-square.png",
"url": { "url": {
"web": "https://roadmap.sh", "web": "https://roadmap.sh",
"twitter": "https://twitter.com/kamranahmedse",
"youtube": "https://youtube.com/theroadmap?sub_confirmation=1",
"repo": "https://github.com/kamranahmedse/roadmap.sh", "repo": "https://github.com/kamranahmedse/roadmap.sh",
"sponsor": "https://github.com/sponsors/kamranahmedse",
"repoData": "https://github.com/kamranahmedse/roadmap.sh/tree/master/content", "repoData": "https://github.com/kamranahmedse/roadmap.sh/tree/master/content",
"addGuide": "https://github.com/kamranahmedse/roadmap.sh/tree/master/contributing/guide.md", "addGuide": "https://github.com/kamranahmedse/roadmap.sh/tree/master/contributing/guide.md",
"addRoadmap": "https://github.com/kamranahmedse/roadmap.sh/tree/master/contributing/roadmap.md", "addRoadmap": "https://github.com/kamranahmedse/roadmap.sh/tree/master/contributing/roadmap.md",

9
pages/index.tsx
View File

@ -11,6 +11,7 @@ import { HomeRoadmapItem } from './roadmaps/components/home-roadmap-item';
import { getFeaturedRoadmaps, RoadmapType } from '../lib/roadmap'; import { getFeaturedRoadmaps, RoadmapType } from '../lib/roadmap';
import { getAllGuides, GuideType } from '../lib/guide'; import { getAllGuides, GuideType } from '../lib/guide';
import { getAllVideos, VideoType } from '../lib/video'; import { getAllVideos, VideoType } from '../lib/video';
import siteConfig from '../content/site.json';
type HomeProps = { type HomeProps = {
roadmaps: RoadmapType[]; roadmaps: RoadmapType[];
@ -34,7 +35,9 @@ export default function Home(props: HomeProps) {
to help guide the developers in picking up the path and guide their learnings. to help guide the developers in picking up the path and guide their learnings.
</Text> </Text>
<Text fontSize={['14px', '14px', '16px']}>We also have a <Link textDecoration={'underline'} href={'#'} <Text fontSize={['14px', '14px', '16px']}>We also have a <Link textDecoration={'underline'}
href={siteConfig.url.youtube}
target='_blank'
fontWeight={600}>YouTube fontWeight={600}>YouTube
channel</Link> which we hope you are going to love.</Text> channel</Link> which we hope you are going to love.</Text>
</Box> </Box>
@ -68,7 +71,7 @@ export default function Home(props: HomeProps) {
subtitle={guide.formattedUpdatedAt} subtitle={guide.formattedUpdatedAt}
/> />
))} ))}
<DimmedMore text='View all Guides' /> <DimmedMore href={'/guides'} text='View all Guides' />
</LinksList> </LinksList>
</Container> </Container>
</Box> </Box>
@ -99,7 +102,7 @@ export default function Home(props: HomeProps) {
} }
/> />
))} ))}
<DimmedMore text={'View all Videos'} /> <DimmedMore href='/watch' text={'View all Videos'} />
</LinksList> </LinksList>
</Container> </Container>
</Box> </Box>