gaspersic/developer-roadmap
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Split roadmap header to separate component

Browse Source
This commit is contained in:
Kamran Ahmed
2019-11-30 09:06:06 +04:00
parent b5c65b408b
commit 618b55f601
9 changed files with 112 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
components/roadmap-body/index.js Normal file
View File

@ -0,0 +1,33 @@
import { Summary, SummaryContainer } from './style';
import SharePage from 'components/share-page';
import MdRenderer from 'components/md-renderer';
const UpcomingGuide = require(`../../storage/guides/upcoming.md`).default;
const RoadmapBody = ({ roadmap }) => {
return (
<SummaryContainer>
<Summary>
{
roadmap.upcoming && (
<div className="container container-small">
<MdRenderer>
<UpcomingGuide />
</MdRenderer>
</div>
)
}
{
!roadmap.upcoming && (
<div className="container container-small text-left">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut beatae blanditiis commodi, consequatur, dicta distinctio esse et id, ipsa labore libero nisi odit placeat possimus saepe sed vel vitae voluptate?</p>
<SharePage title={ roadmap.description } url={ roadmap.url } />
</div>
)
}
</Summary>
</SummaryContainer>
)
};
export default RoadmapBody;

13
components/roadmap-body/style.js Normal file
View File

@ -0,0 +1,13 @@
import styled from 'styled-components';
export const SummaryContainer = styled.div``;
export const Summary = styled.div`
text-align: center;
padding: 40px 0 50px;
min-height: 400px;
.container {
position: relative;
}
`;

43
components/roadmap-header/index.js Normal file
View File

@ -0,0 +1,43 @@
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faArrowLeft, faClock, faEnvelope, faHandshake } from '@fortawesome/free-solid-svg-icons';
import { BadgeLink, BadgesList, DarkBadge, PrimaryBadge, SecondaryBadge } from 'components/badges';
import siteConfig from "storage/site";
import { Description, Header, Title, VersionList } from './style';
const RoadmapHeader = ({ roadmap }) => (
<Header className="border-bottom">
<Title>{ roadmap.title }</Title>
<Description>{ roadmap.description }</Description>
<BadgesList className="mt-4">
<BadgeLink href="/roadmaps">
<DarkBadge>
<FontAwesomeIcon icon={ faArrowLeft } />
Other Roadmaps
</DarkBadge>
</BadgeLink>
{ roadmap.upcoming && (
<SecondaryBadge>
<FontAwesomeIcon icon={ faClock } />
Upcoming Roadmap
</SecondaryBadge>
) }
{ !roadmap.upcoming && (
<BadgeLink href={ `${siteConfig.url.issue}?title=[${roadmap.title}] - Title Here` } target="_blank">
<SecondaryBadge>
<FontAwesomeIcon icon={ faHandshake } />
Suggest Changes
</SecondaryBadge>
</BadgeLink>
) }
<BadgeLink href="/signup">
<PrimaryBadge>
<FontAwesomeIcon icon={ faEnvelope } />
Send me Updates
</PrimaryBadge>
</BadgeLink>
</BadgesList>
</Header>
);
export default RoadmapHeader;

17
components/roadmap-header/style.js Normal file
View File

@ -0,0 +1,17 @@
import styled from 'styled-components';
export const Header = styled.div`
text-align: center;
padding: 45px 30px 30px;
`;
export const Title = styled.h1`
font-weight: 700;
margin-bottom: 12px;
font-size: 48px;
`;
export const Description = styled.p`
font-size: 16px;
color: #444444;
`;

72
components/roadmap-summary/index.js
View File

