From 372845f6f89fa402c5dc030e0a57560ac5dfa836 Mon Sep 17 00:00:00 2001 From: Kamran Ahmed Date: Sat, 2 Nov 2019 19:41:40 +0400 Subject: [PATCH] Add share icons on guide page --- components/guide-body/style.js | 1 + components/guide-header/style.js | 2 +- components/icons/facebook.svg | 3 ++ components/icons/twitter.svg | 3 ++ components/share-guide/index.js | 15 ++++++++++ components/share-guide/style.js | 48 ++++++++++++++++++++++++++++++++ data/guides/keep-it-clean.md | 5 ++++ pages/guides/[guide].js | 4 ++- 8 files changed, 79 insertions(+), 2 deletions(-) create mode 100644 components/icons/facebook.svg create mode 100644 components/icons/twitter.svg create mode 100644 components/share-guide/index.js create mode 100644 components/share-guide/style.js create mode 100644 data/guides/keep-it-clean.md diff --git a/components/guide-body/style.js b/components/guide-body/style.js index fd5dbba88..5a7de00b8 100644 --- a/components/guide-body/style.js +++ b/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; diff --git a/components/guide-header/style.js b/components/guide-header/style.js index b2ad42691..076bbd232 100644 --- a/components/guide-header/style.js +++ b/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` diff --git a/components/icons/facebook.svg b/components/icons/facebook.svg new file mode 100644 index 000000000..578ef3814 --- /dev/null +++ b/components/icons/facebook.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/components/icons/twitter.svg b/components/icons/twitter.svg new file mode 100644 index 000000000..213bf95f1 --- /dev/null +++ b/components/icons/twitter.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/components/share-guide/index.js b/components/share-guide/index.js new file mode 100644 index 000000000..e439960fd --- /dev/null +++ b/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) => ( + + + + + Y + + +); + +export default ShareGuide; \ No newline at end of file diff --git a/components/share-guide/style.js b/components/share-guide/style.js new file mode 100644 index 000000000..dd245d50e --- /dev/null +++ b/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; + } +`; \ No newline at end of file diff --git a/data/guides/keep-it-clean.md b/data/guides/keep-it-clean.md new file mode 100644 index 000000000..24c51000d --- /dev/null +++ b/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 🙌 \ No newline at end of file diff --git a/pages/guides/[guide].js b/pages/guides/[guide].js index 2ddd20254..a14d99144 100644 --- a/pages/guides/[guide].js +++ b/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 }) => { + );