Add related roadmaps on each roadmap

pull/1719/head
Kamran Ahmed 2 years ago
parent a319db1441
commit fb45c91364
  1. 49
      components/related-roadmaps.tsx
  2. 112
      content/roadmaps.json
  3. 9
      content/roadmaps/100-frontend/meta.json
  4. 11
      content/roadmaps/101-backend/meta.json
  5. 12
      content/roadmaps/102-devops/meta.json
  6. 11
      content/roadmaps/103-react/meta.json
  7. 9
      content/roadmaps/104-angular/meta.json
  8. 9
      content/roadmaps/105-vue/meta.json
  9. 11
      content/roadmaps/106-javascript/meta.json
  10. 8
      content/roadmaps/107-android/meta.json
  11. 10
      content/roadmaps/107-nodejs/meta.json
  12. 12
      content/roadmaps/108-python/meta.json
  13. 12
      content/roadmaps/109-golang/meta.json
  14. 12
      content/roadmaps/110-java/meta.json
  15. 6
      content/roadmaps/111-postgresql-dba/meta.json
  16. 11
      content/roadmaps/112-blockchain/meta.json
  17. 11
      content/roadmaps/113-qa/meta.json
  18. 7
      lib/roadmap.ts
  19. 30
      pages/[roadmap]/index.tsx
  20. 44
      public/sitemap.xml

