[v2] Merge in master

.travis.yml

@@ -1,20 +1,40 @@
-language: node_js
-node_js:
-  - "6"
-  - "8"
+sudo: required
+
+services:
+  - docker
+
+os:
+  - linux
 
-os: [linux]
 dist: trusty
 sudo: required
-cache:
-  yarn: true
 
-before_install:
-  - curl -o- -L https://yarnpkg.com/install.sh | bash
-  - export PATH=$HOME/.yarn/bin:$PATH
+jobs:
+    include:
+        - stage: build and test
+          if: type = pull_request
+          language: node_js
+          node_js:
+            - '6'
+            - '8'
+          cache:
+            yarn: true
+          before_install:
+          - curl -o- -L https://yarnpkg.com/install.sh | bash
+          - export PATH=$HOME/.yarn/bin:$PATH
+          install:
+          - yarn run bootstrap
+          script:
+          - yarn test
+
+        - stage: www graphql docker image build and push
+          if: (NOT type = pull_request) AND branch = master
+          env:
+            - DOCKER_USER=mikeallanson
+            - secure: J8daWiar248dPWwrutZd83CeSif/+rMjB9hSOjq0pQDNj7QcOKjUwLsv6yMDJAcQCAAyobwRQTNYANGXmvQsi5ZppZe/P/enDPD/ZEPz3XkvxYYbXC7TNKVp8bnvYTWu6qO9ljkMsKGttsqaz+MyTx2MjV9pJhkmw2rfQ5iVn/80bORaCCMDcSB2ud/jLN+AVBFNMDUVEL9RnAXTq+CyQmSLvlvmJNCu9CXnb/Kt+IcbqswTjre/V2lVkzcXEvUYd0F9la3bsGVVQ9vBd3IumSIGnSOxD91DLUOeuh5K7FJxPoqqwM+bCn4zZWtQMOGpPDoYYllVejFHC16g/FBa6uC455OvqeS6fSCRXr9bqDxDLPhn7IyDAuG2jXps++sbd2RA8eXq8IGA4AqtTf4smiIXbOu3p3d2n9ww4Z/NgRpLHYRFcVwjG92okVN4by7n1+kr7wGx+alCkHTMDrLkkeZ0AEJphaxAH+TxP+SvCFY1z/OyNM0YzICrLXjf2w60Xz4wE563yUM8OLFm4GbeM33eQYRErTLADG9JtGDev+L5tS/Vo8+KGkL3creY7f9BgsNyfxbQbv84X7f+vSPlzl6u8V9EuVA80+5hE7artRtM+BxiT5pGM1983+QK2CPv4EptMYRa0EjlVbxyrfVYF22lsAqqgVApZGGneUxB0cQ= # DOCKER_PASS
+          before_install:
+            - chmod +x scripts/www-graphql-docker-push.sh
+          script:
+            - ./scripts/www-graphql-docker-push.sh
 
-install:
-  - yarn run bootstrap
 
-script:
-  - yarn test

README.md

