Merge pull request #4 from MrToph/feature-update-gatsby-v2

Feature update gatsby v2

README.md

@@ -1,31 +1,37 @@
 # cmichel.io
+
 These are the source-files for my blog, [cmichel.io](https://cmichel.io).
 
 ## Get started
+
 1. Clone this repo
 1. `npm install`
 1. To run it in development mode, run `gatsby develop`
 1. To build (deploy) the site, run `gatsby build` (`npm run deploy`)
 
 
 ### Additional Setup
+
 This repo includes cross-posting scripts to publish the articles to [medium](https://medium.com) and the [steem blockchain](https://steemit.com).
 After cloning this repo, you need to set up your `.env` file. An example is given in `.env.example`.
 
 I use [netlify](https://netlify.com) to auto-deploy this site on any changes in this repo. You might want to create an account and authorize `netlify`.
 
 
 ## Publishing new posts
+
 To publish a new post, simply run `npm run create`. This will create a template post in `src/pages/<slug>`.
 Once done writing, you push the changes to `master`.
 This triggers a [netlify](https://netlify.com) `git hook` which builds and auto-deploys the new site. After some minutes the new post is live.
 
 Currently, you have to run the cross-posting scripts by hand.
 
 ## Development Overview
+
 This is a standard [gatsbyjs](https://gatsbyjs.org) repo.
 
 ### Gatsby
+
 It includes the posts written in Markdown (along with the images used in them) in their own directories in `src/pages`. This directory is used as the post's _slug_. (There are some legacy posts that do not follow this structure and have a `slug` field defined in the markdown frontmatter.)
 
 The following **gatsby-plugins** are used during the posts' creation process:
@@ -36,10 +42,11 @@ They are copied to `public/static` and the corresponding relative path **of the
 
 > _Note:_ The linked images and files are only created when **building**. Therefore, you need to run `gatsby build` before you can see them in `develop` mode.
 
-Other plugins used in the build process:
+Other plugins used in the **build** process:
 1. An RSS feed containing all posts is created at `public/feed.xml` (`gatsby-plugin-feed`)
 
 ### Cross-post scripts
+
 This repo includes cross-posting scripts to publish the posts to [medium](https://medium.com) and the [steem blockchain](https://steemit.com).
 
 They are located in the `scripts/publish` directory. You need `node` v8+ to run them, because they make use of `async/await`.
@@ -57,5 +64,6 @@ The following modifications are done when publishing a markdown post:
 1. A footer is inserted, linking back to the original post on my blog.
 
 ## ToDo:
-* [ ] Add drip widget?
-* [ ] Implement auto-detection of new posts, and add a `.circleci` git hook which then automatically cross-posts.
+
+* [ ] Add drip widget / newsletter subscription?
+* [ ] Implement auto-detection of new posts, and add a `.circleci` git hook which then automatically cross-posts.

gatsby-config.js

@@ -1,31 +1,31 @@
-/*eslint-env node */
-const url = require('url')
+/* eslint-env node */
+const url = require(`url`)
 
 module.exports = {
   siteMetadata: {
     title: `cmichel`,
-    author: 'Christoph Michel',
+    author: `Christoph Michel`,
     description: `Christoph Michel's Blog.`,
-    siteUrl: 'https://cmichel.io/',
-    twitter: 'cmichelio',
-    github: 'MrToph',
-    medium: 'cmichel',
-    steem: 'cmichel',
-    linkedIn: 'christoph-michel-dev',
+    siteUrl: `https://cmichel.io/`,
+    twitter: `cmichelio`,
+    github: `MrToph`,
+    medium: `cmichel`,
+    steem: `cmichel`,
+    linkedIn: `christoph-michel-dev`,
   },
-  pathPrefix: '/',
+  pathPrefix: `/`,
   plugins: [
     {
       resolve: `gatsby-source-filesystem`,
       options: {
         path: `${__dirname}/src/pages`,
-        name: 'pages',
+        name: `pages`,
       },
     },
     {
       resolve: `copy-images-structure`,
       options: {
-        ignoreFileExtensions: ['psd'],
+        ignoreFileExtensions: [`psd`],
       },
     },
     {
@@ -36,7 +36,7 @@ module.exports = {
             // copies svg images, and all other _linked_ non-image files
             resolve: `gatsby-remark-copy-linked-files`,
             options: {
-              destinationDir: 'static',
+              destinationDir: `static`,
               // ignoreFileExtensions: [],
             },
           },
@@ -53,8 +53,8 @@ module.exports = {
               wrapperStyle: `margin-bottom: 1.0725rem`,
             },
           },
-          'gatsby-remark-prismjs',
-          'gatsby-remark-smartypants',
+          `gatsby-remark-prismjs`,
+          `gatsby-remark-smartypants`,
         ],
       },
     },
@@ -88,7 +88,7 @@ module.exports = {
             query: `
             {
               allMarkdownRemark(
-                limit: 1000,
+                limit: 20,
                 sort: { order: DESC, fields: [frontmatter___date] },
               ) {
                 edges {
@@ -105,15 +105,19 @@ module.exports = {
               }
             }
             `,
-            output: '/feed.xml',
+            output: `/feed.xml`,
           },
         ],
       },
     },
     `gatsby-plugin-offline`,
     `gatsby-plugin-react-helmet`,
     `gatsby-plugin-glamor`,
-    // `gatsby-plugin-twitter`,
-    `gatsby-plugin-react-next`,
+    {
+      resolve: `gatsby-plugin-layout`,
+      options: {
+        component: require.resolve(`./src/components/layout.js`),
+      },
+    },
   ],
 }

