convert website from hugo to gatsby (#1369)
This commit is contained in:
Zeb Pykosz
committed by
Shawn Erquhart
Shawn Erquhart
parent
d6c03707d8
commit
04c44518b2
58
website/src/pages/blog.js
Normal file
58
website/src/pages/blog.js
Normal 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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
87
website/src/pages/community.js
Normal file
87
website/src/pages/community.js
Normal 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
188
website/src/pages/index.js
Normal 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;
|
||||
Reference in New Issue
Block a user