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
Caleb
@ -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;
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user