@ -1,72 +0,0 @@
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faArrowLeft, faClock, faEnvelope, faHandshake } from '@fortawesome/free-solid-svg-icons';
import { Description, Header, Summary, SummaryContainer, Title, VersionList } from './style';
import SharePage from 'components/share-page';
import { BadgeLink, BadgesList, DarkBadge, PrimaryBadge, SecondaryBadge } from 'components/badges';
import siteConfig from "storage/site";
import MdRenderer from '../md-renderer';
const UpcomingGuide = require(`../../storage/guides/upcoming.md`).default;
const RoadmapSummary = ({ roadmap }) => {
return (
<SummaryContainer>
<Header>
<Title>{ roadmap.title }</Title>
<Description>{ roadmap.description }</Description>
<BadgesList className="mt-4">
<BadgeLink href="/roadmaps">
<DarkBadge>
<FontAwesomeIcon icon={ faArrowLeft } />
Other Roadmaps
</DarkBadge>
</BadgeLink>
{ roadmap.upcoming && (
<SecondaryBadge>
<FontAwesomeIcon icon={ faClock } />
Upcoming Roadmap
</SecondaryBadge>
) }
{ !roadmap.upcoming && (
<BadgeLink href={ `${siteConfig.url.issue}?title=[${roadmap.title}] - Title Here` } target="_blank">
<SecondaryBadge>
<FontAwesomeIcon icon={ faHandshake } />
Suggest Changes
</SecondaryBadge>
</BadgeLink>
) }
<BadgeLink href="/signup">
<PrimaryBadge>
<FontAwesomeIcon icon={ faEnvelope } />
Send me Updates
</PrimaryBadge>
</BadgeLink>
</BadgesList>
<VersionList className="border-bottom" />
</Header>
<Summary>
{
roadmap.upcoming && (
<div className="container container-small">
<MdRenderer>
<UpcomingGuide />
</MdRenderer>
</div>
)
}
{
!roadmap.upcoming && (
<div className="container text-left">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut beatae blanditiis commodi, consequatur, dicta distinctio esse et id, ipsa labore libero nisi odit placeat possimus saepe sed vel vitae voluptate?</p>
<SharePage title={ roadmap.description } url={ roadmap.url } />
</div>
)
}
</Summary>
</SummaryContainer>
)
};
export default RoadmapSummary;

67
components/roadmap-summary/style.js
View File

@ -1,67 +0,0 @@
import styled from 'styled-components';
export const SummaryContainer = styled.div``;
export const Header = styled.div`
text-align: center;
padding: 45px 30px 55px;
`;
export const Summary = styled.div`
text-align: center;
padding: 0 0 50px;
.container {
position: relative;
}
`;
export const Title = styled.h1`
font-weight: 700;
margin-bottom: 12px;
font-size: 48px;
`;
export const Description = styled.p`
font-size: 16px;
color: #444444;
`;
export const Image = styled.img`
width: 100%;
`;
export const VersionList = styled.div`
margin: 35px 0 15px;
`;
export const VersionLink = styled.a`
display: inline-block;
position: relative;
padding: 5px 10px 8px;
text-decoration: none;
color: rgb(102, 102, 102);
font-size: 14px;
font-weight: 400;
text-transform: capitalize;
&.active, &.active:hover {
color: #2d2d2d;
&:after {
position: absolute;
content: "";
display: block;
height: 0;
left: 9px;
right: 9px;
bottom: -1px;
border-bottom: 2px solid currentColor;
}
}
&:hover {
text-decoration: none;
color: #111111;
}
`;

2
components/share-page/index.js
View File

@ -10,7 +10,7 @@ const SharePage = ({
twitterUsername,
}) => (
<ShareWrap>
<ShareIconsList className="d-sm-none d-md-none d-lg-flex d-xl-flex">
<ShareIconsList className="d-none d-sm-flex d-md-flex d-lg-flex d-xl-flex">
<ShareIcon
href={ getTwitterShareUrl({
text: `${title} ${twitterUsername ? `by @${twitterUsername}` : ''}`,

3
components/share-page/style.js
View File

@ -16,8 +16,7 @@ export const ShareWrap = styled.div`
position: absolute;
padding: 0 0;
top: 6px;
left: -50px;
height: 100%;
left: -40px;
`;
export const ShareIcon = styled.a`

6
pages/[roadmap]/index.js
View File

@ -2,10 +2,11 @@ import Error from 'next/error';
import DefaultLayout from 'layouts/default';
import SiteNav from 'components/site-nav';
import PageFooter from 'components/page-footer';
import RoadmapSummary from 'components/roadmap-summary';
import RoadmapBody from 'components/roadmap-body';
import { serverOnlyProps } from 'lib/server';
import { getRequestedRoadmap } from 'lib/roadmap';
import Helmet from 'components/helmet';
import RoadmapHeader from 'components/roadmap-header';
const Roadmap = ({ roadmap }) => {
if (!roadmap) {
@ -16,7 +17,8 @@ const Roadmap = ({ roadmap }) => {
<DefaultLayout>
<Helmet title={ roadmap.title } description={ roadmap.description } />
<SiteNav />
<RoadmapSummary roadmap={ roadmap } />
<RoadmapHeader roadmap={ roadmap } />
<RoadmapBody roadmap={ roadmap } />
<PageFooter />
</DefaultLayout>
);