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

Render roadmaps on homepage

Browse Source
This commit is contained in:
Kamran Ahmed
2021-08-29 16:05:19 +02:00
parent 7c3c552ff1
commit 964a87f605
17 changed files with 241 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
content/roadmaps.json
View File

@ -29,7 +29,8 @@
},
"title": "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": {
"name": "Kamran Ahmed",
"url": "https://twitter.com/kamranahmedse"
@ -69,7 +70,8 @@
},
"title": "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,
"imagePath": "/roadmaps/backend.png",
"resourcesPath": "/roadmaps/2-backend/resources.md",
@ -103,7 +105,8 @@
},
"title": "DevOps Roadmap",
"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,
"imagePath": "/roadmaps/devops.png",
"resourcesPath": "/roadmaps/3-devops/resources.md",
@ -120,30 +123,31 @@
},
{
"seo": {
"title": "Android Developer Roadmap: Learn to become an Android 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.",
"title": "React Developer Roadmap: Learn to become a React 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.",
"keywords": [
"guide to becoming an android developer",
"android developer roadmap",
"android roadmap",
"become android developer",
"android developer skills",
"android skills test",
"skills for android development",
"learn android development",
"what is android",
"android quiz",
"android interview questions"
"guide to becoming a react developer",
"react developer roadmap",
"react roadmap",
"become react developer",
"react developer skills",
"react skills test",
"skills for react development",
"learn react development",
"what is react",
"react quiz",
"react interview questions"
]
},
"title": "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",
"isTextHeavy": true,
"communityResource": true,
"title": "React Developer",
"description": "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,
"isCommunity": false,
"featured": true,
"contentPath": "/roadmaps/4-android/landscape.md",
"resourcesPath": "/roadmaps/4-android/resources.md",
"contentPath": "/roadmaps/4-react/landscape.md",
"resourcesPath": "/roadmaps/4-react/resources.md",
"versions": [
"latest",
"2018",
@ -153,7 +157,7 @@
"name": "Kamran Ahmed",
"url": "https://twitter.com/kamranahmedse"
},
"url": "/android"
"url": "/react"
},
{
"seo": {
@ -182,46 +186,48 @@
},
"title": "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",
"resourcesPath": "/roadmaps/5-postgresql-dba/resources.md",
"author": {
"name": "Alexey Lesovsky",
"url": "https://github.com/lesovsky"
},
"communityResource": true,
"isCommunity": true,
"isTextHeavy": true,
"featured": false,
"featured": true,
"detailed": false,
"versions": [],
"url": "/postgresql-dba"
},
{
"seo": {
"title": "React Developer Roadmap: Learn to become a React 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.",
"title": "Android Developer Roadmap: Learn to become an Android 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.",
"keywords": [
"guide to becoming a react developer",
"react developer roadmap",
"react roadmap",
"become react developer",
"react developer skills",
"react skills test",
"skills for react development",
"learn react development",
"what is react",
"react quiz",
"react interview questions"
"guide to becoming an android developer",
"android developer roadmap",
"android roadmap",
"become android developer",
"android developer skills",
"android skills test",
"skills for android development",
"learn android development",
"what is android",
"android quiz",
"android interview questions"
]
},
"title": "React Developer",
"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.",
"isTextHeavy": false,
"communityResource": false,
"title": "Android Developer",
"description": "Step by step guide to becoming an Android developer",
"featuredTitle": "Android",
"featuredDescription": "Step by step guide to becoming an Android Developer in 2021",
"isTextHeavy": true,
"isCommunity": true,
"featured": true,
"contentPath": "/roadmaps/6-react/landscape.md",
"resourcesPath": "/roadmaps/6-react/resources.md",
"contentPath": "/roadmaps/6-android/landscape.md",
"resourcesPath": "/roadmaps/6-android/resources.md",
"versions": [
"latest",
"2018",
@ -231,7 +237,7 @@
"name": "Kamran Ahmed",
"url": "https://twitter.com/kamranahmedse"
},
"url": "/react"
"url": "/android"
},
{
"seo": {
@ -254,6 +260,7 @@
},
"title": "QA Engineer",
"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",
"upcoming": true,
"contentPath": "/roadmaps/7-qa/landscape.md",
@ -264,4 +271,4 @@
},
"url": "/qa"
}
]
]

3
content/roadmaps/1-frontend/meta.json
View File

@ -28,7 +28,8 @@
},
"title": "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": {
"name": "Kamran Ahmed",
"url": "https://twitter.com/kamranahmedse"

3
content/roadmaps/2-backend/meta.json
View File

@ -28,7 +28,8 @@
},
"title": "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,
"imagePath": "/roadmaps/backend.png",
"resourcesPath": "./resources.md",

3
content/roadmaps/3-devops/meta.json
View File

@ -22,7 +22,8 @@
},
"title": "DevOps Roadmap",
"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,
"imagePath": "/roadmaps/devops.png",
"resourcesPath": "./resources.md",

0
content/roadmaps/6-react/landscape.md → content/roadmaps/4-react/landscape.md
View File

5
content/roadmaps/6-react/meta.json → content/roadmaps/4-react/meta.json
View File

@ -18,9 +18,10 @@
},
"title": "React Developer",
"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,
"communityResource": false,
"isCommunity": false,
"featured": true,
"contentPath": "./landscape.md",
"resourcesPath": "./resources.md",

0
content/roadmaps/4-android/resources.md → content/roadmaps/4-react/resources.md
View File

7
content/roadmaps/5-postgresql-dba/meta.json
View File

@ -25,16 +25,17 @@
},
"title": "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",
"resourcesPath": "./resources.md",
"author": {
"name": "Alexey Lesovsky",
"url": "https://github.com/lesovsky"
},
"communityResource": true,
"isCommunity": true,
"isTextHeavy": true,
"featured": false,
"featured": true,
"detailed": false,
"versions": []
}

0
content/roadmaps/4-android/landscape.md → content/roadmaps/6-android/landscape.md
View File

5
content/roadmaps/4-android/meta.json → content/roadmaps/6-android/meta.json
View File

@ -18,9 +18,10 @@
},
"title": "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,
"communityResource": true,
"isCommunity": true,
"featured": true,
"contentPath": "./landscape.md",
"resourcesPath": "./resources.md",

0
content/roadmaps/6-react/resources.md → content/roadmaps/6-android/resources.md
View File

1
content/roadmaps/7-qa/meta.json
View File

@ -19,6 +19,7 @@
},
"title": "QA Engineer",
"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",
"upcoming": true,
"contentPath": "./landscape.md",

39
content/site.json Normal file
View File

@ -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"
]
}

36
lib/gtag.ts Normal file
View File

@ -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
}
);
};

41
lib/roadmap.ts Normal file
View File

@ -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);
}

27
lib/url.ts Normal file
View File

@ -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)}`;
};

38
pages/index.tsx
View File

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