Render roadmaps on homepage

pull/1331/head
Kamran Ahmed 3 years ago
parent 7c3c552ff1
commit 964a87f605
  1. 103
      content/roadmaps.json
  2. 3
      content/roadmaps/1-frontend/meta.json
  3. 3
      content/roadmaps/2-backend/meta.json
  4. 3
      content/roadmaps/3-devops/meta.json
  5. 0
      content/roadmaps/4-react/landscape.md
  6. 5
      content/roadmaps/4-react/meta.json
  7. 0
      content/roadmaps/4-react/resources.md
  8. 7
      content/roadmaps/5-postgresql-dba/meta.json
  9. 0
      content/roadmaps/6-android/landscape.md
  10. 5
      content/roadmaps/6-android/meta.json
  11. 0
      content/roadmaps/6-android/resources.md
  12. 1
      content/roadmaps/7-qa/meta.json
  13. 39
      content/site.json
  14. 36
      lib/gtag.ts
  15. 41
      lib/roadmap.ts
  16. 27
      lib/url.ts
  17. 38
      pages/index.tsx

@ -29,7 +29,8 @@
}, },
"title": "Frontend Developer", "title": "Frontend Developer",
"description": "Step by step guide to becoming a modern frontend developer", "description": "Step by step guide to becoming a modern frontend developer",
"featuredDescription": "Step by step guide to becoming a modern frontend developer in 2021", "featuredTitle": "Frontend",
"featuredDescription": "Step by step guide to becoming a frontend developer in 2021",
"author": { "author": {
"name": "Kamran Ahmed", "name": "Kamran Ahmed",
"url": "https://twitter.com/kamranahmedse" "url": "https://twitter.com/kamranahmedse"
@ -69,7 +70,8 @@
}, },
"title": "Backend Developer", "title": "Backend Developer",
"description": "Step by step guide to becoming a modern backend developer", "description": "Step by step guide to becoming a modern backend developer",
"featuredDescription": "Step by step guide to becoming a modern backend developer in 2021", "featuredTitle": "Backend",
"featuredDescription": "Step by step guide to becoming a backend developer in 2021",
"featured": true, "featured": true,
"imagePath": "/roadmaps/backend.png", "imagePath": "/roadmaps/backend.png",
"resourcesPath": "/roadmaps/2-backend/resources.md", "resourcesPath": "/roadmaps/2-backend/resources.md",
@ -103,7 +105,8 @@
}, },
"title": "DevOps Roadmap", "title": "DevOps Roadmap",
"description": "Step by step guide for DevOps or any other Operations Role", "description": "Step by step guide for DevOps or any other Operations Role",
"featuredDescription": "Step by step guide to become an SRE or for any operations role in 2021", "featuredTitle": "DevOps",
"featuredDescription": "Step by step guide for DevOps or operations role in 2021",
"featured": true, "featured": true,
"imagePath": "/roadmaps/devops.png", "imagePath": "/roadmaps/devops.png",
"resourcesPath": "/roadmaps/3-devops/resources.md", "resourcesPath": "/roadmaps/3-devops/resources.md",
@ -120,30 +123,31 @@
}, },
{ {
"seo": { "seo": {
"title": "Android Developer Roadmap: Learn to become an Android developer", "title": "React Developer Roadmap: Learn to become a React developer",
"description": "Community driven, articles, resources, guides, interview questions, quizzes for android development. Learn to become a modern Android developer by following the steps, skills, resources and guides listed in this roadmap.", "description": "Community driven, articles, resources, guides, interview questions, quizzes for react development. Learn to become a modern React developer by following the steps, skills, resources and guides listed in this roadmap.",
"keywords": [ "keywords": [
"guide to becoming an android developer", "guide to becoming a react developer",
"android developer roadmap", "react developer roadmap",
"android roadmap", "react roadmap",
"become android developer", "become react developer",
"android developer skills", "react developer skills",
"android skills test", "react skills test",
"skills for android development", "skills for react development",
"learn android development", "learn react development",
"what is android", "what is react",
"android quiz", "react quiz",
"android interview questions" "react interview questions"
] ]
}, },
"title": "Android Developer", "title": "React Developer",
"description": "Step by step guide to becoming an Android developer", "description": "Everything that is there to learn about React and the ecosystem in 2021.",
"featuredDescription": "Step by step guide to becoming a modern Android Developer in 2021", "featuredTitle": "React",
"isTextHeavy": true, "featuredDescription": "Step by step guide to become a React Developer in 2021",
"communityResource": true, "isTextHeavy": false,
"isCommunity": false,
"featured": true, "featured": true,
"contentPath": "/roadmaps/4-android/landscape.md", "contentPath": "/roadmaps/4-react/landscape.md",
"resourcesPath": "/roadmaps/4-android/resources.md", "resourcesPath": "/roadmaps/4-react/resources.md",
"versions": [ "versions": [
"latest", "latest",
"2018", "2018",
@ -153,7 +157,7 @@
"name": "Kamran Ahmed", "name": "Kamran Ahmed",
"url": "https://twitter.com/kamranahmedse" "url": "https://twitter.com/kamranahmedse"
}, },
"url": "/android" "url": "/react"
}, },
{ {
"seo": { "seo": {
@ -182,46 +186,48 @@
}, },
"title": "PostgreSQL DBA", "title": "PostgreSQL DBA",
"description": "Step by step guide to becoming a modern PostgreSQL DBA", "description": "Step by step guide to becoming a modern PostgreSQL DBA",
"featuredDescription": "Step by step guide to becoming a modern PostgreSQL DBA in 2021", "featuredTitle": "DBA",
"featuredDescription": "Step by step guide to become a PostgreSQL DBA in 2021",
"contentPath": "/roadmaps/5-postgresql-dba/landscape.md", "contentPath": "/roadmaps/5-postgresql-dba/landscape.md",
"resourcesPath": "/roadmaps/5-postgresql-dba/resources.md", "resourcesPath": "/roadmaps/5-postgresql-dba/resources.md",
"author": { "author": {
"name": "Alexey Lesovsky", "name": "Alexey Lesovsky",
"url": "https://github.com/lesovsky" "url": "https://github.com/lesovsky"
}, },
"communityResource": true, "isCommunity": true,
"isTextHeavy": true, "isTextHeavy": true,
"featured": false, "featured": true,
"detailed": false, "detailed": false,
"versions": [], "versions": [],
"url": "/postgresql-dba" "url": "/postgresql-dba"
}, },
{ {
"seo": { "seo": {
"title": "React Developer Roadmap: Learn to become a React developer", "title": "Android Developer Roadmap: Learn to become an Android developer",
"description": "Community driven, articles, resources, guides, interview questions, quizzes for react development. Learn to become a modern React developer by following the steps, skills, resources and guides listed in this roadmap.", "description": "Community driven, articles, resources, guides, interview questions, quizzes for android development. Learn to become a modern Android developer by following the steps, skills, resources and guides listed in this roadmap.",
"keywords": [ "keywords": [
"guide to becoming a react developer", "guide to becoming an android developer",
"react developer roadmap", "android developer roadmap",
"react roadmap", "android roadmap",
"become react developer", "become android developer",
"react developer skills", "android developer skills",
"react skills test", "android skills test",
"skills for react development", "skills for android development",
"learn react development", "learn android development",
"what is react", "what is android",
"react quiz", "android quiz",
"react interview questions" "android interview questions"
] ]
}, },
"title": "React Developer", "title": "Android Developer",
"description": "Everything that is there to learn about React and the ecosystem in 2021.", "description": "Step by step guide to becoming an Android developer",
"featuredDescription": "Everything that is there to learn about React and the ecosystem in 2021.", "featuredTitle": "Android",
"isTextHeavy": false, "featuredDescription": "Step by step guide to becoming an Android Developer in 2021",
"communityResource": false, "isTextHeavy": true,
"isCommunity": true,
"featured": true, "featured": true,
"contentPath": "/roadmaps/6-react/landscape.md", "contentPath": "/roadmaps/6-android/landscape.md",
"resourcesPath": "/roadmaps/6-react/resources.md", "resourcesPath": "/roadmaps/6-android/resources.md",
"versions": [ "versions": [
"latest", "latest",
"2018", "2018",
@ -231,7 +237,7 @@
"name": "Kamran Ahmed", "name": "Kamran Ahmed",
"url": "https://twitter.com/kamranahmedse" "url": "https://twitter.com/kamranahmedse"
}, },
"url": "/react" "url": "/android"
}, },
{ {
"seo": { "seo": {
@ -254,6 +260,7 @@
}, },
"title": "QA Engineer", "title": "QA Engineer",
"description": "Steps to follow in order to become a modern QA Engineer in 2021", "description": "Steps to follow in order to become a modern QA Engineer in 2021",
"featuredTitle": "QA",
"featuredDescription": "Step by step guide to becoming a modern QA Engineer in 2021", "featuredDescription": "Step by step guide to becoming a modern QA Engineer in 2021",
"upcoming": true, "upcoming": true,
"contentPath": "/roadmaps/7-qa/landscape.md", "contentPath": "/roadmaps/7-qa/landscape.md",

@ -28,7 +28,8 @@
}, },
"title": "Frontend Developer", "title": "Frontend Developer",
"description": "Step by step guide to becoming a modern frontend developer", "description": "Step by step guide to becoming a modern frontend developer",
"featuredDescription": "Step by step guide to becoming a modern frontend developer in 2021", "featuredTitle": "Frontend",
"featuredDescription": "Step by step guide to becoming a frontend developer in 2021",
"author": { "author": {
"name": "Kamran Ahmed", "name": "Kamran Ahmed",
"url": "https://twitter.com/kamranahmedse" "url": "https://twitter.com/kamranahmedse"

@ -28,7 +28,8 @@
}, },
"title": "Backend Developer", "title": "Backend Developer",
"description": "Step by step guide to becoming a modern backend developer", "description": "Step by step guide to becoming a modern backend developer",
"featuredDescription": "Step by step guide to becoming a modern backend developer in 2021", "featuredTitle": "Backend",
"featuredDescription": "Step by step guide to becoming a backend developer in 2021",
"featured": true, "featured": true,
"imagePath": "/roadmaps/backend.png", "imagePath": "/roadmaps/backend.png",
"resourcesPath": "./resources.md", "resourcesPath": "./resources.md",

