Fix for #4225 & various other tweaks

gatsby-node.js

@@ -1,66 +1,16 @@
-const path = require("path");
+const path = require("path")
 
 exports.createPages = ({ boundActionCreators, graphql }) => {
-  const { createPage } = boundActionCreators;
+  const { createPage } = boundActionCreators
 
   return graphql(`
     {
-      allMarkdownRemark(
-        sort: { order: DESC, fields: [frontmatter___date] }
-        limit: 1000
-      ) {
+      allMarkdownRemark(limit: 1000) {
         edges {
           node {
-            excerpt(pruneLength: 400)
-            html
-            id
             frontmatter {
-              templateKey
               path
-              date
-              title
-              image
-              heading
-              description
-              intro {
-                blurbs {
-                  image
-                  text
-                }
-                heading
-                description
-              }
-              main {
-                heading
-                description
-                image1 {
-                  alt
-                  image
-                }
-                image2 {
-                  alt
-                  image
-                }
-                image3 {
-                  alt
-                  image
-                }
-              }
-              testimonials {
-                author
-                quote
-              }
-              full_image
-              pricing {
-                heading
-                description
-                plans {
-                  description
-                  items
-                  plan
-                  price
-                }
-              }
+              templateKey
             }
           }
         }
@@ -68,22 +18,20 @@ exports.createPages = ({ boundActionCreators, graphql }) => {
     }
   `).then(result => {
     if (result.errors) {
-      result.errors.forEach(e => console.error(e.toString()));
-      return Promise.reject(result.errors);
+      result.errors.forEach(e => console.error(e.toString()))
+      return Promise.reject(result.errors)
     }
 
     return result.data.allMarkdownRemark.edges.forEach(({ node }) => {
-      const pagePath = node.frontmatter.path;
+      const pagePath = node.frontmatter.path
       createPage({
         path: pagePath,
         component: path.resolve(
           `src/templates/${String(node.frontmatter.templateKey)}.js`
         ),
         // additional data can be passed via context
-        context: {
-          path: pagePath
-        }
-      });
-    });
-  });
-};
+        context: {},
+      })
+    })
+  })
+}

package.json

@@ -5,16 +5,16 @@
   "author": "Austin Green",
   "dependencies": {
     "bulma": "^0.6.0",
-    "gatsby": "^1.9.63",
-    "gatsby-link": "^1.6.21",
-    "gatsby-plugin-netlify-cms": "^1.0.2",
-    "gatsby-plugin-react-helmet": "^1.0.5",
-    "gatsby-plugin-sass": "^1.0.12",
-    "gatsby-plugin-sharp": "^1.6.18",
-    "gatsby-remark-images": "^1.5.18",
-    "gatsby-source-filesystem": "^1.5.5",
-    "gatsby-transformer-remark": "^1.7.17",
-    "gatsby-transformer-sharp": "^1.6.13",
+    "gatsby": "^1.9.213",
+    "gatsby-link": "^1.6.37",
+    "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",
     "prop-types": "^15.6.0",
     "react": "^16.2.0"
   },

src/cms/cms.js

@@ -1,10 +1,10 @@
-import CMS from "netlify-cms"
+import CMS from 'netlify-cms'
 
-import AboutPagePreview from './preview-templates/AboutPagePreview';
-import BlogPostPreview from './preview-templates/BlogPostPreview';
-import ProductPagePreview from './preview-templates/ProductPagePreview';
+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);
+CMS.registerPreviewStyle('/styles.css')
+CMS.registerPreviewTemplate('about', AboutPagePreview)
+CMS.registerPreviewTemplate('products', ProductPagePreview)
+CMS.registerPreviewTemplate('blog', BlogPostPreview)

src/components/Content.js

@@ -1,7 +1,8 @@
-import React from 'react';
+import React from 'react'
 
-export default ({ content, className }) => <div className={className}>{content}</div>;
-export const HTMLContent = ({ content, className }) => (<div
-  className={className}
-  dangerouslySetInnerHTML={{ __html: content }}
-/>);
+export default ({ content, className }) => (
+  <div className={className}>{content}</div>
+)
+export const HTMLContent = ({ content, className }) => (
+  <div className={className} dangerouslySetInnerHTML={{ __html: content }} />
+)

src/components/Features.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from 'react'
 
 const FeatureGrid = ({ gridItems }) => (
   <div className="columns is-multiline">
@@ -13,6 +13,6 @@ const FeatureGrid = ({ gridItems }) => (
       </div>
     ))}
   </div>
-);
+)
 
-export default FeatureGrid;
+export default FeatureGrid

src/components/Navbar.js

@@ -1,8 +1,8 @@
-import React from 'react';
-import Link from 'gatsby-link';
+import React from 'react'
+import Link from 'gatsby-link'
 
