Split roadmap header to separate component

components/roadmap-body/index.js

@@ -0,0 +1,33 @@
+import { Summary, SummaryContainer } from './style';
+import SharePage from 'components/share-page';
+import MdRenderer from 'components/md-renderer';
+
+const UpcomingGuide = require(`../../storage/guides/upcoming.md`).default;
+
+const RoadmapBody = ({ roadmap }) => {
+  return (
+    <SummaryContainer>
+      <Summary>
+        {
+          roadmap.upcoming && (
+            <div className="container container-small">
+              <MdRenderer>
+                <UpcomingGuide />
+              </MdRenderer>
+            </div>
+          )
+        }
+        {
+          !roadmap.upcoming && (
+            <div className="container container-small text-left">
+              <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>
+              <SharePage title={ roadmap.description } url={ roadmap.url } />
+            </div>
+          )
+        }
+      </Summary>
+    </SummaryContainer>
+  )
+};
+
+export default RoadmapBody;

components/roadmap-body/style.js

@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+
+export const SummaryContainer = styled.div``;
+
+export const Summary = styled.div`
+  text-align: center;
+  padding: 40px 0 50px;
+  min-height: 400px;
+  
+  .container {
+    position: relative;
+  }
+`;

components/roadmap-header/index.js

@@ -0,0 +1,43 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faArrowLeft, faClock, faEnvelope, faHandshake } from '@fortawesome/free-solid-svg-icons';
+import { BadgeLink, BadgesList, DarkBadge, PrimaryBadge, SecondaryBadge } from 'components/badges';
+import siteConfig from "storage/site";
+import { Description, Header, Title, VersionList } from './style';
+
+const RoadmapHeader = ({ roadmap }) => (
+  <Header className="border-bottom">
+    <Title>{ roadmap.title }</Title>
+    <Description>{ roadmap.description }</Description>
+    <BadgesList className="mt-4">
+      <BadgeLink href="/roadmaps">
+        <DarkBadge>
+          <FontAwesomeIcon icon={ faArrowLeft } />
+          Other Roadmaps
+        </DarkBadge>
+      </BadgeLink>
+      { roadmap.upcoming && (
+        <SecondaryBadge>
+          <FontAwesomeIcon icon={ faClock } />
+          Upcoming Roadmap
+        </SecondaryBadge>
+      ) }
+      { !roadmap.upcoming && (
+        <BadgeLink href={ `${siteConfig.url.issue}?title=[${roadmap.title}] - Title Here` } target="_blank">
+          <SecondaryBadge>
+            <FontAwesomeIcon icon={ faHandshake } />
+            Suggest Changes
+          </SecondaryBadge>
+        </BadgeLink>
+      ) }
+
+      <BadgeLink href="/signup">
+        <PrimaryBadge>
+          <FontAwesomeIcon icon={ faEnvelope } />
+          Send me Updates
+        </PrimaryBadge>
+      </BadgeLink>
+    </BadgesList>
+  </Header>
+);
+
+export default RoadmapHeader;

components/roadmap-header/style.js

@@ -0,0 +1,17 @@
+import styled from 'styled-components';
+
+export const Header = styled.div`
+  text-align: center;
+  padding: 45px 30px 30px;
+`;
+
+export const Title = styled.h1`
+  font-weight: 700;
+  margin-bottom: 12px;
+  font-size: 48px;
+`;
+
+export const Description = styled.p`
+  font-size: 16px;
+  color: #444444;
+`;

components/roadmap-summary/index.js