@ -5,6 +5,18 @@ type RelatedRoadmapsProps = {
roadmaps: RoadmapType[];
};
const colorsList = [
'gray.700',
'purple.700',
'blue.700',
'red.700',
'green.700',
'teal.700',
'yellow.700',
'cyan.700',
'pink.700'
];
export function RelatedRoadmaps(props: RelatedRoadmapsProps) {
const { roadmaps } = props;
if (!roadmaps.length) {
@ -16,21 +28,44 @@ export function RelatedRoadmaps(props: RelatedRoadmapsProps) {
<Container maxW='container.md'>
<Box display='flex' position='relative' top='-23px' alignItems='center' justifyContent='space-between'>
<Text textAlign='center' borderWidth={1} bg='white' p='4px' fontWeight='bold' rounded='md' px={'15px'}>
<Text as='span' display={['none', 'none', 'inline']}>Other</Text> Related Roadmaps
Related Roadmaps
</Text>
<Button as={Link} variant='outline' bg='white' size='sm' _hover={{ textDecoration: 'none', bg: 'gray.100' }} href='/'>
<Button as={Link} variant='outline' bg='white' size='sm' _hover={{ textDecoration: 'none', bg: 'gray.100' }}
href='/'>
<Text as='span' display={['inline', 'none', 'none']}>More &rarr;</Text>
<Text as='span' display={['none', 'inline', 'inline']}>All Roadmaps &rarr;</Text>
</Button>
</Box>
<Stack spacing='5px'>
{ roadmaps.map(roadmap => (
<Link href={`/${roadmap.id}`} key={roadmap.id} borderWidth={1} display='block' py='5px' px='10px' rounded='md' bg='white'
textDecoration={'none'} _hover={{ bg: 'gray.50' }}>
<Badge display={['none', 'inline']} position='relative' top='-1px' colorScheme='blue' mr='7px'>{ roadmap.featuredTitle }</Badge>
<Text as='span' display={['block', 'inline']} fontSize={['sm', 'sm', 'md']}>{ roadmap.featuredDescription }</Text>
{roadmaps.map((roadmap, counter) => (
<Link
href={`/${roadmap.id}`}
key={roadmap.id}
borderWidth={1}
borderColor='blue.100'
py='7px'
px='14px'
rounded='md'
bg='white'
textDecoration={'none'}
_hover={{ bg: 'gray.100', borderColor: 'blue.200' }}
bgGradient='linear(to-r, white, gray.50)'
display='flex'
alignItems='center'
flexDir={['column', 'row', 'row']}
>
<Text
color={colorsList[counter]}
as='span'
fontWeight='bold'
display={['inline-block']}
minWidth='100px'
>
{roadmap.featuredTitle}
</Text>
<Text as='span' display={['block', 'inline']} isTruncated maxWidth='100%' fontSize={['sm', 'sm', 'md']} color='gray.700'>{roadmap.featuredDescription}</Text>
</Link>
))}
</Stack>

@ -46,6 +46,13 @@
"resourcesPath": "/roadmaps/100-frontend/resources.md",
"pdfUrl": "/pdfs/frontend.pdf",
"contentPathsFilePath": "/roadmaps/100-frontend/content-paths.json",
"relatedRoadmaps": [
"javascript",
"nodejs",
"react",
"angular",
"vue"
],
"id": "frontend",
"metaPath": "/roadmaps/100-frontend/meta.json",
"isUpcoming": false
@ -96,6 +103,15 @@
},
"pdfUrl": "/pdfs/backend.pdf",
"contentPathsFilePath": "/roadmaps/101-backend/content-paths.json",
"relatedRoadmaps": [
"python",
"java",
"golang",
"devops",
"javascript",
"nodejs",
"postgresql-dba"
],
"id": "backend",
"metaPath": "/roadmaps/101-backend/meta.json",
"isUpcoming": false
@ -145,6 +161,14 @@
},
"pdfUrl": "/pdfs/devops.pdf",
"contentPathsFilePath": "/roadmaps/102-devops/content-paths.json",
"relatedRoadmaps": [
"backend",
"python",
"java",
"golang",
"javascript",
"nodejs"
],
"id": "devops",
"metaPath": "/roadmaps/102-devops/meta.json",
"isUpcoming": false
@ -190,6 +214,13 @@
},
"pdfUrl": "/pdfs/react.pdf",
"contentPathsFilePath": "/roadmaps/103-react/content-paths.json",
"relatedRoadmaps": [
"frontend",
"javascript",
"angular",
"vue",
"nodejs"
],
"id": "react",
"metaPath": "/roadmaps/103-react/meta.json",
"isUpcoming": false
@ -233,6 +264,13 @@
"url": "https://twitter.com/kamranahmedse"
},
"pdfUrl": "/pdfs/angular.pdf",
"relatedRoadmaps": [
"frontend",
"javascript",
"react",
"vue",
"nodejs"
],
"id": "angular",
"metaPath": "/roadmaps/104-angular/meta.json",
"isUpcoming": false
@ -288,6 +326,13 @@
},
"pdfUrl": "/pdfs/vue.pdf",
"contentPathsFilePath": "/roadmaps/105-vue/content-paths.json",
"relatedRoadmaps": [
"frontend",
"javascript",
"react",
"angular",
"nodejs"
],
"id": "vue",
"metaPath": "/roadmaps/105-vue/meta.json",
"isUpcoming": false
@ -336,6 +381,15 @@
},
"pdfUrl": "/pdfs/javascript.pdf",
"contentPathsFilePath": "/roadmaps/106-javascript/content-paths.json",
"relatedRoadmaps": [
"frontend",
"backend",
"javascript",
"react",
"angular",
"vue",
"nodejs"
],
"id": "javascript",
"metaPath": "/roadmaps/106-javascript/meta.json",
"isUpcoming": false
@ -378,6 +432,12 @@
"name": "Kamran Ahmed",
"url": "https://twitter.com/kamranahmedse"
},
"relatedRoadmaps": [
"frontend",
"javascript",
"react",
"nodejs"
],
"id": "android",
"metaPath": "/roadmaps/107-android/meta.json",
"isUpcoming": false
@ -450,6 +510,14 @@
"jsonUrl": "/project/nodejs.json",
"pdfUrl": "/pdfs/nodejs.pdf",
"contentPathsFilePath": "/roadmaps/107-nodejs/content-paths.json",
"relatedRoadmaps": [
"frontend",
"backend",
"javascript",
"react",
"angular",
"vue"
],
"id": "nodejs",
"metaPath": "/roadmaps/107-nodejs/meta.json",
"isUpcoming": false
@ -491,6 +559,14 @@
"url": "https://twitter.com/kamranahmedse"
},
"contentPathsFilePath": "/roadmaps/108-python/content-paths.json",
"relatedRoadmaps": [
"backend",
"devops",
"golang",
"java",
"javascript",
"nodejs"
],
"id": "python",
"metaPath": "/roadmaps/108-python/meta.json",
"isUpcoming": false
@ -545,6 +621,14 @@
"url": "https://twitter.com/kamranahmedse"
},
"contentPathsFilePath": "/roadmaps/109-golang/content-paths.json",
"relatedRoadmaps": [
"backend",
"devops",
"python",
"java",
"javascript",
"nodejs"
],
"id": "golang",
"metaPath": "/roadmaps/109-golang/meta.json"
},
@ -597,6 +681,14 @@
},
"pdfUrl": "/pdfs/java.pdf",
"contentPathsFilePath": "/roadmaps/110-java/content-paths.json",
"relatedRoadmaps": [
"backend",
"devops",
"python",
"golang",
"javascript",
"nodejs"
],
"id": "java",
"metaPath": "/roadmaps/110-java/meta.json"
},
@ -641,6 +733,10 @@
"featured": true,
"detailed": false,
"versions": [],
"relatedRoadmaps": [
"backend",
"devops"
],
"id": "postgresql-dba",
"metaPath": "/roadmaps/111-postgresql-dba/meta.json",
"isUpcoming": false
@ -694,6 +790,15 @@
},
"pdfUrl": "/pdfs/blockchain.pdf",
"contentPathsFilePath": "/roadmaps/112-blockchain/content-paths.json",
"relatedRoadmaps": [
"frontend",
"backend",
"javascript",
"nodejs",
"react",
"vue",
"angular"
],
"id": "blockchain",
"metaPath": "/roadmaps/112-blockchain/meta.json",
"isUpcoming": false
@ -733,6 +838,13 @@
"url": "https://github.com/anas-qa"
},
"contentPathsFilePath": "/roadmaps/113-qa/content-paths.json",
"relatedRoadmaps": [
"frontend",
"backend",
"devops",
"javascript",
"nodejs"
],
"id": "qa",
"metaPath": "/roadmaps/113-qa/meta.json",
"isUpcoming": false

