From d73e08f8f64c76bea6e3d82167b6bbff5cca8cc3 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Sun, 1 Mar 2020 10:27:15 +0400
Subject: [PATCH] Add resources setup

---
 components/link/badge-link.js                  | 9 +++++++++
 components/md-renderer/mdx-components/index.js | 4 +++-
 components/roadmap-header/index.js             | 2 --
 content/roadmaps/1-frontend/resources.md       | 9 +++++----
 4 files changed, 17 insertions(+), 7 deletions(-)
 create mode 100644 components/link/badge-link.js

diff --git a/components/link/badge-link.js b/components/link/badge-link.js
new file mode 100644
index 000000000..53567d8b0
--- /dev/null
+++ b/components/link/badge-link.js
@@ -0,0 +1,9 @@
+export function BadgeLink({ target='_blank', variant ='primary', badgeText, href, children }) {
+  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>
+  );
+}
diff --git a/components/md-renderer/mdx-components/index.js b/components/md-renderer/mdx-components/index.js
index 80779bc37..b7d150bcb 100644
--- a/components/md-renderer/mdx-components/index.js
+++ b/components/md-renderer/mdx-components/index.js
@@ -6,6 +6,7 @@ import { Table } from './table';
 import { IFrame } from './iframe';
 import { Img } from './img';
 import EnrichedLink from './a';
+import { BadgeLink } from '../../link/badge-link';
 
 const MdxComponents = {
   p: P,
@@ -16,6 +17,7 @@ const MdxComponents = {
   table: Table,
   iframe: IFrame,
   img: Img,
+  BadgeLink: BadgeLink
 };
 
-export default MdxComponents;
\ No newline at end of file
+export default MdxComponents;
diff --git a/components/roadmap-header/index.js b/components/roadmap-header/index.js
index 7dc4c6017..66c458b97 100644
--- a/components/roadmap-header/index.js
+++ b/components/roadmap-header/index.js
@@ -43,7 +43,6 @@ const RoadmapHeader = ({ roadmap, page = 'landscape' }) => (
     </BadgesList>
 
     <MenuItems className="border-bottom">
-      <div className='d-none'>
       <Link href={ `${roadmap.url}` } passHref>
         <MenuItemLink className={ classNames({ active: page === 'landscape', }) }>Landscape</MenuItemLink>
       </Link>
@@ -53,7 +52,6 @@ const RoadmapHeader = ({ roadmap, page = 'landscape' }) => (
       {/*<Link href={ `${roadmap.url}/resources` } passHref>*/}
       {/*  <MenuItemLink className={ classNames({ active: false, }) }>Project Ideas</MenuItemLink>*/}
       {/*</Link>*/}
-      </div>
     </MenuItems>
 
   </Header>
diff --git a/content/roadmaps/1-frontend/resources.md b/content/roadmaps/1-frontend/resources.md
index 088156fc3..e7cd16333 100644
--- a/content/roadmaps/1-frontend/resources.md
+++ b/content/roadmaps/1-frontend/resources.md
@@ -5,12 +5,13 @@ 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. 
 
-* [How the internet works in 5 minutes](https://www.youtube.com/watch?v=7_LPdttKXPc) 👀
-* [What is the Internet](https://www.youtube.com/watch?v=Dxcc6ycZ73M)
-* [The Internet: IP Addresses & DNS](https://www.youtube.com/watch?v=5o8CwafCxnU)
-* [The Internet: Packets, Routing & Reliability](https://www.youtube.com/watch?v=AYdF7b3nMto)
+* <BadgeLink badgeText='Read' href='/guides/what-is-internet'>What is Internet?</BadgeLink>
+* <BadgeLink variant='success' badgeText='Watch' href='https://www.youtube.com/watch?v=7_LPdttKXPc'>How the internet works in 5 minutes</BadgeLink>
 * What is HTTP, how it evolved and where is it now?
 * How do the browsers work? Engines behind different browsers
 * What is DNS? How a website is found on the internet?
 * What's in a domain name? What is an IP Address?
 * What is Web Hosting?
+
+## Learn HTML
+HTML helps you build the pages