-import github from '../img/github-icon.svg';
-import logo from '../img/logo.svg';
+import github from '../img/github-icon.svg'
+import logo from '../img/logo.svg'
 
 const Navbar = () => (
   <nav className="navbar is-transparent">
@@ -23,7 +23,12 @@ const Navbar = () => (
         </Link>
       </div>
       <div className="navbar-end">
-        <a className="navbar-item" href="https://github.com/AustinGreen/gatsby-netlify-cms-boilerplate" target="_blank" rel="noopener noreferrer">
+        <a
+          className="navbar-item"
+          href="https://github.com/AustinGreen/gatsby-netlify-cms-boilerplate"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
           <span className="icon">
             <img src={github} alt="Github" />
           </span>
@@ -31,6 +36,6 @@ const Navbar = () => (
       </div>
     </div>
   </nav>
-);
+)
 
-export default Navbar;
+export default Navbar

src/components/Pricing.js

@@ -1,12 +1,16 @@
-import React from 'react';
+import React from 'react'
 
 export default ({ data }) => (
   <div className="columns">
     {data.map(price => (
       <div key={price.plan} className="column">
         <section className="section">
-          <h4 className="has-text-centered has-text-weight-semibold">{price.plan}</h4>
-          <h2 className="is-size-1 has-text-weight-bold has-text-primary has-text-centered">${price.price}</h2>
+          <h4 className="has-text-centered has-text-weight-semibold">
+            {price.plan}
+          </h4>
+          <h2 className="is-size-1 has-text-weight-bold has-text-primary has-text-centered">
+            ${price.price}
+          </h2>
           <p className="has-text-weight-semibold">{price.description}</p>
           <ul>
             {price.items.map(item => (
@@ -19,4 +23,4 @@ export default ({ data }) => (
       </div>
     ))}
   </div>
-);
+)

src/components/Testimonials.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from 'react'
 
 export default ({ testimonials }) => (
   <div>
@@ -12,4 +12,4 @@ export default ({ testimonials }) => (
       </article>
     ))}
   </div>
-);
+)

src/layouts/index.js

@@ -1,9 +1,9 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Helmet from 'react-helmet';
+import React from 'react'
+import PropTypes from 'prop-types'
+import Helmet from 'react-helmet'
 
-import Navbar from '../components/Navbar';
-import './all.sass';
+import Navbar from '../components/Navbar'
+import './all.sass'
 
 const TemplateWrapper = ({ children }) => (
   <div>
@@ -11,10 +11,10 @@ const TemplateWrapper = ({ children }) => (
     <Navbar />
     <div>{children()}</div>
   </div>
-);
+)
 
 TemplateWrapper.propTypes = {
   children: PropTypes.func,
-};
+}
 
-export default TemplateWrapper;
+export default TemplateWrapper

src/pages/404.js

@@ -1,10 +1,10 @@
-import React from 'react';
+import React from 'react'
 
 const NotFoundPage = () => (
   <div>
     <h1>NOT FOUND</h1>
     <p>You just hit a route that doesn&#39;t exist... the sadness.</p>
   </div>
-);
+)
 
-export default NotFoundPage;
+export default NotFoundPage

src/pages/index.js

