From 7cda221c3daee1231d1b583c9e8daf2ba004f137 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Sat, 30 Nov 2019 17:07:50 +0400
Subject: [PATCH] Add share icons to roadmap header

---
 components/detailed-roadmap/index.js | 36 ++++++++++++++++++++-----
 components/detailed-roadmap/style.js | 39 +++++++++++++++++++++++++++-
 components/share-icon/index.js       | 20 ++++++++++++++
 components/share-page/index.js       |  7 ++---
 components/share-page/style.js       | 19 --------------
 static/sitemap.xml                   |  6 ++---
 storage/roadmaps.json                |  2 +-
 7 files changed, 96 insertions(+), 33 deletions(-)
 create mode 100644 components/share-icon/index.js

diff --git a/components/detailed-roadmap/index.js b/components/detailed-roadmap/index.js
index 4dd317db4..ef4fc2ad3 100644
--- a/components/detailed-roadmap/index.js
+++ b/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">
-      <Summary className="container text-left">
+    <SummaryContainer>
+      <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>
diff --git a/components/detailed-roadmap/style.js b/components/detailed-roadmap/style.js
index fd4d2eb40..92d4c9997 100644
--- a/components/detailed-roadmap/style.js
+++ b/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;
diff --git a/components/share-icon/index.js b/components/share-icon/index.js
new file mode 100644
index 000000000..f655fabc7
--- /dev/null
+++ b/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
+  }
+`;
diff --git a/components/share-page/index.js b/components/share-page/index.js
index e4ac3ce03..37348576d 100644
--- a/components/share-page/index.js
+++ b/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 } />
diff --git a/components/share-page/style.js b/components/share-page/style.js
index c4cf6dc94..6c560fa5e 100644
--- a/components/share-page/style.js
+++ b/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
-  }
-`;
diff --git a/static/sitemap.xml b/static/sitemap.xml
index 0450f7965..9ad8ebd94 100644
--- a/static/sitemap.xml
+++ b/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>
diff --git a/storage/roadmaps.json b/storage/roadmaps.json
index 44bdb782a..6390a6d5a 100644
--- a/storage/roadmaps.json
+++ b/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,