From 964a87f6050db248620390487b5c0ec0533b1903 Mon Sep 17 00:00:00 2001 From: Kamran Ahmed Date: Sun, 29 Aug 2021 16:05:19 +0200 Subject: [PATCH] Render roadmaps on homepage --- content/roadmaps.json | 105 ++++++++++-------- content/roadmaps/1-frontend/meta.json | 3 +- content/roadmaps/2-backend/meta.json | 3 +- content/roadmaps/3-devops/meta.json | 3 +- .../{6-react => 4-react}/landscape.md | 0 .../roadmaps/{6-react => 4-react}/meta.json | 5 +- .../{4-android => 4-react}/resources.md | 0 content/roadmaps/5-postgresql-dba/meta.json | 7 +- .../{4-android => 6-android}/landscape.md | 0 .../{4-android => 6-android}/meta.json | 5 +- .../{6-react => 6-android}/resources.md | 0 content/roadmaps/7-qa/meta.json | 1 + content/site.json | 39 +++++++ lib/gtag.ts | 36 ++++++ lib/roadmap.ts | 41 +++++++ lib/url.ts | 27 +++++ pages/index.tsx | 38 ++++--- 17 files changed, 241 insertions(+), 72 deletions(-) rename content/roadmaps/{6-react => 4-react}/landscape.md (100%) rename content/roadmaps/{6-react => 4-react}/meta.json (88%) rename content/roadmaps/{4-android => 4-react}/resources.md (100%) rename content/roadmaps/{4-android => 6-android}/landscape.md (100%) rename content/roadmaps/{4-android => 6-android}/meta.json (88%) rename content/roadmaps/{6-react => 6-android}/resources.md (100%) create mode 100644 content/site.json create mode 100644 lib/gtag.ts create mode 100644 lib/roadmap.ts create mode 100644 lib/url.ts diff --git a/content/roadmaps.json b/content/roadmaps.json index 7f0d51255..071587d9c 100644 --- a/content/roadmaps.json +++ b/content/roadmaps.json @@ -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" } -] \ No newline at end of file +] diff --git a/content/roadmaps/1-frontend/meta.json b/content/roadmaps/1-frontend/meta.json index c38fdc7d8..58228239d 100644 --- a/content/roadmaps/1-frontend/meta.json +++ b/content/roadmaps/1-frontend/meta.json @@ -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" diff --git a/content/roadmaps/2-backend/meta.json b/content/roadmaps/2-backend/meta.json index e354e13f1..09f6a7a75 100644 --- a/content/roadmaps/2-backend/meta.json +++ b/content/roadmaps/2-backend/meta.json @@ -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", diff --git a/content/roadmaps/3-devops/meta.json b/content/roadmaps/3-devops/meta.json index 6eef63eb9..5b6b1056c 100644 --- a/content/roadmaps/3-devops/meta.json +++ b/content/roadmaps/3-devops/meta.json @@ -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", diff --git a/content/roadmaps/6-react/landscape.md b/content/roadmaps/4-react/landscape.md similarity index 100% rename from content/roadmaps/6-react/landscape.md rename to content/roadmaps/4-react/landscape.md diff --git a/content/roadmaps/6-react/meta.json b/content/roadmaps/4-react/meta.json similarity index 88% rename from content/roadmaps/6-react/meta.json rename to content/roadmaps/4-react/meta.json index ba75837f6..be3888b13 100644 --- a/content/roadmaps/6-react/meta.json +++ b/content/roadmaps/4-react/meta.json @@ -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", diff --git a/content/roadmaps/4-android/resources.md b/content/roadmaps/4-react/resources.md similarity index 100% rename from content/roadmaps/4-android/resources.md rename to content/roadmaps/4-react/resources.md diff --git a/content/roadmaps/5-postgresql-dba/meta.json b/content/roadmaps/5-postgresql-dba/meta.json index ac1d420e5..26a53dceb 100644 --- a/content/roadmaps/5-postgresql-dba/meta.json +++ b/content/roadmaps/5-postgresql-dba/meta.json @@ -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": [] } diff --git a/content/roadmaps/4-android/landscape.md b/content/roadmaps/6-android/landscape.md similarity index 100% rename from content/roadmaps/4-android/landscape.md rename to content/roadmaps/6-android/landscape.md diff --git a/content/roadmaps/4-android/meta.json b/content/roadmaps/6-android/meta.json similarity index 88% rename from content/roadmaps/4-android/meta.json rename to content/roadmaps/6-android/meta.json index 752e4f8a2..023551add 100644 --- a/content/roadmaps/4-android/meta.json +++ b/content/roadmaps/6-android/meta.json @@ -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", diff --git a/content/roadmaps/6-react/resources.md b/content/roadmaps/6-android/resources.md similarity index 100% rename from content/roadmaps/6-react/resources.md rename to content/roadmaps/6-android/resources.md diff --git a/content/roadmaps/7-qa/meta.json b/content/roadmaps/7-qa/meta.json index d98b1ea2c..5d35c136e 100644 --- a/content/roadmaps/7-qa/meta.json +++ b/content/roadmaps/7-qa/meta.json @@ -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", diff --git a/content/site.json b/content/site.json new file mode 100644 index 000000000..608401796 --- /dev/null +++ b/content/site.json @@ -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" + ] +} diff --git a/lib/gtag.ts b/lib/gtag.ts new file mode 100644 index 000000000..7ede8d9ef --- /dev/null +++ b/lib/gtag.ts @@ -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 + } + ); +}; diff --git a/lib/roadmap.ts b/lib/roadmap.ts new file mode 100644 index 000000000..c829a3e07 --- /dev/null +++ b/lib/roadmap.ts @@ -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); +} diff --git a/lib/url.ts b/lib/url.ts new file mode 100644 index 000000000..b51909264 --- /dev/null +++ b/lib/url.ts @@ -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)}`; +}; diff --git a/pages/index.tsx b/pages/index.tsx index 86e8933e9..d44163ec1 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -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 ( @@ -28,18 +35,15 @@ export default function Home() { channel which we hope you are going to love. - - - - - - + {roadmaps.map((roadmap: RoadmapType, counter: number) => ( + + ))} @@ -110,3 +114,11 @@ export default function Home() { ); } + +export async function getStaticProps() { + return { + props: { + roadmaps: getFeaturedRoadmaps() + } + }; +}