Add helmet to thanks page

* Fixing missing 'mailto:'

* Fixing broken link in Terms

.github/workflows/deploy.yml

@@ -14,15 +14,14 @@ jobs:
     - uses: actions/checkout@v2
     - uses: actions/setup-node@v1
       with:
-        node-version: 12
+        node-version: 14
     - name: Setup Environment
       run: |
-        npm install -g yarn
-        yarn install
+        npm install
     - name: Generate meta and builld
       run: |
-        yarn meta
-        yarn build
+        npm run meta
+        npm run build
     - name: Deploy to GitHub Pages
       run: |
         git config user.email "kamranahmed.se@gmail.com"

components/dimmed-more.tsx

@@ -17,7 +17,7 @@ export function DimmedMore(props: DimmedMoreProps) {
         bottom={0}
         height='200px'
         width='100%'
-        background='linear-gradient(180deg, transparent, white)'
+        background='linear-gradient(180deg, rgb(255 255 255 / 40%), white)'
       />
 
       <Link

components/global-header.tsx

@@ -1,6 +1,7 @@
-import { Box, CloseButton, Container, Flex, IconButton, Image, Link, Stack, Text } from '@chakra-ui/react';
-import { HamburgerIcon } from '@chakra-ui/icons';
 import { useState } from 'react';
+import { HamburgerIcon } from '@chakra-ui/icons';
+import { Box, CloseButton, Container, Flex, IconButton, Image, Link, Stack, Text } from '@chakra-ui/react';
+import RoadmapLogo from '../components/icons/roadmap.svg';
 import siteConfig from '../content/site.json';
 
 type MenuLinkProps = {
@@ -29,6 +30,7 @@ function DesktopMenuLinks() {
       <MenuLink text={'Roadmaps'} link={'/roadmaps'} />
       <MenuLink text={'Guides'} link={'/guides'} />
       <MenuLink text={'Videos'} link={'/watch'} />
+      <MenuLink text={'Thanks'} link={'/thanks'} />
 
       <Link ml='10px' bgGradient='linear(to-l, yellow.700, red.600)' p='7px 10px' rounded='4px'
             _hover={{ textDecoration: 'none', bgGradient: 'linear(to-l, red.800, yellow.700)' }}
@@ -75,9 +77,9 @@ function MobileMenuLinks() {
           <Link href='/roadmaps'>Roadmaps</Link>
           <Link href='/guides'>Guides</Link>
           <Link href='/watch'>Videos</Link>
-          <Link target='_blank' href={siteConfig.url.youtube}>YouTube</Link>
+          <Link href='/thanks'>Thanks</Link>
           <Link href='/signup'>Subscribe</Link>
-          <CloseButton onClick={() => setIsOpen(false)} pos='fixed' top='3px' right='15px' size='lg' />
+          <CloseButton onClick={() => setIsOpen(false)} pos='fixed' top='40px' right='15px' size='lg' />
         </Stack>
       )}
     </>
@@ -86,7 +88,7 @@ function MobileMenuLinks() {
 
 export function GlobalHeader() {
   return (
-    <Box bg='gray.900' p='20px 0'>
+    <Box bg='gray.900' p='58px 0 20px'>
       <Container maxW='container.md'>
         <Flex justifyContent='space-between' alignItems='center'>
           <Box>
@@ -98,7 +100,7 @@ export function GlobalHeader() {
                   fontWeight={600}
                   _hover={{ textDecoration: 'none' }}
                   fontSize='18px'>
-              <Image alt='' h='30px' w='30px' src='/logo.svg' mr='10px' />
+              <RoadmapLogo style={{ height: '30px', width: '30px', marginRight: '10px' }} />
               <Text d={['block', 'none', 'block']} as='span'>roadmap.sh</Text>
             </Link>
           </Box>

components/icons/roadmap.svg

@@ -0,0 +1,4 @@
+<svg width="30" height="30" viewBox="0 0 283 283" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0 39C0 17.4609 17.4609 0 39 0H244C265.539 0 283 17.4609 283 39V244C283 265.539 265.539 283 244 283H39C17.4609 283 0 265.539 0 244V39Z" fill="black"></path>
+    <path d="M121.215 210.72C119.348 211.28 116.361 211.84 112.255 212.4C108.335 212.96 104.228 213.24 99.9347 213.24C95.828 213.24 92.0947 212.96 88.7347 212.4C85.5614 211.84 82.8547 210.72 80.6147 209.04C78.3747 207.36 76.6014 205.12 75.2947 202.32C74.1747 199.333 73.6147 195.507 73.6147 190.84V106.84C73.6147 102.547 74.3614 98.9067 75.8547 95.92C77.5347 92.7467 79.868 89.9467 82.8547 87.52C85.8414 85.0933 89.4814 82.9467 93.7747 81.08C98.2547 79.0267 103.015 77.2533 108.055 75.76C113.095 74.2667 118.321 73.1467 123.735 72.4C129.148 71.4667 134.561 71 139.975 71C148.935 71 156.028 72.7733 161.255 76.32C166.481 79.68 169.095 85.28 169.095 93.12C169.095 95.7333 168.721 98.3467 167.975 100.96C167.228 103.387 166.295 105.627 165.175 107.68C161.255 107.68 157.241 107.867 153.135 108.24C149.028 108.613 145.015 109.173 141.095 109.92C137.175 110.667 133.441 111.507 129.895 112.44C126.535 113.187 123.641 114.12 121.215 115.24V210.72ZM166.387 188.32C166.387 180.48 168.813 173.947 173.667 168.72C178.52 163.493 185.147 160.88 193.547 160.88C201.947 160.88 208.573 163.493 213.427 168.72C218.28 173.947 220.707 180.48 220.707 188.32C220.707 196.16 218.28 202.693 213.427 207.92C208.573 213.147 201.947 215.76 193.547 215.76C185.147 215.76 178.52 213.147 173.667 207.92C168.813 202.693 166.387 196.16 166.387 188.32Z" fill="white"></path>
+</svg>

components/icons/youtube.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill='currentColor'>
+    <path d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z"/>
+</svg>

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 (
-    <p className='mb-0'>
-      <a href={href} target={target}>
-        <span style={{ position: 'relative', top: '-2px' }}
-              className={`badge badge-${variant}`}>{badgeText}</span> {children}
-      </a>
-    </p>
+    <Text mb={0}>
+      <Link fontWeight={500} textDecoration='underline' href={href} target={target}>
+        <Badge colorScheme={'purple'} style={{ position: 'relative', top: '-2px' }}>{badgeText}</Badge> {children}
+      </Link>
+    </Text>
   );
 }

components/page-header.tsx

@@ -16,13 +16,13 @@ export function PageHeader(props: PageHeaderProps) {
         <Heading
           as='h1'
           color='black'
-          fontSize={['33px', '33px', '40px']}
+          fontSize={['28px', '33px', '40px']}
           fontWeight={700}
           mb={['2px', '2px', '5px']}
         >
           {title}
         </Heading>
-        <Text fontSize={['14px', '14px', '15px']}>{subtitle}</Text>
+        <Text fontSize={['13px', '14px', '15px']}>{subtitle}</Text>
       </Container>
 
       {children && (

components/sticky-banner.tsx

@@ -0,0 +1,31 @@
+import { Flex, Link, Text } from '@chakra-ui/react';
+import YouTubeLogo from '../components/icons/youtube.svg';
+import siteConfig from '../content/site.json';
+
+export function StickyBanner() {
+  return (
+    <Flex as={Link}
+          href={siteConfig.url.youtube}
+          bg={'yellow.300'}
+          color='gray.900'
+      // bg={'teal.900'}
+      // color='gray.300'
+          alignItems='center'
+          position='fixed'
+          left={0}
+          right={0}
+          zIndex={999}
+          justifyContent='center'
+          py='8px'
+          _hover={{ textDecoration: 'none', bg: 'yellow.400' }}
+      // _hover={{ textDecoration: 'none', bg: 'teal.800', color: 'gray.100' }}
+          target='_blank'
+    >
+      <YouTubeLogo style={{ height: '20px', display: 'inline-block', marginRight: '7px' }} />
+      <Text as='span' fontWeight={500} fontSize='14px'>
+        <Text as='span'>We now have a YouTube Channel. <Text as='span' d={['none', 'inline']}>Subscribe for the video
+          content.</Text></Text>
+      </Text>
+    </Flex>
+  );
+}

content/guides.json

@@ -1,4 +1,22 @@
 [
+  {
+    "id": "what-are-web-vitals",
+    "title": "What are Web Vitals?",
+    "description": "Learn what are the core web vitals and how to measure them.",
+    "isPro": false,
+    "authorUsername": "kamranahmedse",
+    "updatedAt": "2021-09-05T19:59:14.191Z",
+    "createdAt": "2021-09-05T19:59:14.191Z"
+  },
+  {
+    "id": "what-is-sli-slo-sla",
+    "title": "SLIs, SLOs and SLAs",
+    "description": "Learn what are different indicators for performance identification of any service.",
+    "isPro": false,
+    "authorUsername": "kamranahmedse",
+    "updatedAt": "2021-08-31T19:59:14.191Z",
+    "createdAt": "2021-08-31T19:59:14.191Z"
+  },
   {
     "id": "ci-cd",
     "title": "What is CI and CD?",

content/guides/what-are-web-vitals.md

@@ -0,0 +1,3 @@
+[![](/guides/web-vitals.png)](/guides/web-vitals.png)
+
+Here is the [original tweet](https://twitter.com/kamranahmedse/status/1425476526770987012) where this image was posted.

content/guides/what-is-sli-slo-sla.md

@@ -0,0 +1,3 @@
+[![](/guides/sli-slo-sla.jpeg)](/guides/sli-slo-sla.jpeg)
+
+Here is the [original tweet](https://twitter.com/kamranahmedse/status/1421778722865229824) where this image was posted.

content/roadmaps.json

@@ -4,6 +4,10 @@
       "title": "Learn to become a modern frontend developer",
       "description": "Community driven, articles, resources, guides, interview questions, quizzes for modern frontend development. Learn to become a modern frontend developer by following the steps, skills, resources and guides listed in this roadmap.",
       "keywords": [
+        "frontend roadmap",
+        "javascript roadmap",
+        "frontend roadmap 2021",
+        "javascript roadmap 2021",
         "guide to becoming a developer",
         "guide to becoming a frontend developer",
         "frontend developer",
@@ -281,4 +285,4 @@
     },
     "id": "qa"
   }
-]
+]

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. 
 
 * <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://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://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='/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.
  
 
-* <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 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://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> 
@@ -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.
 
 * <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 variant='primary' 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://www.youtube.com/watch?v=yfoY53QXEnI'>CSS Crash Course For Absolute Beginners</BadgeLink>
+* <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=Wm6CUkswsNw'>Build An HTML5 Website With A Responsive Layout</BadgeLink>
+* <BadgeLink badgeText='Watch' href='https://youtu.be/JJSoEo8JSnc?t=46'>Flexbox CSS In 20 Minutes</BadgeLink>
 
 ## 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 variant='primary' 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/hdI2bqOjy3c?t=2'>JavaScript Crash Course for Beginners</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
 
@@ -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.  
 
-* <BadgeLink variant='primary' 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 variant='primary' badgeText='Watch' href='https://youtu.be/Y9XZQO1n_7c?t=21'>Learn Git in 20 Minutes</BadgeLink>
+* <BadgeLink 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=SWYqp7iY_Tc'>Git & GitHub Crash Course For Beginners</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.
 
@@ -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".
 
 * <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 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=8Rmj5UY5mJk'>What is NPM and how to use it</BadgeLink>
+* <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=jHDhaSSKmB0'>NPM Crash Course</BadgeLink>
 
 <br />
 <br />

next.config.js

@@ -1,6 +1,31 @@
 const path = require('path');
+const fs = require('fs');
 const rehypePrism = require('@mapbox/rehype-prism');
 
+/**
+ * Loads the configuration for the given environment
+ * @param env
+ * @returns {*}
+ */
+const loadConfig = (env = 'dev') => {
+  const configPath = `./config/${env}.json`;
+  if (!fs.existsSync(configPath)) {
+    console.warn(`Config file not found: ${configPath}. Using environment variables only.`);
+  }
+
+  const appConfig = {};
+
+  for (let key in process.env) {
+    if (!key.startsWith('ROADMAP_')) {
+      continue;
+    }
+
+    appConfig[key.replace('ROADMAP_', '')] = process.env[key];
+  }
+
+  return appConfig;
+};
+
 const withMDX = require('@next/mdx')({
   extension: /\.(md|mdx)?$/,
   options: {
@@ -11,6 +36,7 @@ const withMDX = require('@next/mdx')({
 let nextConfig = {
   reactStrictMode: true,
   poweredByHeader: false,
+  env: loadConfig(process.env.NODE_ENV),
 
   webpack(config, options) {
     config.resolve.modules.push(path.resolve('./'));

pages/[roadmap]/index.tsx

@@ -1,13 +1,13 @@
-import { Box, Button, Container, Link, Stack } from '@chakra-ui/react';
-import { 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 { Box, Button,  Text, 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;
@@ -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 (
     <Container maxW={'container.md'} position='relative'>
@@ -64,6 +64,11 @@ export default function Roadmap(props: RoadmapProps) {
           subtitle={roadmap.description}
         >
           <Stack mt='20px' isInline>
+            <Button d={['flex', 'flex']} as={Link} href={'/roadmaps'} size='xs' py='14px' px='10px'
+                    colorScheme='teal' variant='solid' _hover={{ textDecoration: 'none' }}>
+              &larr; <Text as='span' d={['none', 'inline']} ml='5px'>All Roadmaps</Text>
+            </Button>
+
             {roadmap.pdfUrl && (
               <Button as={Link}
                       href={roadmap.pdfUrl}
@@ -75,10 +80,10 @@ export default function Roadmap(props: RoadmapProps) {
                       colorScheme='yellow'
                       variant='solid'
                       _hover={{ textDecoration: 'none' }}>
-                Download PDF
+                Download
               </Button>
             )}
-            <Button as={Link} href={'/signup'} size='xs' py='14px' px='10px' leftIcon={<EmailIcon />}
+            <Button as={Link} href={'/signup'} size='xs' py='14px' px='10px' leftIcon={<AtSignIcon />}
                     colorScheme='yellow' variant='solid' _hover={{ textDecoration: 'none' }}>
               Subscribe
             </Button>

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

pages/_app.tsx

@@ -5,6 +5,7 @@ import 'prism-themes/themes/prism-shades-of-purple.css';
 import { roadmapTheme } from '../styles/theme';
 import { firePageView } from '../lib/gtag';
 import '../styles/carbon.css';
+import { StickyBanner } from '../components/sticky-banner';
 
 function MyApp({ Component, pageProps }: AppProps) {
   useEffect(() => {
@@ -13,6 +14,7 @@ function MyApp({ Component, pageProps }: AppProps) {
 
   return (
     <ChakraProvider theme={roadmapTheme}>
+      <StickyBanner />
       <Component {...pageProps} />
     </ChakraProvider>
   );

pages/thanks.tsx

@@ -17,11 +17,13 @@ import { OpensourceBanner } from '../components/opensource-banner';
 import { UpdatesBanner } from '../components/updates-banner';
 import { Footer } from '../components/footer';
 import siteConfig from '../content/site.json';
+import Helmet from '../components/helmet';
 
 export default function Thanks() {
   return (
     <Box bg='gray.50' minH='100vh'>
       <GlobalHeader />
+      <Helmet title={'Thanks to Sponsors'} />
       <Box mb='60px'>
         <Container maxW={'container.sm'} position='relative'>
           <Box mt='60px'>
@@ -74,17 +76,24 @@ export default function Thanks() {
             <Box mt='40px'>
               <Heading mb='15px' fontSize='25px' as='h2'>Monthly Sponsors</Heading>
               <UnorderedList>
-                <ListItem mb='5px'><Link color='blue.500' fontWeight={500} href='https://github.com/MelnikovAG'>Alexander
+                <ListItem mb='5px'><Link color='blue.500' target='_blank' fontWeight={500}
+                                         href='https://github.com/Stuart-cmd'>Stuart Bowles</Link></ListItem>
+                <ListItem mb='5px'><Link color='blue.500' target='_blank' fontWeight={500}
+                                         href='https://github.com/MelnikovAG'>Alexander
                   Blake</Link></ListItem>
-                <ListItem mb='5px'><Link color='blue.500' fontWeight={500} href='https://github.com/josephjacks'>Joseph
+                <ListItem mb='5px'><Link color='blue.500' target='_blank' fontWeight={500}
+                                         href='https://github.com/josephjacks'>Joseph
                   Jacks</Link></ListItem>
-                <ListItem mb='5px'><Link color='blue.500' fontWeight={500} href='https://github.com/MustafaMagdi'>Mustafa
+                <ListItem mb='5px'><Link color='blue.500' target='_blank' fontWeight={500}
+                                         href='https://github.com/MustafaMagdi'>Mustafa
                   Magdi</Link></ListItem>
-                <ListItem mb='5px'><Link color='blue.500' fontWeight={500} href='https://github.com/dmytbolko'>Dmytro
+                <ListItem mb='5px'><Link color='blue.500' target='_blank' fontWeight={500}
+                                         href='https://github.com/dmytbolko'>Dmytro
                   Bolkachov</Link></ListItem>
-                <ListItem mb='5px'><Link color='blue.500' fontWeight={500}
+                <ListItem mb='5px'><Link color='blue.500' target='_blank' fontWeight={500}
                                          href='https://github.com/liquidaty'>Liquidaty</Link></ListItem>
-                <ListItem mb='5px'><Link color='blue.500' fontWeight={500} href='https://github.com/Lazy-AL'>Anri
+                <ListItem mb='5px'><Link color='blue.500' target='_blank' fontWeight={500}
+                                         href='https://github.com/Lazy-AL'>Anri
                   Lazash</Link></ListItem>
               </UnorderedList>
             </Box>
@@ -92,17 +101,24 @@ export default function Thanks() {
             <Box mt='40px'>
               <Heading mb='15px' fontSize='25px' as='h2'>Past or One Time Sponsors</Heading>
               <UnorderedList>
-                <ListItem mb='5px'><Link color='blue.500' fontWeight={500}
+                <ListItem mb='5px'><Link color='blue.500' target='_blank' fontWeight={500}
+                                         href='https://github.com/mian-muhammad'>Mian Muhammad</Link></ListItem>
+                <ListItem mb='5px'><Link color='blue.500' target='_blank' fontWeight={500}
                                          href='https://digitalocean.com'>DigitalOcean</Link></ListItem>
-                <ListItem mb='5px'><Link color='blue.500' fontWeight={500} href='https://github.com/gabcvit'>Gabriel
+                <ListItem mb='5px'><Link color='blue.500' target='_blank' fontWeight={500}
+                                         href='https://github.com/gabcvit'>Gabriel
                   Checchia</Link></ListItem>
-                <ListItem mb='5px'><Link color='blue.500' fontWeight={500} href='https://github.com/hadasbro'>Slawomir
+                <ListItem mb='5px'><Link color='blue.500' target='_blank' fontWeight={500}
+                                         href='https://github.com/hadasbro'>Slawomir
                   Hadas</Link></ListItem>
-                <ListItem mb='5px'><Link color='blue.500' fontWeight={500} href='https://github.com/tugotron'>Victor
+                <ListItem mb='5px'><Link color='blue.500' target='_blank' fontWeight={500}
+                                         href='https://github.com/tugotron'>Victor
                   Sevelev</Link></ListItem>
-                <ListItem mb='5px'><Link color='blue.500' fontWeight={500} href='https://github.com/matheusfelipeog'>Matheus
+                <ListItem mb='5px'><Link color='blue.500' target='_blank' fontWeight={500}
+                                         href='https://github.com/matheusfelipeog'>Matheus
                   Felipe</Link></ListItem>
-                <ListItem mb='5px'><Link color='blue.500' fontWeight={500} href='https://github.com/emretanriverdi'>Emre
+                <ListItem mb='5px'><Link color='blue.500' target='_blank' fontWeight={500}
+                                         href='https://github.com/emretanriverdi'>Emre
                   Tanriverdi</Link></ListItem>
               </UnorderedList>
             </Box>
@@ -110,7 +126,8 @@ export default function Thanks() {
             <Box mt='40px' borderWidth={1} padding='20px' rounded='5px'>
               <Heading as='h2' mb='10px'>Support the Project</Heading>
               <Text mb='15px'>Sponsor me on GitHub to help ensure the continuity of the project.</Text>
-              <Button as={Link} href={siteConfig.url.sponsor} colorScheme='green'>Sponsor me on GitHub</Button>
+              <Button _hover={{ textDecoration: 'none' }} as={Link} href={siteConfig.url.sponsor} colorScheme='green'>Sponsor
+                me on GitHub</Button>
             </Box>
           </Box>
         </Container>

pages/watch/[video].tsx

@@ -1,4 +1,4 @@
-import { Box, Container } from '@chakra-ui/react';
+import { Box, Container, Link, Text } from '@chakra-ui/react';
 import { GlobalHeader } from '../../components/global-header';
 import { OpensourceBanner } from '../../components/opensource-banner';
 import { UpdatesBanner } from '../../components/updates-banner';
@@ -6,6 +6,7 @@ import { Footer } from '../../components/footer';
 import { ContentPageHeader } from '../../components/content-page-header';
 import MdRenderer from '../../components/md-renderer';
 import { getAllVideos, getVideoById, VideoType } from '../../lib/video';
+import Helmet from '../../components/helmet';
 
 type VideoProps = {
   video: VideoType;
@@ -18,6 +19,7 @@ export default function Video(props: VideoProps) {
   return (
     <Box bg='white' minH='100vh'>
       <GlobalHeader />
+      <Helmet title={video.title} description={video.description} />
       <Box mb='60px'>
         <ContentPageHeader
           title={video.title}
@@ -34,6 +36,12 @@ export default function Video(props: VideoProps) {
           }}
         />
         <Container maxW={'container.md'} position='relative'>
+          {video.youtubeLink && (
+            <Text mb='18px'>We are working on a better watch page — for now this <Link fontWeight={600}
+                                                                                       textDecoration={'underline'}
+                                                                                       href={video.youtubeLink}
+                                                                                       target='_blank'>video is best
+              viewed on YouTube</Link>.</Text>)}
           <MdRenderer>
             <VideoContent />
           </MdRenderer>

public/sponsors/youtube.svg

@@ -0,0 +1,5 @@
+
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<path style="fill:#D8362A;" d="M506.703,145.655c0,0-5.297-37.959-20.303-54.731c-19.421-22.069-41.49-22.069-51.2-22.952  C363.697,62.676,256,61.793,256,61.793l0,0c0,0-107.697,0.883-179.2,6.179c-9.71,0.883-31.779,1.766-51.2,22.952  C9.71,107.697,5.297,145.655,5.297,145.655S0,190.676,0,235.697v41.49c0,45.021,5.297,89.159,5.297,89.159  s5.297,37.959,20.303,54.731c19.421,22.069,45.021,21.186,56.497,23.835C122.703,449.324,256,450.207,256,450.207  s107.697,0,179.2-6.179c9.71-0.883,31.779-1.766,51.2-22.952c15.007-16.772,20.303-54.731,20.303-54.731S512,321.324,512,277.186  v-41.49C512,190.676,506.703,145.655,506.703,145.655"/>
+    <polygon style="fill:#FFFFFF;" points="194.207,166.841 194.207,358.4 361.931,264.828 "/>
+</svg>