Add resources page

pull/1657/head
Kamran Ahmed 3 years ago
parent 3efcae985b
commit caf57721a9
  1. 15
      components/md-renderer/mdx-components/badge-link.tsx
  2. 28
      content/roadmaps/1-frontend/resources.md
  3. 20
      pages/[roadmap]/index.tsx
  4. 121
      pages/[roadmap]/resources.tsx

@ -1,22 +1,21 @@
import React from 'react'; import React from 'react';
import { Link, Text, Badge } from '@chakra-ui/react';
type BadgeLinkType = { type BadgeLinkType = {
target: string; target: string;
variant: string;
badgeText: string; badgeText: string;
href: string; href: string;
children: React.ReactNode children: React.ReactNode
}; };
export function BadgeLink(props: BadgeLinkType) { export function BadgeLink(props: BadgeLinkType) {
const { target = '_blank', variant = 'success', badgeText, href, children } = props; const { target = '_blank', badgeText, href, children } = props;
return ( return (
<p className='mb-0'> <Text mb={0}>
<a href={href} target={target}> <Link fontWeight={500} textDecoration='underline' href={href} target={target}>
<span style={{ position: 'relative', top: '-2px' }} <Badge colorScheme={'purple'} style={{ position: 'relative', top: '-2px' }}>{badgeText}</Badge> {children}
className={`badge badge-${variant}`}>{badgeText}</span> {children} </Link>
</a> </Text>
</p>
); );
} }

