diff --git a/docs/docs/adding-search-with-js-search.md b/docs/docs/adding-search-with-js-search.md
index eb4fa287fb65f..0c5c0847db61b 100644
--- a/docs/docs/adding-search-with-js-search.md
+++ b/docs/docs/adding-search-with-js-search.md
@@ -1,8 +1,8 @@
----
+=======
title: Adding search with js-search
---
This is a stub. Help our community expand it.
Please use the [Gatsby Style Guide](/docs/gatsby-style-guide/) to ensure your
-pull request gets accepted.
+pull request gets accepted.
\ No newline at end of file
diff --git a/docs/tutorial/appendix/source-JSON-YAML/index.md b/docs/tutorial/appendix/source-JSON-YAML/index.md
new file mode 100644
index 0000000000000..2dcd6519556a7
--- /dev/null
+++ b/docs/tutorial/appendix/source-JSON-YAML/index.md
@@ -0,0 +1,274 @@
+---
+title: "Sourcing from JSON or YAML"
+---
+
+# Beforehand
+
+As you're presented with Gatsby, you'll see that you have at your disposal a myriad of ways to pull data from into your website, ranging from the most used ones like [Contenfull](https://www.contentful.com/), or [WordPress](https://wordpress.com/), [Drupal](https://www.drupal.org/), to the most edgier ones like [ButterCMS](https://buttercms.com/), [GraphCMS](https://graphcms.com/) and their appropriate plugins to ensure connectivity.
+
+With this tutorial, it will help you return to the origins and instead of pulling data in from the providers above, you'll use a plain JSON file and YAML to achieve this.
+
+It will presented a way to use either JSON or YAML files, for creating the bare structure of a gatsby website, by adding some pages dynamically with either one of the above.
+
+Also a way to load contents from both sources to a page.
+
+## Prerequisites
+
+Before we go through the steps needed to add plain JSON or YAML into your Gatsby website, it would be advised
+if the reader is not familiar on how Gatsby works and is set up to follow through the [tutorial](https://www.gatsbyjs.org/tutorial/) and brush up on the [documentation](https://www.gatsbyjs.org/docs/).
+
+Otherwise just skip this part and move onto the next part.
+
+## Setup
+
+Open up a terminal and create a new folder that will be used for the project:
+
+```bash
+mkdir mywebsite
+```
+
+Inside that folder, create a new Gatsby website using a starter template, using the command bellow.
+
+```bash
+npx gatsby new gatsby-with-JSON-YAML https://github.com/gatsbyjs/gatsby-starter-default
+```
+
+After the process is complete, some additional packages are needed.
+
+Navigate into the `gatsby-with-JSON-YAML` folder and issue the following command:
+
+```bash
+npm install --save js-yaml uuid axios
+```
+
+Or if Yarn is being used:
+
+```bash
+yarn add js-yaml uuid axios
+```
+
+[Axios](https://github.com/axios/axios) will be used to handle all promise based requests, as it can be seen later. [js-yaml](https://github.com/nodeca/js-yaml) for parsing the yaml file contents. [uuid](https://github.com/kelektiv/node-uuid#readme) is used as a safety measure for React element key handling.
+
+Create a folder called `data` in the root of project folder and two more, one with the name `json` and another one called `yaml` inside that.
+
+Also another folder called `static`, as per documented [here](https://www.gatsbyjs.org/docs/static-folder/), so that the file contents can be handled more easily as you can read about later.
+
+We can now move onto the actual implementation of the code.
+
+### Using JSON as a source for building a site
+
+In this section it will be presented a way to create the bare structure of a site using a JSON file and Gatsby API.
+
+Start by copying the contents of the example JSON provided [here](https://github.com/gatsbyjs/gatsby/tree/master/examples/sourcing-from-JSON-or-Yaml/content/data/json/) into the `json` folder created above.
+
+Change the `gatsby-node.js` file to the following:
+
+```javascript
+exports.createPages = ({ actions }) => {
+ const { createPage } = actions
+ return new Promise(resolve => {
+ const JSONDoc = require("./content/data/json/index.json")
+ JSONDoc.forEach(element => {
+ createPage({
+ path: element.path,
+ component: require.resolve("./src/templates/basicTemplate.js"),
+ context: {
+ pageContent: element.content,
+ links: element.links,
+ },
+ })
+ })
+ resolve()
+ })
+}
+```
+
+What the above code is doing:
+
+- Loading the contents of the JSON file into a `const`.
+- Iterating over the contents, to create a page based on a template.
+- Inside every page created the [pageContext](https://www.gatsbyjs.org/docs/behind-the-scenes-terminology/#pagecontext) is used to inject some data that will be presented in the page and also some navigation between the pages.
+
+Once that is done, create the file `./src/templates/basicTemplate.js` with the following contents:
+
+```javascript
+import React from "react"
+import uuid from "uuid"
+import Layout from "../components/layout"
+import SEO from "../components/seo"
+import { Link } from "gatsby"
+const basicTemplate = props => {
+ const { pageContext } = props
+ const { pageContent, links } = pageContext
+
+ return (
+
+
+
+ {pageContent.map(data => (
+
{data.item}
+ ))}
+
+
+ {links.map(item => (
+
+ {item.to}
+
+ ))}
+
+
+ )
+}
+export default basicTemplate
+```
+
+The above code is a plain React presentational component that recieves some data via the `pageContext` prop and shows it.
+
+Once all is done, issuing `gatsby develop` and opening your favourite browser of choice and navigating into:
+`http://localhost:8000/page1` for instance will what was done here.
+
+Now onto using a YAML file.
+
+### Using YAML as a source for building a site
+
+In order the same approach as the one documented above, but this time with a YAML file, is similar, in this particular case copy the YAML file located [here](https://github.com/gatsbyjs/gatsby/tree/master/examples/sourcing-from-JSON-or-Yaml/content/data/yaml/) to the `yaml` folder created earlier.
+
+Now change the `gatsby-node.js` to the following:
+
+```javascript
+const fs = require("fs")
+const yaml = require("js-yaml") // the yaml parser being imported to be used.
+exports.createPages = ({ actions }) => {
+ const { createPage } = actions
+ return new Promise(resolve => {
+ //yaml file loaded here
+ const ymlDoc = yaml.safeLoad(
+ fs.readFileSync("./content/data/yaml/index.yaml", "utf-8")
+ )
+ //
+ ymlDoc.forEach(element => {
+ createPage({
+ path: element.path,
+ component: require.resolve("./src/templates/basicTemplate.js"),
+ context: {
+ pageContent: element.content,
+ links: element.links,
+ },
+ })
+ })
+ resolve()
+ })
+}
+```
+
+The code above is somewhat similar to the code described above.
+
+The only diference here is the way how the data is loaded, here is where the `js-yaml` package installed earlier comes into play. It will load the contents of the file and create the website structure and some contents.
+
+### Using JSON as a content provider a page
+
+Now we'll go back to JSON, to be used as a source for content to a particular gatsby page.
+
+Now you'll see the reason of the `static` folder.
+Copy this [file](https://github.com/gatsbyjs/gatsby/tree/master/examples/sourcing-from-JSON-or-Yaml/static/second.json) inside the newly created folder.
+
+Create a new file inside the `pages` folder, for this example with will be named `jsononclient.js`, but whatever name you decide is fine.
+
+Inside that file add the following:
+
+```javascript
+import React, { Component } from "react"
+import axios from "axios"
+import Layout from "../components/layout"
+import SEO from "../components/seo"
+
+class ClientJSON extends Component {
+ state = {
+ jsonData: {},
+ }
+ async componentDidMount() {
+ const JSONRequest = await axios.get("./second.json")
+ this.setState({ jsonData: JSONRequest.data })
+ }
+ render() {
+ const { jsonData } = this.state
+ if (!jsonData.title) {
+ return
fetching data! give it a moment
+ }
+ return (
+
+
+
+ {jsonData.content.map(data => {
+ return
{data.item}
+ })}
+
+
+ )
+ }
+}
+
+export default ClientJSON
+```
+
+What the above code is doing is perfoming a GET request, using [Axios](https://github.com/axios/axios), the url when resolved, will load the contents of that particular static asset and update the component state in order to be used.
+
+**Be advised** that this block of code and the one bellow will function while developing your site. Some changes are required before issuing a production build.
+
+### Using YAML as a content provider a page
+
+Finally the same approach can be used for a YAML file, the process is somewhat similar to the above, instead of the file being copied to the static folder being the .json one, now is the .yaml one.
+
+Create file inside the `pages` folder, for this example it will be named `ymlonclient.js`, but like above, the name is entirely to the reader.
+
+Inside the newly create file, add the following contents:
+
+```javascript
+import React, { Component } from "react"
+import Layout from "../components/layout"
+import SEO from "../components/seo"
+import axios from "axios"
+import yaml from "js-yaml"
+class ClientYAML extends Component {
+ state = {
+ yamlData: {},
+ }
+ async componentDidMount() {
+ const ymlfile = await axios.get("./second.yaml")
+ const data = yaml.safeLoad(ymlfile.data)
+ this.setState({ yamlData: data })
+ }
+ render() {
+ const { yamlData } = this.state
+ if (!yamlData.title) {
+ return
fetching data! give it a moment
+ }
+ return (
+
+
+
+ {yamlData.content.map(data => {
+ return
{data.item}
+ })}
+
+
+ )
+ }
+}
+export default ClientYAML
+```
+
+What the following code will do, is in fact similar to the one used for example mentioned above. The only diference is the way we handle the loading of the contents originating from the file.
+Once again taking advantage of the `js-yaml` package added earlier so that loading either contents can be achieved on the client side.
+
+## Last words
+
+Gatsby offers a way achieve almost the same result, by using the appropriate plugins and graphql.
+But that's the matter for another tutorial.
+
+With this document, it was presented in a rather extensive way, how to use these simple structures to handle data, to be used with Gatsby site.
+
+Now go make something great.
diff --git a/examples/using-JSON-YAML-source/.gitignore b/examples/using-JSON-YAML-source/.gitignore
new file mode 100644
index 0000000000000..6d8a52ae0d104
--- /dev/null
+++ b/examples/using-JSON-YAML-source/.gitignore
@@ -0,0 +1,71 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Typescript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# dotenv environment variables file
+.env
+
+# gatsby files
+.cache/
+public
+
+# Mac files
+.DS_Store
+
+# Yarn
+yarn-error.log
+.pnp/
+.pnp.js
+# Yarn Integrity file
+.yarn-integrity
+
+sourcing-from-JSON-or-Yaml.md
\ No newline at end of file
diff --git a/examples/using-JSON-YAML-source/.prettierrc b/examples/using-JSON-YAML-source/.prettierrc
new file mode 100644
index 0000000000000..36301bc5cff6c
--- /dev/null
+++ b/examples/using-JSON-YAML-source/.prettierrc
@@ -0,0 +1,5 @@
+{
+ "semi": false,
+ "singleQuote": true,
+ "trailingComma": "es5"
+}
diff --git a/examples/using-JSON-YAML-source/LICENSE b/examples/using-JSON-YAML-source/LICENSE
new file mode 100644
index 0000000000000..5169a5e4135e9
--- /dev/null
+++ b/examples/using-JSON-YAML-source/LICENSE
@@ -0,0 +1,22 @@
+The MIT License (MIT)
+
+Copyright (c) 2015 gatsbyjs
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
diff --git a/examples/using-JSON-YAML-source/README.md b/examples/using-JSON-YAML-source/README.md
new file mode 100644
index 0000000000000..d8a6c2b354c31
--- /dev/null
+++ b/examples/using-JSON-YAML-source/README.md
@@ -0,0 +1,19 @@
+# Sourcing from YAML and JSON files
+
+Gatsby example that uses JSON files and YAML files as a means of sourcing data.
+
+## Live Version
+
+https://hungry-edison-90c8ac.netlify.com/
+
+## Routes
+
+Bellow are listed the routes generated via GATSBY API
+
+- /page1
+- /page2
+- /page3
+- /page4
+- /page5
+
+The route `/jsononclient` and `/ymlonclient` will show some JSON or YAML content loaded on the client side.
diff --git a/examples/using-JSON-YAML-source/content/data/json/index.json b/examples/using-JSON-YAML-source/content/data/json/index.json
new file mode 100644
index 0000000000000..b961622bf5261
--- /dev/null
+++ b/examples/using-JSON-YAML-source/content/data/json/index.json
@@ -0,0 +1,78 @@
+[
+ {
+ "path": "/page1",
+ "content": [
+ {
+ "item":"one item"
+ },
+ {
+ "item": "two items"
+ },
+ {
+ "item":"three items"
+ }
+ ],
+ "links": [
+ {
+ "to": "/page2"
+ },
+ {
+ "to": "/page5"
+ }
+ ]
+ },
+ {
+ "path": "/page2",
+ "content": [
+ {
+ "item":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+ }
+ ],
+ "links": [
+ {
+ "to": "/page1"
+ }
+ ]
+ },
+ {
+ "path": "/page3",
+ "content": [
+ {
+ "item":"Hodor. Hodor hodor, hodor. Hodor hodor hodor hodor hodor. Hodor. Hodor! Hodor hodor, hodor; hodor hodor hodor. Hodor. Hodor hodor; hodor hodor - hodor, hodor, hodor hodor. Hodor, hodor. Hodor. Hodor, hodor hodor hodor; hodor hodor; hodor hodor hodor! Hodor hodor HODOR! Hodor hodor... Hodor hodor hodor..."
+ }
+ ],
+ "links": []
+ },
+ {
+ "path": "/page4",
+ "content": [
+ {
+ "item":"Lorem ipsum dolor amet mustache knausgaard +1, blue bottle waistcoat tbh semiotics artisan synth stumptown gastropub cornhole celiac swag. Brunch raclette vexillologist post-ironic glossier ennui XOXO mlkshk godard pour-over blog tumblr humblebrag. Blue bottle put a bird on it twee prism biodiesel brooklyn. Blue bottle ennui tbh succulents."
+ }
+ ],
+ "links": [
+ {
+ "to": "/page5"
+ },
+ {
+ "to":"/page1"
+ }
+ ]
+ },
+ {
+ "path": "/page5",
+ "content": [
+ {
+ "item":"Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium."
+ },
+ {
+ "item":"Bacon ipsum dolor amet short ribs brisket venison rump drumstick pig sausage prosciutto chicken spare ribs salami picanha doner. Kevin capicola sausage, buffalo bresaola venison turkey shoulder picanha ham pork tri-tip meatball meatloaf ribeye. Doner spare ribs andouille bacon sausage. Ground round jerky brisket pastrami shank."
+ }
+ ],
+ "links": [
+ {
+ "to": "/page1"
+ }
+ ]
+ }
+ ]
\ No newline at end of file
diff --git a/examples/using-JSON-YAML-source/content/data/yaml/index.yaml b/examples/using-JSON-YAML-source/content/data/yaml/index.yaml
new file mode 100644
index 0000000000000..eb905be3b9c47
--- /dev/null
+++ b/examples/using-JSON-YAML-source/content/data/yaml/index.yaml
@@ -0,0 +1,50 @@
+---
+- path: "/page1"
+ content:
+ - item: one item
+ - item: two items
+ - item: three items
+ links:
+ - to: "/page2"
+ - to: "/page5"
+- path: "/page2"
+ content:
+ - item: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+ quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
+ eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
+ in culpa qui officia deserunt mollit anim id est laborum.
+ links:
+ - to: "/page1"
+- path: "/page3"
+ content:
+ - item: Hodor. Hodor hodor, hodor. Hodor hodor hodor hodor hodor. Hodor. Hodor!
+ Hodor hodor, hodor; hodor hodor hodor. Hodor. Hodor hodor; hodor hodor - hodor,
+ hodor, hodor hodor. Hodor, hodor. Hodor. Hodor, hodor hodor hodor; hodor hodor;
+ hodor hodor hodor! Hodor hodor HODOR! Hodor hodor... Hodor hodor hodor...
+ links: []
+- path: "/page4"
+ content:
+ - item: Lorem ipsum dolor amet mustache knausgaard +1, blue bottle waistcoat tbh
+ semiotics artisan synth stumptown gastropub cornhole celiac swag. Brunch raclette
+ vexillologist post-ironic glossier ennui XOXO mlkshk godard pour-over blog tumblr
+ humblebrag. Blue bottle put a bird on it twee prism biodiesel brooklyn. Blue
+ bottle ennui tbh succulents.
+ links:
+ - to: "/page5"
+ - to: "/page1"
+- path: "/page5"
+ content:
+ - item: Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De
+ carne lumbering animata corpora quaeritis. Summus brains sit, morbo vel maleficia?
+ De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis
+ soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus
+ comedat cerebella viventium.
+ - item: Bacon ipsum dolor amet short ribs brisket venison rump drumstick pig sausage
+ prosciutto chicken spare ribs salami picanha doner. Kevin capicola sausage,
+ buffalo bresaola venison turkey shoulder picanha ham pork tri-tip meatball meatloaf
+ ribeye. Doner spare ribs andouille bacon sausage. Ground round jerky brisket
+ pastrami shank.
+ links:
+ - to: "/page1"
diff --git a/examples/using-JSON-YAML-source/gatsby-config.js b/examples/using-JSON-YAML-source/gatsby-config.js
new file mode 100644
index 0000000000000..765ebb90203dd
--- /dev/null
+++ b/examples/using-JSON-YAML-source/gatsby-config.js
@@ -0,0 +1,34 @@
+module.exports = {
+ siteMetadata: {
+ title: `Gatsby Default Starter`,
+ description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
+ author: `@gatsbyjs`,
+ },
+ plugins: [
+ `gatsby-plugin-react-helmet`,
+ {
+ resolve: `gatsby-source-filesystem`,
+ options: {
+ name: `images`,
+ path: `${__dirname}/src/images`,
+ },
+ },
+ `gatsby-transformer-sharp`,
+ `gatsby-plugin-sharp`,
+ {
+ resolve: `gatsby-plugin-manifest`,
+ options: {
+ name: `gatsby-starter-default`,
+ short_name: `starter`,
+ start_url: `/`,
+ background_color: `#663399`,
+ theme_color: `#663399`,
+ display: `minimal-ui`,
+ icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
+ },
+ },
+ // this (optional) plugin enables Progressive Web App + Offline functionality
+ // To learn more, visit: https://gatsby.app/offline
+ // 'gatsby-plugin-offline',
+ ],
+}
diff --git a/examples/using-JSON-YAML-source/gatsby-node.js b/examples/using-JSON-YAML-source/gatsby-node.js
new file mode 100644
index 0000000000000..3cfaf47a5f1d9
--- /dev/null
+++ b/examples/using-JSON-YAML-source/gatsby-node.js
@@ -0,0 +1,40 @@
+/**
+ * Implement Gatsby's Node APIs in this file.
+ *
+ * See: https://www.gatsbyjs.org/docs/node-apis/
+ */
+
+// You can delete this file if you're not using it
+const fs = require('fs');
+const yaml = require('js-yaml')
+exports.createPages=({actions})=>{
+ const {createPage}= actions
+ return new Promise((resolve)=>{
+ /* const JSONDoc= require('./content/data/json/index.json')
+ JSONDoc.forEach(element => {
+ createPage({
+ path:element.path,
+ component:require.resolve('./src/templates/basicTemplate.js'),
+ context:{
+ pageContent:element.content,
+ links:element.links
+ }
+ })
+ }); */
+
+ //yaml
+ const ymlDoc= yaml.safeLoad(fs.readFileSync('./content/data/yaml/index.yaml','utf-8'))
+ //
+ ymlDoc.forEach(element=>{
+ createPage({
+ path:element.path,
+ component:require.resolve('./src/templates/basicTemplate.js'),
+ context:{
+ pageContent:element.content,
+ links:element.links
+ }
+ })
+ })
+ resolve()
+ })
+}
\ No newline at end of file
diff --git a/examples/using-JSON-YAML-source/package.json b/examples/using-JSON-YAML-source/package.json
new file mode 100644
index 0000000000000..752be5f2b0660
--- /dev/null
+++ b/examples/using-JSON-YAML-source/package.json
@@ -0,0 +1,47 @@
+{
+ "name": "gatsby-starter-default",
+ "private": true,
+ "description": "A simple starter to get up and developing quickly with Gatsby",
+ "version": "0.1.0",
+ "author": "Kyle Mathews ",
+ "dependencies": {
+ "axios": "^0.18.0",
+ "gatsby": "^2.0.76",
+ "gatsby-image": "^2.0.20",
+ "gatsby-plugin-manifest": "^2.0.9",
+ "gatsby-plugin-offline": "^2.0.16",
+ "gatsby-plugin-react-helmet": "^3.0.2",
+ "gatsby-plugin-sharp": "^2.0.14",
+ "gatsby-source-filesystem": "^2.0.8",
+ "gatsby-transformer-sharp": "^2.1.8",
+ "js-yaml": "^3.12.1",
+ "prop-types": "^15.6.2",
+ "react": "^16.6.3",
+ "react-dom": "^16.6.3",
+ "react-helmet": "^5.2.0",
+ "rimraf": "^2.6.3",
+ "uuid": "^3.3.2"
+ },
+ "keywords": [
+ "gatsby"
+ ],
+ "license": "MIT",
+ "scripts": {
+ "build": "gatsby build",
+ "develop": "gatsby develop",
+ "start": "npm run develop",
+ "clear": "rimraf ./public && rimraf .cache",
+ "format": "prettier --write \"src/**/*.js\"",
+ "test": "echo \"Write tests! -> https://gatsby.app/unit-testing\""
+ },
+ "devDependencies": {
+ "prettier": "^1.15.2"
+ },
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/gatsbyjs/gatsby-starter-default"
+ },
+ "bugs": {
+ "url": "https://github.com/gatsbyjs/gatsby/issues"
+ }
+}
diff --git a/examples/using-JSON-YAML-source/src/components/header.js b/examples/using-JSON-YAML-source/src/components/header.js
new file mode 100644
index 0000000000000..235f8834818a3
--- /dev/null
+++ b/examples/using-JSON-YAML-source/src/components/header.js
@@ -0,0 +1,42 @@
+import { Link } from 'gatsby'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+const Header = ({ siteTitle }) => (
+