@ -22,7 +22,8 @@
}, },
"title": "DevOps Roadmap", "title": "DevOps Roadmap",
"description": "Step by step guide for DevOps or any other Operations Role", "description": "Step by step guide for DevOps or any other Operations Role",
"featuredDescription": "Step by step guide to become an SRE or for any operations role in 2021", "featuredTitle": "DevOps",
"featuredDescription": "Step by step guide for DevOps or operations role in 2021",
"featured": true, "featured": true,
"imagePath": "/roadmaps/devops.png", "imagePath": "/roadmaps/devops.png",
"resourcesPath": "./resources.md", "resourcesPath": "./resources.md",

@ -18,9 +18,10 @@
}, },
"title": "React Developer", "title": "React Developer",
"description": "Everything that is there to learn about React and the ecosystem in 2021.", "description": "Everything that is there to learn about React and the ecosystem in 2021.",
"featuredDescription": "Everything that is there to learn about React and the ecosystem in 2021.", "featuredTitle": "React",
"featuredDescription": "Step by step guide to become a React Developer in 2021",
"isTextHeavy": false, "isTextHeavy": false,
"communityResource": false, "isCommunity": false,
"featured": true, "featured": true,
"contentPath": "./landscape.md", "contentPath": "./landscape.md",
"resourcesPath": "./resources.md", "resourcesPath": "./resources.md",

