docs: migrate website to Gatsby v2 (#1623)

* website: initial conversion to gatsby v2

* fix unexpected history use warning

* use commonjs only to fix gatsby error

* fix gatsby import error with sidecar

* remove unused postcss-colour-functions

* remove unused prop

* lowercase layout filename import to match actual file

* chore(lint): format code
This commit is contained in:
Zeb Pykosz
2018-08-23 17:58:38 -04:00
committed by Caleb
parent a1677b0e24
commit f58db5fb08
17 changed files with 4084 additions and 4662 deletions

View File

@ -1,31 +1,35 @@
import React from 'react';
import Helmet from 'react-helmet';
import Link from 'gatsby-link';
import { Link, graphql } from 'gatsby';
import Layout from '../components/layout';
const Blog = ({ data }) => (
<div className="blog page">
<Helmet>
<title>Blog</title>
<meta name="description" content="Recent news and updates about Netlify CMS." />
</Helmet>
<div className="container">
<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>
</h2>
<p className="meta-info">
by {node.frontmatter.author} on {node.frontmatter.date}
</p>
<p>{node.frontmatter.description}</p>
</article>
))}
{/* TODO: pagination */}
<Layout>
<div className="blog page">
<Helmet>
<title>Blog</title>
<meta name="description" content="Recent news and updates about Netlify CMS." />
</Helmet>
<div className="container">
<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>
</h2>
<p className="meta-info">
by {node.frontmatter.author} on {node.frontmatter.date}
</p>
<p>{node.frontmatter.description}</p>
</article>
))}
{/* TODO: pagination */}
</div>
</div>
</div>
</Layout>
);
export default Blog;

View File

@ -1,7 +1,9 @@
import React from 'react';
import Helmet from 'react-helmet';
import Markdown from 'react-markdown';
import { graphql } from 'gatsby';
import Layout from '../components/layout';
import EventWidget from '../components/event-widget';
import Markdownify from '../components/markdownify';
@ -19,57 +21,59 @@ const CommunityPage = ({ data }) => {
} = data.markdownRemark.frontmatter;
return (
<div className="community page">
<Helmet title={title} />
<section className="community hero">
<div className="contained">
<div className="hero-copy">
<h1 className="headline">
<Markdownify source={headline} />
</h1>
<h2 className="subhead">
<Markdownify source={subhead} />
</h2>
<h3 className="ctas">
<ul>
<li>
<Markdownify source={primarycta} />
</li>
</ul>
</h3>
</div>
<Layout>
<div className="community page">
<Helmet title={title} />
<section className="community hero">
<div className="contained">
<div className="hero-copy">
<h1 className="headline">
<Markdownify source={headline} />
</h1>
<h2 className="subhead">
<Markdownify source={subhead} />
</h2>
<h3 className="ctas">
<ul>
<li>
<Markdownify source={primarycta} />
</li>
</ul>
</h3>
</div>
<div className="calendar-cta">
<h2>{upcomingevent.hook}</h2>
<EventWidget />
<div className="cal-cta">
<Markdownify source={primarycta} />
<div className="calendar-cta">
<h2>{upcomingevent.hook}</h2>
<EventWidget />
<div className="cal-cta">
<Markdownify source={primarycta} />
</div>
</div>
</div>
</div>
</section>
</section>
<section className="how-it-works clearfix">
<div className="contained">
<div className="half">
<h4 className="section-label">How it works</h4>
<p>
<Markdown source={howitworks} />
</p>
<h4 className="section-label">How to join</h4>
<p>
<Markdown source={howtojoin} />
</p>
<section className="how-it-works clearfix">
<div className="contained">
<div className="half">
<h4 className="section-label">How it works</h4>
<p>
<Markdown source={howitworks} />
</p>
<h4 className="section-label">How to join</h4>
<p>
<Markdown source={howtojoin} />
</p>
</div>
</div>
</div>
</section>
</div>
</section>
</div>
</Layout>
);
};
export const pageQuery = graphql`
query communityPage {
markdownRemark(id: { regex: "/community/" }) {
markdownRemark(fileAbsolutePath: { regex: "/community/" }) {
frontmatter {
headline
subhead

View File

@ -1,6 +1,8 @@
import React, { Fragment } from 'react';
import moment from 'moment';
import { graphql } from 'gatsby';
import Layout from '../components/layout';
import Markdownify from '../components/markdownify';
import VideoEmbed from '../components/video-embed';
@ -27,152 +29,164 @@ const Features = ({ items }) => (
);
const HomePage = ({ data }) => {
const { landing, updates, contribs } = data;
const landing = data.landing.childDataYaml;
const updates = data.updates.childDataYaml;
const contribs = data.contribs.childDataJson;
return (
<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>
<VideoEmbed />
</div>
</section>
<section className="cta">
<div className="cta-primary">
<p>
<span className="hook">
<Markdownify source={landing.cta.primaryhook} />
</span>{' '}
<Markdownify source={landing.cta.primary} />
</p>
<Markdownify source={landing.cta.button} />
</div>
</section>
<section className="whatsnew">
<div className="contained">
<ol>
{updates.updates.slice(0, 3).map(node => (
<a
href={`https://github.com/netlify/netlify-cms/releases/tag/${node.version}`}
key={node.version}
>
<li>
<div className="update-metadata">
<span className="update-version">{node.version}</span>
<span className="update-date">{moment(node.date).format('MMMM D, YYYY')}</span>
</div>
<span className="update-description">
<Markdownify source={node.description} />
</span>
</li>
</a>
))}
</ol>
</div>
</section>
<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>
<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} />
<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>
<VideoEmbed />
</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} />
</section>
<section className="cta">
<div className="cta-primary">
<p>
<span className="hook">
<Markdownify source={landing.cta.primaryhook} />
</span>{' '}
<Markdownify source={landing.cta.primary} />
</p>
<Markdownify source={landing.cta.button} />
</div>
</section>
<section className="whatsnew">
<div className="contained">
<ol>
{updates.updates.slice(0, 3).map(node => (
<a
href={`https://github.com/netlify/netlify-cms/releases/tag/${node.version}`}
key={node.version}
>
<li>
<div className="update-metadata">
<span className="update-version">{node.version}</span>
<span className="update-date">
{moment(node.date).format('MMMM D, YYYY')}
</span>
</div>
<span className="update-description">
<Markdownify source={node.description} />
</span>
</li>
</a>
))}
</ol>
</div>
</section>
<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>
</div>
</section>
</div>
</section>
<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>
</div>
</section>
</div>
</Layout>
);
};
export const pageQuery = graphql`
query homeQuery {
updates: dataYaml(id: { regex: "/updates/" }) {
updates {
date
description
version
updates: file(relativePath: { regex: "/updates/" }) {
childDataYaml {
updates {
date
description
version
}
}
}
landing: dataYaml(id: { regex: "/landing/" }) {
hero {
headline
subhead
devfeatures {
feature
description
landing: file(relativePath: { regex: "/landing/" }) {
childDataYaml {
hero {
headline
subhead
devfeatures {
feature
description
}
}
}
cta {
primary
primaryhook
button
}
editors {
hook
intro
features {
feature
imgpath
description
cta {
primary
primaryhook
button
}
}
community {
hook
features {
feature
description
editors {
hook
intro
features {
feature
imgpath
description
}
}
community {
hook
features {
feature
description
}
contributors
}
contributors
}
}
contribs: dataJson(id: { regex: "/contributors/" }) {
contributors {
name
profile
avatar_url
login
contribs: file(relativePath: { regex: "/contributors/" }) {
childDataJson {
contributors {
name
profile
avatar_url
login
}
}
}
}