Add resources pages and new guide

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;
+`;