@@ -28,8 +28,6 @@ Websites built with Gatsby:
 * [Formidable](https://formidable.com/)
 * [openFDA](https://open.fda.gov/)
   ([source](https://github.com/FDA/open.fda.gov))
-* [ReasonML Docs](https://reasonml.github.io/)
-  ([source](https://github.com/reasonml/reasonml.github.io))
 * [Bricolage.io](https://www.bricolage.io/)
   ([source](https://github.com/KyleAMathews/blog))
 * [Hack Club](https://hackclub.com/)
@@ -159,6 +157,8 @@ Websites built with Gatsby:
 * [LaserTime Clinic](https://lasertime.ru) ([source](https://github.com/oleglegun/lasertime))
 * [Gatsby Manor - themes for GatsbyJS](https://gatsbymanor.com)
 * [Darren Britton's Portfolio](https://darrenbritton.com) ([source](https://github.com/darrenbritton/darrenbritton.github.io))
+* [Portfolio / Blog of Preston Richey](https://prestonrichey.com/) ([source](https://github.com/prichey/prestonrichey.com))
+* [Beach Hut Poole](https://www.beachhutpoole.co.uk/)
 
 ## Docs
 

docs/blog/2018-02-09-announcing-gatsby-manor-themes-for-gatsbyjs/index.md

@@ -6,7 +6,7 @@ author: "Steven Natera"
 ---
 
 I am proud to announce [Gatsby Manor](https://www.gatsbymanor.com/), a gallery
-of themes for [Gatsby](https://www.Gatsby.org/). After 5 months of
+of themes for Gatsby. After 5 months of
 development, Gatsby Manor is now in public beta. Check out our
 [themes](https://www.gatsbymanor.com/themes) then use our [getting started](https://www.gatsbymanor.com/docs/quick-start/getting-started) guide to
 kickstart your Gatsby project.

docs/blog/2018-02-16-bright-future-for-the-web/index.md

@@ -0,0 +1,38 @@
+---
+title: Gatsby And The JAMstack - A Bright Future For The Web
+date: "2018-02-16"
+image: "bright-future.jpg"
+author: "Ryan Wiemer"
+---
+
+_This article was originally published on
+[Medium](https://medium.com/@ryanwiemer/gatsby-and-the-jam-stack-91e31508f364)
+on January 31, 2018._
+
+Recently I relaunched my wife’s photography portfolio, [KNW Photography](https://www.knw.io/), using a combination of Gatsby, [Contentful](https://www.contentful.com/) and [Netlify](https://www.netlify.com/). This particular group of tools represents a new and exciting web development architecture known as the [JAMstack](https://jamstack.org/) (Javascript, APIs and Markup). In this post I will be sharing my personal thoughts on each of these new tools and why together they represent the “holy grail” of the static website world.
+
+## Why Other Static Site Generators Didn’t Work For Me
+
+In case you hadn’t noticed the web moves at an insane speed. With new frameworks and tools being introduced almost daily it can be intimidating even for the most experienced developers. Perhaps you have jumped on the bandwagon too early only to regret it later. Or maybe you have given up on new tools and are happy to settle with outdated …err I mean... trusted solutions. 😉 Admittedly it’s a balancing act but I believe that in order to stay relevant we need to evolve with the web while ensuring that selected tools are robust enough to last.
+
+It was for those reasons that I was hesitant to pull the trigger on a static site generator. I feared that picking the wrong one would result in wasted time either immediately or later down the road. While static site generators have existed in some form for a while, see [Hugo](https://gohugo.io/), [Jekyll](https://jekyllrb.com/) and [Middleman](https://middlemanapp.com/), they have mostly been used by developers or code-savvy bloggers. Although these tools offer benefits such as greater speed, better security and simpler code what most of them lack in my opinion is a good solution for non technical users to update website content. Asking a non developer to edit a markdown file and commit it to GitHub is simply not realistic for most clients. Some businesses were even started to fill this niche such as [Siteleaf](https://www.siteleaf.com/) and [Forestry](https://forestry.io/) which provide a CMS for static sites built with Jekyll. Although those solutions solve part of the problem they felt too limiting for my taste and creating anything other than a simple blog is like fitting a square peg into a round hole.
+
+## Gatsby And The Road To Success
+
+![Road To Success](road-to-success.jpg)
+
+One day after airing my grievances about the current state of static site generators on Slack a fellow developer recommend that I check out Gatsby. Gatsby is yet another static site generator but what really set it apart for me was how it was built with [React](https://reactjs.org/) and emphasized a rich plugin system. This was a big plus for me as I was itching to learn more about React and the plugin system alleviated some initial pain that I would have had dealing with mundane tasks. Out of the box you get a fantastic development environment with live reloading that required almost no configuration. With Gatsby specific plugins and React components it can handle pretty much anything you throw at it.
+
+Next came integrating the statically generated site with data stored in a CMS. Again Gatsby was well suited for this and I was able to easily integrate with Contentful via the [gatsby-source-contentful](https://www.gatsbyjs.org/packages/gatsby-source-contentful/) plugin. Contentful is an example of a headless CMS, meaning that is is not tied to any particular technology or language. Contentful allows you to store content using a pleasant user interface and it can then output the data via an API. Best of all Contentful puts you in the driver seat and lets you define your own content model however you see fit. Think [WordPress Advanced Custom Fields](https://www.advancedcustomfields.com/) on steroids. With the content stored in Contentful Gatsby then uses the Contenful API along with the awesome power of [GraphQL](http://graphql.org/) to query data at build time. Cool stuff!
+
+The final piece of the puzzle was determining where to host the website. I had recently experimented with Netlify on a somewhat [pointless website for my dog](https://www.doggoforhire.com/) and I was impressed by its ease of use and how they offered a fully featured developer tier for free. In no time I was able to get my Gatsby powered website up and running on Netlify. Then with the help of webhooks I was able to have Contentful tell Netlify to “rebuild” the website whenever a new post was published. Finally with Netlify’s form handling functionality I hooked up a contact form all without a single line of backend code or even a database.
+
+## The Final Product
+
+![Final Product](final-product.jpg)
+
+After a little over a month of tinkering on the design during nights and weekends I had a fully functional website ready to be launched. During this process I learned a fair bit of how to code with React and the Gatsby community seemed genuinely nice and happy to help me to learn. The final product was a website that felt like it belonged in 2018 while still allowing my wife to easily update content with no assistance. Not only that the website was immensely faster than the previous WordPress version, served over HTTPS, utilized a CDN and cost me $0 dollars a month thanks to the extremely generous free tiers offered by Netlify and Contentful. 😍
+
+If you are currently on the fence about static site generators or the JAMstack in general there has never been a better time to jump in. In my humble opinion with these tools it has finally reached the level of maturity to not just be feasible for client work but actually pretty darn amazing.
+
+For those interested the source code for the website I built is available on GitHub: https://github.com/ryanwiemer/knw

docs/blog/2018-2-16-how-to-build-a-website-with-react/index.md

@@ -0,0 +1,54 @@
+---
+title: How to Build a Website with React
+date: "2018-02-16"
+author: Shannon Soper
+---
+
+# What is React?
+
+React is a fantastic and wildly popular tool for building websites and apps, and it creates a world where JavaScript and HTML live in happy harmony in the same files and efficiently renders your ever-changing data to the browser.
+
+## Declarative
+
+With React, you can create reusable components that will always render the same data in the same way, which wasn't always the case pre-React. Let’s say you’re a huge Olympics fan and you build a React website for tracking scores. Users who visit your site won’t need to wait for the entire tree to deconstruct and reconstruct when they click a button on your site or when the newest data on the half-pipe is available. React components will efficiently update to accommodate the changing data.
+
+## Reactive
+
+React uses a virtual tree reconciliation method to _react_ to changes in input data. Whenever any data changes, instead of rebuilding the whole DOM tree (which would be slow) — it decides what changed in its virtual DOM and then makes the smallest number of DOM changes necessary.
+
+Almost all frameworks nowadays (e.g. Angular, Vue, etc.) are approaching similar mechanisms. The virtual tree is in contrast to something like vanilla JS or jQuery where you are setting/updating DOM nodes directly.
+
+## Easy to add to the rest of your stack
+
+Switching your site(s) to new technologies optimally involves incrementally transferring your site over, page by page, to the new technology. This is difficult to do with some new frontend technologies which want to control the entire page. These technologies are like your friend who wants to take over every social event they get invited to.
+
+React is not picky; it is happy to be used in only parts of your site, so you can incrementally refactor your code in React. It's more like an easy-going friend who is happy to help with just part of the party you're throwing. It plays nicely with others!
+
+## Component-Based
+
+React components and subcomponents tend to come from breaking your website down into the smallest bits possible, using the [single responsibility principle](https://en.wikipedia.org/wiki/Single_responsibility_principle).
+
+For example, in a To-Do list, the hierarchy of components would include:
+
+* Whole list
+  * Title
+  * add a to-do line
+  * to-do line
+    * subtasks within to-dos
+  * show completed to-dos button
+
+![To-Do List](to-do-list.png)
+
+The [Reactjs.org website recommends](https://reactjs.org/docs/thinking-in-react.html) that you work with your designer(s) when creating a hierarchy of React components and subcomponents, because the designers probably already have names for each small piece of the design, and you can make sure your components have the same names.
+
+React components work just like other functions in any programming language because we call components with some input (called “property” in React) and spit out an output (a chunk of UI in React). Also, components are reusable and can contain other components. All these things are the same as other functions in other programming languages.
+
+## Using React with Gatsby
+
+GatsbyJS is a great way to build websites with React and actually solves some unique problems by making the following things more straightforward:
+
+* _Pulling in data:_ In Gatsby, GraphQL and plugins help you use data from nearly any source (including both traditional CMSs and headless CMSs. Some people I’ve talked to recently even built their Gatsby sites with Google sheets as the data source.
+* _Creating pages and routes:_ Gatsby also gives you an intuitive interface for creating pages and routes. So intuitive, in fact, that when I talked to a coworker, I said, “I remember creating pages and links to those pages from other pages, but I don’t remember creating any routes in Gatsby.” They responded, “Yeah, Gatsby took care of that for you.”
+* _Solving performance problems:_ Gatsby sites rarely have performance problems due to Gatsby’s way of loading static files.
+
+Gatsby combines the awesomeness of React with all the friendly helpfulness you’d hope for in a modern PWA framework. Happy coding, and let us know how it goes by joining us on [Twitter](https://twitter.com/gatsbyjs) and [Github](https://github.com/gatsbyjs/gatsby)!

docs/blog/author.yaml

@@ -89,3 +89,7 @@
   bio: Founder of Gatsby Manor. Site Reliability Engineer. Open source addict. Writer at Hackernoon.
   avatar: avatars/steven-natera.jpg
   twitter: "@stevennatera"
+- id: Ryan Wiemer
+  bio: Oakland based account manager that enjoys working on web and interactive projects - https://www.ryanwiemer.com 
+  avatar: avatars/ryan-wiemer.jpg
+  twitter: "@ryanwiemer"

docs/docs/adding-tags-and-categories-to-blog-posts.md

@@ -104,61 +104,80 @@ const Tags = ({ pathContext, data }) => {
       <Link to="/tags">All tags</Link>
     </div>
   );
-};
+==== BASE ====
+}
+```
 
-Tags.propTypes = {
-  pathContext: PropTypes.shape({
-    tag: PropTypes.string.isRequired,
-  }),
-  data: PropTypes.shape({
-    allMarkdownRemark: PropTypes.shape({
-      totalCount: PropTypes.number.isRequired,
-      edges: PropTypes.arrayOf(
-        PropTypes.shape({
-          node: PropTypes.shape({
-            frontmatter: PropTypes.shape({
-              path: PropTypes.string.isRequired,
-              title: PropTypes.string.isRequired,
-            }),
-          }),
-        }).isRequired,
-      ),
-    }),
-  }),
-};
+Now we'll instruct Gatsby to create the tag pages. In the site's `gatsby-node.js` file we'll call the the [`createPages`](/docs/node-apis/#createPages) API to make a page for every tag.
 
-export default Tags;
+First create a function called `createTagPages`:
 
-export const pageQuery = graphql`
-    query TagPage($tag: String) {
-      allMarkdownRemark(
-        limit: 2000
-        sort: { fields: [frontmatter___date], order: DESC }
-        filter: { frontmatter: { tags: { in: [$tag] } } }
-      ) {
-        totalCount
-        edges {
-          node {
-            frontmatter {
-              title
-              path
-            }
-          }
-        }
-      }
-    }
-`;
-```
+```javascript
+const path = require("path");
 
-**Note**: `propTypes` are included in this example to help you ensure you're getting all the data you need in the component, and to help serve as a guide while destructuring / using those props.
+const createTagPages = (createPage, edges) => {
+  // Tell it to use our tags template.
+  const tagTemplate = path.resolve(`src/templates/tags.js`);
+  // Create an empty object to store the posts.
+  const posts = {};
+  console.log("creating posts");
+==== BASE ====
 
-## Modify `gatsby-node.js` to render pages using that template
+==== BASE ====
+  // Loop through all nodes (our markdown posts) and add the tags to our post object.
+==== BASE ====
 
-Now we've got a template. Great! I'll assume you followed the tutorial for [Adding Markdown Pages](/docs/adding-tags-and-categories-to-blog-posts/) and provide a sample `createPages` that generates post pages as well as tag pages. In the site's `gatsby-node.js` file, include `lodash` (`const _ = require('lodash')`) and then make sure your [`createPages`](/docs/node-apis/#createPages) looks something like this:
+==== BASE ====
+  edges.forEach(({ node }) => {
+    if (node.frontmatter.tags) {
+      node.frontmatter.tags.forEach(tag => {
+        if (!posts[tag]) {
+          posts[tag] = [];
+==== BASE ====
+        }
+==== BASE ====
+        posts[tag].push(node);
+      });
+==== BASE ====
+    }
+==== BASE ====
+  });
+==== BASE ====
+
+==== BASE ====
+  // Create the tags page with the list of tags from our posts object.
+  createPage({
+    path: "/tags",
+    component: tagTemplate,
+    context: {
+      posts,
+    },
+  });
+==== BASE ====
+
+==== BASE ====
+  // For each of the tags in the post object, create a tag page.
+
+  Object.keys(posts).forEach(tagName => {
+    const post = posts[tagName];
+    createPage({
+      path: `/tags/${tagName}`,
+      component: tagTemplate,
+      context: {
+        posts,
+        post,
+        tag: tagName,
+      },
+    });
+  });
+};
+```
 
 ```js
-exports.createPages = ({ boundActionCreators, graphql }) => {
-  const { createPage } = boundActionCreators;
+const path = require("path");
+
+exports.createPages = ({ actions, graphql }) => {
+  const { createPage } = actions;
 
   const blogPostTemplate = path.resolve('src/templates/blog.js');
   const tagTemplate = path.resolve('src/templates/tags.js');
@@ -177,42 +196,26 @@ exports.createPages = ({ boundActionCreators, graphql }) => {
             }
           }
         }
+==== BASE ====
       }
-    }
-  `).then(result => {
-    if (result.errors) {
-      return Promise.reject(result.errors);
-    }
-
-    const posts = result.data.allMarkdownRemark.edges;
-
-    // Create post detail pages
-    posts.forEach(({ node }) => {
-      createPage({
-        path: node.frontmatter.path,
-        component: blogPostTemplate,
-      });
-    });
-
-    // Tag pages:
-    let tags = [];
-    // Iterate through each post, putting all found tags into `tags`
-    _.each(posts, edge => {
-      if (_.get(edge, 'node.frontmatter.tags')) {
-        tags = tags.concat(edge.node.frontmatter.tags);
-      }
-    });
-    // Eliminate duplicate tags
-    tags = _.uniq(tags);
-
-    // Make tag pages
-    tags.forEach(tag => {
-      createPage({
-        path: `/tags/${_.kebabCase(tag)}/`,
-        component: tagTemplate,
-        context: {
-          tag,
-        },
+==== BASE ====
+    `).then(result => {
+      console.log(result);
+      const posts = result.data.allMarkdownRemark.edges;
+
+      // call createTagPages with the result of posts
+      createTagPages(createPage, posts);
+
+      // this is the original code used to create the pages from markdown posts
+      result.data.allMarkdownRemark.edges.map(({ node }) => {
+        createPage({
+          path: node.fields.slug,
+          component: path.resolve(`./src/templates/blog-post.js`),
+          context: {
+            slug: node.fields.slug,
+          },
+        });
+==== BASE ====
       });
     });
   });

docs/docs/api-specification.md

@@ -19,7 +19,7 @@ Plugins can extend Gatsby in many ways:
   with URLs derived from their file names).
 * Modifying webpack config (e.g. for styling options, adding support for other
   compile-to-js languages)
-* Adding things to the rendered HTML (e.g. meta tags, analytics JS snippits like
+* Adding things to the rendered HTML (e.g. meta tags, analytics JS snippets like
   Google Analytics)
 * Writing out things to build directory based on site data (e.g. service worker,
   sitemap, RSS feed)