docs: convert website from postcss to emotion (#2068)
This commit is contained in:
Zeb Pykosz
committed by
Shawn Erquhart
Shawn Erquhart
parent
7b0838dfef
commit
3d474b1944
@ -1,34 +1,48 @@
|
||||
import React from 'react';
|
||||
import Helmet from 'react-helmet';
|
||||
import { Link, graphql } from 'gatsby';
|
||||
import { css } from '@emotion/core';
|
||||
|
||||
import Layout from '../components/layout';
|
||||
import Container from '../components/container';
|
||||
import MetaInfo from '../components/meta-info';
|
||||
import Page from '../components/page';
|
||||
import Lead from '../components/lead';
|
||||
|
||||
import theme from '../theme';
|
||||
|
||||
const Blog = ({ data }) => (
|
||||
<Layout>
|
||||
<div className="blog page">
|
||||
<Helmet>
|
||||
<title>Blog</title>
|
||||
<meta name="description" content="Recent news and updates about Netlify CMS." />
|
||||
</Helmet>
|
||||
<div className="container">
|
||||
<Helmet>
|
||||
<title>Blog</title>
|
||||
<meta name="description" content="Recent news and updates about Netlify CMS." />
|
||||
</Helmet>
|
||||
<Page>
|
||||
<Container size="sm">
|
||||
<h1>Netlify CMS Blog</h1>
|
||||
{data.allMarkdownRemark.edges.map(({ node }) => (
|
||||
<article className="blog-list-item" key={node.id}>
|
||||
<h2>
|
||||
<Link to={node.fields.slug} className="article">
|
||||
{node.frontmatter.title}
|
||||
</Link>
|
||||
<article
|
||||
key={node.id}
|
||||
css={css`
|
||||
margin-bottom: ${theme.space[5]};
|
||||
`}
|
||||
>
|
||||
<h2
|
||||
css={css`
|
||||
margin-bottom: 0;
|
||||
`}
|
||||
>
|
||||
<Link to={node.fields.slug}>{node.frontmatter.title}</Link>
|
||||
</h2>
|
||||
<p className="meta-info">
|
||||
<MetaInfo>
|
||||
by {node.frontmatter.author} on {node.frontmatter.date}
|
||||
</p>
|
||||
<p>{node.frontmatter.description}</p>
|
||||
</MetaInfo>
|
||||
<Lead>{node.frontmatter.description}</Lead>
|
||||
</article>
|
||||
))}
|
||||
{/* TODO: pagination */}
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Page>
|
||||
</Layout>
|
||||
);
|
||||
|
||||
|
||||
@ -1,19 +1,60 @@
|
||||
import React from 'react';
|
||||
import Helmet from 'react-helmet';
|
||||
import { graphql } from 'gatsby';
|
||||
import { css } from '@emotion/core';
|
||||
|
||||
import Layout from '../components/layout';
|
||||
import Community from '../components/community';
|
||||
import Markdownify from '../components/markdownify';
|
||||
import PageHero from '../components/page-hero';
|
||||
import HeroTitle from '../components/hero-title';
|
||||
import Lead from '../components/lead';
|
||||
import Container from '../components/container';
|
||||
import SectionLabel from '../components/section-label';
|
||||
import Page from '../components/page';
|
||||
import Grid from '../components/grid';
|
||||
import CommunityChannelsList from '../components/community-channels-list';
|
||||
|
||||
import '../css/imports/collab.css';
|
||||
import theme from '../theme';
|
||||
|
||||
const CommunityPage = ({ data }) => {
|
||||
const { title, headline, subhead, sections } = data.markdownRemark.frontmatter;
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<Layout hasPageHero>
|
||||
<Helmet title={title} />
|
||||
<Community headline={headline} subhead={subhead} sections={sections} />
|
||||
<PageHero>
|
||||
<div
|
||||
css={css`
|
||||
margin-bottom: 20px;
|
||||
`}
|
||||
>
|
||||
<HeroTitle>
|
||||
<Markdownify source={headline} />
|
||||
</HeroTitle>
|
||||
<Lead light>
|
||||
<Markdownify source={subhead} />
|
||||
</Lead>
|
||||
</div>
|
||||
</PageHero>
|
||||
|
||||
<Container>
|
||||
<Page>
|
||||
<Grid cols={2}>
|
||||
<div
|
||||
css={css`
|
||||
margin-bottom: ${theme.space[5]};
|
||||
`}
|
||||
>
|
||||
{sections.map(({ title: sectionTitle, channels }, channelIdx) => (
|
||||
<React.Fragment key={channelIdx}>
|
||||
<SectionLabel>{sectionTitle}</SectionLabel>
|
||||
<CommunityChannelsList channels={channels} />
|
||||
</React.Fragment>
|
||||
))}
|
||||
</div>
|
||||
</Grid>
|
||||
</Page>
|
||||
</Container>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,30 +1,69 @@
|
||||
import React from 'react';
|
||||
import { graphql } from 'gatsby';
|
||||
import styled from '@emotion/styled';
|
||||
import { css } from '@emotion/core';
|
||||
|
||||
import Layout from '../components/layout';
|
||||
import Markdownify from '../components/markdownify';
|
||||
import PageHero from '../components/page-hero';
|
||||
import HeroTitle from '../components/hero-title';
|
||||
import VideoEmbed from '../components/video-embed';
|
||||
import WhatsNew from '../components/whats-new';
|
||||
import Release from '../components/release';
|
||||
import Lead from '../components/lead';
|
||||
import Features from '../components/features';
|
||||
import HomeSection from '../components/home-section';
|
||||
import Grid from '../components/grid';
|
||||
|
||||
import '../css/imports/hero.css';
|
||||
import '../css/imports/cta.css';
|
||||
import '../css/imports/whatsnew.css';
|
||||
import '../css/imports/editors.css';
|
||||
import '../css/imports/community.css';
|
||||
import theme from '../theme';
|
||||
import { mq } from '../utils';
|
||||
|
||||
const Features = ({ items }) =>
|
||||
items.map(item => (
|
||||
<div className="feature" key={item.feature}>
|
||||
{item.imgpath && <img src={require(`../img/${item.imgpath}`)} alt="" />}
|
||||
<h3>
|
||||
<Markdownify source={item.feature} />
|
||||
</h3>
|
||||
<p>
|
||||
<Markdownify source={item.description} />
|
||||
</p>
|
||||
</div>
|
||||
));
|
||||
const MarkdownButton = styled.span`
|
||||
a {
|
||||
white-space: nowrap;
|
||||
display: inline-block;
|
||||
color: white;
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
font-size: ${theme.fontsize[3]};
|
||||
letter-spacing: 0.5px;
|
||||
line-height: ${theme.lineHeight[1]};
|
||||
background-color: ${theme.colors.blue};
|
||||
background-image: linear-gradient(-180deg, #4a7fdd 0%, #3a69c7 100%);
|
||||
box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.3), 0 1px 3px 0 rgba(0, 0, 0, 0.6);
|
||||
border-radius: ${theme.radii[1]};
|
||||
padding: ${theme.space[2]} ${theme.space[3]};
|
||||
transition: 0.2s;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.5), 0 1px 3px 0 rgba(0, 0, 0, 1);
|
||||
}
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const ContribList = styled.div`
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
img {
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
border-radius: 10rem;
|
||||
margin-right: ${theme.space[1]};
|
||||
margin-bottom: ${theme.space[1]};
|
||||
transition: 0.1s;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.3);
|
||||
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.25), 0 4px 12px 0 rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const HomePage = ({ data }) => {
|
||||
const landing = data.landing.childDataYaml;
|
||||
@ -32,90 +71,115 @@ const HomePage = ({ data }) => {
|
||||
const contribs = data.contribs.childDataJson;
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<div className="landing page">
|
||||
<section className="landing hero">
|
||||
<div className="contained">
|
||||
<div className="hero-copy">
|
||||
<h1 className="headline">
|
||||
<Markdownify source={landing.hero.headline} />
|
||||
</h1>
|
||||
<span className="subhead">
|
||||
<Markdownify source={landing.hero.subhead} />
|
||||
</span>
|
||||
<span className="cta-header">
|
||||
<Markdownify source={landing.cta.button} />
|
||||
</span>
|
||||
</div>
|
||||
<div className="hero-features">
|
||||
<Features items={landing.hero.devfeatures} />
|
||||
</div>
|
||||
<Layout hasPageHero>
|
||||
<PageHero>
|
||||
<div
|
||||
css={css`
|
||||
margin-bottom: ${theme.space[7]};
|
||||
`}
|
||||
>
|
||||
<HeroTitle>
|
||||
<Markdownify source={landing.hero.headline} />
|
||||
</HeroTitle>
|
||||
<Lead>
|
||||
<Markdownify source={landing.hero.subhead} />
|
||||
</Lead>
|
||||
<Lead>
|
||||
<MarkdownButton>
|
||||
<Markdownify source={landing.cta.button} />
|
||||
</MarkdownButton>
|
||||
</Lead>
|
||||
</div>
|
||||
<Grid cols={2}>
|
||||
<div>
|
||||
<Features items={landing.hero.devfeatures} kind="light" />
|
||||
</div>
|
||||
<div>
|
||||
<VideoEmbed />
|
||||
</div>
|
||||
</section>
|
||||
</Grid>
|
||||
</PageHero>
|
||||
|
||||
<section className="cta">
|
||||
<div className="cta-primary">
|
||||
<p>
|
||||
<span className="hook">
|
||||
<Markdownify source={landing.cta.primaryhook} />
|
||||
</span>{' '}
|
||||
<Markdownify source={landing.cta.primary} />
|
||||
</p>
|
||||
<section
|
||||
css={css`
|
||||
background: white;
|
||||
${mq[2]} {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -75%);
|
||||
width: 880px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
`}
|
||||
>
|
||||
<div
|
||||
css={css`
|
||||
padding: ${theme.space[4]} ${theme.space[5]};
|
||||
color: ${theme.colors.lightishGray};
|
||||
${mq[2]} {
|
||||
display: flex;
|
||||
}
|
||||
`}
|
||||
>
|
||||
<Lead
|
||||
css={css`
|
||||
margin-right: 2rem;
|
||||
font-size: 18px;
|
||||
${mq[2]} {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
`}
|
||||
>
|
||||
<strong>
|
||||
<Markdownify source={landing.cta.primaryhook} />
|
||||
</strong>{' '}
|
||||
<Markdownify source={landing.cta.primary} />
|
||||
</Lead>
|
||||
<MarkdownButton>
|
||||
<Markdownify source={landing.cta.button} />
|
||||
</div>
|
||||
</section>
|
||||
</MarkdownButton>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<WhatsNew>
|
||||
{updates.updates.slice(0, 3).map((node, idx) => (
|
||||
<Release
|
||||
key={idx}
|
||||
version={node.version}
|
||||
versionPrevious={updates.updates[idx + 1].version}
|
||||
date={node.date}
|
||||
description={node.description}
|
||||
url={node.url}
|
||||
/>
|
||||
))}
|
||||
</WhatsNew>
|
||||
<WhatsNew updates={updates.updates} />
|
||||
|
||||
<section className="editors">
|
||||
<div className="contained">
|
||||
<h2>
|
||||
<Markdownify source={landing.editors.hook} />
|
||||
</h2>
|
||||
<p id="editor-intro">
|
||||
<Markdownify source={landing.editors.intro} />
|
||||
</p>
|
||||
<div className="editors-features">
|
||||
<Features items={landing.editors.features} />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<HomeSection
|
||||
title={<Markdownify source={landing.editors.hook} />}
|
||||
text={<Markdownify source={landing.editors.intro} />}
|
||||
>
|
||||
<Grid cols={3}>
|
||||
<Features items={landing.editors.features} />
|
||||
</Grid>
|
||||
</HomeSection>
|
||||
|
||||
<section className="communitysupport">
|
||||
<div className="contained">
|
||||
<h2>
|
||||
<Markdownify source={landing.community.hook} />
|
||||
</h2>
|
||||
<div className="community">
|
||||
<div className="community-features">
|
||||
<Features items={landing.community.features} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="contributors feature">
|
||||
<h3>{landing.community.contributors}</h3>
|
||||
<div className="contributor-list">
|
||||
{contribs.contributors.map(user => (
|
||||
<a href={user.profile} title={user.name} key={user.login}>
|
||||
<img src={user.avatar_url.replace('v=4', 's=32')} alt={user.login} />
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<HomeSection
|
||||
css={css`
|
||||
background: white;
|
||||
`}
|
||||
title={<Markdownify source={landing.community.hook} />}
|
||||
>
|
||||
<Grid cols={2}>
|
||||
<div>
|
||||
<Features items={landing.community.features} />
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div>
|
||||
<h3
|
||||
css={css`
|
||||
font-size: 18px;
|
||||
`}
|
||||
>
|
||||
{landing.community.contributors}
|
||||
</h3>
|
||||
<ContribList>
|
||||
{contribs.contributors.map(user => (
|
||||
<a href={user.profile} title={user.name} key={user.login}>
|
||||
<img src={user.avatar_url.replace('v=4', 's=32')} alt={user.login} />
|
||||
</a>
|
||||
))}
|
||||
</ContribList>
|
||||
</div>
|
||||
</Grid>
|
||||
</HomeSection>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user