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

Homepage links update

Browse Source
pull/1331/head
Kamran Ahmed 3 years ago
parent ec1725e312
commit c097017520
6 changed files with 61 additions and 33 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 5
      components/dimmed-more.tsx
  2. 46
      components/footer.tsx
  3. 11
      components/global-header.tsx
  4. 20
      components/updates-banner.tsx
  5. 3
      content/site.json
  6. 9
      pages/index.tsx

5
components/dimmed-more.tsx
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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>

Write Preview
Loading…
Cancel
Save