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
Split 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 { faGithub, faFacebookSquare, faTwitterSquare, faTwitter, faHackerNewsSquare, faRedditSquare } from '@fortawesome/free-brands-svg-icons'
import { AuthorBio, AuthorImg, AuthorInfoWrap, AuthorMeta, ContributeIcon, FooterWrap, ShareIcons, ShareWrap, WrittenBy } from './style';
import { faFacebookSquare, faGithub, faHackerNewsSquare, faRedditSquare, faTwitter, faTwitterSquare } from '@fortawesome/free-brands-svg-icons'
import { AuthorBio, AuthorImg, AuthorInfoWrap, AuthorMeta, ContributeIcon, FooterBg, FooterContainer, FooterWrap, ShareIcons, ShareWrap } from './style';
const GuideFooter = (props) => (
<FooterWrap>
<ShareWrap>
<ContributeIcon>
<a href="#">
<span>Improve this Guide </span>
<FontAwesomeIcon icon={ faGithub } />
</a>
</ContributeIcon>
<ShareIcons>
<span>Help spread the word</span>
<a href="#"><FontAwesomeIcon icon={ faTwitterSquare } /></a>
<a href="#"><FontAwesomeIcon icon={ faFacebookSquare } /></a>
<a href="#"><FontAwesomeIcon icon={ faRedditSquare } /></a>
<a href="#"><FontAwesomeIcon icon={ faHackerNewsSquare } /></a>
</ShareIcons>
</ShareWrap>
<AuthorInfoWrap className="border-top">
<AuthorImg src="/static/authors/kamranahmedse.jpeg" alt="" />
<AuthorMeta>
<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>
</AuthorMeta>
</AuthorInfoWrap>
<FooterBg className="border-top">
<FooterContainer>
<ShareWrap>
<ContributeIcon>
<a href="#">
<span className="d-none d-sm-none d-md-inline d-lg-inline d-xl-inline">Improve this Guide </span>
<span className="d-inline d-sm-inline d-md-none d-lg-none d-xl-none">Contribute </span>
<FontAwesomeIcon icon={faGithub}/>
</a>
</ContributeIcon>
<ContributeIcon hasMargins>
<a href="#">
<span className="d-none d-sm-none d-md-inline d-lg-inline d-xl-inline">Follow the author </span>
<span className="d-inline d-sm-inline d-md-none d-lg-none d-xl-none">Author </span>
<FontAwesomeIcon icon={faTwitter}/>
</a>
</ContributeIcon>
<ShareIcons>
<span className="d-none d-sm-none d-md-none d-lg-inline d-xl-inline">Help spread the word</span>
<span className="d-inline d-sm-inline d-md-inline d-lg-none d-xl-none">Share</span>
<a href="#"><FontAwesomeIcon icon={faTwitterSquare}/></a>
<a href="#"><FontAwesomeIcon icon={faFacebookSquare}/></a>
<a href="#"><FontAwesomeIcon icon={faRedditSquare}/></a>
<a href="#"><FontAwesomeIcon icon={faHackerNewsSquare}/></a>
</ShareIcons>
</ShareWrap>
</FooterContainer>
</FooterBg>
<FooterBg className="border-top">
<FooterContainer>
<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>
);
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`
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`
display: flex;
justify-content: space-between;
margin-bottom: 15px;
padding: 17px 0px;
align-items: center;
justify-content: center;
display: flex;
a {
display: flex;
@ -18,8 +27,8 @@ export const ShareWrap = styled.div`
}
svg {
height: 22px;
color: #101010;
height: 18px;
color: #757575;
margin-left: 7px;
}
`;
@ -28,21 +37,38 @@ export const ContributeIcon = styled.div`
display: flex;
align-items: 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`
display: flex;
align-items: center;
color: #757575;
font-size: 14px;
span {
margin-right: 4px;
}
`;
export const AuthorInfoWrap = styled.div`
display: flex;
align-items: center;
padding: 30px 0 70px;
padding: 40px 0;
h4 {
position: relative;
font-size: 22px;
margin: 8px 0;
margin: 10px 0;
line-height: 17px;
a {
@ -55,13 +81,9 @@ export const AuthorInfoWrap = styled.div`
margin: 5px 0 0;
a {
border: 1px solid #757575;
background: transparent;
color: #757575;
padding: 4px 10px;
color: #101010;
margin-right: 10px;
border-radius: 5px;
font-size: 10px;
text-transform: uppercase;
text-decoration: none;
display: inline-flex;
@ -73,9 +95,7 @@ export const AuthorInfoWrap = styled.div`
}
svg {
height: 16px;
margin-right: 8px;
fill: #757575;
height: 18px;
}
}
}
@ -87,9 +107,13 @@ export const AuthorInfoWrap = styled.div`
export const AuthorBio = styled.p`
font-size: 15px;
line-height: 20px;
line-height: 24px;
color: #757575;
margin-bottom: 7px;
margin-bottom: 0;
a {
font-weight: 500;
}
`;
export const AuthorImg = styled.img`
@ -100,16 +124,8 @@ export const AuthorImg = styled.img`
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`
display: flex;
justify-content: center;
flex-direction: column;
`;
`;

6
layouts/default/global.scss
Unescape View File

@ -10,11 +10,11 @@ ul li, ol li {
}
.border-top {
border-top: 1px solid #eaeaea;
border-top: 1px solid #eaeaea !important;
}
.border-bottom {
border-bottom: 1px solid #eaeaea;
border-bottom: 1px solid #eaeaea !important;
}
.bg-light {
@ -56,4 +56,4 @@ code:not([class]) {
padding: 0 5px;
word-wrap: normal;
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 }) => {
return (
<GuideLayout>
<GuideHeader />
<GuideHeader/>
<GuideBody>
<GuideContent />
<ShareGuide />
<GuideFooter />
<GuideContent/>
<ShareGuide/>
</GuideBody>
<GuideFooter/>
</GuideLayout>
);
};
@ -31,4 +31,4 @@ Guide.getInitialProps = serverOnlyProps(({ req }) => {
};
});
export default Guide;
export default Guide;

Write Preview
Loading…
Cancel
Save