@@ -1,72 +0,0 @@
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faArrowLeft, faClock, faEnvelope, faHandshake } from '@fortawesome/free-solid-svg-icons';
-import { Description, Header, Summary, SummaryContainer, Title, VersionList } from './style';
-import SharePage from 'components/share-page';
-import { BadgeLink, BadgesList, DarkBadge, PrimaryBadge, SecondaryBadge } from 'components/badges';
-import siteConfig from "storage/site";
-import MdRenderer from '../md-renderer';
-
-const UpcomingGuide = require(`../../storage/guides/upcoming.md`).default;
-
-const RoadmapSummary = ({ roadmap }) => {
-  return (
-    <SummaryContainer>
-      <Header>
-        <Title>{ roadmap.title }</Title>
-        <Description>{ roadmap.description }</Description>
-        <BadgesList className="mt-4">
-          <BadgeLink href="/roadmaps">
-            <DarkBadge>
-              <FontAwesomeIcon icon={ faArrowLeft } />
-              Other Roadmaps
-            </DarkBadge>
-          </BadgeLink>
-          { roadmap.upcoming && (
-            <SecondaryBadge>
-              <FontAwesomeIcon icon={ faClock } />
-              Upcoming Roadmap
-            </SecondaryBadge>
-          ) }
-          { !roadmap.upcoming && (
-            <BadgeLink href={ `${siteConfig.url.issue}?title=[${roadmap.title}] - Title Here` } target="_blank">
-              <SecondaryBadge>
-                <FontAwesomeIcon icon={ faHandshake } />
-                Suggest Changes
-              </SecondaryBadge>
-            </BadgeLink>
-          ) }
-
-          <BadgeLink href="/signup">
-            <PrimaryBadge>
-              <FontAwesomeIcon icon={ faEnvelope } />
-              Send me Updates
-            </PrimaryBadge>
-          </BadgeLink>
-        </BadgesList>
-
-        <VersionList className="border-bottom" />
-      </Header>
-      <Summary>
-        {
-          roadmap.upcoming && (
-            <div className="container container-small">
-              <MdRenderer>
-                <UpcomingGuide />
-              </MdRenderer>
-            </div>
-          )
-        }
-        {
-          !roadmap.upcoming && (
-            <div className="container text-left">
-              <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>
-              <SharePage title={ roadmap.description } url={ roadmap.url } />
-            </div>
-          )
-        }
-      </Summary>
-    </SummaryContainer>
-  )
-};
-
-export default RoadmapSummary;

components/roadmap-summary/style.js

@@ -1,67 +0,0 @@
-import styled from 'styled-components';
-
-export const SummaryContainer = styled.div``;
-
-export const Header = styled.div`
-  text-align: center;
-  padding: 45px 30px 55px;
-`;
-
-export const Summary = styled.div`
-  text-align: center;
-  padding: 0 0 50px;
-  
-  .container {
-    position: relative;
-  }
-`;
-
-export const Title = styled.h1`
-  font-weight: 700;
-  margin-bottom: 12px;
-  font-size: 48px;
-`;
-
-export const Description = styled.p`
-  font-size: 16px;
-  color: #444444;
-`;
-
-export const Image = styled.img`
-  width: 100%;
-`;
-
-export const VersionList = styled.div`
-  margin: 35px 0 15px;
-`;
-
-export const VersionLink = styled.a`
-  display: inline-block;
-  position: relative;
-  padding: 5px 10px 8px;
-  text-decoration: none;
-  color: rgb(102, 102, 102);
-  font-size: 14px;
-  font-weight: 400;
-  text-transform: capitalize;
-
-  &.active, &.active:hover {
-    color: #2d2d2d;
-    
-    &:after {
-      position: absolute;
-      content: "";
-      display: block;
-      height: 0;
-      left: 9px;
-      right: 9px;
-      bottom: -1px;
-      border-bottom: 2px solid currentColor;
-    }
-  }
-  
-  &:hover {
-    text-decoration: none;
-    color: #111111;
-  }
-`;

components/share-page/index.js

@@ -10,7 +10,7 @@ const SharePage = ({
   twitterUsername,
 }) => (
   <ShareWrap>
-    <ShareIconsList className="d-sm-none d-md-none d-lg-flex d-xl-flex">
+    <ShareIconsList className="d-none d-sm-flex d-md-flex d-lg-flex d-xl-flex">
       <ShareIcon
         href={ getTwitterShareUrl({
           text: `${title} ${twitterUsername ? `by @${twitterUsername}` : ''}`,

components/share-page/style.js

@@ -16,8 +16,7 @@ export const ShareWrap = styled.div`
   position: absolute;
   padding: 0 0;
   top: 6px;
-  left: -50px;
+  left: -40px;
-  height: 100%;
 `;
 
 export const ShareIcon = styled.a`

pages/[roadmap]/index.js

@@ -2,10 +2,11 @@ import Error from 'next/error';
 import DefaultLayout from 'layouts/default';
 import SiteNav from 'components/site-nav';
 import PageFooter from 'components/page-footer';
-import RoadmapSummary from 'components/roadmap-summary';
+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';
 
 const Roadmap = ({ roadmap }) => {
   if (!roadmap) {
@@ -16,7 +17,8 @@ const Roadmap = ({ roadmap }) => {
     <DefaultLayout>
       <Helmet title={ roadmap.title } description={ roadmap.description } />
       <SiteNav />
-      <RoadmapSummary roadmap={ roadmap } />
+      <RoadmapHeader roadmap={ roadmap } />
+      <RoadmapBody roadmap={ roadmap } />
       <PageFooter />
     </DefaultLayout>
   );