@ -44,5 +44,12 @@
"jsonUrl": "/project/frontend.json",
"resourcesPath": "./resources.md",
"pdfUrl": "/pdfs/frontend.pdf",
"contentPathsFilePath": "./content-paths.json"
"contentPathsFilePath": "./content-paths.json",
"relatedRoadmaps": [
"javascript",
"nodejs",
"react",
"angular",
"vue"
]
}

@ -43,5 +43,14 @@
"url": "https://twitter.com/kamranahmedse"
},
"pdfUrl": "/pdfs/backend.pdf",
"contentPathsFilePath": "./content-paths.json"
"contentPathsFilePath": "./content-paths.json",
"relatedRoadmaps": [
"python",
"java",
"golang",
"devops",
"javascript",
"nodejs",
"postgresql-dba"
]
}

@ -42,5 +42,13 @@
"url": "https://twitter.com/kamranahmedse"
},
"pdfUrl": "/pdfs/devops.pdf",
"contentPathsFilePath": "./content-paths.json"
}
"contentPathsFilePath": "./content-paths.json",
"relatedRoadmaps": [
"backend",
"python",
"java",
"golang",
"javascript",
"nodejs"
]
}

@ -38,5 +38,12 @@
"url": "https://twitter.com/kamranahmedse"
},
"pdfUrl": "/pdfs/react.pdf",
"contentPathsFilePath": "./content-paths.json"
}
"contentPathsFilePath": "./content-paths.json",
"relatedRoadmaps": [
"frontend",
"javascript",
"angular",
"vue",
"nodejs"
]
}

@ -36,5 +36,12 @@
"name": "Kamran Ahmed",
"url": "https://twitter.com/kamranahmedse"
},
"pdfUrl": "/pdfs/angular.pdf"
"pdfUrl": "/pdfs/angular.pdf",
"relatedRoadmaps": [
"frontend",
"javascript",
"react",
"vue",
"nodejs"
]
}

@ -48,5 +48,12 @@
"url": "https://twitter.com/kamranahmedse"
},
"pdfUrl": "/pdfs/vue.pdf",
"contentPathsFilePath": "./content-paths.json"
"contentPathsFilePath": "./content-paths.json",
"relatedRoadmaps": [
"frontend",
"javascript",
"react",
"angular",
"nodejs"
]
}

@ -41,5 +41,14 @@
"url": "https://twitter.com/kamranahmedse"
},
"pdfUrl": "/pdfs/javascript.pdf",
"contentPathsFilePath": "./content-paths.json"
"contentPathsFilePath": "./content-paths.json",
"relatedRoadmaps": [
"frontend",
"backend",
"javascript",
"react",
"angular",
"vue",
"nodejs"
]
}

