From caf57721a9d5efcfd8cd7063c906f3f96122f210 Mon Sep 17 00:00:00 2001 From: Kamran Ahmed Date: Sun, 5 Sep 2021 22:52:18 +0200 Subject: [PATCH] Add resources page --- .../md-renderer/mdx-components/badge-link.tsx | 15 +-- content/roadmaps/1-frontend/resources.md | 28 ++-- pages/{[roadmap].tsx => [roadmap]/index.tsx} | 20 +-- pages/[roadmap]/resources.tsx | 121 ++++++++++++++++++ 4 files changed, 152 insertions(+), 32 deletions(-) rename pages/{[roadmap].tsx => [roadmap]/index.tsx} (84%) create mode 100644 pages/[roadmap]/resources.tsx diff --git a/components/md-renderer/mdx-components/badge-link.tsx b/components/md-renderer/mdx-components/badge-link.tsx index d6e287f9f..17daa8211 100644 --- a/components/md-renderer/mdx-components/badge-link.tsx +++ b/components/md-renderer/mdx-components/badge-link.tsx @@ -1,22 +1,21 @@ import React from 'react'; +import { Link, Text, Badge } from '@chakra-ui/react'; type BadgeLinkType = { target: string; - variant: string; badgeText: string; href: string; children: React.ReactNode }; export function BadgeLink(props: BadgeLinkType) { - const { target = '_blank', variant = 'success', badgeText, href, children } = props; + const { target = '_blank', badgeText, href, children } = props; return ( -

- - {badgeText} {children} - -

+ + + {badgeText} {children} + + ); } diff --git a/content/roadmaps/1-frontend/resources.md b/content/roadmaps/1-frontend/resources.md index c60e71242..9ce0003bb 100644 --- a/content/roadmaps/1-frontend/resources.md +++ b/content/roadmaps/1-frontend/resources.md @@ -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. * What is Internet? -* How the internet works in 5 minutes +* How the internet works in 5 minutes * What is HTTP and how it evolved? * HTTP/3: the past, the present, and the future * What Is HTTP/3 – Lowdown on the Fast New UDP-Based Protocol * How Browsers Work: Behind the scenes of modern web browsers -* DNS as Fast As Possible +* DNS as Fast As Possible * How DNS works? * DNS in One Picture @@ -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. -* HTML Crash Course For Absolute Beginners +* HTML Crash Course For Absolute Beginners * W3Schools – HTML Tutorial -* HTML Full Course - Build a Website Tutorial +* HTML Full Course - Build a Website Tutorial * A few HTML tips * Six tips to set up a better HTML document * HTML Semantic Elements @@ -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. * W3Schools – CSS Tutorial -* CSS Crash Course For Absolute Beginners -* Build An HTML5 Website With A Responsive Layout -* Flexbox CSS In 20 Minutes +* CSS Crash Course For Absolute Beginners +* Build An HTML5 Website With A Responsive Layout +* Flexbox CSS In 20 Minutes ## 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. * W3Schools – JavaScript Tutorial -* JavaScript Crash Course for Beginners -* Build a Netflix Landing Page Clone with HTML, CSS & JS +* JavaScript Crash Course for Beginners +* Build a Netflix Landing Page Clone with HTML, CSS & JS ## 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. -* Version Control System Introduction -* Git & GitHub Crash Course For Beginners -* Learn Git in 20 Minutes +* Version Control System Introduction +* Git & GitHub Crash Course For Beginners +* Learn Git in 20 Minutes 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". * Modern JavaScript for Dinosaurs (Don't worry if you don't understand some parts of it) -* What is NPM and how to use it -* NPM Crash Course +* What is NPM and how to use it +* NPM Crash Course

diff --git a/pages/[roadmap].tsx b/pages/[roadmap]/index.tsx similarity index 84% rename from pages/[roadmap].tsx rename to pages/[roadmap]/index.tsx index 098cf5ac1..2d6f0ff2f 100644 --- a/pages/[roadmap].tsx +++ b/pages/[roadmap]/index.tsx @@ -1,13 +1,13 @@ import { Box, Button, Container, Link, Stack } from '@chakra-ui/react'; -import { ArrowBackIcon, ArrowLeftIcon, AtSignIcon, DownloadIcon, EmailIcon } 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'; +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; @@ -36,7 +36,7 @@ function TextualRoadmap(props: RoadmapProps) { // Remove trailing slashes const normalizedPath = roadmap.contentPath.replace(/^\//, ''); - const RoadmapContent = require(`../content/${normalizedPath}`).default; + const RoadmapContent = require(`../../content/${normalizedPath}`).default; return ( diff --git a/pages/[roadmap]/resources.tsx b/pages/[roadmap]/resources.tsx new file mode 100644 index 000000000..ea1b30e7e --- /dev/null +++ b/pages/[roadmap]/resources.tsx @@ -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 ( + + + + + + ); +} + +export default function Roadmap(props: RoadmapProps) { + const { roadmap } = props; + + return ( + + + + + + + + + {roadmap.pdfUrl && ( + + )} + + + + + + + + + +