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

Split roadmap header to separate component

Browse Source
pull/1331/head
Kamran Ahmed 5 years ago
parent b5c65b408b
commit 618b55f601
9 changed files with 112 additions and 144 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. 33
      components/roadmap-body/index.js
  2. 13
      components/roadmap-body/style.js
  3. 43
      components/roadmap-header/index.js
  4. 17
      components/roadmap-header/style.js
  5. 72
      components/roadmap-summary/index.js
  6. 67
      components/roadmap-summary/style.js
  7. 2
      components/share-page/index.js
  8. 3
      components/share-page/style.js
  9. 6
      pages/[roadmap]/index.js

33
components/roadmap-body/index.js
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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>
);

Write Preview
Loading…
Cancel
Save