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",
"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",

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

@ -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",

@ -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",

@ -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",

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

@ -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",

@ -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",

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

Loading…
Cancel
Save