Add resources pages and new guide

.editorconfig

@@ -18,6 +18,6 @@ indent_size = 2
 indent_style = space
 indent_size = 2
 
-[{package.json,.travis.yml}]
+[{package.json, .travis.yml}]
 indent_style = space
 indent_size = 2

components/roadmap-header/index.js

@@ -6,7 +6,7 @@ import { Description, Header, Title, MenuItemLink, MenuItems } from './style';
 import Link from 'next/link';
 import classNames from 'classnames';
 
-const RoadmapHeader = ({ roadmap }) => (
+const RoadmapHeader = ({ roadmap, page = 'landscape' }) => (
   <Header>
     <Title>{ roadmap.title }</Title>
     <Description>{ roadmap.description }</Description>
@@ -43,15 +43,17 @@ const RoadmapHeader = ({ roadmap }) => (
     </BadgesList>
 
     <MenuItems className="border-bottom">
+      <div className='d-none'>
       <Link href={ `${roadmap.url}` } passHref>
-        <MenuItemLink className={ classNames({ active: true, }) }>Landscape</MenuItemLink>
+        <MenuItemLink className={ classNames({ active: page === 'landscape', }) }>Landscape</MenuItemLink>
       </Link>
       <Link href={ `${roadmap.url}/resources` } passHref>
-        <MenuItemLink className={ classNames({ active: false, }) }>Resources</MenuItemLink>
-      </Link>
-      <Link href={ `${roadmap.url}/resources` } passHref>
-        <MenuItemLink className={ classNames({ active: false, }) }>Project Ideas</MenuItemLink>
+        <MenuItemLink className={ classNames({ active: page === 'resources', }) }>Resources</MenuItemLink>
       </Link>
+      {/*<Link href={ `${roadmap.url}/resources` } passHref>*/}
+      {/*  <MenuItemLink className={ classNames({ active: false, }) }>Project Ideas</MenuItemLink>*/}
+      {/*</Link>*/}
+      </div>
     </MenuItems>
 
   </Header>

components/roadmap-resources/index.js

@@ -0,0 +1,35 @@
+import { Summary, SummaryContainer, UpcomingContainer } from './style';
+import GuideBody from 'components/guide-body';
+import RoadmapHeader from 'components/roadmap-header';
+import SharePage from 'components/share-page';
+import MdRenderer from 'components/md-renderer';
+
+const RoadmapResources = ({ roadmap }) => {
+  if (roadmap.upcoming) {
+    return (
+      <>
+        <RoadmapHeader roadmap={ roadmap } />
+        <UpcomingContainer>
+          <GuideBody guide={{ fileName: 'upcoming' }} />
+        </UpcomingContainer>
+      </>
+    );
+  }
+
+  const filePath = roadmap.resources.replace(/^\//, '');
+  const ResourcesContent = require(`../../content/${filePath}`).default;
+
+  return (
+    <SummaryContainer>
+      <RoadmapHeader roadmap={ roadmap } page='resources' />
+      <Summary className="container">
+        <MdRenderer>
+          <ResourcesContent />
+        </MdRenderer>
+        <SharePage title={ roadmap.description } url={ roadmap.url } />
+      </Summary>
+    </SummaryContainer>
+  )
+};
+
+export default RoadmapResources;

components/roadmap-resources/style.js

@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+
+export const SummaryContainer = styled.div``;
+
+export const UpcomingContainer = styled.div`
+  text-align: center;
+  padding: 40px 0 50px;
+
+  .container {
+    position: relative;
+  }
+`;
+
+export const Summary = styled.div`
+  margin-top: 35px;
+  min-height: 400px;
+  max-width: 1000px;
+  display: block;
+  position: relative;
+  text-align: left;
+`;

content/authors.json

@@ -12,5 +12,12 @@
     "twitter": "__jesse_li",
     "picture": "/authors/jesse.png",
     "bio": "Software engineer."
+  },
+  {
+    "username": "dmytrobol",
+    "name": "Dmytro Bolkachov",
+    "twitter": "dmytrobol",
+    "picture": "/authors/dmytrobol.png",
+    "bio": "JavaScript Lad, Movie buff and coder interested in everything web related"
   }
 ]

content/guides.json

@@ -1,4 +1,14 @@
 [
+  {
+    "title": "How does the internet work?",
+    "description": "Learn the basics of internet and everything involved with this short video series",
+    "url": "/guides/what-is-internet",
+    "fileName": "what-is-internet",
+    "featured": true,
+    "author": "dmytrobol",
+    "updatedAt": "2020-02-29T15:48:21.191Z",
+    "createdAt": "2020-02-29T15:48:21.191Z"
+  },
   {
     "title": "Building a BitTorrent Client",
     "description": "Learn everything you need to know about BitTorrent by writing a client in Go",

content/guides/what-is-internet.md

@@ -0,0 +1,62 @@
+Knowing the basics of internet and how it works is the key knowledge that every developer must have. In this article accompanied with an introductory series of short videos about internet from [code.org](https://code.org) you will learn the basics of internet and how everything works. After going through this article, you will be able to answer the below questions:
+
+* What is Internet?
+* How does the information move on the internet?
+* How do the networks talk to each other and the protocols involved?
+* Packet, routers, and reliability
+* HTTP and the HTML – How are you viewing this webpage in your browser?
+* How is the information transfer on the internet made secure?
+* What is cybersecurity and some common internet crimes?
+
+## What is internet?
+
+Internet, at its simplest, is a global network of computers connected to each other which communicate through a standardized set of protocols. 
+
+In the video below Vint Cerf, one of the "fathers of the internet" explains the history of how the internet works and how no one person or organization is really in charge of it.  
+
+<iframe width="100%" height="400" src="https://www.youtube.com/embed/Dxcc6ycZ73M" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+
+## Wires, Cables & Wifi
+
+Information on the internet moves from computer to another in the form of bits. The medium for this transfer can be wires e.g. ethernet wires that you might have seen in your homes, it can be transferred in the form of light or fiber optic cables, also we can use wireless mediums.
+
+In the video linked below, you will learn about the different mediums for data transfer on the internet and the pros and cons for each. 
+
+<iframe width="100%" height="400" src="https://www.youtube.com/embed/ZhEf7e4kopM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+## IP Addresses and DNS
+
+Now that you know about the physical medium for the data transfer over the internet. It's time to learn about the protocols involved or how does the information reach from one computer to another in this massive global network of computers.
+
+In the video below, you will get a brief introduction to IP, DNS and how these protocols make the internet work. 
+
+<iframe width="100%" height="400" src="https://www.youtube.com/embed/5o8CwafCxnU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+## Packets, Routing and Reliability
+
+Information transfer on the internet from one computer to another does not need to follow a fixed path; infact, it may change paths during the transfer. This information transfer is done in the form of packets and these packets may follow different routes depending upon certain factors.
+
+In this video, you will learn about how the packets of information are routed from one computer to another to reach the destination.  
+
+<iframe width="100%" height="400" src="https://www.youtube.com/embed/AYdF7b3nMto" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+## HTTP and HTML
+
+HTTP is the standard protocol using which the webpages are transferred over the internet. The video below is a brief introduction to HTTP and how the browsers load the websites for you.
+
+<iframe width="100%" height="400" src="https://www.youtube.com/embed/kBXQZMmiA4s" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+## Encryption and Public Keys
+
+Cryptography is what keeps our communication secure on the internet, in this short video you will learn the basics of cryptograpy, SSL and TLS and how they help make the communication on the internet secure.
+
+<iframe width="100%" height="400" src="https://www.youtube.com/embed/ZghMPWGXexs" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+## Cybersecurity and Crime
+
+In this video, you will learn about the basics of cybersecurity and common cybercrimes
+
+<iframe width="100%" height="400" src="https://www.youtube.com/embed/AuYNXgO_f3Y" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+And that wraps it up for this article. To learn more about the internet, [Kamran Ahmed](https://twitter.com/kamranahmedse) has a nice little guide on [DNS: How a website is found on the Internet](/guides/dns-in-one-picture). Also go through the episodes of [howdns.works](https://howdns.works/) and read this [cartoon intro to DNS over HTTPS](https://hacks.mozilla.org/2018/05/a-cartoon-intro-to-dns-over-https/).