Add share icons to roadmap header

components/detailed-roadmap/index.js

@@ -1,7 +1,12 @@
-import { Sidebar, Summary, SummaryContainer } from './style';
+import { PageHeader, RoadmapMeta, ShareRoadmap, Sidebar, Summary, SummaryContainer } from './style';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faFacebookSquare, faTwitterSquare, faRedditSquare } from '@fortawesome/free-brands-svg-icons'
+import { getFacebookShareUrl } from 'lib/url';
+import { ShareIcon } from 'components/share-icon';
+import { getRedditShareUrl, getTwitterShareUrl } from '../../lib/url';
 
 const DetailedRoadmap = ({ roadmap }) => {
-  const RoadmapPages = Object.keys(roadmap.sidebar || {}).map(groupTitle => {
+  const roadmapPages = Object.keys(roadmap.sidebar || {}).map(groupTitle => {
     return (
       <div className='links-group'>
         <h3>{ groupTitle }</h3>
@@ -15,17 +20,36 @@ const DetailedRoadmap = ({ roadmap }) => {
                 </a>
               </li>
             );
-          })}
+          }) }
         </ul>
       </div>
     );
   });
 
   return (
-    <SummaryContainer className="border-top">
+    <SummaryContainer>
-      <Summary className="container text-left">
+      <PageHeader className="border-top border-bottom text-center text-md-left">
+        <div className="container d-flex align-items-center flex-column flex-md-row">
+          <RoadmapMeta>
+            <h3>{ roadmap.title }</h3>
+            <p>Roadmap contributed by <a href="#">Kamran Ahmed</a> and <a href="#">5 others</a></p>
+          </RoadmapMeta>
+          <ShareRoadmap className="mt-2 mt-md-0">
+            <ShareIcon href={ getFacebookShareUrl({ text: roadmap.title, url: roadmap.url }) } target="_blank">
+              <FontAwesomeIcon icon={ faFacebookSquare } />
+            </ShareIcon>
+            <ShareIcon href={ getTwitterShareUrl({ text: roadmap.title, url: roadmap.url }) } target="_blank">
+              <FontAwesomeIcon icon={ faTwitterSquare } />
+            </ShareIcon>
+            <ShareIcon href={ getRedditShareUrl({ text: roadmap.title, url: roadmap.url }) } target="_blank">
+              <FontAwesomeIcon icon={ faRedditSquare } />
+            </ShareIcon>
+          </ShareRoadmap>
+        </div>
+      </PageHeader>
+      <Summary className="container">
         <Sidebar className="sidebar">
-          { RoadmapPages }
+          { roadmapPages }
         </Sidebar>
         <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>

components/detailed-roadmap/style.js

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 export const SummaryContainer = styled.div``;
 
 export const Summary = styled.div`
-  text-align: center;
+  text-align: left;
   min-height: 400px;
   display: flex;
 
@@ -12,6 +12,43 @@ export const Summary = styled.div`
   }
 `;
 
+export const PageHeader = styled.div`
+  padding-top: 20px;
+  padding-bottom: 20px;
+
+  h3 {
+    margin-bottom: 4px;
+    font-weight: 600;
+    font-size: 21px;
+  }
+
+  p {
+    margin-bottom: 0;
+    font-size: 14px;
+    color: #696969;
+    
+    a {
+      color: #101010;
+    }
+  }
+`;
+
+export const RoadmapMeta = styled.div`
+  flex: 1;
+`;
+
+export const ShareRoadmap = styled.div`
+  display: flex;
+  align-items: center;
+
+  a {
+    margin-bottom: 0;
+    & + a {
+      margin-left: 5px;
+    }
+  }
+`;
+
 export const Sidebar = styled.div`
   border-left: 1px solid #efefef;
   padding-bottom: 150px;

components/share-icon/index.js

@@ -0,0 +1,20 @@
+import styled from 'styled-components';
+
+export const ShareIcon = styled.a`
+  display: block;
+  width: 22px;
+  height: 22px;
+  margin-bottom: 8px;
+
+  svg {
+    height: 22px !important;
+    width: 22px !important;
+    color: #757575;
+    transition: all 0.2s;
+    vertical-align: top;
+  }
+  
+  &:hover svg {
+    color: #000000
+  }
+`;

components/share-page/index.js

@@ -2,7 +2,8 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faFacebookSquare, faRedditSquare, faTwitterSquare } from '@fortawesome/free-brands-svg-icons'
 
 import { getFacebookShareUrl, getRedditShareUrl, getTwitterShareUrl } from "lib/url";
-import { ShareIcon, ShareIconsList, ShareWrap } from './style';
+import { ShareIconsList, ShareWrap } from './style';
+import { ShareIcon } from 'components/share-icon';
 
 const SharePage = ({
   url,
@@ -10,7 +11,7 @@ const SharePage = ({
   twitterUsername,
 }) => (
   <ShareWrap>
-    <ShareIconsList className="d-none d-sm-flex d-md-flex d-lg-flex d-xl-flex">
+    <ShareIconsList className="d-none d-sm-flex">
       <ShareIcon
         href={ getTwitterShareUrl({
           text: `${title} ${twitterUsername ? `by @${twitterUsername}` : ''}`,
@@ -18,7 +19,7 @@ const SharePage = ({
         })}
         target="_blank"
       >
-          <FontAwesomeIcon icon={ faTwitterSquare } />
+        <FontAwesomeIcon icon={ faTwitterSquare } />
       </ShareIcon>
       <ShareIcon href={ getFacebookShareUrl({ text: title, url: url }) } target="_blank">
         <FontAwesomeIcon icon={ faFacebookSquare } />

components/share-page/style.js

@@ -19,22 +19,3 @@ export const ShareWrap = styled.div`
   left: -40px;
   min-height: 100%;
 `;
-
-export const ShareIcon = styled.a`
-  display: block;
-  width: 22px;
-  height: 22px;
-  margin-bottom: 8px;
-
-  svg {
-    height: 22px !important;
-    width: 22px !important;
-    color: #757575;
-    transition: all 0.2s;
-    vertical-align: top;
-  }
-  
-  &:hover svg {
-    color: #000000
-  }
-`;

static/sitemap.xml

@@ -3,7 +3,7 @@
 <url>
               <loc>https://roadmap.sh/frontend</loc>
               <changefreq>monthly</changefreq>
-              <lastmod>2019-11-30T10:10:12.396Z</lastmod>
+              <lastmod>2019-11-30T10:14:37.750Z</lastmod>
               <priority>1.0</priority>
           </url>
 <url>
@@ -75,7 +75,7 @@
 <url>
               <loc>https://roadmap.sh/backend</loc>
               <changefreq>monthly</changefreq>
-              <lastmod>2019-11-27T20:13:58.873Z</lastmod>
+              <lastmod>2019-11-30T10:14:31.255Z</lastmod>
               <priority>1.0</priority>
           </url>
 <url>
@@ -99,7 +99,7 @@
 <url>
               <loc>https://roadmap.sh/devops</loc>
               <changefreq>monthly</changefreq>
-              <lastmod>2019-11-27T20:14:19.847Z</lastmod>
+              <lastmod>2019-11-30T10:24:46.555Z</lastmod>
               <priority>1.0</priority>
           </url>
 <url>

storage/roadmaps.json

@@ -1,7 +1,7 @@
 [
   {
     "title": "Frontend Developer",
-    "description": "Step by step guide to becoming a modern frontend developer",
+    "description": "Roadmap to becoming a modern frontend developer",
     "featuredDescription": "Step by step guide to becoming a modern frontend developer in 2019",
     "featured": true,
     "detailed": true,