github
/
developer-roadmap
mirror of https://github.com/kamranahmedse/developer-roadmap.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add footer for guide pages

Browse Source
pull/1331/head
Kamran Ahmed 5 years ago
parent 62f8e0961f
commit 4fa6747d6e
5 changed files with 117 additions and 71 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 23
      .editorconfig
  2. 79
      components/guide-footer/index.js
  3. 70
      components/guide-footer/style.js
  4. 6
      layouts/default/global.scss
  5. 10
      pages/guides/[guide].js

23
.editorconfig
Unescape View File

@ -0,0 +1,23 @@
# EditorConfig for the node-soap library - head over to editorconfig.org to see if you editor supports this file.
# this is the topmost .editorconfig file
root = true
[*]
end_of_line = lf
insert_final_newline = true
[*.xml]
insert_final_newline = false
[*.js]
indent_style = space
indent_size = 2
[*.json]
indent_style = space
indent_size = 2
[{package.json,.travis.yml}]
indent_style = space
indent_size = 2

79
components/guide-footer/index.js
Unescape View File

@ -1,44 +1,51 @@
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faGithub, faFacebookSquare, faTwitterSquare, faTwitter, faHackerNewsSquare, faRedditSquare } from '@fortawesome/free-brands-svg-icons' import { faFacebookSquare, faGithub, faHackerNewsSquare, faRedditSquare, faTwitter, faTwitterSquare } from '@fortawesome/free-brands-svg-icons'
import { AuthorBio, AuthorImg, AuthorInfoWrap, AuthorMeta, ContributeIcon, FooterWrap, ShareIcons, ShareWrap, WrittenBy } from './style'; import { AuthorBio, AuthorImg, AuthorInfoWrap, AuthorMeta, ContributeIcon, FooterBg, FooterContainer, FooterWrap, ShareIcons, ShareWrap } from './style';
const GuideFooter = (props) => ( const GuideFooter = (props) => (
<FooterWrap> <FooterWrap>
<ShareWrap> <FooterBg className="border-top">
<ContributeIcon> <FooterContainer>
<a href="#"> <ShareWrap>
<span>Improve this Guide </span> <ContributeIcon>
<FontAwesomeIcon icon={ faGithub } /> <a href="#">
</a> <span className="d-none d-sm-none d-md-inline d-lg-inline d-xl-inline">Improve this Guide </span>
</ContributeIcon> <span className="d-inline d-sm-inline d-md-none d-lg-none d-xl-none">Contribute </span>
<ShareIcons> <FontAwesomeIcon icon={faGithub}/>
<span>Help spread the word</span> </a>
<a href="#"><FontAwesomeIcon icon={ faTwitterSquare } /></a> </ContributeIcon>
<a href="#"><FontAwesomeIcon icon={ faFacebookSquare } /></a> <ContributeIcon hasMargins>
<a href="#"><FontAwesomeIcon icon={ faRedditSquare } /></a> <a href="#">
<a href="#"><FontAwesomeIcon icon={ faHackerNewsSquare } /></a> <span className="d-none d-sm-none d-md-inline d-lg-inline d-xl-inline">Follow the author </span>
</ShareIcons> <span className="d-inline d-sm-inline d-md-none d-lg-none d-xl-none">Author </span>
</ShareWrap> <FontAwesomeIcon icon={faTwitter}/>
<AuthorInfoWrap className="border-top"> </a>
<AuthorImg src="/static/authors/kamranahmedse.jpeg" alt="" /> </ContributeIcon>
<AuthorMeta> <ShareIcons>
<WrittenBy>Written By</WrittenBy> <span className="d-none d-sm-none d-md-none d-lg-inline d-xl-inline">Help spread the word</span>
<h4><a href="#">Kamran Ahmed</a></h4> <span className="d-inline d-sm-inline d-md-inline d-lg-none d-xl-none">Share</span>
<AuthorBio>Lead engineer at Tajawal. Created roadmap.sh. Lover of web and opensource</AuthorBio> <a href="#"><FontAwesomeIcon icon={faTwitterSquare}/></a>
<p className="social-links"> <a href="#"><FontAwesomeIcon icon={faFacebookSquare}/></a>
<a href="#"> <a href="#"><FontAwesomeIcon icon={faRedditSquare}/></a>
<FontAwesomeIcon icon={ faTwitter } /> <a href="#"><FontAwesomeIcon icon={faHackerNewsSquare}/></a>
Follow on Twitter </ShareIcons>
</a> </ShareWrap>
<a href="#"> </FooterContainer>
<FontAwesomeIcon icon={ faGithub } /> </FooterBg>
Follow on GitHub
</a> <FooterBg className="border-top">
</p> <FooterContainer>
</AuthorMeta> <AuthorInfoWrap>
</AuthorInfoWrap> <AuthorImg src="/static/authors/kamranahmedse.jpeg" alt=""/>
<AuthorMeta>
<h4><a href="#">Kamran Ahmed</a></h4>
<AuthorBio>Lead engineer at Tajawal. Lover of all things web and opensource. Created roadmap.sh to help the confused ones.</AuthorBio>
</AuthorMeta>
</AuthorInfoWrap>
</FooterContainer>
</FooterBg>
</FooterWrap> </FooterWrap>
); );
export default GuideFooter; export default GuideFooter;