gatsby-node.js

@@ -1,14 +1,14 @@
 /*eslint-env node */
-const _ = require('lodash')
-const Promise = require('bluebird')
-const path = require('path')
-const { createFilePath } = require('gatsby-source-filesystem')
+const _ = require(`lodash`)
+const Promise = require(`bluebird`)
+const path = require(`path`)
+const { createFilePath } = require(`gatsby-source-filesystem`)
 
-exports.createPages = ({ graphql, boundActionCreators }) => {
-  const { createPage } = boundActionCreators
+exports.createPages = ({ graphql, actions }) => {
+  const { createPage } = actions
 
   return new Promise((resolve, reject) => {
-    const blogPost = path.resolve('./src/templates/blog-post.js')
+    const blogPost = path.resolve(`./src/templates/blog-post.js`)
     resolve(
       graphql(
         `
@@ -48,10 +48,10 @@ exports.createPages = ({ graphql, boundActionCreators }) => {
   })
 }
 
-exports.onCreateNode = ({ node, boundActionCreators, getNode }) => {
-  const { createNodeField } = boundActionCreators
+exports.onCreateNode = ({ node, actions, getNode }) => {
+  const { createNodeField } = actions
   if (node.internal.type === `MarkdownRemark`) {
-    let slug = ''
+    let slug = ``
     if (node.frontmatter && node.frontmatter.slug) slug = node.frontmatter.slug
     else {
       slug = createFilePath({ node, getNode })
@@ -66,14 +66,14 @@ exports.onCreateNode = ({ node, boundActionCreators, getNode }) => {
   }
 }
 
-exports.onCreatePage = ({ page, boundActionCreators }) => {
-  const { createPage } = boundActionCreators
+exports.onCreatePage = ({ page, actions }) => {
+  const { createPage } = actions
 
   // page.matchPath is a special key that's used for matching pages
   // only on the client.
   // we use it to make the categories page work
-  if (page.path === '/categories/') {
-    page.matchPath = '/categories/:category'
+  if (page.path.match(/^\/categories/)) {
+    page.matchPath = `/categories/*`
 
     createPage(page)
   }