@ -25,16 +25,17 @@
}, },
"title": "PostgreSQL DBA", "title": "PostgreSQL DBA",
"description": "Step by step guide to becoming a modern PostgreSQL DBA", "description": "Step by step guide to becoming a modern PostgreSQL DBA",
"featuredDescription": "Step by step guide to becoming a modern PostgreSQL DBA in 2021", "featuredTitle": "DBA",
"featuredDescription": "Step by step guide to become a PostgreSQL DBA in 2021",
"contentPath": "./landscape.md", "contentPath": "./landscape.md",
"resourcesPath": "./resources.md", "resourcesPath": "./resources.md",
"author": { "author": {
"name": "Alexey Lesovsky", "name": "Alexey Lesovsky",
"url": "https://github.com/lesovsky" "url": "https://github.com/lesovsky"
}, },
"communityResource": true, "isCommunity": true,
"isTextHeavy": true, "isTextHeavy": true,
"featured": false, "featured": true,
"detailed": false, "detailed": false,
"versions": [] "versions": []
} }

@ -18,9 +18,10 @@
}, },
"title": "Android Developer", "title": "Android Developer",
"description": "Step by step guide to becoming an Android developer", "description": "Step by step guide to becoming an Android developer",
"featuredDescription": "Step by step guide to becoming a modern Android Developer in 2021", "featuredTitle": "Android",
"featuredDescription": "Step by step guide to becoming an Android Developer in 2021",
"isTextHeavy": true, "isTextHeavy": true,
"communityResource": true, "isCommunity": true,
"featured": true, "featured": true,
"contentPath": "./landscape.md", "contentPath": "./landscape.md",
"resourcesPath": "./resources.md", "resourcesPath": "./resources.md",

