Update share icons and guide footer

components/guide-footer/index.js

@@ -0,0 +1,31 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faGithub, faTwitter } from '@fortawesome/free-brands-svg-icons'
+import { AuthorImg, FooterWrap, AuthorInfoWrap, WrittenBy, AuthorBio } from './style';
+
+
+const GuideFooter = (props) => (
+  <FooterWrap>
+    <AuthorImg src="/static/authors/kamranahmedse.jpeg" alt="" />
+    <AuthorInfoWrap>
+      <WrittenBy>Written By</WrittenBy>
+      <h4><a href="#">Kamran Ahmed</a></h4>
+      <AuthorBio>Lead engineer at Tajawal. Created roadmap.sh. Lover of web and opensource</AuthorBio>
+      <p className="social-links">
+        <a href="#">
+          <FontAwesomeIcon icon={ faTwitter } />
+          Follow on Twitter
+        </a>
+        <a href="#">
+          <FontAwesomeIcon icon={ faGithub } />
+          Follow on GitHub
+        </a>
+      </p>
+      { /*<span className="social-icons">*/ }
+      { /*<a href="#"><TwitterIcon /></a>*/ }
+      { /*<a href="#"><GitHubIcon /></a>*/ }
+      { /*</span>*/ }
+    </AuthorInfoWrap>
+  </FooterWrap>
+);
+
+export default GuideFooter;

components/guide-footer/style.js

@@ -0,0 +1,81 @@
+import styled from 'styled-components';
+
+export const FooterWrap = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 20px 0 70px;
+  margin-top: 70px;
+
+  h4 {
+    position: relative;
+    font-size: 22px;
+    margin: 8px 0;
+    line-height: 17px;
+
+    a {
+      font-weight: 700;
+      color: #101010;
+    }
+  }
+
+  .social-links {
+    margin: 5px 0 0;
+
+    a {
+      border: 1px solid #757575;
+      background: transparent;
+      color: #757575;
+      padding: 4px 10px;
+      margin-right: 10px;
+      border-radius: 5px;
+      font-size: 10px;
+      text-transform: uppercase;
+      text-decoration: none;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      
+      &:hover {
+        border-color: #757575;
+      }
+
+      svg {
+        height: 16px;
+        margin-right: 8px;
+        fill: #757575;
+      }
+    }  
+  }
+  
+  .author-description {
+    margin-bottom: 14px;
+  }
+`;
+
+export const AuthorBio = styled.p`
+  font-size: 15px;
+  line-height: 20px;
+  color: #757575;
+  margin-bottom: 7px;
+`;
+
+export const AuthorImg = styled.img`
+  border-radius: 100%;
+  height: 100px;
+  width: 100px;
+  border-radius: 100%;
+  margin-right: 22px;
+`;
+
+export const WrittenBy = styled.p`
+  font-size: 11px;
+  text-transform: uppercase;
+  color: #757575;
+  display: block;
+  margin-bottom: 0;
+`;
+export const AuthorInfoWrap = styled.div`
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+`;

components/icons/github.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" aria-label="GitHub" role="img" viewBox="0 0 512 512" width="22px" height="20px">
+    <rect width="512" height="512" rx="15%"/>
+    <path fill="#fff" d="M335 499c14 0 12 17 12 17H165s-2-17 12-17c13 0 16-6 16-12l-1-50c-71 16-86-28-86-28-12-30-28-37-28-37-24-16 1-16 1-16 26 2 40 26 40 26 22 39 59 28 74 22 2-17 9-28 16-35-57-6-116-28-116-126 0-28 10-51 26-69-3-6-11-32 3-67 0 0 21-7 70 26 42-12 86-12 128 0 49-33 70-26 70-26 14 35 6 61 3 67 16 18 26 41 26 69 0 98-60 120-117 126 10 8 18 24 18 48l-1 70c0 6 3 12 16 12z"/>
+</svg>

components/share-guide/index.js

@@ -1,13 +1,14 @@
-import { ShareWrap, HackerNewsIcon, ShareIcon, ShareIconsList } from './style';
-import TwitterIcon from '../icons/twitter.svg';
-import FacebookIcon from '../icons/facebook.svg';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faFacebookSquare, faHackerNewsSquare, faTwitterSquare } from '@fortawesome/free-brands-svg-icons'
+
+import { ShareIcon, ShareIconsList, ShareWrap } from './style';
 
 const ShareGuide = (props) => (
   <ShareWrap>
     <ShareIconsList className="d-sm-none d-md-none d-lg-flex d-xl-flex">
-      <ShareIcon><a href="#"><TwitterIcon /></a></ShareIcon>
-      <ShareIcon><a href="#"><FacebookIcon /></a></ShareIcon>
-      <HackerNewsIcon href="#">Y</HackerNewsIcon>
+      <ShareIcon><a href="#"><FontAwesomeIcon icon={ faTwitterSquare } /></a></ShareIcon>
+      <ShareIcon><a href="#"><FontAwesomeIcon icon={ faFacebookSquare } /></a></ShareIcon>
+      <ShareIcon><a href="#"><FontAwesomeIcon icon={ faHackerNewsSquare } /></a></ShareIcon>
     </ShareIconsList>
   </ShareWrap>
 );

components/share-guide/style.js

@@ -22,27 +22,8 @@ export const ShareWrap = styled.div`
 
 export const ShareIcon = styled.span`
   margin-bottom: 7px;
-`;
-
-export const HackerNewsIcon = styled.a`
-    background: black;
-    color: white;
-    height: 20px;
-    width: 19px;
-    text-align: center;
-    border-radius: 1px;
-    line-height: 15px;
-    font-size: 15px;
-    font-weight: bold;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    text-decoration: none;
-    font-family: Arial,Helvetica Neue,Helvetica,sans-serif;
-    margin-top: 5px;
-    
-    &:hover {
-      color: white;
-      text-decoration: none;
-    }
+  svg {
+    height: 26px;
+    color: #101010;
+  }
 `;

layouts/default/index.js

@@ -1,12 +1,9 @@
-import { faGithub, fab } from '@fortawesome/free-brands-svg-icons';
-import { faArrowRight } from '@fortawesome/free-solid-svg-icons'
+import { fab } from '@fortawesome/free-brands-svg-icons';
 import { library } from '@fortawesome/fontawesome-svg-core';
 
 import Head from './head';
 import './global.scss';
 
-library.add(fab, faGithub, faArrowRight);
-
 const DefaultLayout = (props) => (
   <div>
     <Head />

pages/guides/[guide].js

@@ -5,6 +5,7 @@ import GuideHeader from '../../components/guide-header';
 import GuideContent from '../../data/guides/keep-it-clean.md';
 import GuideBody from '../../components/guide-body';
 import ShareGuide from '../../components/share-guide';
+import GuideFooter from '../../components/guide-footer';
 
 const Guide = ({ guide }) => {
   return (
@@ -13,6 +14,7 @@ const Guide = ({ guide }) => {
       <GuideBody>
         <GuideContent />
         <ShareGuide />
+        <GuideFooter />
       </GuideBody>
     </GuideLayout>
   );