Split roadmap header to separate component
This commit is contained in:
Kamran Ahmed
33
components/roadmap-body/index.js
Normal file
33
components/roadmap-body/index.js
Normal 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
13
components/roadmap-body/style.js
Normal 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
43
components/roadmap-header/index.js
Normal 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
17
components/roadmap-header/style.js
Normal 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;
|
||||||
|
`;
|
||||||
@ -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;
|
|
||||||
@ -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;
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
@ -10,7 +10,7 @@ const SharePage = ({
|
|||||||
twitterUsername,
|
twitterUsername,
|
||||||
}) => (
|
}) => (
|
||||||
<ShareWrap>
|
<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
|
<ShareIcon
|
||||||
href={ getTwitterShareUrl({
|
href={ getTwitterShareUrl({
|
||||||
text: `${title} ${twitterUsername ? `by @${twitterUsername}` : ''}`,
|
text: `${title} ${twitterUsername ? `by @${twitterUsername}` : ''}`,
|
||||||
|
|||||||
@ -16,8 +16,7 @@ export const ShareWrap = styled.div`
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
padding: 0 0;
|
padding: 0 0;
|
||||||
top: 6px;
|
top: 6px;
|
||||||
left: -50px;
|
left: -40px;
|
||||||
height: 100%;
|
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export const ShareIcon = styled.a`
|
export const ShareIcon = styled.a`
|
||||||
|
|||||||
@ -2,10 +2,11 @@ import Error from 'next/error';
|
|||||||
import DefaultLayout from 'layouts/default';
|
import DefaultLayout from 'layouts/default';
|
||||||
import SiteNav from 'components/site-nav';
|
import SiteNav from 'components/site-nav';
|
||||||
import PageFooter from 'components/page-footer';
|
import PageFooter from 'components/page-footer';
|
||||||
import RoadmapSummary from 'components/roadmap-summary';
|
import RoadmapBody from 'components/roadmap-body';
|
||||||
import { serverOnlyProps } from 'lib/server';
|
import { serverOnlyProps } from 'lib/server';
|
||||||
import { getRequestedRoadmap } from 'lib/roadmap';
|
import { getRequestedRoadmap } from 'lib/roadmap';
|
||||||
import Helmet from 'components/helmet';
|
import Helmet from 'components/helmet';
|
||||||
|
import RoadmapHeader from 'components/roadmap-header';
|
||||||
|
|
||||||
const Roadmap = ({ roadmap }) => {
|
const Roadmap = ({ roadmap }) => {
|
||||||
if (!roadmap) {
|
if (!roadmap) {
|
||||||
@ -16,7 +17,8 @@ const Roadmap = ({ roadmap }) => {
|
|||||||
<DefaultLayout>
|
<DefaultLayout>
|
||||||
<Helmet title={ roadmap.title } description={ roadmap.description } />
|
<Helmet title={ roadmap.title } description={ roadmap.description } />
|
||||||
<SiteNav />
|
<SiteNav />
|
||||||
<RoadmapSummary roadmap={ roadmap } />
|
<RoadmapHeader roadmap={ roadmap } />
|
||||||
|
<RoadmapBody roadmap={ roadmap } />
|
||||||
<PageFooter />
|
<PageFooter />
|
||||||
</DefaultLayout>
|
</DefaultLayout>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user