@ -19,6 +19,7 @@
}, },
"title": "QA Engineer", "title": "QA Engineer",
"description": "Steps to follow in order to become a modern QA Engineer in 2021", "description": "Steps to follow in order to become a modern QA Engineer in 2021",
"featuredTitle": "QA",
"featuredDescription": "Step by step guide to becoming a modern QA Engineer in 2021", "featuredDescription": "Step by step guide to becoming a modern QA Engineer in 2021",
"upcoming": true, "upcoming": true,
"contentPath": "./landscape.md", "contentPath": "./landscape.md",

@ -0,0 +1,39 @@
{
"author": "Kamran Ahmed",
"title": "Roadmaps to becoming a modern developer",
"name": "roadmap.sh",
"description": "Community driven roadmaps, articles, guides, quizzes, tips and resources for developers to learn from, identify their career paths, know what they don't know, find out the knowledge gaps, learn and improve.",
"twitter": "kamranahmedse",
"facebook": "kamranahmedse",
"logo": "/brand.png",
"logoSquare": "/brand-square.png",
"url": {
"web": "https://roadmap.sh",
"repo": "https://github.com/kamranahmedse/roadmap.sh",
"repoData": "https://github.com/kamranahmedse/roadmap.sh/tree/master/content",
"addGuide": "https://github.com/kamranahmedse/roadmap.sh/tree/master/contributing/guide.md",
"addRoadmap": "https://github.com/kamranahmedse/roadmap.sh/tree/master/contributing/roadmap.md",
"addResources": "https://github.com/kamranahmedse/roadmap.sh/tree/master/contributing/resources.md",
"contribute": "https://github.com/kamranahmedse/roadmap.sh/tree/master/contributing",
"issue": "https://github.com/kamranahmedse/roadmap.sh/issues/new"
},
"keywords": [
"roadmap",
"developer roadmaps",
"developer roadmap",
"frontend developer",
"frontend developer roadmap",
"frontend",
"frontend roadmap",
"backend",
"backend developer",
"backend developer roadmap",
"devops",
"devops roadmap",
"fullstack developer roadmap",
"guide to becoming a developer",
"sre roadmap",
"sre",
"operations roadmap"
]
}

@ -0,0 +1,36 @@
declare global {
interface Window {
gtag: any;
}
}
// https://developers.google.com/analytics/devguides/collection/gtagjs/pages
export const firePageView = (url: string) => {
if (!window.gtag) {
console.warn('Missing GTAG – Analytics disabled');
return;
}
window.gtag('config', process.env.GA_SECRET, {
page_path: url
});
};
// https://developers.google.com/analytics/devguides/collection/gtagjs/events
export const event = (props: { action: string; category: string; label: string; value: string; }) => {
const { action, category, label, value } = props;
if (!window.gtag) {
console.warn('Missing GTAG – Analytics disabled');
return;
}
window.gtag(
'event',
action,
{
event_category: category,
event_label: label,
value: value
}
);
};

@ -0,0 +1,41 @@
import { NextApiRequest } from 'next';
import roadmaps from '../content/roadmaps.json';
export type RoadmapType = {
seo: {
title: string;
description: string;
keywords: string[]
},
title: string,
description: string,
featuredTitle: string;
featuredDescription: string,
author: {
name: string,
url: string
},
featured: boolean,
imagePath?: string,
contentPath?: string;
resourcesPath: string;
isCommunity: boolean;
url: string;
};
export function getRequestedRoadmap(req: NextApiRequest): RoadmapType | undefined {
// remove trailing slashes
const normalizedUrl = req.url?.replace(/\/$/, '') || '';
return (roadmaps as RoadmapType[]).find(roadmap => normalizedUrl.startsWith(roadmap.url));
}
export function getAllRoadmaps(): RoadmapType[] {
return (roadmaps as RoadmapType[]);
}
export function getFeaturedRoadmaps(): RoadmapType[] {
const roadmaps: RoadmapType[] = getAllRoadmaps();
return roadmaps.filter(roadmap => roadmap.featured);
}