@ -35,5 +35,11 @@
"author": {
"name": "Kamran Ahmed",
"url": "https://twitter.com/kamranahmedse"
}
},
"relatedRoadmaps": [
"frontend",
"javascript",
"react",
"nodejs"
]
}

@ -65,5 +65,13 @@
"imageUrl": "/roadmaps/nodejs.png",
"jsonUrl": "/project/nodejs.json",
"pdfUrl": "/pdfs/nodejs.pdf",
"contentPathsFilePath": "./content-paths.json"
"contentPathsFilePath": "./content-paths.json",
"relatedRoadmaps": [
"frontend",
"backend",
"javascript",
"react",
"angular",
"vue"
]
}

@ -34,5 +34,13 @@
"name": "Kamran Ahmed",
"url": "https://twitter.com/kamranahmedse"
},
"contentPathsFilePath": "./content-paths.json"
}
"contentPathsFilePath": "./content-paths.json",
"relatedRoadmaps": [
"backend",
"devops",
"golang",
"java",
"javascript",
"nodejs"
]
}

@ -47,5 +47,13 @@
"name": "Kamran Ahmed",
"url": "https://twitter.com/kamranahmedse"
},
"contentPathsFilePath": "./content-paths.json"
}
"contentPathsFilePath": "./content-paths.json",
"relatedRoadmaps": [
"backend",
"devops",
"python",
"java",
"javascript",
"nodejs"
]
}

@ -46,5 +46,13 @@
"url": "https://twitter.com/kamranahmedse"
},
"pdfUrl": "/pdfs/java.pdf",
"contentPathsFilePath": "./content-paths.json"
}
"contentPathsFilePath": "./content-paths.json",
"relatedRoadmaps": [
"backend",
"devops",
"python",
"golang",
"javascript",
"nodejs"
]
}

@ -38,5 +38,9 @@
"isTextHeavy": true,
"featured": true,
"detailed": false,
"versions": []
"versions": [],
"relatedRoadmaps": [
"backend",
"devops"
]
}

@ -46,5 +46,14 @@
"url": "https://twitter.com/danielgruesso"
},
"pdfUrl": "/pdfs/blockchain.pdf",
"contentPathsFilePath": "./content-paths.json"
"contentPathsFilePath": "./content-paths.json",
"relatedRoadmaps": [
"frontend",
"backend",
"javascript",
"nodejs",
"react",
"vue",
"angular"
]
}

@ -32,5 +32,12 @@
"name": "Anas Fitiani",
"url": "https://github.com/anas-qa"
},
"contentPathsFilePath": "./content-paths.json"
}
"contentPathsFilePath": "./content-paths.json",
"relatedRoadmaps": [
"frontend",
"backend",
"devops",
"javascript",
"nodejs"
]
}

