Split roadmap summaries and detailed roadmap

components/roadmap-body/index.js

@@ -1,5 +1,4 @@
-import { Summary, SummaryContainer, UpcomingContainer } from './style';
+import { Sidebar, Summary, SummaryContainer, UpcomingContainer } from './style';
-import SharePage from 'components/share-page';
 import GuideBody from 'components/guide-body';
 
 const RoadmapBody = ({ roadmap }) => {
@@ -11,15 +10,35 @@ const RoadmapBody = ({ roadmap }) => {
     );
   }
 
+  const RoadmapPages = Object.keys(roadmap.sidebar || {}).map(groupTitle => {
+    return (
+      <div className='links-group'>
+        <h3>{ groupTitle }</h3>
+        <ul>
+          { roadmap.sidebar[groupTitle].map(page => {
+            return (
+              <li>
+                <a href={ page.url }>
+                  <span className="bullet"></span>
+                  { page.title }
+                </a>
+              </li>
+            );
+          })}
+        </ul>
+      </div>
+    );
+  });
+
   return (
     <SummaryContainer>
-      <Summary>
+      <Summary className="container text-left">
-        {
+        <Sidebar className="sidebar">
-            <div className="container container-small text-left">
+          { RoadmapPages }
-              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut beatae blanditiis commodi, consequatur, dicta distinctio esse et id, ipsa labore libero nisi odit placeat possimus saepe sed vel vitae voluptate?</p>
+        </Sidebar>
-              <SharePage title={ roadmap.description } url={ roadmap.url } />
+        <div>
-            </div>
+          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut beatae blanditiis commodi, consequatur, dicta distinctio esse et id, ipsa labore libero nisi odit placeat possimus saepe sed vel vitae voluptate?</p>
-        }
+        </div>
       </Summary>
     </SummaryContainer>
   )

components/roadmap-body/style.js

@@ -13,10 +13,69 @@ export const UpcomingContainer = styled.div`
 
 export const Summary = styled.div`
   text-align: center;
-  padding: 40px 0 50px;
   min-height: 400px;
-  
+  display: flex;
+
   .container {
     position: relative;
   }
 `;
+
+export const Sidebar = styled.div`
+  border-left: 1px solid #efefef;
+  padding-bottom: 150px;
+
+  ul {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+  }
+  
+  .bullet {
+    display: inline-block;
+    margin-right: 7px;
+    width: 7px;
+    height: 7px;
+    min-width: 7px;
+    border-radius: 100%;
+    background: #efefef;
+    transform: translateX(-4px);
+    transition: background 0.5s ease;
+  }
+
+  
+  .links-group {
+    padding: 30px 0 10px;
+    width: 260px;
+
+    h3 {
+      font-size: 12px;
+      font-weight: 600;
+      text-transform: uppercase;
+      padding-left: 20px;
+    }
+  }
+  
+  .links-group li {
+    list-style: none;
+    margin: 7px 0;
+
+    a {
+      font-size: 14px;
+      font-weight: normal;
+      color: #696969;
+    }
+    
+    .bullet {
+      display: inline-block;
+      margin-right: 12px;
+      width: 7px;
+      height: 7px;
+      min-width: 7px;
+      border-radius: 100%;
+      background: #efefef;
+      transform: translateX(-4px);
+      transition: background 0.5s ease;
+    }
+  }
+`;

components/roadmap-summary/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 RoadmapSummary = ({ roadmap }) => {
+  if (roadmap.upcoming) {
+    return (
+      <>
+        <RoadmapHeader roadmap={ roadmap } />
+        <UpcomingContainer>
+          <GuideBody guide={{ fileName: 'upcoming' }} />
+        </UpcomingContainer>
+      </>
+    );
+  }
+
+  const filePath = roadmap.path.replace(/^\//, '');
+  const RoadmapContent = require(`../../storage/${filePath}`).default;
+
+  return (
+    <SummaryContainer>
+      <RoadmapHeader roadmap={ roadmap } />
+      <Summary className="container">
+        <MdRenderer>
+          <RoadmapContent />
+        </MdRenderer>
+        <SharePage title={ roadmap.description } url={ roadmap.url } />
+      </Summary>
+    </SummaryContainer>
+  )
+};
+
+export default RoadmapSummary;

components/roadmap-summary/style.js

@@ -0,0 +1,20 @@
+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;
+  display: block;
+  position: relative;
+  text-align: left;
+`;

components/share-page/style.js

@@ -15,8 +15,9 @@ export const ShareWrap = styled.div`
   flex-direction: column;
   position: absolute;
   padding: 0 0;
-  top: 6px;
+  top: 0;
   left: -40px;
+  min-height: 100%;
 `;
 
 export const ShareIcon = styled.a`

contributing/readme.md

@@ -24,9 +24,9 @@ Your opinion on value of any resource may not match the opinion of curator.
 
 ## Guidelines
 
-- <p><strong>Adding everything available out there is not the goal!</strong><br> 
+- <p><strong>Adding everything available out there is not the goal!</strong><br /> 
   The roadmaps represents the skillset most valuable today i.e. if you were to enter any of the listed fields today, what would you learn! There might be things that are of-course being used today but prioritize the things that are most in demand today e.g. agreed that lots of people are using angular.js today but you wouldn't want to learn that instead of React, Angular or Vue. Use your critical thinking to filter out non-essential stuff. Give honest arguments for why the resource should be included.</p>
-- <p><strong>One item per Pull Request</strong><br>
+- <p><strong>One item per Pull Request</strong><br />
   There may be a discussion related to an item you want to add. Adding just a single item per pull request makes it much easier for everyone involved.</p>
 - Write meaningful commit messages
 - Look at the existing issues/pull requests before opening new ones

pages/[roadmap]/index.js

@@ -2,23 +2,23 @@ import Error from 'next/error';
 import DefaultLayout from 'layouts/default';
 import SiteNav from 'components/site-nav';
 import PageFooter from 'components/page-footer';
-import RoadmapBody from 'components/roadmap-body';
 import { serverOnlyProps } from 'lib/server';
 import { getRequestedRoadmap } from 'lib/roadmap';
 import Helmet from 'components/helmet';
-import RoadmapHeader from 'components/roadmap-header';
+import RoadmapSummary from 'components/roadmap-summary';
+import RoadmapBody from '../../components/roadmap-body';
 
 const Roadmap = ({ roadmap }) => {
   if (!roadmap) {
     return <Error statusCode={ 404 } />
   }
 
+  const showSummary = roadmap.upcoming || !roadmap.detailed;
   return (
     <DefaultLayout>
       <Helmet title={ roadmap.title } description={ roadmap.description } />
       <SiteNav />
-      <RoadmapHeader roadmap={ roadmap } />
+      { showSummary ? <RoadmapSummary roadmap={roadmap} /> : <RoadmapBody roadmap={roadmap} /> }
-      <RoadmapBody roadmap={ roadmap } />
       <PageFooter />
     </DefaultLayout>
   );