convert website from hugo to gatsby (#1369)

This commit is contained in:
Zeb Pykosz
2018-07-25 07:47:26 -04:00
committed by Shawn Erquhart
parent d6c03707d8
commit 04c44518b2
113 changed files with 7441 additions and 2771 deletions

58
website/src/pages/blog.js Normal file
View File

@ -0,0 +1,58 @@
import React from 'react';
import Helmet from 'react-helmet';
import Link from 'gatsby-link';
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 */}
</div>
</div>
);
export default Blog;
export const pageQuery = graphql`
query blogList {
allMarkdownRemark(
filter: { fields: { slug: { regex: "/blog/" } } }
sort: { order: DESC, fields: [fields___date] }
) {
edges {
node {
id
frontmatter {
title
description
author
date(formatString: "MMMM D, YYYY")
}
fields {
slug
}
}
}
}
}
`;

View File

@ -0,0 +1,87 @@
import React, { Component } from 'react';
import Helmet from 'react-helmet';
import Markdown from 'react-markdown';
import EventWidget from '../components/event-widget';
import Markdownify from '../components/markdownify';
import '../css/imports/collab.css';
const CommunityPage = ({ data }) => {
const {
title,
headline,
subhead,
primarycta,
upcomingevent,
howitworks,
howtojoin
} = 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>
<div className="calendar-cta">
<h2>{upcomingevent.hook}</h2>
<EventWidget />
<div className="cal-cta">
<Markdownify source={primarycta} />
</div>
</div>
</div>
</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>
</div>
</div>
</section>
</div>
);
};
export const pageQuery = graphql`
query communityPage {
markdownRemark(id: { regex: "/community/" }) {
frontmatter {
headline
subhead
primarycta
upcomingevent {
hook
}
howitworks
howtojoin
}
}
}
`;
export default CommunityPage;

188
website/src/pages/index.js Normal file
View File

@ -0,0 +1,188 @@
import React, { Component, Fragment } from 'react';
import moment from 'moment';
import Markdownify from '../components/markdownify';
import VideoEmbed from '../components/video-embed';
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';
const Features = ({ items }) => (
<Fragment>
{items.map(item => (
<div className="feature" key={item.feature}>
{item.imgpath && <img src={require(`../img/${item.imgpath}`)} />}
<h3>
<Markdownify source={item.feature} />
</h3>
<p>
<Markdownify source={item.description} />
</p>
</div>
))}
</Fragment>
);
const HomePage = ({ data }) => {
const { landing, updates, contribs } = data;
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} />
</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>
);
};
export const pageQuery = graphql`
query homeQuery {
updates: dataYaml(id: { regex: "/updates/" }) {
updates {
date
description
version
}
}
landing: dataYaml(id: { regex: "/landing/" }) {
hero {
headline
subhead
devfeatures {
feature
description
}
}
cta {
primary
primaryhook
button
}
editors {
hook
intro
features {
feature
imgpath
description
}
}
community {
hook
features {
feature
description
}
contributors
}
}
contribs: dataJson(id: { regex: "/contributors/" }) {
contributors {
name
profile
avatar_url
login
}
}
}
`;
export default HomePage;