@ -14,7 +14,7 @@ export type RoadmapType = {
name: string;
url: string;
};
type: "role" | "tool";
type: 'role' | 'tool';
featured: boolean;
imageUrl?: string;
jsonUrl?: string;
@ -27,6 +27,7 @@ export type RoadmapType = {
isUpcoming: boolean;
id: string;
pdfUrl?: string;
relatedRoadmaps?: string[];
};
export function getRoadmapById(id: string): RoadmapType | undefined {
@ -37,6 +38,10 @@ export function getAllRoadmaps(): RoadmapType[] {
return roadmaps as RoadmapType[];
}
export function filterRoadmapsByIds(ids: string[]): RoadmapType[] {
return (roadmaps as RoadmapType[]).filter(roadmap => ids.includes(roadmap.id));
}
export function getFeaturedRoadmaps(): RoadmapType[] {
const roadmaps: RoadmapType[] = getAllRoadmaps();

@ -3,7 +3,13 @@ import { Box, Button, Container, Flex, Heading, Image, Input, Text } from '@chak
import { GlobalHeader } from '../../components/global-header';
import { OpensourceBanner } from '../../components/opensource-banner';
import { Footer } from '../../components/footer';
import { getAllRoadmaps, getRoadmapById, isInteractiveRoadmap, RoadmapType } from '../../lib/roadmap';
import {
filterRoadmapsByIds,
getAllRoadmaps,
getRoadmapById,
isInteractiveRoadmap,
RoadmapType
} from '../../lib/roadmap';
import MdRenderer from '../../components/md-renderer';
import Helmet from '../../components/helmet';
import { RoadmapPageHeader } from '../../components/roadmap/roadmap-page-header';
@ -65,11 +71,12 @@ function UpcomingRoadmap(props: RoadmapProps) {
<Container maxW={'container.md'} position='relative' mx='auto'>
<Flex flexDir='column' alignItems='center' borderWidth={1} rounded='lg' py={10} boxShadow='inner' px={5}>
<BellIcon w='90px' h='90px' color='gray.200' mb={5} />
<Heading mb={2} fontSize='2xl' >Upcoming Roadmap</Heading>
<Heading mb={2} fontSize='2xl'>Upcoming Roadmap</Heading>
<Text fontSize='sm' mb={4}>Please check back later or subscribe below.</Text>
<form action={SIGNUP_FORM_ACTION} method='post'>
<Input type='email' bg={'white'} size='lg' placeholder='Enter your email' mb={2} name={SIGNUP_EMAIL_INPUT_NAME} required />
<Input type='email' bg={'white'} size='lg' placeholder='Enter your email' mb={2}
name={SIGNUP_EMAIL_INPUT_NAME} required />
<Button size='lg' isFullWidth colorScheme='teal' leftIcon={<EmailIcon />} type='submit'>Get Notified</Button>
</form>
</Flex>
@ -77,8 +84,12 @@ function UpcomingRoadmap(props: RoadmapProps) {
);
}
export default function Roadmap(props: RoadmapProps) {
const { roadmap } = props;
type RoadmapPageProps = RoadmapProps & {
relatedRoadmaps: RoadmapType[]
};
export default function Roadmap(props: RoadmapPageProps) {
const { roadmap, relatedRoadmaps } = props;
return (
<Box bg='white' minH='100vh'>
@ -89,13 +100,13 @@ export default function Roadmap(props: RoadmapProps) {
keywords={roadmap?.seo.keywords || []}
roadmap={roadmap}
/>
<Box mb='60px'>
<Box mb='60px'>
<RoadmapPageHeader roadmap={roadmap} />
<ImageRoadmap roadmap={roadmap} />
<TextualRoadmap roadmap={roadmap} />
<UpcomingRoadmap roadmap={roadmap} />
</Box>
<RelatedRoadmaps roadmaps={[]} />
<RelatedRoadmaps roadmaps={relatedRoadmaps} />
<OpensourceBanner />
<Footer />
</Box>
@ -128,10 +139,13 @@ type ContextType = {
export async function getStaticProps(context: ContextType) {
const roadmapId: string = context?.params?.roadmap;
const roadmap: RoadmapType = getRoadmapById(roadmapId)!;
const relatedRoadmaps: RoadmapType[] = filterRoadmapsByIds(roadmap?.relatedRoadmaps || []);
return {
props: {
roadmap: getRoadmapById(roadmapId)
roadmap,
relatedRoadmaps,
}
};
}

@ -3,91 +3,91 @@
<url>
<loc>https://roadmap.sh/frontend</loc>
<changefreq>monthly</changefreq>
<lastmod>2022-08-04T11:36:54.909Z</lastmod>
<lastmod>2022-09-08T15:50:09.048Z</lastmod>
<priority>1.0</priority>
</url>
<url>
<loc>https://roadmap.sh/backend</loc>
<changefreq>monthly</changefreq>
<lastmod>2022-08-04T11:37:35.841Z</lastmod>
<lastmod>2022-09-08T15:51:27.084Z</lastmod>
<priority>1.0</priority>
</url>
<url>
<loc>https://roadmap.sh/devops</loc>
<changefreq>monthly</changefreq>
<lastmod>2022-08-05T13:01:37.174Z</lastmod>
<lastmod>2022-09-08T15:52:13.500Z</lastmod>
<priority>1.0</priority>
</url>
<url>
<loc>https://roadmap.sh/react</loc>
<changefreq>monthly</changefreq>
<lastmod>2022-08-12T12:50:57.357Z</lastmod>
<lastmod>2022-09-08T15:52:43.967Z</lastmod>
<priority>1.0</priority>
</url>
<url>
<loc>https://roadmap.sh/angular</loc>
<changefreq>monthly</changefreq>
<lastmod>2022-08-04T11:37:35.838Z</lastmod>
<lastmod>2022-09-08T15:53:57.205Z</lastmod>
<priority>1.0</priority>
</url>
<url>
<loc>https://roadmap.sh/vue</loc>
<changefreq>monthly</changefreq>
<lastmod>2022-08-29T14:35:47.707Z</lastmod>
<lastmod>2022-09-08T15:53:27.172Z</lastmod>
<priority>1.0</priority>
</url>
<url>
<loc>https://roadmap.sh/javascript</loc>
<changefreq>monthly</changefreq>
<lastmod>2022-08-29T14:35:15.626Z</lastmod>
<lastmod>2022-09-08T15:53:41.849Z</lastmod>
<priority>1.0</priority>
</url>
<url>
<loc>https://roadmap.sh/android</loc>
<changefreq>monthly</changefreq>
<lastmod>2022-08-17T22:44:44.574Z</lastmod>
<lastmod>2022-09-08T15:54:45.212Z</lastmod>
<priority>1.0</priority>
</url>
<url>
<loc>https://roadmap.sh/nodejs</loc>
<changefreq>monthly</changefreq>
<lastmod>2022-08-29T14:35:29.504Z</lastmod>
<lastmod>2022-09-08T15:55:10.053Z</lastmod>
<priority>1.0</priority>
</url>
<url>
<loc>https://roadmap.sh/python</loc>
<changefreq>monthly</changefreq>
<lastmod>2022-08-25T15:53:02.241Z</lastmod>
<lastmod>2022-09-08T15:55:43.386Z</lastmod>
<priority>1.0</priority>
</url>
<url>
<loc>https://roadmap.sh/golang</loc>
<changefreq>monthly</changefreq>
<lastmod>2022-08-25T15:53:02.254Z</lastmod>
<lastmod>2022-09-08T15:55:55.494Z</lastmod>
<priority>1.0</priority>
</url>
<url>
<loc>https://roadmap.sh/java</loc>
<changefreq>monthly</changefreq>
<lastmod>2022-08-17T22:44:44.597Z</lastmod>
<lastmod>2022-09-08T15:56:13.247Z</lastmod>
<priority>1.0</priority>
</url>
<url>
<loc>https://roadmap.sh/postgresql-dba</loc>
<changefreq>monthly</changefreq>
<lastmod>2022-08-17T22:44:44.597Z</lastmod>
<lastmod>2022-09-08T15:56:26.295Z</lastmod>
<priority>1.0</priority>
</url>
<url>
<loc>https://roadmap.sh/blockchain</loc>
<changefreq>monthly</changefreq>
<lastmod>2022-08-29T14:36:56.532Z</lastmod>
<lastmod>2022-09-08T15:56:54.343Z</lastmod>
<priority>1.0</priority>
</url>
<url>
<loc>https://roadmap.sh/qa</loc>
<changefreq>monthly</changefreq>
<lastmod>2022-09-01T15:56:57.220Z</lastmod>
<lastmod>2022-09-08T15:57:35.430Z</lastmod>
<priority>1.0</priority>
</url>
<url>
@ -273,9 +273,15 @@
<url>
<loc>https://roadmap.sh/</loc>
<changefreq>monthly</changefreq>
<lastmod>2022-08-30T09:56:58.422Z</lastmod>
<lastmod>2022-09-08T14:46:59.862Z</lastmod>
<priority>1.0</priority>
</url>
<url>
<loc>https://roadmap.sh/pdfs</loc>
<changefreq>monthly</changefreq>
<lastmod>2022-09-01T18:28:41.149Z</lastmod>
<priority>0.5</priority>
</url>
<url>
<loc>https://roadmap.sh/roadmaps</loc>
<changefreq>monthly</changefreq>
@ -294,6 +300,12 @@
<lastmod>2022-08-04T14:33:07.901Z</lastmod>
<priority>0.5</priority>
</url>
<url>
<loc>https://roadmap.sh/upcoming</loc>
<changefreq>monthly</changefreq>
<lastmod>2022-09-08T13:34:10.428Z</lastmod>
<priority>0.5</priority>
</url>
<url>
<loc>https://roadmap.sh/watch</loc>
<changefreq>monthly</changefreq>

Loading…
Cancel
Save