Add share icons on guide page

components/guide-body/style.js

@@ -1,6 +1,7 @@
 import styled from 'styled-components';
 
 export const GuideBodyWrap = styled.div`
+  position: relative;
   max-width: 750px;
   margin: 0 auto;
   padding: 0 20px;

components/guide-header/style.js

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 export const HeaderWrap = styled.div`
   padding: 80px 15px 45px;
   text-align: center;
-  margin-bottom: 50px;
+  margin-bottom: 35px;
 `;
 
 export const GuideTitle = styled.h1`

components/icons/facebook.svg

@@ -0,0 +1,3 @@
+<svg width="29" height="29">
+    <path d="M23.2 5H5.8a.8.8 0 0 0-.8.8V23.2c0 .44.35.8.8.8h9.3v-7.13h-2.38V13.9h2.38v-2.38c0-2.45 1.55-3.66 3.74-3.66 1.05 0 1.95.08 2.2.11v2.57h-1.5c-1.2 0-1.48.57-1.48 1.4v1.96h2.97l-.6 2.97h-2.37l.05 7.12h5.1a.8.8 0 0 0 .79-.8V5.8a.8.8 0 0 0-.8-.79"></path>
+</svg>

components/icons/twitter.svg

@@ -0,0 +1,3 @@
+<svg width="29" height="29">
+    <path d="M22.05 7.54a4.47 4.47 0 0 0-3.3-1.46 4.53 4.53 0 0 0-4.53 4.53c0 .35.04.7.08 1.05A12.9 12.9 0 0 1 5 6.89a5.1 5.1 0 0 0-.65 2.26c.03 1.6.83 2.99 2.02 3.79a4.3 4.3 0 0 1-2.02-.57v.08a4.55 4.55 0 0 0 3.63 4.44c-.4.08-.8.13-1.21.16l-.81-.08a4.54 4.54 0 0 0 4.2 3.15 9.56 9.56 0 0 1-5.66 1.94l-1.05-.08c2 1.27 4.38 2.02 6.94 2.02 8.3 0 12.86-6.9 12.84-12.85.02-.24 0-.43 0-.65a8.68 8.68 0 0 0 2.26-2.34c-.82.38-1.7.62-2.6.72a4.37 4.37 0 0 0 1.95-2.51c-.84.53-1.81.9-2.83 1.13z"></path>
+</svg>

components/share-guide/index.js

@@ -0,0 +1,15 @@
+import { ShareWrap, HackerNewsIcon, ShareIcon, ShareIconsList } from './style';
+import TwitterIcon from '../icons/twitter.svg';
+import FacebookIcon from '../icons/facebook.svg';
+
+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>
+    </ShareIconsList>
+  </ShareWrap>
+);
+
+export default ShareGuide;

components/share-guide/style.js

@@ -0,0 +1,48 @@
+import styled from 'styled-components';
+
+export const ShareIconsList = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  position: sticky;
+  top: 50px;
+`;
+
+export const ShareWrap = styled.div`
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  position: absolute;
+  padding: 0 0;
+  top: 0;
+  left: -50px;
+  height: 100%;
+`;
+
+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;
+    }
+`;

data/guides/keep-it-clean.md

@@ -0,0 +1,5 @@
+About a week ago, I relocated to Berlin and among the things that I tried for the first time, was cooking a meal myself. If you have ever cooked one, you would probably know that things tend to get messy pretty fast; you haven't completed cooking yet and are already horrified by the sink filled with those dirty pans, skillets, mixing bowls, a pile of dirty plates and all those greasy utensils already shouting for a scrub. Somtimes you have to waste an hour or two after cooking the meal to clean up the mess that you made. But it did not have to be this way, what if you were a little cautious while you were cooking, what if you had reused some of those not-so-dirty utensils, what if you had reused some plates instead of grabbing a new one every time, what if were not so lazy and had cleaned some of those utensils while you were cooking, what if you had kept putting the seasonings back after they had been used. What if you had thought about some of these what ifs and saved yourself some time and comfort so that you could enjoy that delicious meal afterwards without thinking about cleaning up the mess you made along the way.
+
+We can apply the same concept of cooking to development. I was working on fixing some tangled mess of a code today and as I dig deeper I started finding the patterns, the code that could have been easily made better had the developer put a little effort into fixing it during the inception instead of leaving it "for later". Legacy code is mostly the result of developer not striving to "stay clean". Wrong things that may seem little while you are doing them, could easily pile up and haunt you or the next developer at later time. As a developer you should have the habbit to keep it clean while you are coding. Like cooking where you can avoid more mess by reusing a "dirty" plate, how about you reuse an already written method by refactoring it a little. Like cooking, where you can put the seasonings back in place to keep it organized, how about you think for the rightful place of the functionality that you are about to write instead of stubbing into the class in front of you. Like washing the dirty utensils while you wait for the oven, how about you clean up the messy code that you wrote while you are waiting for your PR to be merged or while you are waiting for the answer to your email. As with the dirty utensils, you tend to make more dirty utensils, thinking that you will clean them all at once; same goes for the code, having bad code is going to attract more bad code and give you and others excuse to refactor it "later". So do yourself and others a favor, teach yourself the habit of keeping it clean while you are coding instead of leaving it for "refactoring later".
+
+**Fun Fact:** the meal, being the first meal I ever cooked, tasted awful but hey I ate it without having to think about cleaning up the mess afterwards. And, no developers were harmed while writing this piece 🙌

pages/guides/[guide].js

@@ -2,8 +2,9 @@ import GuideLayout from '../../layouts/guide';
 import { serverOnlyProps } from '../../lib/server';
 
 import GuideHeader from '../../components/guide-header';
-import GuideContent from '../../data/guides/design-patterns-for-humans.md';
+import GuideContent from '../../data/guides/keep-it-clean.md';
 import GuideBody from '../../components/guide-body';
+import ShareGuide from '../../components/share-guide';
 
 const Guide = ({ guide }) => {
   return (
@@ -11,6 +12,7 @@ const Guide = ({ guide }) => {
       <GuideHeader />
       <GuideBody>
         <GuideContent />
+        <ShareGuide />
       </GuideBody>
     </GuideLayout>
   );