@@ -1,11 +1,11 @@
-import React from "react";
-import Link from "gatsby-link";
-import graphql from "graphql";
+import React from 'react'
+import Link from 'gatsby-link'
+import graphql from 'graphql'
 
 export default class IndexPage extends React.Component {
   render() {
-    const { data } = this.props;
-    const { edges: posts } = data.allMarkdownRemark;
+    const { data } = this.props
+    const { edges: posts } = data.allMarkdownRemark
 
     return (
       <section className="section">
@@ -14,11 +14,11 @@ export default class IndexPage extends React.Component {
             <h1 className="has-text-weight-bold is-size-2">Latest Stories</h1>
           </div>
           {posts
-            .filter(post => post.node.frontmatter.templateKey === "blog-post")
+            .filter(post => post.node.frontmatter.templateKey === 'blog-post')
             .map(({ node: post }) => (
               <div
                 className="content"
-                style={{ border: "1px solid #eaecee", padding: "2em 4em" }}
+                style={{ border: '1px solid #eaecee', padding: '2em 4em' }}
                 key={post.id}
               >
                 <p>
@@ -40,7 +40,7 @@ export default class IndexPage extends React.Component {
             ))}
         </div>
       </section>
-    );
+    )
   }
 }
 
@@ -61,4 +61,4 @@ export const pageQuery = graphql`
       }
     }
   }
-`;
+`

src/templates/about-page.js

@@ -1,9 +1,9 @@
-import React from 'react';
-import graphql from 'graphql';
-import Content, { HTMLContent } from '../components/Content';
+import React from 'react'
+import graphql from 'graphql'
+import Content, { HTMLContent } from '../components/Content'
 
 export const AboutPageTemplate = ({ title, content, contentComponent }) => {
-  const PageContent = contentComponent || Content;
+  const PageContent = contentComponent || Content
 
   return (
     <section className="section section--gradient">
@@ -11,25 +11,29 @@ export const AboutPageTemplate = ({ title, content, contentComponent }) => {
         <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>
+              <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>
-  );
-};
+  )
+}
 
 export default ({ data }) => {
-  const { markdownRemark: post } = data;
+  const { markdownRemark: post } = data
 
-  return (<AboutPageTemplate
-    contentComponent={HTMLContent}
-    title={post.frontmatter.title}
-    content={post.html}
-  />);
-};
+  return (
+    <AboutPageTemplate
+      contentComponent={HTMLContent}
+      title={post.frontmatter.title}
+      content={post.html}
+    />
+  )
+}
 
 export const aboutPageQuery = graphql`
   query AboutPage($path: String!) {
@@ -41,4 +45,4 @@ export const aboutPageQuery = graphql`
       }
     }
   }
-`;
+`

src/templates/blog-post.js

@@ -1,40 +1,48 @@
-import React from 'react';
-import graphql from 'graphql';
-import Helmet from 'react-helmet';
-import Content, { HTMLContent } from '../components/Content';
+import React from 'react'
+import graphql from 'graphql'
+import Helmet from 'react-helmet'
+import Content, { HTMLContent } from '../components/Content'
 
 export const BlogPostTemplate = ({
-  content, contentComponent, description, title, helmet,
+  content,
+  contentComponent,
+  description,
+  title,
+  helmet,
 }) => {
-  const PostContent = contentComponent || Content;
+  const PostContent = contentComponent || Content
 
   return (
     <section className="section">
-      { helmet || ''}
+      {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>
+            <h1 className="title is-size-2 has-text-weight-bold is-bold-light">
+              {title}
+            </h1>
             <p>{description}</p>
             <PostContent content={content} />
           </div>
         </div>
       </div>
     </section>
-  );
-};
+  )
+}
 
 export default ({ data }) => {
-  const { markdownRemark: post } = data;
+  const { markdownRemark: post } = data
 
-  return (<BlogPostTemplate
-    content={post.html}
-    contentComponent={HTMLContent}
-    description={post.frontmatter.description}
-    helmet={<Helmet title={`Blog | ${post.frontmatter.title}`} />}
-    title={post.frontmatter.title}
-  />);
-};
+  return (
+    <BlogPostTemplate
+      content={post.html}
+      contentComponent={HTMLContent}
+      description={post.frontmatter.description}
+      helmet={<Helmet title={`Blog | ${post.frontmatter.title}`} />}
+      title={post.frontmatter.title}
+    />
+  )
+}
 
 export const pageQuery = graphql`
   query BlogPostByPath($path: String!) {
@@ -48,4 +56,4 @@ export const pageQuery = graphql`
       }
     }
   }
-`;
+`

src/templates/product-page.js

@@ -1,11 +1,19 @@
-import React from 'react';
-import graphql from 'graphql';
-import Features from '../components/Features';
-import Testimonials from '../components/Testimonials';
-import Pricing from '../components/Pricing';
+import React from 'react'
+import graphql from 'graphql'
+import Features from '../components/Features'
+import Testimonials from '../components/Testimonials'
+import Pricing from '../components/Pricing'
 
 export const ProductPageTemplate = ({
-  image, title, heading, description, intro, main, testimonials, fullImage, pricing,
+  image,
+  title,
+  heading,
+  description,
+  intro,
+  main,
+  testimonials,
+  fullImage,
+  pricing,
 }) => (
   <section className="section section--gradient">
     <div className="container">
@@ -31,14 +39,18 @@ export const ProductPageTemplate = ({
               </div>
               <div className="columns">
                 <div className="column is-7">
-                  <h3 className="has-text-weight-semibold is-size-2">{heading}</h3>
+                  <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>
+                  <h3 className="has-text-weight-semibold is-size-3">
+                    {main.heading}
+                  </h3>
                   <p>{main.description}</p>
                 </div>
               </div>
@@ -80,7 +92,9 @@ export const ProductPageTemplate = ({
                 className="full-width-image-container"
                 style={{ backgroundImage: `url(${fullImage})` }}
               />
-              <h2 className="has-text-weight-semibold is-size-2">{pricing.heading}</h2>
+              <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>
@@ -89,10 +103,10 @@ export const ProductPageTemplate = ({
       </div>
     </div>
   </section>
-);
+)
 
 export default ({ data }) => {
-  const { frontmatter } = data.markdownRemark;
+  const { frontmatter } = data.markdownRemark
 
   return (
     <ProductPageTemplate
@@ -106,8 +120,8 @@ export default ({ data }) => {
       fullImage={frontmatter.full_image}
       pricing={frontmatter.pricing}
     />
-  );
-};
+  )
+}
 
 export const productPageQuery = graphql`
   query ProductPage($path: String!) {
@@ -160,4 +174,4 @@ export const productPageQuery = graphql`
       }
     }
   }
-`;
+`