Skip to content

Commit

Permalink
migrate to Gatsby v2
Browse files Browse the repository at this point in the history
  • Loading branch information
erquhart committed Sep 7, 2018
1 parent 6f89374 commit 8020f2d
Show file tree
Hide file tree
Showing 20 changed files with 374 additions and 333 deletions.
1 change: 1 addition & 0 deletions gatsby-config.js
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ module.exports = {
resolve: 'gatsby-plugin-netlify-cms',
options: {
modulePath: `${__dirname}/src/cms/cms.js`,
stylesPath: `${__dirname}/src/components/all.sass`,
},
},
'gatsby-plugin-netlify', // make sure to keep it last in the array
Expand Down
8 changes: 4 additions & 4 deletions gatsby-node.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@ const _ = require('lodash')
const path = require('path')
const { createFilePath } = require('gatsby-source-filesystem')

exports.createPages = ({ boundActionCreators, graphql }) => {
const { createPage } = boundActionCreators
exports.createPages = ({ actions, graphql }) => {
const { createPage } = actions

return graphql(`
{
Expand Down Expand Up @@ -71,8 +71,8 @@ exports.createPages = ({ boundActionCreators, graphql }) => {
})
}

exports.onCreateNode = ({ node, boundActionCreators, getNode }) => {
const { createNodeField } = boundActionCreators
exports.onCreateNode = ({ node, actions, getNode }) => {
const { createNodeField } = actions

if (node.internal.type === `MarkdownRemark`) {
const value = createFilePath({ node, getNode })
Expand Down
36 changes: 20 additions & 16 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,22 +5,24 @@
"author": "Austin Green",
"dependencies": {
"bulma": "^0.7.0",
"gatsby": "^1.9.213",
"gatsby-link": "^1.6.37",
"gatsby-plugin-netlify": "^1.0.19",
"gatsby-plugin-netlify-cms": "^1.0.9",
"gatsby-plugin-react-helmet": "^2.0.5",
"gatsby-plugin-sass": "^1.0.17",
"gatsby-plugin-sharp": "^1.6.34",
"gatsby-remark-images": "^1.5.50",
"gatsby-source-filesystem": "^1.5.23",
"gatsby-transformer-remark": "^1.7.33",
"gatsby-transformer-sharp": "^1.6.21",
"gatsby": "next",
"gatsby-plugin-netlify": "next",
"gatsby-plugin-netlify-cms": "next",
"gatsby-plugin-react-helmet": "next",
"gatsby-plugin-sass": "next",
"gatsby-plugin-sharp": "next",
"gatsby-remark-images": "next",
"gatsby-source-filesystem": "next",
"gatsby-transformer-remark": "next",
"gatsby-transformer-sharp": "next",
"lodash": "^4.17.5",
"lodash-webpack-plugin": "^0.11.4",
"netlify-cms": "^1.7.0",
"netlify-cms": "^1.9.3",
"node-sass": "^4.9.2",
"parcel-bundler": "^1.9.4",
"prop-types": "^15.6.0",
"react": "^16.2.0",
"react-dom": "^16.4.1",
"react-helmet": "^5.2.0",
"uuid": "^3.2.1"
},
Expand All @@ -31,13 +33,15 @@
"main": "n/a",
"scripts": {
"start": "npm run develop",
"build": "gatsby build",
"develop": "gatsby develop",
"serve": "gatsby serve",
"clean": "rimraf .cache public",
"build": "npm run clean && gatsby build",
"develop": "npm run clean && gatsby develop",
"serve": "npm run clean && gatsby serve",
"format": "prettier --trailing-comma es5 --no-semi --single-quote --write \"{gatsby-*.js,src/**/*.js}\"",
"test": "echo \"Error: no test specified\" && exit 1"
},
"devDependencies": {
"prettier": "^1.7.4"
"prettier": "^1.7.4",
"rimraf": "^2.6.2"
}
}
1 change: 0 additions & 1 deletion src/cms/cms.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import AboutPagePreview from './preview-templates/AboutPagePreview'
import BlogPostPreview from './preview-templates/BlogPostPreview'
import ProductPagePreview from './preview-templates/ProductPagePreview'

CMS.registerPreviewStyle('/styles.css')
CMS.registerPreviewTemplate('about', AboutPagePreview)
CMS.registerPreviewTemplate('products', ProductPagePreview)
CMS.registerPreviewTemplate('blog', BlogPostPreview)
2 changes: 1 addition & 1 deletion src/cms/preview-templates/AboutPagePreview.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react'
import PropTypes from 'prop-types'
import { AboutPageTemplate } from '../../templates/about-page'
import AboutPageTemplate from '../../components/AboutPageTemplate'

const AboutPagePreview = ({ entry, widgetFor }) => (
<AboutPageTemplate
Expand Down
2 changes: 1 addition & 1 deletion src/cms/preview-templates/BlogPostPreview.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react'
import PropTypes from 'prop-types'
import { BlogPostTemplate } from '../../templates/blog-post'
import BlogPostTemplate from '../../components/BlogPostTemplate'

const BlogPostPreview = ({ entry, widgetFor }) => (
<BlogPostTemplate
Expand Down
2 changes: 1 addition & 1 deletion src/cms/preview-templates/ProductPagePreview.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react'
import PropTypes from 'prop-types'
import { ProductPageTemplate } from '../../templates/product-page'
import ProductPageTemplate from '../../components/ProductPageTemplate'

const ProductPagePreview = ({ entry, getAsset }) => {
const entryBlurbs = entry.getIn(['data', 'intro', 'blurbs'])
Expand Down
32 changes: 32 additions & 0 deletions src/components/AboutPageTemplate.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import React from 'react'
import PropTypes from 'prop-types'
import Content from './Content'

const AboutPageTemplate = ({ title, content, contentComponent }) => {
const PageContent = contentComponent || Content

return (
<section className="section section--gradient">
<div className="container">
<div className="columns">
<div className="column is-10 is-offset-1">
<div className="section">
<h2 className="title is-size-3 has-text-weight-bold is-bold-light">
{title}
</h2>
<PageContent className="content" content={content} />
</div>
</div>
</div>
</div>
</section>
)
}

AboutPageTemplate.propTypes = {
title: PropTypes.string.isRequired,
content: PropTypes.string,
contentComponent: PropTypes.func,
}

export default AboutPageTemplate
56 changes: 56 additions & 0 deletions src/components/BlogPostTemplate.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
import React from 'react'
import PropTypes from 'prop-types'
import { kebabCase } from 'lodash'
import Helmet from 'react-helmet'
import { Link } from 'gatsby'
import Content from './Content'

const BlogPostTemplate = ({
content,
contentComponent,
description,
tags,
title,
helmet,
}) => {
const PostContent = contentComponent || Content

return (
<section className="section">
{helmet || ''}
<div className="container content">
<div className="columns">
<div className="column is-10 is-offset-1">
<h1 className="title is-size-2 has-text-weight-bold is-bold-light">
{title}
</h1>
<p>{description}</p>
<PostContent content={content} />
{tags && tags.length ? (
<div style={{ marginTop: `4rem` }}>
<h4>Tags</h4>
<ul className="taglist">
{tags.map(tag => (
<li key={tag + `tag`}>
<Link to={`/tags/${kebabCase(tag)}/`}>{tag}</Link>
</li>
))}
</ul>
</div>
) : null}
</div>
</div>
</div>
</section>
)
}

BlogPostTemplate.propTypes = {
content: PropTypes.string.isRequired,
contentComponent: PropTypes.func,
description: PropTypes.string,
title: PropTypes.string,
helmet: PropTypes.instanceOf(Helmet),
}

export default BlogPostTemplate
7 changes: 1 addition & 6 deletions src/layouts/index.js → src/components/Layout.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import React from 'react'
import PropTypes from 'prop-types'
import Helmet from 'react-helmet'

import Navbar from '../components/Navbar'
Expand All @@ -9,12 +8,8 @@ const TemplateWrapper = ({ children }) => (
<div>
<Helmet title="Home | Gatsby + Netlify CMS" />
<Navbar />
<div>{children()}</div>
<div>{children}</div>
</div>
)

TemplateWrapper.propTypes = {
children: PropTypes.func,
}

export default TemplateWrapper
3 changes: 1 addition & 2 deletions src/components/Navbar.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import React from 'react'
import Link from 'gatsby-link'

import { Link } from 'gatsby'
import github from '../img/github-icon.svg'
import logo from '../img/logo.svg'

Expand Down
132 changes: 132 additions & 0 deletions src/components/ProductPageTemplate.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,132 @@
import React from 'react'
import PropTypes from 'prop-types'
import Features from './Features'
import Testimonials from './Testimonials'
import Pricing from './Pricing'

const ProductPageTemplate = ({
image,
title,
heading,
description,
intro,
main,
testimonials,
fullImage,
pricing,
}) => (
<section className="section section--gradient">
<div className="container">
<div className="section">
<div className="columns">
<div className="column is-10 is-offset-1">
<div className="content">
<div
className="full-width-image-container margin-top-0"
style={{ backgroundImage: `url(${image})` }}
>
<h2
className="has-text-weight-bold is-size-1"
style={{
boxShadow: '0.5rem 0 0 #f40, -0.5rem 0 0 #f40',
backgroundColor: '#f40',
color: 'white',
padding: '1rem',
}}
>
{title}
</h2>
</div>
<div className="columns">
<div className="column is-7">
<h3 className="has-text-weight-semibold is-size-2">
{heading}
</h3>
<p>{description}</p>
</div>
</div>
<Features gridItems={intro.blurbs} />
<div className="columns">
<div className="column is-7">
<h3 className="has-text-weight-semibold is-size-3">
{main.heading}
</h3>
<p>{main.description}</p>
</div>
</div>
<div className="tile is-ancestor">
<div className="tile is-vertical">
<div className="tile">
<div className="tile is-parent is-vertical">
<article className="tile is-child">
<img
style={{ borderRadius: '5px' }}
src={main.image1.image}
alt={main.image1.alt}
/>
</article>
</div>
<div className="tile is-parent">
<article className="tile is-child">
<img
style={{ borderRadius: '5px' }}
src={main.image2.image}
alt={main.image2.alt}
/>
</article>
</div>
</div>
<div className="tile is-parent">
<article className="tile is-child">
<img
style={{ borderRadius: '5px' }}
src={main.image3.image}
alt={main.image3.alt}
/>
</article>
</div>
</div>
</div>
<Testimonials testimonials={testimonials} />
<div
className="full-width-image-container"
style={{ backgroundImage: `url(${fullImage})` }}
/>
<h2 className="has-text-weight-semibold is-size-2">
{pricing.heading}
</h2>
<p className="is-size-5">{pricing.description}</p>
<Pricing data={pricing.plans} />
</div>
</div>
</div>
</div>
</div>
</section>
)

ProductPageTemplate.propTypes = {
image: PropTypes.string,
title: PropTypes.string,
heading: PropTypes.string,
description: PropTypes.string,
intro: PropTypes.shape({
blurbs: PropTypes.array,
}),
main: PropTypes.shape({
heading: PropTypes.string,
description: PropTypes.string,
image1: PropTypes.object,
image2: PropTypes.object,
image3: PropTypes.object,
}),
testimonials: PropTypes.array,
fullImage: PropTypes.string,
pricing: PropTypes.shape({
heading: PropTypes.string,
description: PropTypes.string,
plans: PropTypes.array,
}),
}

export default ProductPageTemplate
File renamed without changes.
11 changes: 7 additions & 4 deletions src/pages/404.js
Original file line number Diff line number Diff line change
@@ -1,10 +1,13 @@
import React from 'react'
import Layout from '../components/Layout'

const NotFoundPage = () => (
<div>
<h1>NOT FOUND</h1>
<p>You just hit a route that doesn&#39;t exist... the sadness.</p>
</div>
<Layout>
<div>
<h1>NOT FOUND</h1>
<p>You just hit a route that doesn&#39;t exist... the sadness.</p>
</div>
</Layout>
)

export default NotFoundPage
Loading

0 comments on commit 8020f2d

Please sign in to comment.