@ -10,12 +10,12 @@ Before I go ahead and list down the resources, please know that the roadmap and
Get the basic understanding of internet, browsers, networks and other relevant knowledge. Get the basic understanding of internet, browsers, networks and other relevant knowledge.
* <BadgeLink badgeText='Read' href='/guides/what-is-internet'>What is Internet?</BadgeLink> * <BadgeLink badgeText='Read' href='/guides/what-is-internet'>What is Internet?</BadgeLink>
* <BadgeLink variant='primary' badgeText='Watch' href='https://www.youtube.com/watch?v=7_LPdttKXPc'>How the internet works in 5 minutes</BadgeLink> * <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=7_LPdttKXPc'>How the internet works in 5 minutes</BadgeLink>
* <BadgeLink badgeText='Read' href='https://kamranahmed.info/blog/2016/08/13/http-in-depth/'>What is HTTP and how it evolved?</BadgeLink> * <BadgeLink badgeText='Read' href='https://kamranahmed.info/blog/2016/08/13/http-in-depth/'>What is HTTP and how it evolved?</BadgeLink>
* <BadgeLink badgeText='Read' href='https://blog.cloudflare.com/http3-the-past-present-and-future/'>HTTP/3: the past, the present, and the future</BadgeLink> * <BadgeLink badgeText='Read' href='https://blog.cloudflare.com/http3-the-past-present-and-future/'>HTTP/3: the past, the present, and the future</BadgeLink>
* <BadgeLink badgeText='Read' href='https://kinsta.com/blog/http3/'>What Is HTTP/3 – Lowdown on the Fast New UDP-Based Protocol</BadgeLink> * <BadgeLink badgeText='Read' href='https://kinsta.com/blog/http3/'>What Is HTTP/3 – Lowdown on the Fast New UDP-Based Protocol</BadgeLink>
* <BadgeLink badgeText='Read' href='https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/'>How Browsers Work: Behind the scenes of modern web browsers</BadgeLink> * <BadgeLink badgeText='Read' href='https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/'>How Browsers Work: Behind the scenes of modern web browsers</BadgeLink>
* <BadgeLink variant='primary' badgeText='Watch' href='https://www.youtube.com/watch?v=Rck3BALhI5c'>DNS as Fast As Possible</BadgeLink> * <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=Rck3BALhI5c'>DNS as Fast As Possible</BadgeLink>
* <BadgeLink badgeText='Read' href='https://howdns.works/'>How DNS works?</BadgeLink> * <BadgeLink badgeText='Read' href='https://howdns.works/'>How DNS works?</BadgeLink>
* <BadgeLink badgeText='Read' href='/guides/dns-in-one-picture'>DNS in One Picture</BadgeLink> * <BadgeLink badgeText='Read' href='/guides/dns-in-one-picture'>DNS in One Picture</BadgeLink>
@ -25,9 +25,9 @@ HTML provides the skeleton of a webpage. Learn the basics of HTML; learn the bas
Please know that I have put multiple links for each resource. While you may pick something new while going through each, you don't need to go through all of them - if you feel like you have understood the concepts and are just repeating what you learnt, you may skip the resource and move to exercises section. Please know that I have put multiple links for each resource. While you may pick something new while going through each, you don't need to go through all of them - if you feel like you have understood the concepts and are just repeating what you learnt, you may skip the resource and move to exercises section.
* <BadgeLink variant='primary' badgeText='Watch' href='https://www.youtube.com/watch?v=UB1O30fR-EE'>HTML Crash Course For Absolute Beginners</BadgeLink> * <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=UB1O30fR-EE'>HTML Crash Course For Absolute Beginners</BadgeLink>
* <BadgeLink badgeText='Read' href='https://www.w3schools.com/html/default.asp'>W3Schools – HTML Tutorial</BadgeLink> * <BadgeLink badgeText='Read' href='https://www.w3schools.com/html/default.asp'>W3Schools – HTML Tutorial</BadgeLink>
* <BadgeLink variant='primary' badgeText='Watch' href='https://www.youtube.com/watch?v=pQN-pnXPaVg'>HTML Full Course - Build a Website Tutorial</BadgeLink> * <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=pQN-pnXPaVg'>HTML Full Course - Build a Website Tutorial</BadgeLink>
* <BadgeLink badgeText='Read' href='https://hacks.mozilla.org/2016/08/a-few-html-tips/'>A few HTML tips</BadgeLink> * <BadgeLink badgeText='Read' href='https://hacks.mozilla.org/2016/08/a-few-html-tips/'>A few HTML tips</BadgeLink>
* <BadgeLink badgeText='Read' href='https://hackernoon.com/six-tips-to-set-up-a-better-html-document-ud1033z3z'>Six tips to set up a better HTML document</BadgeLink> * <BadgeLink badgeText='Read' href='https://hackernoon.com/six-tips-to-set-up-a-better-html-document-ud1033z3z'>Six tips to set up a better HTML document</BadgeLink>
* <BadgeLink badgeText='Read' href='https://www.w3schools.com/html/html5_semantic_elements.asp'>HTML Semantic Elements</BadgeLink> * <BadgeLink badgeText='Read' href='https://www.w3schools.com/html/html5_semantic_elements.asp'>HTML Semantic Elements</BadgeLink>
@ -37,16 +37,16 @@ Please know that I have put multiple links for each resource. While you may pick
With the help of HTML, you create structure for your pages. CSS allows you to style your pages and make them pretty. If you take the analogy of human body, the skeleton would be the HTML, skin would be the CSS and muscles that help us move would be JavaScript - we will learn more about JavaScript in the coming sections. With the help of HTML, you create structure for your pages. CSS allows you to style your pages and make them pretty. If you take the analogy of human body, the skeleton would be the HTML, skin would be the CSS and muscles that help us move would be JavaScript - we will learn more about JavaScript in the coming sections.
* <BadgeLink badgeText='Read' href='https://www.w3schools.com/css/'>W3Schools – CSS Tutorial</BadgeLink> * <BadgeLink badgeText='Read' href='https://www.w3schools.com/css/'>W3Schools – CSS Tutorial</BadgeLink>
* <BadgeLink variant='primary' badgeText='Watch' href='https://www.youtube.com/watch?v=yfoY53QXEnI'>CSS Crash Course For Absolute Beginners</BadgeLink> * <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=yfoY53QXEnI'>CSS Crash Course For Absolute Beginners</BadgeLink>
* <BadgeLink variant='primary' badgeText='Watch' href='https://www.youtube.com/watch?v=Wm6CUkswsNw'>Build An HTML5 Website With A Responsive Layout</BadgeLink> * <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=Wm6CUkswsNw'>Build An HTML5 Website With A Responsive Layout</BadgeLink>
* <BadgeLink variant='primary' badgeText='Watch' href='https://youtu.be/JJSoEo8JSnc?t=46'>Flexbox CSS In 20 Minutes</BadgeLink> * <BadgeLink badgeText='Watch' href='https://youtu.be/JJSoEo8JSnc?t=46'>Flexbox CSS In 20 Minutes</BadgeLink>
## Basics of JavaScript ## Basics of JavaScript
JavaScript allows you to add interactivity to your pages. Common examples that you may have seen on the websites are sliders, click interactions, popups and so on. In this section, you will learn the basics of JavaScript. JavaScript allows you to add interactivity to your pages. Common examples that you may have seen on the websites are sliders, click interactions, popups and so on. In this section, you will learn the basics of JavaScript.
* <BadgeLink badgeText='Read' href='https://www.w3schools.com/js/'>W3Schools – JavaScript Tutorial</BadgeLink> * <BadgeLink badgeText='Read' href='https://www.w3schools.com/js/'>W3Schools – JavaScript Tutorial</BadgeLink>
* <BadgeLink variant='primary' badgeText='Watch' href='https://youtu.be/hdI2bqOjy3c?t=2'>JavaScript Crash Course for Beginners</BadgeLink> * <BadgeLink badgeText='Watch' href='https://youtu.be/hdI2bqOjy3c?t=2'>JavaScript Crash Course for Beginners</BadgeLink>
* <BadgeLink variant='primary' badgeText='Watch' href='https://youtu.be/P7t13SGytRk?t=22'>Build a Netflix Landing Page Clone with HTML, CSS & JS</BadgeLink> * <BadgeLink badgeText='Watch' href='https://youtu.be/P7t13SGytRk?t=22'>Build a Netflix Landing Page Clone with HTML, CSS & JS</BadgeLink>
## Version Control Systems and Git ## Version Control Systems and Git
@ -54,9 +54,9 @@ Version control systems allow you to track changes to your codebase/files over t
In this section, you will learn what version control systems are and understand how to use Git which is the de facto VCS. In this section, you will learn what version control systems are and understand how to use Git which is the de facto VCS.
* <BadgeLink variant='primary' badgeText='Watch' href='https://www.youtube.com/watch?v=zbKdDsNNOhg'>Version Control System Introduction</BadgeLink> * <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=zbKdDsNNOhg'>Version Control System Introduction</BadgeLink>
* <BadgeLink variant='primary' badgeText='Watch' href='https://www.youtube.com/watch?v=SWYqp7iY_Tc'>Git & GitHub Crash Course For Beginners</BadgeLink> * <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=SWYqp7iY_Tc'>Git & GitHub Crash Course For Beginners</BadgeLink>
* <BadgeLink variant='primary' badgeText='Watch' href='https://youtu.be/Y9XZQO1n_7c?t=21'>Learn Git in 20 Minutes</BadgeLink> * <BadgeLink badgeText='Watch' href='https://youtu.be/Y9XZQO1n_7c?t=21'>Learn Git in 20 Minutes</BadgeLink>
Now that you know what git is go ahead and create an account on [GitHub](https://github.com) and push everything that you do from now on to GitHub so that you can get the practice and get it reviewed from the other people in the community. Now that you know what git is go ahead and create an account on [GitHub](https://github.com) and push everything that you do from now on to GitHub so that you can get the practice and get it reviewed from the other people in the community.
@ -65,8 +65,8 @@ Now that you know what git is go ahead and create an account on [GitHub](https:/
In this section you will learn how to use package managers and get started with the "modern JavaScript". In this section you will learn how to use package managers and get started with the "modern JavaScript".
* <BadgeLink badgeText='Read' href='https://medium.com/the-node-js-collection/modern-javascript-explained-for-dinosaurs-f695e9747b70'>Modern JavaScript for Dinosaurs (Don't worry if you don't understand some parts of it)</BadgeLink> * <BadgeLink badgeText='Read' href='https://medium.com/the-node-js-collection/modern-javascript-explained-for-dinosaurs-f695e9747b70'>Modern JavaScript for Dinosaurs (Don't worry if you don't understand some parts of it)</BadgeLink>
* <BadgeLink variant='primary' badgeText='Watch' href='https://www.youtube.com/watch?v=8Rmj5UY5mJk'>What is NPM and how to use it</BadgeLink> * <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=8Rmj5UY5mJk'>What is NPM and how to use it</BadgeLink>
* <BadgeLink variant='primary' badgeText='Watch' href='https://www.youtube.com/watch?v=jHDhaSSKmB0'>NPM Crash Course</BadgeLink> * <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=jHDhaSSKmB0'>NPM Crash Course</BadgeLink>
<br /> <br />
<br /> <br />

@ -1,13 +1,13 @@
import { Box, Button, Container, Link, Stack } from '@chakra-ui/react'; import { Box, Button, Container, Link, Stack } from '@chakra-ui/react';
import { ArrowBackIcon, ArrowLeftIcon, AtSignIcon, DownloadIcon, EmailIcon } from '@chakra-ui/icons'; import { ArrowBackIcon, AtSignIcon, DownloadIcon } from '@chakra-ui/icons';
import { GlobalHeader } from '../components/global-header'; import { GlobalHeader } from '../../components/global-header';
import { OpensourceBanner } from '../components/opensource-banner'; import { OpensourceBanner } from '../../components/opensource-banner';
import { UpdatesBanner } from '../components/updates-banner'; import { UpdatesBanner } from '../../components/updates-banner';
import { Footer } from '../components/footer'; import { Footer } from '../../components/footer';
import { PageHeader } from '../components/page-header'; import { PageHeader } from '../../components/page-header';
import { getAllRoadmaps, getRoadmapById, RoadmapType } from '../lib/roadmap'; import { getAllRoadmaps, getRoadmapById, RoadmapType } from '../../lib/roadmap';
import MdRenderer from '../components/md-renderer'; import MdRenderer from '../../components/md-renderer';
import Helmet from '../components/helmet'; import Helmet from '../../components/helmet';
type RoadmapProps = { type RoadmapProps = {
roadmap: RoadmapType; roadmap: RoadmapType;
@ -36,7 +36,7 @@ function TextualRoadmap(props: RoadmapProps) {
// Remove trailing slashes // Remove trailing slashes
const normalizedPath = roadmap.contentPath.replace(/^\//, ''); const normalizedPath = roadmap.contentPath.replace(/^\//, '');
const RoadmapContent = require(`../content/${normalizedPath}`).default; const RoadmapContent = require(`../../content/${normalizedPath}`).default;
return ( return (
<Container maxW={'container.md'} position='relative'> <Container maxW={'container.md'} position='relative'>

@ -0,0 +1,121 @@
import { Box, Button, Container, Link, Stack } from '@chakra-ui/react';
import { ArrowBackIcon, AtSignIcon, DownloadIcon } from '@chakra-ui/icons';
import { GlobalHeader } from '../../components/global-header';
import { OpensourceBanner } from '../../components/opensource-banner';
import { UpdatesBanner } from '../../components/updates-banner';
import { Footer } from '../../components/footer';
import { PageHeader } from '../../components/page-header';
import { getAllRoadmaps, getRoadmapById, RoadmapType } from '../../lib/roadmap';
import MdRenderer from '../../components/md-renderer';
import Helmet from '../../components/helmet';
type RoadmapProps = {
roadmap: RoadmapType;
};
function TextualRoadmap(props: RoadmapProps) {
const { roadmap } = props;
if (!roadmap.resourcesPath) {
return null;
}
// Remove trailing slashes
const normalizedPath = roadmap.resourcesPath.replace(/^\//, '');
const RoadmapContent = require(`../../content/${normalizedPath}`).default;
return (
<Container maxW={'container.md'} position='relative'>
<MdRenderer>
<RoadmapContent />
</MdRenderer>
</Container>
);
}
export default function Roadmap(props: RoadmapProps) {
const { roadmap } = props;
return (
<Box bg='white' minH='100vh'>
<GlobalHeader />
<Helmet
title={roadmap?.seo?.title || roadmap.title}
description={roadmap?.seo?.description || roadmap.description}
keywords={roadmap?.seo.keywords || []}
/>
<Box mb='60px'>
<PageHeader
title={roadmap.title}
subtitle={roadmap.description}
>
<Stack mt='20px' isInline>
<Button d={['none', 'flex']} as={Link} href={'/roadmaps'} size='xs' py='14px' px='10px'
leftIcon={<ArrowBackIcon />}
colorScheme='teal' variant='solid' _hover={{ textDecoration: 'none' }}>
All Roadmaps
</Button>
{roadmap.pdfUrl && (
<Button as={Link}
href={roadmap.pdfUrl}
target='_blank'
size='xs'
py='14px'
px='10px'
leftIcon={<DownloadIcon />}
colorScheme='yellow'
variant='solid'
_hover={{ textDecoration: 'none' }}>
Download PDF
</Button>
)}
<Button as={Link} href={'/signup'} size='xs' py='14px' px='10px' leftIcon={<AtSignIcon />}
colorScheme='yellow' variant='solid' _hover={{ textDecoration: 'none' }}>
Subscribe
</Button>
</Stack>
</PageHeader>
<TextualRoadmap roadmap={roadmap} />
</Box>
<OpensourceBanner />
<UpdatesBanner />
<Footer />
</Box>
);
}
type StaticPathItem = {
params: {
roadmap: string
}
};
export async function getStaticPaths() {
const roadmaps = getAllRoadmaps();
const paramsList: StaticPathItem[] = roadmaps.map(roadmap => ({
params: { 'roadmap': roadmap.id }
}));
return {
paths: paramsList,
fallback: false
};
}
type ContextType = {
params: {
roadmap: string
}
};
export async function getStaticProps(context: ContextType) {
const roadmapId: string = context?.params?.roadmap;
return {
props: {
roadmap: getRoadmapById(roadmapId)
}
};
}
Loading…
Cancel
Save