70
components/guide-footer/style.js
Unescape View File

@ -2,14 +2,23 @@ import styled from 'styled-components';
export const FooterWrap = styled.div` export const FooterWrap = styled.div`
display: block; display: block;
margin-top: 40px; margin-top: 50px;
`;
export const FooterContainer = styled.div`
max-width: 750px;
margin: 0 auto;
padding: 0 20px;
`;
export const FooterBg = styled.div`
`; `;
export const ShareWrap = styled.div` export const ShareWrap = styled.div`
display: flex; padding: 17px 0px;
justify-content: space-between;
margin-bottom: 15px;
align-items: center; align-items: center;
justify-content: center;
display: flex;
a { a {
display: flex; display: flex;
@ -18,8 +27,8 @@ export const ShareWrap = styled.div`
} }
svg { svg {
height: 22px; height: 18px;
color: #101010; color: #757575;
margin-left: 7px; margin-left: 7px;
} }
`; `;
@ -28,21 +37,38 @@ export const ContributeIcon = styled.div`
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin: ${props => props.hasMargins ? '0 30px' : '0'};
span {
margin-right: 4px;
}
a {
color: #757575;
font-size: 14px;
}
`; `;
export const ShareIcons = styled.div` export const ShareIcons = styled.div`
display: flex; display: flex;
align-items: center;
color: #757575;
font-size: 14px;
span {
margin-right: 4px;
}
`; `;
export const AuthorInfoWrap = styled.div` export const AuthorInfoWrap = styled.div`
display: flex; display: flex;
align-items: center; align-items: center;
padding: 30px 0 70px; padding: 40px 0;
h4 { h4 {
position: relative; position: relative;
font-size: 22px; font-size: 22px;
margin: 8px 0; margin: 10px 0;
line-height: 17px; line-height: 17px;
a { a {
@ -55,13 +81,9 @@ export const AuthorInfoWrap = styled.div`
margin: 5px 0 0; margin: 5px 0 0;
a { a {
border: 1px solid #757575;
background: transparent; background: transparent;
color: #757575; color: #101010;
padding: 4px 10px;
margin-right: 10px; margin-right: 10px;
border-radius: 5px;
font-size: 10px;
text-transform: uppercase; text-transform: uppercase;
text-decoration: none; text-decoration: none;
display: inline-flex; display: inline-flex;
@ -73,9 +95,7 @@ export const AuthorInfoWrap = styled.div`
} }
svg { svg {
height: 16px; height: 18px;
margin-right: 8px;
fill: #757575;
} }
} }
} }
@ -87,9 +107,13 @@ export const AuthorInfoWrap = styled.div`
export const AuthorBio = styled.p` export const AuthorBio = styled.p`
font-size: 15px; font-size: 15px;
line-height: 20px; line-height: 24px;
color: #757575; color: #757575;
margin-bottom: 7px; margin-bottom: 0;
a {
font-weight: 500;
}
`; `;
export const AuthorImg = styled.img` export const AuthorImg = styled.img`
@ -100,16 +124,8 @@ export const AuthorImg = styled.img`
margin-right: 22px; margin-right: 22px;
`; `;
export const WrittenBy = styled.p`
font-size: 11px;
text-transform: uppercase;
color: #757575;
display: block;
margin-bottom: 0;
`;
export const AuthorMeta = styled.div` export const AuthorMeta = styled.div`
display: flex; display: flex;
justify-content: center; justify-content: center;
flex-direction: column; flex-direction: column;
`; `;

6
layouts/default/global.scss
Unescape View File

@ -10,11 +10,11 @@ ul li, ol li {
} }
.border-top { .border-top {
border-top: 1px solid #eaeaea; border-top: 1px solid #eaeaea !important;
} }
.border-bottom { .border-bottom {
border-bottom: 1px solid #eaeaea; border-bottom: 1px solid #eaeaea !important;
} }
.bg-light { .bg-light {
@ -56,4 +56,4 @@ code:not([class]) {
padding: 0 5px; padding: 0 5px;
word-wrap: normal; word-wrap: normal;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.125) box-shadow: 0 1px 1px rgba(0, 0, 0, 0.125)
} }

10
pages/guides/[guide].js
Unescape View File

@ -10,12 +10,12 @@ import GuideFooter from '../../components/guide-footer';
const Guide = ({ guide }) => { const Guide = ({ guide }) => {
return ( return (
<GuideLayout> <GuideLayout>
<GuideHeader /> <GuideHeader/>
<GuideBody> <GuideBody>
<GuideContent /> <GuideContent/>
<ShareGuide /> <ShareGuide/>
<GuideFooter />
</GuideBody> </GuideBody>
<GuideFooter/>
</GuideLayout> </GuideLayout>
); );
}; };
@ -31,4 +31,4 @@ Guide.getInitialProps = serverOnlyProps(({ req }) => {
}; };
}); });
export default Guide; export default Guide;

Write Preview
Loading…
Cancel
Save