@ -0,0 +1,27 @@
import siteConfig from '../content/site.json';
export const prefixHost = (url: string) => {
// if it starts with forward slash then prefix site URL
// @todo proper handling of full URLs and trailing slashes
return /^\//.test(url) ? `${siteConfig?.url?.web}${url}` : url;
};
export const getTwitterUrl = (username: string) => {
return `https://twitter.com/${username}`;
};
export const getTwitterShareUrl = ({ text, url }: { text: string, url: string }) => {
return `https://twitter.com/intent/tweet?text=${text}&url=${encodeURI(prefixHost(url))}`;
};
export const getFacebookShareUrl = ({ text, url }: { text: string, url: string }) => {
return `https://www.facebook.com/sharer/sharer.php?quote=${text}&u=${encodeURI(prefixHost(url))}`;
};
export const getRedditShareUrl = ({ text, url }: { text: string, url: string }) => {
return `https://www.reddit.com/submit?title=${text}&url=${encodeURI(prefixHost(url))}`;
};
export const getHnShareUrl = ({ text, url }: { text: string, url: string }) => {
return `https://news.ycombinator.com/submitlink?t=${text}&u=${prefixHost(url)}`;
};

@ -8,8 +8,15 @@ import { LinksListItem } from '../components/links-list-item';
import { VideoIcon } from '../icons/video-icon'; import { VideoIcon } from '../icons/video-icon';
import { LinksList } from '../components/links-list'; import { LinksList } from '../components/links-list';
import { HomeRoadmapItem } from './roadmaps/components/home-roadmap-item'; import { HomeRoadmapItem } from './roadmaps/components/home-roadmap-item';
import { getFeaturedRoadmaps, RoadmapType } from '../lib/roadmap';
type HomeProps = {
roadmaps: RoadmapType[]
}
export default function Home(props: HomeProps) {
const { roadmaps } = props;
export default function Home() {
return ( return (
<Box bg='white' minH='100vh'> <Box bg='white' minH='100vh'>
<GlobalHeader /> <GlobalHeader />
@ -28,18 +35,15 @@ export default function Home() {
channel</Link> which we hope you are going to love.</Text> channel</Link> which we hope you are going to love.</Text>
</Box> </Box>
<SimpleGrid columns={[1, 2, 3]} spacing={['10px', '10px', '15px']}> <SimpleGrid columns={[1, 2, 3]} spacing={['10px', '10px', '15px']}>
<HomeRoadmapItem colorIndex={0} title={'Frontend'} {roadmaps.map((roadmap: RoadmapType, counter: number) => (
subtitle={'Step by step guide to becoming a frontend developer in 2021'} /> <HomeRoadmapItem
<HomeRoadmapItem colorIndex={1} title={'Backend'} key={roadmap.url}
subtitle={'Step by step guide to becoming a backend developer in 2021'} /> colorIndex={counter}
<HomeRoadmapItem colorIndex={2} title={'DevOps'} title={roadmap.featuredTitle}
subtitle={'Step by step guide for DevOps or Operations role in 2021'} /> isCommunity={roadmap.isCommunity}
<HomeRoadmapItem colorIndex={3} title={'React'} subtitle={roadmap.featuredDescription}
subtitle={'Step by step guide to become a React Developer in 2021'} /> />
<HomeRoadmapItem colorIndex={4} title={'DBA'} ))}
subtitle={'Step by step guide to become a PostgreSQL DBA in 2021'} isCommunity />
<HomeRoadmapItem colorIndex={5} title={'Android'}
subtitle={'Step by step guide to become an Android Developer in 2021'} isCommunity />
</SimpleGrid> </SimpleGrid>
</Container> </Container>
</Box> </Box>
@ -110,3 +114,11 @@ export default function Home() {
</Box> </Box>
); );
} }
export async function getStaticProps() {
return {
props: {
roadmaps: getFeaturedRoadmaps()
}
};
}

Loading…
Cancel
Save