Add share page on roadmap pages

components/roadmap-summary/index.js

@@ -1,6 +1,5 @@
 import Link from 'next/link';
 import classNames from 'classnames';
-
 import {
   SummaryContainer,
   Title,
@@ -11,6 +10,7 @@ import {
   VersionLink,
   VersionList,
 } from './style';
+import SharePage from '../share-page';
 
 const isActiveRoadmap = (loadedVersion, roadmapVersion) => (
   (loadedVersion === roadmapVersion) ||
@@ -35,6 +35,7 @@ const RoadmapSummary = ({ roadmap }) => (
     <Summary className="border-bottom">
       <div className="container">
         <Image src={ roadmap.picture } />
+        <SharePage title={ roadmap.description } url={ roadmap.url } />
       </div>
     </Summary>
   </SummaryContainer>

components/roadmap-summary/style.js

@@ -10,6 +10,10 @@ export const Header = styled.div`
 export const Summary = styled.div`
   text-align: center;
   padding: 0 0 50px;
+  
+  .container {
+    position: relative;
+  }
 `;
 
 export const Title = styled.h1`
@@ -60,4 +64,4 @@ export const VersionLink = styled.a`
     text-decoration: none;
     color: #111111;
   }
-`;
+`;

components/share-page/index.js

@@ -4,25 +4,30 @@ import { faFacebookSquare, faRedditSquare, faTwitterSquare } from '@fortawesome/
 import { getFacebookShareUrl, getRedditShareUrl, getTwitterShareUrl } from "lib/url";
 import { ShareIcon, ShareIconsList, ShareWrap } from './style';
 
-const ShareGuide = ({
-  guide,
-  guide: {
-    author = {}
-  } = {}
+const SharePage = ({
+  url,
+  title,
+  twitterUsername,
 }) => (
   <ShareWrap>
     <ShareIconsList className="d-sm-none d-md-none d-lg-flex d-xl-flex">
-      <ShareIcon href={ getTwitterShareUrl({ text: `${guide.title} by @${author.twitter}`, url: guide.url })} target="_blank">
+      <ShareIcon
+        href={ getTwitterShareUrl({
+          text: `${title}${twitterUsername ? `by @${twitterUsername}` : ''}`,
+          url: url
+        })}
+        target="_blank"
+      >
           <FontAwesomeIcon icon={ faTwitterSquare } />
       </ShareIcon>
-      <ShareIcon href={ getFacebookShareUrl({ text: guide.title, url: guide.url }) } target="_blank">
+      <ShareIcon href={ getFacebookShareUrl({ text: title, url: url }) } target="_blank">
         <FontAwesomeIcon icon={ faFacebookSquare } />
       </ShareIcon>
-      <ShareIcon href={ getRedditShareUrl({ text: guide.title, url: guide.url })} target="_blank">
+      <ShareIcon href={ getRedditShareUrl({ text: title, url: url })} target="_blank">
         <FontAwesomeIcon icon={ faRedditSquare } />
       </ShareIcon>
     </ShareIconsList>
   </ShareWrap>
 );
 
-export default ShareGuide;
+export default SharePage;

pages/guides/[guide].js

@@ -3,7 +3,7 @@ import GuideLayout from 'layouts/guide';
 import { serverOnlyProps } from 'lib/server';
 import GuideHeader from 'components/guide-header';
 import GuideBody from 'components/guide-body';
-import ShareGuide from 'components/share-guide';
+import SharePage from 'components/share-page';
 import GuideFooter from 'components/guide-footer';
 import { getRequestedGuide } from 'lib/guide';
 import Helmet from 'components/helmet';
@@ -21,7 +21,7 @@ const Guide = ({ guide }) => {
       <GuideHeader guide={ guide } />
       <GuideBody>
         <GuideContent />
-        <ShareGuide guide={ guide } />
+        <SharePage title={ guide.title } url={ guide.url } twitterUsername={ guide.author.twitter } />
       </GuideBody>
       <GuideFooter guide={ guide } />
     </GuideLayout>