+
+ }
+}
+
+export default BlogPostTemplate
+
+export const pageQuery = `
+ query BlogPost($slug: String!) {
+ markdown(slug: { eq: $slug }) {
+ // Get the markdown body compiled to HTML.
+ html
+ frontmatter {
+ title
+ // Transform the date at build time!
+ date(formatString: "MMM D, YYYY")
+ }
+ }
+ }
+`
+
+```
+
+All data parsing and processing is plugin-driven. So in time, any
+imaginable data format and source and potential way of processing its
+data will be an npm install away.
+
+So far I've focused on building out the markdown ecosystem. So there are
+plugins to [parse markdown](/docs/packages/gatsby-parser-remark/) and
+process it in a variety of ways (including [adding syntax highlighting
+with PrismJS](/docs/packages/gatsby-typegen-remark-prismjs/) and
+[resizing images referenced in markdown
+files](/docs/packages/gatsby-typegen-remark-responsive-image/) so
+they're mobile ready). I've also added parsers for
+[YAML](/docs/packages/gatsby-parser-yaml/),
+[JSON](/docs/packages/gatsby-parser-json/), and
+[images](/docs/packages/gatsby-parser-sharp/).
+
+These plugins are easy to write (somewhat similar to webpack loaders) so
+I expect to see the list of plugins grow rapidly.
+
+The GraphQL layer can also connect to external data sources like
+databases, APIs, or 3rd party services e.g. the various hosted CMSs such
+as [Contentful](https://www.contentful.com/) and
+[DataCMS](https://www.datocms.com/).
+
+## Getting started with Gatsby 1.0
+
+Gatsby 1.0 is still in alpha so I don't recommend it yet for
+casual use. If you don't mind some growth pains and diving it to fix
+bugs and add features, Gatsby 1.0 is mostly feature-complete now and can
+be used to build real sites.
+
+The first beta will be released in the coming weeks along with more
+documentation and a getting started tutorial. Subscribe to the [1.0 meta
+issue](https://github.com/gatsbyjs/gatsby/issues/419) on Github to get
+updates.
+
+This has been a super fun project to work on. I'm really interested to
+hear your reactions and what kind of problems you face that you think
+Gatsby will help with.
+
+If you're interested in contributing, please join the [#gatsby
+channel](https://discord.gg/0ZcbPKXt5bVoxkfV) on Discord, check out the
+[issues](https://github.com/gatsbyjs/gatsby/issues), and help bikeshed
+on names and APIs and other ideas.
diff --git a/docs/blog/2017-02-21-1-0-progress-update-where-came-from-where-going/mastered-runaway-train.jpg b/docs/blog/2017-02-21-1-0-progress-update-where-came-from-where-going/mastered-runaway-train.jpg
new file mode 100644
index 0000000000000..ff2d1cabb16fc
Binary files /dev/null and b/docs/blog/2017-02-21-1-0-progress-update-where-came-from-where-going/mastered-runaway-train.jpg differ
diff --git a/docs/blog/2017-02-21-1-0-progress-update-where-came-from-where-going/runaway-train.jpg b/docs/blog/2017-02-21-1-0-progress-update-where-came-from-where-going/runaway-train.jpg
new file mode 100644
index 0000000000000..c931d8836ac71
Binary files /dev/null and b/docs/blog/2017-02-21-1-0-progress-update-where-came-from-where-going/runaway-train.jpg differ
diff --git a/docs/blog/2017-02-21-1-0-progress-update-where-came-from-where-going/ui-and-code.png b/docs/blog/2017-02-21-1-0-progress-update-where-came-from-where-going/ui-and-code.png
new file mode 100644
index 0000000000000..ba91bea90ad40
Binary files /dev/null and b/docs/blog/2017-02-21-1-0-progress-update-where-came-from-where-going/ui-and-code.png differ
diff --git a/docs/blog/2017-02-21-1-0-progress-update-where-came-from-where-going/wipeout.jpg b/docs/blog/2017-02-21-1-0-progress-update-where-came-from-where-going/wipeout.jpg
new file mode 100644
index 0000000000000..d1e42986fcc19
Binary files /dev/null and b/docs/blog/2017-02-21-1-0-progress-update-where-came-from-where-going/wipeout.jpg differ
diff --git a/docs/blog/author.yaml b/docs/blog/author.yaml
new file mode 100644
index 0000000000000..f6d67d6052ab5
--- /dev/null
+++ b/docs/blog/author.yaml
@@ -0,0 +1,4 @@
+- id: Kyle Mathews
+ bio: Founder @ GatsbyJS. Likes tech, reading/writing, founding things. Blogs at bricolage.io.
+ avatar: avatars/kyle-mathews.jpeg
+ twitter: "@kylemathews"
diff --git a/docs/blog/avatars/kyle-mathews.jpeg b/docs/blog/avatars/kyle-mathews.jpeg
new file mode 100644
index 0000000000000..6d544addab06f
Binary files /dev/null and b/docs/blog/avatars/kyle-mathews.jpeg differ
diff --git a/docs/blog/gatsbygram-case-study/gatsbygram-instagram-repeat-load.png b/docs/blog/gatsbygram-case-study/gatsbygram-instagram-repeat-load.png
new file mode 100644
index 0000000000000..876d7c1e6f689
Binary files /dev/null and b/docs/blog/gatsbygram-case-study/gatsbygram-instagram-repeat-load.png differ
diff --git a/docs/blog/gatsbygram-case-study/gatsbygram-instagram.png b/docs/blog/gatsbygram-case-study/gatsbygram-instagram.png
new file mode 100644
index 0000000000000..ea6ebf076777c
Binary files /dev/null and b/docs/blog/gatsbygram-case-study/gatsbygram-instagram.png differ
diff --git a/docs/blog/gatsbygram-case-study/gatsbygram-layout.png b/docs/blog/gatsbygram-case-study/gatsbygram-layout.png
new file mode 100644
index 0000000000000..53cdadc07340b
Binary files /dev/null and b/docs/blog/gatsbygram-case-study/gatsbygram-layout.png differ
diff --git a/docs/blog/gatsbygram-case-study/index.md b/docs/blog/gatsbygram-case-study/index.md
new file mode 100644
index 0000000000000..db69282820ba0
--- /dev/null
+++ b/docs/blog/gatsbygram-case-study/index.md
@@ -0,0 +1,599 @@
+---
+title: Gatsbygram Case Study
+date: "2017-03-09"
+author: "Kyle Mathews"
+image: 'ui-and-code.png'
+---
+
+
+
+[Gatsbygram](https://gatsbygram.gatsbyjs.org) is a clone of Instagram
+built with Gatsby 1.0.0-alpha12 and is being continually updated as we
+make our way towards our 1.0 release.
+
+The [source code for
+Gatsbygram](https://github.com/gatsbyjs/gatsby/tree/1.0/examples/gatsbygram)
+lives in the Gatsby monorepo. See the instructions at the end for how to
+start playing with the code!
+
+{this.props.data.markdown.frontmatter.title}
+ {this.props.data.markdown.frontmatter.date} + +
+
+
+
+## What is Gatsby
+
+Gatsby is a JavaScript web framework that let's you build fast,
+dynamic, mobile-ready websites *without* an advanced degree in
+JavaScript wizardry.
+
+It combines the fast performance of static websites with the powerful
+abstractions, tools, and client capabilities of the React.js world.
+
+### Gatsby is fast
+
+[Gatsby automatically optimizes your site for the modern
+web](/docs/prpl-pattern/). You provide pages and Gatsby stitches them
+together so they load as fast as possible.
+
+As proof of this, Gatsbygram loads *2-3x faster* than the real Instagram site.
+
+I tested Gatsbygram and Instagram on
+[webpagetest.org](https://www.webpagetest.org/) using a simulated 3G
+network and a Moto G4 smartphone—a budget Android typical of many
+lower-end phones used today. The median [speed
+index](https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index)
+score for
+[Gatsbygram](http://www.webpagetest.org/result/170310_XP_11AS/) was 3151
+vs. 8251 for
+[Instagram](http://www.webpagetest.org/result/170310_PC_11AZ/).
+
+*Filmstrip of Gatsbygram (top)
+and Instagram (bottom) loading on webpagetest.org*
+
+The second repeat view is even faster for Gatsbygram as it now loads
+from its service worker. It has *pixels on the screen in under a 1/2
+second on a budget Android device*! And for both the initial and repeat
+view, Gatsbygram *finishes* loading a full second before Instagram gets
+started.
+
+*Filmstrip of a repeat view
+of Gatsbygram (top) and Instagram (bottom) loading on webpagetest.org*
+
+The difference in Time to Interactivity (TTI) (measure of how long
+before the user can actually interact with the page e.g. click on a
+link) between the sites is just as dramatic. Gatsbygram's TTI is 6.1s vs
+14.1s for Instagram.
+
+* [Gatsbygram's webpagetest
+results](http://www.webpagetest.org/result/170310_XP_11AS/)
+* [Instagram's webpagetest
+results](http://www.webpagetest.org/result/170310_PC_11AZ/)
+
+### Gatsby is built for the next billion internet users
+
+As [Benedict Evans has
+noted](http://ben-evans.com/benedictevans/2015/5/13/the-smartphone-and-the-sun),
+the next billion people poised to come online will be using the internet
+almost exclusively through smartphones.
+
+Smartphones with decent specs (as good or better than the Moto G4), a
+great browser, but *without* a reliable internet connection.
+
+Gatsby uses modern web performance ideas (e.g.
+[PRPL](https://developers.google.com/web/fundamentals/performance/prpl-pattern/))
+developed by the Google Chrome Developer Relations team and others to
+help websites work well on modern browsers with unreliable networks.
+
+Sites built with Gatsby run as much as possible in the client so
+regardless of the network conditions—good, bad, or
+nonexistent—things will keep working.
+
+Many of the top e-commerce websites in areas where people are coming
+online for the first time are developing their websites using these
+techniques.
+
+Read Google's case studies on:
+
+* [Flipkart
+(India)](https://developers.google.com/web/showcase/2016/flipkart)
+* [Konga
+(Nigeria)](https://developers.google.com/web/showcase/2016/konga)
+* [Housing.com
+(India)](https://developers.google.com/web/showcase/2016/housing)
+
+### Gatsby is simple
+
+Modern JavaScript websites are too complex to rely on developers always
+configuring things correctly. Gatsby simplifies website development by
+extracting configuration out of your site and moving it into the
+framework and community plugins.
+
+You give Gatsby React.js components, data, and styles and Gatsby gives you
+back an optimized website.
+
+Gatsbygram is a completely vanilla Gatsby site. Its optimizations are
+from the framework.
+
+Gatsby includes a full modern JavaScript toolchain
+(Babel/webpack/Uglify) with optimized production builds and
+an innovative *declarative* asset pipeline.
+
+For Gatsbygram, Gatsby generates over *1000* image thumbnails for
+responsive images without *any* custom scripting by leveraging the
+Gatsby image processing plugin
+[gatsby-typegen-sharp](/docs/packages/gatsby-typegen-sharp/).
+
+Stop wasting time and build something!
+
+## App structure
+
+All static site generators create a set of files that determine the
+routing in your site. Typically, you define the output file structure
+(and thus URL structure) of your site by way of the input structure. For
+example the input structure:
+
+```
+my-site/
+ index.md
+ blogs/
+ blog1.md
+```
+
+...would be transformed to:
+
+```
+my-site/
+ index.html
+ blogs/
+ blog1.html
+```
+
+This is fine at first, but can be limiting. For example, in Gatsbygram,
+we have a JSON data blob scraped from an Instagram user profile. From
+this we want to generate a page for each image. We couldn't do this with
+a typical static site generator, but Gatsby lets you define routes
+programmatically through the `createPages` API using any data you have
+available.
+
+Here is how we define pages from our JSON data for Gatsbygram at build time in
+the site's [`gatsby-node.js`
+file](https://github.com/gatsbyjs/gatsby/blob/1.0/examples/gatsbygram/gatsby-node.js):
+
+```javascript
+const _ = require("lodash")
+const Promise = require("bluebird")
+const path = require("path")
+const slug = require("slug")
+const slash = require("slash")
+
+// Implement the Gatsby API “createPages”. This is
+// called after the Gatsby bootstrap is finished so you have
+// access to any information necessary to programatically
+// create pages.
+exports.createPages = ({ graphql, actionCreators }) => {
+ const { upsertPage } = actionCreators
+
+ return new Promise((resolve, reject) => {
+ // The “graphql” function allows us to run arbitrary
+ // queries against this Gatsbygram's graphql schema. Think of
+ // it like Gatsbygram has a built-in database constructed
+ // from static data that you can run queries against.
+ //
+ // Post is a data node type derived from data/posts.json
+ // which is created when scrapping Instagram. “allPosts”
+ // is a "connection" (a GraphQL convention for accessing
+ // a list of nodes) gives us an easy way to query all
+ // Post nodes.
+ graphql(
+ `
+ {
+ allPosts(limit: 1000) {
+ edges {
+ node {
+ id
+ }
+ }
+ }
+ }
+ `
+ ).then(result => {
+ if (result.errors) {
+ console.log(result.errors)
+ reject(result.errors)
+ }
+
+ // Create image post pages.
+ const postTemplate = path.resolve(`templates/post-page.js`)
+ // We want to create a detailed page for each
+ // Instagram post. Since the scrapped Instagram data
+ // already includes an ID field, we just use that for
+ // each page's path.
+ _.each(result.data.allPosts.edges, edge => {
+ // Gatsby uses Redux to manage its internal state.
+ // Plugins and sites can use functions like "upsertPage"
+ // to interact with Gatsby.
+ upsertPage({
+ // Each page is required to have a `path` as well
+ // as a template component. The `context` is
+ // optional but is often necessary so the template
+ // can query data specific to each page.
+ path: slug(edge.node.id),
+ component: slash(postTemplate),
+ context: {
+ id: edge.node.id,
+ },
+ })
+ })
+ resolve()
+ })
+ })
+}
+```
+
+## Using templates
+
+Gatsby uses standard React.js components to render pages. When you
+define a page in the `createPages` API, you specify its component.
+Those components, usually called templates, get reused with
+page-specific data to generate the different pages.
+
+As you can see above, when defining a page, we can set "context" data, which is
+passed as a `prop` to the component and as a [GraphQL
+variable](http://graphql.org/learn/queries/#variables) in our `GraphQL` query.
+For the "[post
+template](https://github.com/gatsbyjs/gatsby/blob/1.0/examples/gatsbygram/templates/template-post-page.js)",
+we pass the id to the post. Below we use that id to query our `GraphQL` schema
+and return a fully formed page:
+
+```jsx
+import React from "react"
+import PostDetail from "../components/post-detail"
+
+class PostTemplate extends React.Component {
+ render() {
+ return (
+ // PostDetail is used for this detail page and
+ // also in the modal.
+
+
+ Home
+
+
+ {/* Render children pages */} + {this.props.children} +
+ )
+ }
+}
+
+export default Layout
+```
+
+Every page will be rendered as children of the `Layout` component:
+```jsx
++ {/* Render children pages */} + {this.props.children} +
+
+ )
+ }
+}
+```
+
+Together they allow you to quickly iterate on designs.
+
+They also contribute to Gatsbygram's excellent loading speed. The holy
+grail of CSS performance is *inlined critical CSS*. Meaning a) only ship
+a page with the CSS necessary to render that page and b) inline it in
+the `` instead of putting it in a separate file. There are various
+tools to make this happen but they tend to involve extensive
+configuration and heavy post-processing.
+
+But with Typography.js and Glamor you get optimized CSS with no
+tedious, error-prone bookkeeping. Typography.js (by definition)
+generates only global styles so its styles are included on every page.
+Glamor includes some [clever server-rendering
+optimizations](https://github.com/threepointone/glamor/blob/master/docs/server.md)
+which I've implemented in the [Gatsby Glamor
+plugin](/docs/packages/gatsby-plugin-glamor/) where it automatically
+extracts out the CSS used *in components on the page being server
+rendered* and automatically inlines those styles in the generated HTML
+page.
+
+Super fast CSS by default. 👏👏👏
+
+## Creating your own Gatsbygram
+
+It's easy to create your own "Gatsbygram" site from an Instagram
+account.
+
+### Instructions on setting up your own Gatsbygram site.
+
+```bash
+# Clone the Gatsby repo.
+git clone -b 1.0 git@github.com:gatsbyjs/gatsby.git
+cd gatsby/examples/gatsbygram
+npm install
+
+# Remove the committed scrapped Instagram data
+rm -r data
+
+# Scrape a new account
+node scrape.js INSTAGRAM_USERNAME
+
+# Wait for pictures to download...
+
+# Start the Gatsby development server. The initial
+# run will take extra time as it processes
+# images the first time.
+gatsby develop
+```
+
+While writing this post I scrapped a few accounts and published their
+resulting "Gatsbygram" sites:
+
+* https://iceland-gatsbygram.netlify.com
+* https://tinyhouses-gatsbygram.netlify.com
+
+*With thanks to Sam Bhagwatt, Sunil Pai, Nolan Lawson, Nik Graf,
+Jeff Posnick, and Addy Osmani for their reviews.*
+
+*And a special thanks to Kristo Jorgenson for his [refactor of the “App
+structure” section](https://github.com/gatsbyjs/gatsby/pull/708).*
diff --git a/docs/blog/gatsbygram-case-study/index.md.bak b/docs/blog/gatsbygram-case-study/index.md.bak
new file mode 100644
index 0000000000000..d9998fa5b755a
--- /dev/null
+++ b/docs/blog/gatsbygram-case-study/index.md.bak
@@ -0,0 +1,574 @@
+---
+title: Gatsbygram Case Study
+date: "2017-03-08"
+author: "Kyle Mathews"
+image: 'ui-and-code.png'
+---
+
+
+
+[Gatsbygram](https://gatsbygram.gatsbyjs.org) is a clone of Instagram
+built with Gatsby 1.0.0-alpha12 and is being continually updated as we
+make our way towards our 1.0 release.
+
+The [source code for
+Gatsbygram](https://github.com/gatsbyjs/gatsby/tree/1.0/examples/gatsbygram)
+lives in the Gatsby monorepo. See the instructions at the end for how to
+start playing with the code!
+
++ My sweet title +
+Hello friends
+
+
+
+
+## What is Gatsby
+
+Gatsby is a JavaScript web framework that let's you build fast, very
+dynamic, mobile-ready websites *without* an advanced degree in
+JavaScript wizardry.
+
+It combines the fast performance of static websites with the powerful
+abstractions, tools, and client capabilities of the React.js world.
+
+### Gatsby is fast
+
+Gatsby automatically optimizes your site for the modern web. You
+provide pages and Gatsby stitches them together so they load as fast as
+possible.
+
+As proof of this, Gatsbygram loads *2-3x faster* than the real Instagram site.
+
+I tested Gatsbygram and Instagram on
+[webpagetest.org](https://www.webpagetest.org/) using a simulated 3G
+network and a Moto G smartphone—a budget Android released 3.5
+years ago—so typical of many lower-end phones used still today. The
+median [speed
+index](https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index)
+score for
+[Gatsbygram](http://www.webpagetest.org/result/170307_10_17H0/) was 3128
+vs. 8145 for
+[Instagram](http://www.webpagetest.org/result/170307_VS_16JZ/).
+
+*Filmstrip of Gatsbygram (top)
+and Instagram (bottom) loading on webpagetest.org*
+
+The second view is even faster for Gatsbygram as it now loads from its
+service worker. It has pixels on the screen in *under a second* on a
+budget Android device! And it *finishes* loading a full 1.5 seconds
+before Instagram gets started.
+
+*Filmstrip of a repeat view
+of Gatsbygram (top) and Instagram (bottom) loading on webpagetest.org*
+
+### Gatsby is built for the next billion internet users
+
+As [Benedict Evans has
+noted](http://ben-evans.com/benedictevans/2015/5/13/the-smartphone-and-the-sun),
+the next billion people poised to come online will be using the internet
+almost exclusively through smartphones.
+
+Smartphones with decent specs (as good or better than the Moto G), a
+great browser, but *without* a reliable internet connection.
+
+Gatsby uses [modern web performance
+ideas](https://developers.google.com/web/fundamentals/performance/prpl-pattern/)
+developed by the Google Chrome Developer Relations team to help
+websites work well on modern browsers with unreliable networks.
+
+Sites built with Gatsby run as much as possible in the client so
+regardless of the network conditions—good, bad, or
+nonexistent—things will keep working.
+
+Many of the top e-commerce websites in areas where people are coming
+online for the first time are developing their websites using these
+techniques.
+
+Read Google's case studies on:
+
+* [Flipkart
+(India)](https://developers.google.com/web/showcase/2016/flipkart)
+* [Konga
+(Nigeria)](https://developers.google.com/web/showcase/2016/konga)
+* [Housing.com
+(India)](https://developers.google.com/web/showcase/2016/housing)
+
+### Gatsby is simple
+
+Modern JavaScript websites are too complex to rely on developers always
+configuring things correctly. Gatsby simplifies website development by
+extracting configuration out of your site moving it into the framework
+and community plugins.
+
+You give Gatsby React.js components, data, and styles and Gatsby gives you
+back an optimized website.
+
+Gatsbygram is a completely vanilla Gatsby site. Its optimizations are
+from the framework.
+
+Gatsby includes a full modern JavaScript toolchain
+(Babel/webpack/uglifyjs) with optimized production builds and
+an innovative *declarative* asset pipeline.
+
+For Gatsbygram, Gatsby generates over *1000* image thumbnails for
+responsive images without *any* custom scripting.
+
+Stop wasting time and build something!
+
+## App structure
+
+All static site generators create a set of files that determine the
+routing in your site. Typically, you define the output file structure
+(and thus url structure) of your site by way of the input structure. For
+example the input structure:
+
+```
+my-site/
+ index.md
+ blogs/
+ blog1.md
+```
+
+...would be transformed to:
+
+```
+my-site/
+ index.html
+ blogs/
+ blog1.html
+```
+
+This is fine at first, but can be limiting. For example, in Gatsbygram,
+we have a JSON data blob scraped from an Instagram user profile. From
+this we want to generate a page for each image. We couldn't do this with
+a typical static site generator, but Gatsby lets you define routes
+programatically through the `createPages` api using any data you have
+available.
+
+Here is how we define pages from our JSON data for Gatsbygram at build time:
+
+```javascript
+const _ = require("lodash")
+const Promise = require("bluebird")
+const path = require("path")
+const slug = require("slug")
+
+// Implement the Gatsby API “createPages”. This is
+// called after the Gatsby bootstrap is finished so you have
+// access to any information necessary to programatically
+// create pages.
+exports.createPages = ({ args }) => (
+ new Promise((resolve, reject) => {
+ // The “graphql” function allows us to run arbitrary
+ // queries against this Gatsbygram's GraphQL schema. Think of
+ // it like Gatsbygram has a built-in database constructed
+ // from static data that you can run queries against.
+ const { graphql } = args
+ const pages = []
+ // Post is a data node type derived from data/posts.json
+ // which is created when scrapping Instagram. “allPosts”
+ // is a "connection" (a GraphQL convention for accessing
+ // a list of nodes) gives us an easy way to query all
+ // Post nodes.
+ graphql(`
+ {
+ allPosts(limit: 1000) {
+ edges {
+ node {
+ id
+ }
+ }
+ }
+ }
+ `)
+ .then(result => {
+ if (result.errors) {
+ console.log(result.errors)
+ reject(result.errors)
+ }
+
+ // Create image post pages.
+ const postTemplate = path.resolve(`pages/template-post-page.js`)
+ // We want to create a detailed page for each
+ // Instagram post. Since the scrapped Instagram data
+ // already includes an ID field, we just use that for
+ // each page's path.
+ _.each(result.data.allPosts.edges, (edge) => {
+ pages.push({
+ // Each page is required to have a `path` as well
+ // as a template component. The `context` is
+ // optional but is often necessary so the template
+ // can query data specific to each page.
+ path: slug(edge.node.id),
+ component: postTemplate,
+ context: {
+ id: edge.node.id,
+ },
+ })
+ })
+
+ resolve(pages)
+ })
+ })
+)
+```
+
+## Using templates
+
+Gatsby uses standard React.js components to render pages. When you
+define a page in the `createPages` api, you specify its component.
+Those components, usually called templates, get reused with
+page-specific data to generate the different pages.
+
+As you can see above, when defining a page, we can set "context" data,
+which is passed as a `prop` to the component and as a [GraphQL
+variable](http://graphql.org/learn/queries/#variables) in our `GraphQL`
+query. For the "postTemplate", we pass the id to the post. Below we use
+that id to query our `GraphQL` schema and return a fully formed page:
+
+```jsx
+import React from 'react'
+import PostDetail from '../components/post-detail'
+
+class PostTemplate extends React.Component {
+ render () {
+ return (
+ // PostDetail is used for this detail page and
+ // also in the modal.
+
+
+ Home
+
+
+ {/* Render children pages */} + {this.props.children} +
+ )
+ }
+}
+
+export default Layout
+```
+
+Every page will be rendered as children of the `Layout` component:
+```jsx
++ {/* Render children pages */} + {this.props.children} +
+
+ )
+ }
+}
+```
+
+Together they allow you to very quickly iterate on designs.
+
+They also contribute to Gatsbygram's excellent loading speed. The holy
+grail of CSS performance is *inlined critical CSS*. Meaning a) only ship
+a page with the CSS necessary to render that page and b) inline it in
+the `` instead of putting it in a separate file. There are various
+tools to make this happen but they tend to involve extensive
+configuration and heavy post-processing.
+
+But with Typography.js and Glamor you get optimized CSS for free with no
+tedious, error-prone bookkeeping. Typography.js (by definition)
+generates only global styles so its styles are included on every page.
+Glamor includes some [very clever server-rendering
+optimizations](https://github.com/threepointone/glamor/blob/master/docs/server.md)
+which I've implemented in the [Gatsby Glamor
+plugin](/docs/packages/gatsby-plugin-glamor/) where it automatically
+extracts out the CSS used *in components on the page being server
+rendered* and automatically inlines those styles in the generated HTML
+page.
+
+Super fast CSS for free 👏👏👏
+
+## Creating your own Gatsbygram
+
+It's easy to create your own "Gatsbygram" site from an Instagram
+account.
+
+### Instructions on setting up your own Gatsbygram site.
+
+```bash
+# Clone the Gatsby repo.
+git clone -b 1.0 git@github.com:gatsbyjs/gatsby.git
+cd gatsby/examples/gatsbygram
+npm install
+
+# Remove the committed scrapped Instagram data
+rm -r data
+
+# Scrape a new account
+node scrape.js INSTAGRAM_USERNAME
+
+# Wait for pictures to download...
+
+# Start the Gatsby development server. The initial
+# run will take extra time as it processes
+# images the first time.
+gatsby develop
+```
+
+While writing this post I scrapped a few accounts and published their
+resulting "Gatsbygram" sites:
+
+* https://iceland-gatsbygram.netlify.com
+* https://tinyhouses-gatsbygram.netlify.com
+
+**Help wanted:** scrape the user's profile picture and use that instead
+of my Gravatar image which is hard-coded atm.
diff --git a/docs/blog/gatsbygram-case-study/template-page-screenshot.png b/docs/blog/gatsbygram-case-study/template-page-screenshot.png
new file mode 100644
index 0000000000000..ddaf9cded2da9
Binary files /dev/null and b/docs/blog/gatsbygram-case-study/template-page-screenshot.png differ
diff --git a/docs/blog/gatsbygram-case-study/ui-and-code.png b/docs/blog/gatsbygram-case-study/ui-and-code.png
new file mode 100644
index 0000000000000..ba91bea90ad40
Binary files /dev/null and b/docs/blog/gatsbygram-case-study/ui-and-code.png differ
diff --git a/docs/code-of-conduct.md b/docs/code-of-conduct.md
new file mode 100644
index 0000000000000..66dc0aad3a40c
--- /dev/null
+++ b/docs/code-of-conduct.md
@@ -0,0 +1,81 @@
+---
+title: Gatsby Contributor Covenant Code of Conduct
+---
+
+## Our Pledge
+
+In the interest of fostering an open and welcoming environment, we as
+contributors and maintainers pledge to making participation in our
+project and our community a harassment-free experience for everyone,
+regardless of age, body size, disability, ethnicity, gender identity and
+expression, level of experience, nationality, personal appearance, race,
+religion, or sexual identity and orientation.
+
+## Our Standards
+
+Examples of behavior that contributes to creating a positive environment
+include:
+
+* Using welcoming and inclusive language
+* Being respectful of differing viewpoints and experiences
+* Gracefully accepting constructive criticism
+* Focusing on what is best for the community
+* Showing empathy towards other community members
+
+Examples of unacceptable behavior by participants include:
+
+* The use of sexualized language or imagery and unwelcome sexual
+attention or advances
+* Trolling, insulting/derogatory comments, and personal or political
+attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or
+electronic address, without explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+professional setting
+
+## Our Responsibilities
+
+Project maintainers are responsible for clarifying the standards of
+acceptable behavior and are expected to take appropriate and fair
+corrective action in response to any instances of unacceptable behavior.
+
+Project maintainers have the right and responsibility to remove, edit,
+or reject comments, commits, code, wiki edits, issues, and other
+contributions that are not aligned to this Code of Conduct, or to ban
+temporarily or permanently any contributor for other behaviors that they
+deem inappropriate, threatening, offensive, or harmful.
+
+## Scope
+
+This Code of Conduct applies both within project spaces and in public
+spaces when an individual is representing the project or its community.
+Examples of representing a project or community include using an
+official project e-mail address, posting via an official social media
+account, or acting as an appointed representative at an online or
+offline event. Representation of a project may be further defined and
+clarified by project maintainers.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may
+be reported by contacting the project team at
+[mathews.kyle@gmail.com](mailto:mathews.kyle@gmail.com). All complaints
+will be reviewed and investigated and will result in a response that is
+deemed necessary and appropriate to the circumstances. The project team
+is obligated to maintain confidentiality with regard to the reporter of
+an incident. Further details of specific enforcement policies may be
+posted separately.
+
+Project maintainers who do not follow or enforce the Code of Conduct in
+good faith may face temporary or permanent repercussions as determined
+by other members of the project's leadership.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor
+Covenant][homepage], version 1.4, available at
+[http://contributor-covenant.org/version/1/4][version]
+
+homepage: http://contributor-covenant.org
+version: http://contributor-covenant.org/version/1/4/
diff --git a/docs/community/index.md b/docs/community/index.md
new file mode 100644
index 0000000000000..6bdaafbe2c22a
--- /dev/null
+++ b/docs/community/index.md
@@ -0,0 +1,38 @@
+---
+title: Community
+---
+
+## Gatsby Contributor Covenant Code of Conduct
+
+In the interest of fostering an open and welcoming environment, we as
+contributors and maintainers pledge to making participation in our
+project and our community a harassment-free experience for everyone,
+regardless of age, body size, disability, ethnicity, gender identity and
+expression, level of experience, nationality, personal appearance, race,
+religion, or sexual identity and orientation.
+
+[Read full code of conduct](/code-of-conduct/)
+
+## Gatsby news
+
+### Twitter
+
+For the latest news about Gatsby, [follow **@gatsbyjs** on
+Twitter](https://twitter.com/gatsbyjs).
+
+## Where to get support
+
+### Stack Overflow
+
+Many members of the community use Stack Overflow to ask questions. Read
+through the [existing
+questions](http://stackoverflow.com/questions/tagged/gatsbyjs) tagged
+with **gatsby** or [ask your
+own](http://stackoverflow.com/questions/ask?tags=gatsby)!
+
+### Reactiflux Chat
+
+If you need an answer right away, check out the [Reactiflux
+Discord](https://discord.gg/0ZcbPKXt5bZjGY5n) #gatsby channnel. There are
+usually a number of Gatsby experts there who can help out or point you to
+useful resources.
diff --git a/docs/docs/add-404-page.md b/docs/docs/add-404-page.md
new file mode 100644
index 0000000000000..fa8c998319765
--- /dev/null
+++ b/docs/docs/add-404-page.md
@@ -0,0 +1,11 @@
+---
+title: "Add 404 Page"
+---
+
+Adding a 404 page is easy. Simply create a page that matches `/404*`. Most
+often you'll just want to create a React component page at `pages/404.js`.
+
+Gatsby ensures that your 404 page is outputted as `404.html` as many static
+hosting platforms default to using this as your 404 error page. If you're
+hosting your site another way, you'll need to setup a custom rule to serve
+this file for 404 errors.
diff --git a/docs/docs/building-with-components.md b/docs/docs/building-with-components.md
new file mode 100644
index 0000000000000..6e1d0b7457d6d
--- /dev/null
+++ b/docs/docs/building-with-components.md
@@ -0,0 +1,10 @@
+---
+title: Building with Components
+---
+
+Rough outline
+
+* Docs expect basic familiarity with React
+* All Gatsby site UI build with React components.
+* Concise description of why components amazing model for building sites.
+* Perhaps link to other good articles on "Why components are amazing".
diff --git a/docs/docs/design-principles.md b/docs/docs/design-principles.md
new file mode 100644
index 0000000000000..0739292ec675c
--- /dev/null
+++ b/docs/docs/design-principles.md
@@ -0,0 +1,5 @@
+---
+title: Design Principles
+---
+
+Coming soon.
diff --git a/docs/docs/gatsby-lifecycle-apis.md b/docs/docs/gatsby-lifecycle-apis.md
new file mode 100644
index 0000000000000..478f255ac5c2e
--- /dev/null
+++ b/docs/docs/gatsby-lifecycle-apis.md
@@ -0,0 +1,13 @@
+---
+title: Gatsby Lifecycle APIs
+---
+
+Rough outline
+
+* Rich set of lifecycle APIs to hook into Gatsby's bootstrap, build, and
+client operations.
+* Code > convention
+* Easy to modularize code into plugins (link to plugin page).
+* Plugins are easy to open source and reuse. They're just NPM packages.
+Link to list of plugins.
+* Link to full reference documentation of all lifecycle APIs.
diff --git a/docs/docs/gatsby-on-windows.md b/docs/docs/gatsby-on-windows.md
new file mode 100644
index 0000000000000..29c6e3e8cb1a4
--- /dev/null
+++ b/docs/docs/gatsby-on-windows.md
@@ -0,0 +1,18 @@
+---
+title: Gatsby on windows
+---
+
+## Setting up your environment for building native Node.js modules.
+
+Many Gatsby plugins and themes require building native Node.js modules e.g.
+[Sharp (a common Gatsby dependency used for image
+processing)](/docs/packages/gatsby-plugin-sharp/). To do so, you need a
+functional build environment (Python and Visual C++ Build Tools).
+
+The easy way to setup your build environment on Windows is to install the
+[`windows-build-tools`](https://github.com/felixrieseberg/windows-build-tools)
+package by runnning `npm install --global windows-build-tools` on an admin
+powershell console. On installing this package, it downloads and installs the
+Visual C++ Build Tools 2015, provided free of charge by Microsoft. These tools
+are required to compile popular native modules. It will also install Python
+2.7, configuring your machine and npm appropriately.
diff --git a/docs/docs/how-to-contribute.md b/docs/docs/how-to-contribute.md
new file mode 120000
index 0000000000000..f939e75f21a8b
--- /dev/null
+++ b/docs/docs/how-to-contribute.md
@@ -0,0 +1 @@
+../../CONTRIBUTING.md
\ No newline at end of file
diff --git a/docs/docs/images/open-remote-dev-tools.png b/docs/docs/images/open-remote-dev-tools.png
new file mode 100644
index 0000000000000..3eac817954d1c
Binary files /dev/null and b/docs/docs/images/open-remote-dev-tools.png differ
diff --git a/docs/docs/images/remote-dev-settings.png b/docs/docs/images/remote-dev-settings.png
new file mode 100644
index 0000000000000..228f61dcda2b9
Binary files /dev/null and b/docs/docs/images/remote-dev-settings.png differ
diff --git a/docs/docs/images/running-redux-devtools.png b/docs/docs/images/running-redux-devtools.png
new file mode 100644
index 0000000000000..2d2dc30e5f0a9
Binary files /dev/null and b/docs/docs/images/running-redux-devtools.png differ
diff --git a/docs/docs/node-interface.md b/docs/docs/node-interface.md
new file mode 100644
index 0000000000000..26bd64364d5ad
--- /dev/null
+++ b/docs/docs/node-interface.md
@@ -0,0 +1,5 @@
+---
+title: Node Interface
+---
+
+Coming soon.
diff --git a/docs/docs/path-prefix.md b/docs/docs/path-prefix.md
new file mode 100644
index 0000000000000..aeb1d37ff9416
--- /dev/null
+++ b/docs/docs/path-prefix.md
@@ -0,0 +1,45 @@
+---
+title: Adding a Path Prefix
+---
+
+Many sites are hosted at something other than the root of their domain.
+
+E.g. a Gatsby blog could live at `example.com/blog/` or a site could be
+hosted on Github pages at `example.github.io/my-gatsby-site/`
+
+Each of these sites need a prefix added to all paths on the site. So a link
+to `/my-sweet-blog-post/` should be rewritten to `/blog/my-sweet-blog-post`.
+
+In addition links to various resources (JavaScript, images, CSS) need the same
+prefix added.
+
+Luckily, for most sites, this work can be offloaded to Gatsby. Using
+[gatsby-link](/docs/packages/gatsby-link/) for internal links ensures those
+links will be prefixed correctly. Gatsby ensures that paths created internally
+and by webpack are also correctly prefixed.
+
+## Development
+
+During development, write paths as if there was no path prefix e.g. for a blog
+hosted at `example.com/blog`, don't add `/blog` to your links. The prefix
+will be added when you build for deployment.
+
+## Production build
+
+There are two steps for building a site with path prefixes.
+
+First define the prefix in your site's `gatsby-config.js`.
+
+```javascript
+module.exports = {
+ // Note: it must *not* have a trailing slash.
+ pathPrefix: `/blog`
+}
+```
+
+### TODOs
+
+* currently we call this `linkPrefix` as that's what's used in Gatsby 0.x. A breaking change seems
+in order as we're using `path` everywhere else.
+* Add runtime check that there's a slash at the start and no trailing slash.
+* Add tests around this.
diff --git a/docs/docs/plugins.md b/docs/docs/plugins.md
new file mode 100644
index 0000000000000..b2bbd3a590e18
--- /dev/null
+++ b/docs/docs/plugins.md
@@ -0,0 +1,46 @@
+---
+title: Plugins
+---
+
+Rough outline.
+
+Plugins are modules that implement Gatsby APIs. Easily solve common
+website build problems. Pull together open source components. For large
+complex builds, modularize customizations into site-specific plugins.
+
+How to use?
+
+Export function for browser/node/ssr. Link to lifecycle APIs doc.
+
+Show several examples of simple plugins (query for them directly — add a
+utf8 field to typegen-file to pull in utf8 string of file. This would
+mean converting this file into a JS component).
+
+## Official plugins
+
+* [gatsby-parser-json](/docs/packages/gatsby-parser-json/)
+* [gatsby-parser-remark](/docs/packages/gatsby-parser-remark/)
+* [gatsby-parser-sharp](/docs/packages/gatsby-parser-sharp/)
+* [gatsby-parser-yaml](/docs/packages/gatsby-parser-yaml/)
+* [gatsby-plugin-catch-links](/docs/packages/gatsby-plugin-catch-links/)
+* [gatsby-plugin-coffeescript](/docs/packages/gatsby-plugin-coffeescript/)
+* [gatsby-plugin-glamor](/docs/packages/gatsby-plugin-glamor/)
+* [gatsby-plugin-google-analytics](/docs/packages/gatsby-plugin-google-analytics/)
+* [gatsby-plugin-manifest](/docs/packages/gatsby-plugin-manifest/)
+* [gatsby-plugin-offline](/docs/packages/gatsby-plugin-offline/)
+* [gatsby-plugin-preact](/docs/packages/gatsby-plugin-preact/)
+* [gatsby-plugin-sharp](/docs/packages/gatsby-plugin-sharp/)
+* [gatsby-plugin-typescript](/docs/packages/gatsby-plugin-typescript/)
+* [gatsby-source-filesystem](/docs/packages/gatsby-source-filesystem/)
+* [gatsby-typegen-remark](/docs/packages/gatsby-typegen-remark/)
+* [gatsby-typegen-remark-autolink-headers](/docs/packages/gatsby-typegen-remark-autolink-headers/)
+* [gatsby-typegen-remark-copy-linked-files](/docs/packages/gatsby-typegen-remark-copy-linked-files/)
+* [gatsby-typegen-remark-prismjs](/docs/packages/gatsby-typegen-remark-prismjs/)
+* [gatsby-typegen-remark-responsive-iframe](/docs/packages/gatsby-typegen-remark-responsive-iframe/)
+* [gatsby-typegen-remark-responsive-image](/docs/packages/gatsby-typegen-remark-responsive-image/)
+* [gatsby-typegen-remark-smartypants](/docs/packages/gatsby-typegen-remark-smartypants/)
+* [gatsby-typegen-sharp](/docs/packages/gatsby-typegen-sharp/)
+
+## Official components
+
+* [gatsby-link](/docs/packages/gatsby-link/)
diff --git a/docs/docs/prpl-pattern.md b/docs/docs/prpl-pattern.md
new file mode 100644
index 0000000000000..61f334b7ef7c9
--- /dev/null
+++ b/docs/docs/prpl-pattern.md
@@ -0,0 +1,21 @@
+---
+title: PRPL Pattern
+---
+
+i.e. why Gatsby is really fast.
+
+https://developers.google.com/web/fundamentals/performance/prpl-pattern/
+
+* **Push** critical resources for the initial URL route.
+* **Render** initial route.
+* **Pre-cache** remaining routes.
+* **Lazy-load** and create remaining routes on demand.
+
+* H/2 push is developing technology — not available on most hosts just
+yet.
+
+TODO fill out how Gatsby implements PRPL.
+
+This issue from last fall is a good intro for now:
+
+https://github.com/gatsbyjs/gatsby/issues/431
diff --git a/docs/docs/querying-with-graphql.md b/docs/docs/querying-with-graphql.md
new file mode 100644
index 0000000000000..e4b913b538f30
--- /dev/null
+++ b/docs/docs/querying-with-graphql.md
@@ -0,0 +1,24 @@
+---
+title: Querying with GraphQL
+---
+
+Rough outline
+
+* What is GraphQL
+* Why GraphQL? As Gatsby runs on both server (at build time) & client,
+need way to specify which data is needed.
+* Emphasize this is a *build-time only* use of GraphQL. You don't need to run a
+GraphQL server in production. Convenient way to describe data
+requirements of component.
+* Why query colocation rocks.
+* Some basic terminology
+ * Types based on file type + way data can be transformed
+ * Connections
+ * Shallow intro to how data layer works e.g. parsers, typegens.
+ * Compare to Webpack loaders — like loaders except create schema that
+ can then be queried.
+* Example queries showing off sorting, filtering, picking fields,
+programmatic transformations
+* Link to some doc pages on advanced usages of GraphQL.
+* iFrame of graphiql instance for this site running on Heroku so people
+can run live queries.
diff --git a/docs/docs/themes.md b/docs/docs/themes.md
new file mode 100644
index 0000000000000..94e5aacc998b2
--- /dev/null
+++ b/docs/docs/themes.md
@@ -0,0 +1,24 @@
+---
+title: Themes
+---
+
+Rough outline
+
+Themes are collections of plugins with optional additional assets such
+as react components, css, and binary files e.g. images.
+
+Themes are NPM packages.
+
+A site can have multiple themes.
+
+Themes can compose other themes.
+
+User can override theme's default options for plugins.
+
+All theme assets are "ejectable" e.g. will be copied into the site's
+source so you can modify the file directory.
+
+You'll type something like `gatsby eject gatsby-core-theme` and then be
+presented with a list of assets from which you could choose which assets
+to eject. A common use case will be, install Gatsby blog theme, decide
+to override the blog index page, eject it, tweak the react component.
diff --git a/docs/docs/thinking-in-gatsby.md b/docs/docs/thinking-in-gatsby.md
new file mode 100644
index 0000000000000..b2b935a012f81
--- /dev/null
+++ b/docs/docs/thinking-in-gatsby.md
@@ -0,0 +1,5 @@
+---
+title: Thinking in Gatsby
+---
+
+Coming soon.
diff --git a/docs/tutorial/index.md b/docs/tutorial/index.md
new file mode 100644
index 0000000000000..696be0a055e35
--- /dev/null
+++ b/docs/tutorial/index.md
@@ -0,0 +1,5 @@
+---
+title: Tutorial
+---
+
+Coming soon
diff --git a/examples/gatsbygram/.babelrc b/examples/gatsbygram/.babelrc
new file mode 100644
index 0000000000000..a8b9b8bbcd312
--- /dev/null
+++ b/examples/gatsbygram/.babelrc
@@ -0,0 +1,4 @@
+{
+ "presets": ['react', 'es2015', 'stage-1'],
+ "plugins": ['add-module-exports']
+}
diff --git a/examples/gatsbygram/.gitignore b/examples/gatsbygram/.gitignore
new file mode 100644
index 0000000000000..8f5b35a4a9cbc
--- /dev/null
+++ b/examples/gatsbygram/.gitignore
@@ -0,0 +1,3 @@
+public
+.cache
+node_modules
diff --git a/examples/gatsbygram/.nvmrc b/examples/gatsbygram/.nvmrc
new file mode 100644
index 0000000000000..73d2f99996d42
--- /dev/null
+++ b/examples/gatsbygram/.nvmrc
@@ -0,0 +1 @@
+v7.8.0
diff --git a/examples/gatsbygram/README.md b/examples/gatsbygram/README.md
new file mode 100644
index 0000000000000..97ba1d3db1140
--- /dev/null
+++ b/examples/gatsbygram/README.md
@@ -0,0 +1,6 @@
+# Gatsbygram
+
+https://gatsbygram.gatsbyjs.org/
+
+Built with Gatsby 1.0 (Alpha 11) as a demo of Gatsby's new built-in
+image processing capabilities.
diff --git a/examples/gatsbygram/data/images/2B8CeRM9we.jpg b/examples/gatsbygram/data/images/2B8CeRM9we.jpg
new file mode 100644
index 0000000000000..6b71dc6f29ffd
Binary files /dev/null and b/examples/gatsbygram/data/images/2B8CeRM9we.jpg differ
diff --git a/examples/gatsbygram/data/images/2Mj4uJM995.jpg b/examples/gatsbygram/data/images/2Mj4uJM995.jpg
new file mode 100644
index 0000000000000..4d162903d9e5b
Binary files /dev/null and b/examples/gatsbygram/data/images/2Mj4uJM995.jpg differ
diff --git a/examples/gatsbygram/data/images/3UlOVgM9yz.jpg b/examples/gatsbygram/data/images/3UlOVgM9yz.jpg
new file mode 100644
index 0000000000000..4fbf02725c10f
Binary files /dev/null and b/examples/gatsbygram/data/images/3UlOVgM9yz.jpg differ
diff --git a/examples/gatsbygram/data/images/3lADm0M90E.jpg b/examples/gatsbygram/data/images/3lADm0M90E.jpg
new file mode 100644
index 0000000000000..df1d1bbc8f4bb
Binary files /dev/null and b/examples/gatsbygram/data/images/3lADm0M90E.jpg differ
diff --git a/examples/gatsbygram/data/images/4IjD5ts9ws.jpg b/examples/gatsbygram/data/images/4IjD5ts9ws.jpg
new file mode 100644
index 0000000000000..e5e23566a3aac
Binary files /dev/null and b/examples/gatsbygram/data/images/4IjD5ts9ws.jpg differ
diff --git a/examples/gatsbygram/data/images/4nm0fJs91a.jpg b/examples/gatsbygram/data/images/4nm0fJs91a.jpg
new file mode 100644
index 0000000000000..7fe78f7d0e65a
Binary files /dev/null and b/examples/gatsbygram/data/images/4nm0fJs91a.jpg differ
diff --git a/examples/gatsbygram/data/images/6JCu-jM9yk.jpg b/examples/gatsbygram/data/images/6JCu-jM9yk.jpg
new file mode 100644
index 0000000000000..2adee99bf41f1
Binary files /dev/null and b/examples/gatsbygram/data/images/6JCu-jM9yk.jpg differ
diff --git a/examples/gatsbygram/data/images/6TtTqhM981.jpg b/examples/gatsbygram/data/images/6TtTqhM981.jpg
new file mode 100644
index 0000000000000..ac3078709bdd2
Binary files /dev/null and b/examples/gatsbygram/data/images/6TtTqhM981.jpg differ
diff --git a/examples/gatsbygram/data/images/7g4S2QM9_l.jpg b/examples/gatsbygram/data/images/7g4S2QM9_l.jpg
new file mode 100644
index 0000000000000..2b8cfa14c9378
Binary files /dev/null and b/examples/gatsbygram/data/images/7g4S2QM9_l.jpg differ
diff --git a/examples/gatsbygram/data/images/8HcJ7is90a.jpg b/examples/gatsbygram/data/images/8HcJ7is90a.jpg
new file mode 100644
index 0000000000000..a298d357394ea
Binary files /dev/null and b/examples/gatsbygram/data/images/8HcJ7is90a.jpg differ
diff --git a/examples/gatsbygram/data/images/8rNAoWs9wR.jpg b/examples/gatsbygram/data/images/8rNAoWs9wR.jpg
new file mode 100644
index 0000000000000..c44ed8a7436a6
Binary files /dev/null and b/examples/gatsbygram/data/images/8rNAoWs9wR.jpg differ
diff --git a/examples/gatsbygram/data/images/BBd11a1s9x3.jpg b/examples/gatsbygram/data/images/BBd11a1s9x3.jpg
new file mode 100644
index 0000000000000..0960bae1700f8
Binary files /dev/null and b/examples/gatsbygram/data/images/BBd11a1s9x3.jpg differ
diff --git a/examples/gatsbygram/data/images/BCMVNmFM9yJ.jpg b/examples/gatsbygram/data/images/BCMVNmFM9yJ.jpg
new file mode 100644
index 0000000000000..9311432469d89
Binary files /dev/null and b/examples/gatsbygram/data/images/BCMVNmFM9yJ.jpg differ
diff --git a/examples/gatsbygram/data/images/BEZprQ3s95w.jpg b/examples/gatsbygram/data/images/BEZprQ3s95w.jpg
new file mode 100644
index 0000000000000..dc5e10b43e9e2
Binary files /dev/null and b/examples/gatsbygram/data/images/BEZprQ3s95w.jpg differ
diff --git a/examples/gatsbygram/data/images/BFur3Jfs94V.jpg b/examples/gatsbygram/data/images/BFur3Jfs94V.jpg
new file mode 100644
index 0000000000000..cab161a891991
Binary files /dev/null and b/examples/gatsbygram/data/images/BFur3Jfs94V.jpg differ
diff --git a/examples/gatsbygram/data/images/BGiWipNM96D.jpg b/examples/gatsbygram/data/images/BGiWipNM96D.jpg
new file mode 100644
index 0000000000000..6f64163e96646
Binary files /dev/null and b/examples/gatsbygram/data/images/BGiWipNM96D.jpg differ
diff --git a/examples/gatsbygram/data/images/BKwuIApgkKJ.jpg b/examples/gatsbygram/data/images/BKwuIApgkKJ.jpg
new file mode 100644
index 0000000000000..22154a3b579be
Binary files /dev/null and b/examples/gatsbygram/data/images/BKwuIApgkKJ.jpg differ
diff --git a/examples/gatsbygram/data/images/BLhhsTZlGwd.jpg b/examples/gatsbygram/data/images/BLhhsTZlGwd.jpg
new file mode 100644
index 0000000000000..d877645c2c3ae
Binary files /dev/null and b/examples/gatsbygram/data/images/BLhhsTZlGwd.jpg differ
diff --git a/examples/gatsbygram/data/images/BSEdRj_B8HP.jpg b/examples/gatsbygram/data/images/BSEdRj_B8HP.jpg
new file mode 100644
index 0000000000000..5bc7965e0b56d
Binary files /dev/null and b/examples/gatsbygram/data/images/BSEdRj_B8HP.jpg differ
diff --git a/examples/gatsbygram/data/images/BSWUdcThRa-.jpg b/examples/gatsbygram/data/images/BSWUdcThRa-.jpg
new file mode 100644
index 0000000000000..9f91e77c51351
Binary files /dev/null and b/examples/gatsbygram/data/images/BSWUdcThRa-.jpg differ
diff --git a/examples/gatsbygram/data/images/BShF_8qhtEv.jpg b/examples/gatsbygram/data/images/BShF_8qhtEv.jpg
new file mode 100644
index 0000000000000..4eba527e26199
Binary files /dev/null and b/examples/gatsbygram/data/images/BShF_8qhtEv.jpg differ
diff --git a/examples/gatsbygram/data/images/S6F7tDM99M.jpg b/examples/gatsbygram/data/images/S6F7tDM99M.jpg
new file mode 100644
index 0000000000000..25e00f50b6449
Binary files /dev/null and b/examples/gatsbygram/data/images/S6F7tDM99M.jpg differ
diff --git a/examples/gatsbygram/data/images/SBx5zDM96r.jpg b/examples/gatsbygram/data/images/SBx5zDM96r.jpg
new file mode 100644
index 0000000000000..5e29980314c27
Binary files /dev/null and b/examples/gatsbygram/data/images/SBx5zDM96r.jpg differ
diff --git a/examples/gatsbygram/data/images/SbHaprs9_K.jpg b/examples/gatsbygram/data/images/SbHaprs9_K.jpg
new file mode 100644
index 0000000000000..c033b0cadebdd
Binary files /dev/null and b/examples/gatsbygram/data/images/SbHaprs9_K.jpg differ
diff --git a/examples/gatsbygram/data/images/T4ygWXs98-.jpg b/examples/gatsbygram/data/images/T4ygWXs98-.jpg
new file mode 100644
index 0000000000000..03376e3c4e1df
Binary files /dev/null and b/examples/gatsbygram/data/images/T4ygWXs98-.jpg differ
diff --git a/examples/gatsbygram/data/images/T4zsrIs9-b.jpg b/examples/gatsbygram/data/images/T4zsrIs9-b.jpg
new file mode 100644
index 0000000000000..b73146292d8fa
Binary files /dev/null and b/examples/gatsbygram/data/images/T4zsrIs9-b.jpg differ
diff --git a/examples/gatsbygram/data/images/TEgqzWs98e.jpg b/examples/gatsbygram/data/images/TEgqzWs98e.jpg
new file mode 100644
index 0000000000000..5a28fd4f130a5
Binary files /dev/null and b/examples/gatsbygram/data/images/TEgqzWs98e.jpg differ
diff --git a/examples/gatsbygram/data/images/TPga4IM9wF.jpg b/examples/gatsbygram/data/images/TPga4IM9wF.jpg
new file mode 100644
index 0000000000000..24dd9ffd38ef8
Binary files /dev/null and b/examples/gatsbygram/data/images/TPga4IM9wF.jpg differ
diff --git a/examples/gatsbygram/data/images/TWXrxBM98V.jpg b/examples/gatsbygram/data/images/TWXrxBM98V.jpg
new file mode 100644
index 0000000000000..5a77f54fa738e
Binary files /dev/null and b/examples/gatsbygram/data/images/TWXrxBM98V.jpg differ
diff --git a/examples/gatsbygram/data/images/ToYJj0M92U.jpg b/examples/gatsbygram/data/images/ToYJj0M92U.jpg
new file mode 100644
index 0000000000000..5c10e2fc58b2a
Binary files /dev/null and b/examples/gatsbygram/data/images/ToYJj0M92U.jpg differ
diff --git a/examples/gatsbygram/data/images/Tq2ITZs9x6.jpg b/examples/gatsbygram/data/images/Tq2ITZs9x6.jpg
new file mode 100644
index 0000000000000..8f4b39abcf4b4
Binary files /dev/null and b/examples/gatsbygram/data/images/Tq2ITZs9x6.jpg differ
diff --git a/examples/gatsbygram/data/images/V7AMWds949.jpg b/examples/gatsbygram/data/images/V7AMWds949.jpg
new file mode 100644
index 0000000000000..e82af76db405e
Binary files /dev/null and b/examples/gatsbygram/data/images/V7AMWds949.jpg differ
diff --git a/examples/gatsbygram/data/images/VlFCais9_U.jpg b/examples/gatsbygram/data/images/VlFCais9_U.jpg
new file mode 100644
index 0000000000000..b23c9dc43a827
Binary files /dev/null and b/examples/gatsbygram/data/images/VlFCais9_U.jpg differ
diff --git a/examples/gatsbygram/data/images/Vmws0_s9yL.jpg b/examples/gatsbygram/data/images/Vmws0_s9yL.jpg
new file mode 100644
index 0000000000000..732c1c683065e
Binary files /dev/null and b/examples/gatsbygram/data/images/Vmws0_s9yL.jpg differ
diff --git a/examples/gatsbygram/data/images/WBNdvKs9-x.jpg b/examples/gatsbygram/data/images/WBNdvKs9-x.jpg
new file mode 100644
index 0000000000000..1697f5179b183
Binary files /dev/null and b/examples/gatsbygram/data/images/WBNdvKs9-x.jpg differ
diff --git a/examples/gatsbygram/data/images/WVE_9as9-Z.jpg b/examples/gatsbygram/data/images/WVE_9as9-Z.jpg
new file mode 100644
index 0000000000000..a5e5ff2b92877
Binary files /dev/null and b/examples/gatsbygram/data/images/WVE_9as9-Z.jpg differ
diff --git a/examples/gatsbygram/data/images/YA47taM9xR.jpg b/examples/gatsbygram/data/images/YA47taM9xR.jpg
new file mode 100644
index 0000000000000..49052ad0c95f8
Binary files /dev/null and b/examples/gatsbygram/data/images/YA47taM9xR.jpg differ
diff --git a/examples/gatsbygram/data/images/YBJ_8xM91G.jpg b/examples/gatsbygram/data/images/YBJ_8xM91G.jpg
new file mode 100644
index 0000000000000..9f1542f0c585d
Binary files /dev/null and b/examples/gatsbygram/data/images/YBJ_8xM91G.jpg differ
diff --git a/examples/gatsbygram/data/images/YBKLxfs91e.jpg b/examples/gatsbygram/data/images/YBKLxfs91e.jpg
new file mode 100644
index 0000000000000..a2f2c2fa45365
Binary files /dev/null and b/examples/gatsbygram/data/images/YBKLxfs91e.jpg differ
diff --git a/examples/gatsbygram/data/images/YDPr3BM9yC.jpg b/examples/gatsbygram/data/images/YDPr3BM9yC.jpg
new file mode 100644
index 0000000000000..cc9c0555b5c3b
Binary files /dev/null and b/examples/gatsbygram/data/images/YDPr3BM9yC.jpg differ
diff --git a/examples/gatsbygram/data/images/Z0mVePs9yb.jpg b/examples/gatsbygram/data/images/Z0mVePs9yb.jpg
new file mode 100644
index 0000000000000..3d98599635715
Binary files /dev/null and b/examples/gatsbygram/data/images/Z0mVePs9yb.jpg differ
diff --git a/examples/gatsbygram/data/images/Zt65eQs96z.jpg b/examples/gatsbygram/data/images/Zt65eQs96z.jpg
new file mode 100644
index 0000000000000..88e3fdd2dbff3
Binary files /dev/null and b/examples/gatsbygram/data/images/Zt65eQs96z.jpg differ
diff --git a/examples/gatsbygram/data/images/Zt6drmM96I.jpg b/examples/gatsbygram/data/images/Zt6drmM96I.jpg
new file mode 100644
index 0000000000000..959ae491aff60
Binary files /dev/null and b/examples/gatsbygram/data/images/Zt6drmM96I.jpg differ
diff --git a/examples/gatsbygram/data/images/aWqdbpM99F.jpg b/examples/gatsbygram/data/images/aWqdbpM99F.jpg
new file mode 100644
index 0000000000000..4bab2e3f9bf58
Binary files /dev/null and b/examples/gatsbygram/data/images/aWqdbpM99F.jpg differ
diff --git a/examples/gatsbygram/data/images/bSOo_Gs98O.jpg b/examples/gatsbygram/data/images/bSOo_Gs98O.jpg
new file mode 100644
index 0000000000000..edb4750a4698a
Binary files /dev/null and b/examples/gatsbygram/data/images/bSOo_Gs98O.jpg differ
diff --git a/examples/gatsbygram/data/images/baIXGhs99Z.jpg b/examples/gatsbygram/data/images/baIXGhs99Z.jpg
new file mode 100644
index 0000000000000..d417008e7c143
Binary files /dev/null and b/examples/gatsbygram/data/images/baIXGhs99Z.jpg differ
diff --git a/examples/gatsbygram/data/images/cipIL0M9zb.jpg b/examples/gatsbygram/data/images/cipIL0M9zb.jpg
new file mode 100644
index 0000000000000..fc61c662427eb
Binary files /dev/null and b/examples/gatsbygram/data/images/cipIL0M9zb.jpg differ
diff --git a/examples/gatsbygram/data/images/cpKHxyM97Q.jpg b/examples/gatsbygram/data/images/cpKHxyM97Q.jpg
new file mode 100644
index 0000000000000..890d9c49de6ba
Binary files /dev/null and b/examples/gatsbygram/data/images/cpKHxyM97Q.jpg differ
diff --git a/examples/gatsbygram/data/images/dCsmF8s951.jpg b/examples/gatsbygram/data/images/dCsmF8s951.jpg
new file mode 100644
index 0000000000000..1eb43b6cff60a
Binary files /dev/null and b/examples/gatsbygram/data/images/dCsmF8s951.jpg differ
diff --git a/examples/gatsbygram/data/images/dUiIWFM99E.jpg b/examples/gatsbygram/data/images/dUiIWFM99E.jpg
new file mode 100644
index 0000000000000..30a89792f0ec8
Binary files /dev/null and b/examples/gatsbygram/data/images/dUiIWFM99E.jpg differ
diff --git a/examples/gatsbygram/data/images/dUiblpM990.jpg b/examples/gatsbygram/data/images/dUiblpM990.jpg
new file mode 100644
index 0000000000000..678a3e18340b9
Binary files /dev/null and b/examples/gatsbygram/data/images/dUiblpM990.jpg differ
diff --git a/examples/gatsbygram/data/images/dUimPbM9-K.jpg b/examples/gatsbygram/data/images/dUimPbM9-K.jpg
new file mode 100644
index 0000000000000..7da556d0888b4
Binary files /dev/null and b/examples/gatsbygram/data/images/dUimPbM9-K.jpg differ
diff --git a/examples/gatsbygram/data/images/dac9QCs96Z.jpg b/examples/gatsbygram/data/images/dac9QCs96Z.jpg
new file mode 100644
index 0000000000000..f56f3c73fa3d6
Binary files /dev/null and b/examples/gatsbygram/data/images/dac9QCs96Z.jpg differ
diff --git a/examples/gatsbygram/data/images/daf92Rs9wJ.jpg b/examples/gatsbygram/data/images/daf92Rs9wJ.jpg
new file mode 100644
index 0000000000000..fd5b7006810d5
Binary files /dev/null and b/examples/gatsbygram/data/images/daf92Rs9wJ.jpg differ
diff --git a/examples/gatsbygram/data/images/gb7GOoM92V.jpg b/examples/gatsbygram/data/images/gb7GOoM92V.jpg
new file mode 100644
index 0000000000000..522888a6a63dc
Binary files /dev/null and b/examples/gatsbygram/data/images/gb7GOoM92V.jpg differ
diff --git a/examples/gatsbygram/data/images/goTReQM95o.jpg b/examples/gatsbygram/data/images/goTReQM95o.jpg
new file mode 100644
index 0000000000000..2d3a80ce6034c
Binary files /dev/null and b/examples/gatsbygram/data/images/goTReQM95o.jpg differ
diff --git a/examples/gatsbygram/data/images/h9ZrIms9y_.jpg b/examples/gatsbygram/data/images/h9ZrIms9y_.jpg
new file mode 100644
index 0000000000000..4b486e3dd84c1
Binary files /dev/null and b/examples/gatsbygram/data/images/h9ZrIms9y_.jpg differ
diff --git a/examples/gatsbygram/data/images/hG-1k4s9yJ.jpg b/examples/gatsbygram/data/images/hG-1k4s9yJ.jpg
new file mode 100644
index 0000000000000..c098f26f8794b
Binary files /dev/null and b/examples/gatsbygram/data/images/hG-1k4s9yJ.jpg differ
diff --git a/examples/gatsbygram/data/images/hKxaEXs96v.jpg b/examples/gatsbygram/data/images/hKxaEXs96v.jpg
new file mode 100644
index 0000000000000..7eee655024860
Binary files /dev/null and b/examples/gatsbygram/data/images/hKxaEXs96v.jpg differ
diff --git a/examples/gatsbygram/data/images/hSNJLVs9_0.jpg b/examples/gatsbygram/data/images/hSNJLVs9_0.jpg
new file mode 100644
index 0000000000000..cacb29dccc52f
Binary files /dev/null and b/examples/gatsbygram/data/images/hSNJLVs9_0.jpg differ
diff --git a/examples/gatsbygram/data/images/hd7P_nM98p.jpg b/examples/gatsbygram/data/images/hd7P_nM98p.jpg
new file mode 100644
index 0000000000000..1d51e316f8382
Binary files /dev/null and b/examples/gatsbygram/data/images/hd7P_nM98p.jpg differ
diff --git a/examples/gatsbygram/data/images/hhkRxns97X.jpg b/examples/gatsbygram/data/images/hhkRxns97X.jpg
new file mode 100644
index 0000000000000..3ccc4665f168d
Binary files /dev/null and b/examples/gatsbygram/data/images/hhkRxns97X.jpg differ
diff --git a/examples/gatsbygram/data/images/htQkA2M9_x.jpg b/examples/gatsbygram/data/images/htQkA2M9_x.jpg
new file mode 100644
index 0000000000000..73d059d055bd9
Binary files /dev/null and b/examples/gatsbygram/data/images/htQkA2M9_x.jpg differ
diff --git a/examples/gatsbygram/data/images/iDVBRjM99x.jpg b/examples/gatsbygram/data/images/iDVBRjM99x.jpg
new file mode 100644
index 0000000000000..6b8f78f88859f
Binary files /dev/null and b/examples/gatsbygram/data/images/iDVBRjM99x.jpg differ
diff --git a/examples/gatsbygram/data/images/iRfNB_M99y.jpg b/examples/gatsbygram/data/images/iRfNB_M99y.jpg
new file mode 100644
index 0000000000000..cde85751fa566
Binary files /dev/null and b/examples/gatsbygram/data/images/iRfNB_M99y.jpg differ
diff --git a/examples/gatsbygram/data/images/icK7QlM96C.jpg b/examples/gatsbygram/data/images/icK7QlM96C.jpg
new file mode 100644
index 0000000000000..3793e8a886969
Binary files /dev/null and b/examples/gatsbygram/data/images/icK7QlM96C.jpg differ
diff --git a/examples/gatsbygram/data/images/jID6jzM95N.jpg b/examples/gatsbygram/data/images/jID6jzM95N.jpg
new file mode 100644
index 0000000000000..1717e7650629e
Binary files /dev/null and b/examples/gatsbygram/data/images/jID6jzM95N.jpg differ
diff --git a/examples/gatsbygram/data/images/jKpZA4M90B.jpg b/examples/gatsbygram/data/images/jKpZA4M90B.jpg
new file mode 100644
index 0000000000000..be5bff33fa307
Binary files /dev/null and b/examples/gatsbygram/data/images/jKpZA4M90B.jpg differ
diff --git a/examples/gatsbygram/data/images/jKzbvCs9_9.jpg b/examples/gatsbygram/data/images/jKzbvCs9_9.jpg
new file mode 100644
index 0000000000000..fd61e517ffa88
Binary files /dev/null and b/examples/gatsbygram/data/images/jKzbvCs9_9.jpg differ
diff --git a/examples/gatsbygram/data/images/jSZfqEM9-l.jpg b/examples/gatsbygram/data/images/jSZfqEM9-l.jpg
new file mode 100644
index 0000000000000..b9500187d5287
Binary files /dev/null and b/examples/gatsbygram/data/images/jSZfqEM9-l.jpg differ
diff --git a/examples/gatsbygram/data/images/jU-tlcM9-_.jpg b/examples/gatsbygram/data/images/jU-tlcM9-_.jpg
new file mode 100644
index 0000000000000..4b54860693992
Binary files /dev/null and b/examples/gatsbygram/data/images/jU-tlcM9-_.jpg differ
diff --git a/examples/gatsbygram/data/images/jh0QmFM9_4.jpg b/examples/gatsbygram/data/images/jh0QmFM9_4.jpg
new file mode 100644
index 0000000000000..34e6e1466e3cd
Binary files /dev/null and b/examples/gatsbygram/data/images/jh0QmFM9_4.jpg differ
diff --git a/examples/gatsbygram/data/images/k7zLTbs9z0.jpg b/examples/gatsbygram/data/images/k7zLTbs9z0.jpg
new file mode 100644
index 0000000000000..1fe88992b3948
Binary files /dev/null and b/examples/gatsbygram/data/images/k7zLTbs9z0.jpg differ
diff --git a/examples/gatsbygram/data/images/kFThHyM95O.jpg b/examples/gatsbygram/data/images/kFThHyM95O.jpg
new file mode 100644
index 0000000000000..ee61428e22edb
Binary files /dev/null and b/examples/gatsbygram/data/images/kFThHyM95O.jpg differ
diff --git a/examples/gatsbygram/data/images/l3kMPSM92e.jpg b/examples/gatsbygram/data/images/l3kMPSM92e.jpg
new file mode 100644
index 0000000000000..9a31bac4347a2
Binary files /dev/null and b/examples/gatsbygram/data/images/l3kMPSM92e.jpg differ
diff --git a/examples/gatsbygram/data/images/lYmjeQs9_j.jpg b/examples/gatsbygram/data/images/lYmjeQs9_j.jpg
new file mode 100644
index 0000000000000..f864118906128
Binary files /dev/null and b/examples/gatsbygram/data/images/lYmjeQs9_j.jpg differ
diff --git a/examples/gatsbygram/data/images/lYnUVSs9wf.jpg b/examples/gatsbygram/data/images/lYnUVSs9wf.jpg
new file mode 100644
index 0000000000000..19639f35cd729
Binary files /dev/null and b/examples/gatsbygram/data/images/lYnUVSs9wf.jpg differ
diff --git a/examples/gatsbygram/data/images/lYoYWVs9x_.jpg b/examples/gatsbygram/data/images/lYoYWVs9x_.jpg
new file mode 100644
index 0000000000000..ea39ab00b46cd
Binary files /dev/null and b/examples/gatsbygram/data/images/lYoYWVs9x_.jpg differ
diff --git a/examples/gatsbygram/data/images/lutoOTs902.jpg b/examples/gatsbygram/data/images/lutoOTs902.jpg
new file mode 100644
index 0000000000000..78a5d34b1647a
Binary files /dev/null and b/examples/gatsbygram/data/images/lutoOTs902.jpg differ
diff --git a/examples/gatsbygram/data/images/lxaO_8s993.jpg b/examples/gatsbygram/data/images/lxaO_8s993.jpg
new file mode 100644
index 0000000000000..60a09f8125c21
Binary files /dev/null and b/examples/gatsbygram/data/images/lxaO_8s993.jpg differ
diff --git a/examples/gatsbygram/data/images/mlxMw3M94j.jpg b/examples/gatsbygram/data/images/mlxMw3M94j.jpg
new file mode 100644
index 0000000000000..9bfba8d6e1f47
Binary files /dev/null and b/examples/gatsbygram/data/images/mlxMw3M94j.jpg differ
diff --git a/examples/gatsbygram/data/images/moglcxM97P.jpg b/examples/gatsbygram/data/images/moglcxM97P.jpg
new file mode 100644
index 0000000000000..74bb1a2ce1a59
Binary files /dev/null and b/examples/gatsbygram/data/images/moglcxM97P.jpg differ
diff --git a/examples/gatsbygram/data/images/nQtXUns97Y.jpg b/examples/gatsbygram/data/images/nQtXUns97Y.jpg
new file mode 100644
index 0000000000000..ed54d47ce375f
Binary files /dev/null and b/examples/gatsbygram/data/images/nQtXUns97Y.jpg differ
diff --git a/examples/gatsbygram/data/images/nZaKQfM99Z.jpg b/examples/gatsbygram/data/images/nZaKQfM99Z.jpg
new file mode 100644
index 0000000000000..80a296d1593b5
Binary files /dev/null and b/examples/gatsbygram/data/images/nZaKQfM99Z.jpg differ
diff --git a/examples/gatsbygram/data/images/oFM91Fs9z6.jpg b/examples/gatsbygram/data/images/oFM91Fs9z6.jpg
new file mode 100644
index 0000000000000..0683542ce588e
Binary files /dev/null and b/examples/gatsbygram/data/images/oFM91Fs9z6.jpg differ
diff --git a/examples/gatsbygram/data/images/oJebJyM9z8.jpg b/examples/gatsbygram/data/images/oJebJyM9z8.jpg
new file mode 100644
index 0000000000000..ac4d598bd61dd
Binary files /dev/null and b/examples/gatsbygram/data/images/oJebJyM9z8.jpg differ
diff --git a/examples/gatsbygram/data/images/oqbez7s9_x.jpg b/examples/gatsbygram/data/images/oqbez7s9_x.jpg
new file mode 100644
index 0000000000000..c564c587e703a
Binary files /dev/null and b/examples/gatsbygram/data/images/oqbez7s9_x.jpg differ
diff --git a/examples/gatsbygram/data/images/oqbxsdM9wR.jpg b/examples/gatsbygram/data/images/oqbxsdM9wR.jpg
new file mode 100644
index 0000000000000..3f1475aed827e
Binary files /dev/null and b/examples/gatsbygram/data/images/oqbxsdM9wR.jpg differ
diff --git a/examples/gatsbygram/data/images/oqeqN7s912.jpg b/examples/gatsbygram/data/images/oqeqN7s912.jpg
new file mode 100644
index 0000000000000..5c117936a24bc
Binary files /dev/null and b/examples/gatsbygram/data/images/oqeqN7s912.jpg differ
diff --git a/examples/gatsbygram/data/images/oqvZV5s9z2.jpg b/examples/gatsbygram/data/images/oqvZV5s9z2.jpg
new file mode 100644
index 0000000000000..fe35deeba0500
Binary files /dev/null and b/examples/gatsbygram/data/images/oqvZV5s9z2.jpg differ
diff --git a/examples/gatsbygram/data/images/orMhzhs97P.jpg b/examples/gatsbygram/data/images/orMhzhs97P.jpg
new file mode 100644
index 0000000000000..0e1a7ea5da9b8
Binary files /dev/null and b/examples/gatsbygram/data/images/orMhzhs97P.jpg differ
diff --git a/examples/gatsbygram/data/images/orPfaus9xF.jpg b/examples/gatsbygram/data/images/orPfaus9xF.jpg
new file mode 100644
index 0000000000000..4e0af9d6ef54d
Binary files /dev/null and b/examples/gatsbygram/data/images/orPfaus9xF.jpg differ
diff --git a/examples/gatsbygram/data/images/orRtxus906.jpg b/examples/gatsbygram/data/images/orRtxus906.jpg
new file mode 100644
index 0000000000000..bceb896a1deaf
Binary files /dev/null and b/examples/gatsbygram/data/images/orRtxus906.jpg differ
diff --git a/examples/gatsbygram/data/images/ov6A6Xs93f.jpg b/examples/gatsbygram/data/images/ov6A6Xs93f.jpg
new file mode 100644
index 0000000000000..982fac547bef4
Binary files /dev/null and b/examples/gatsbygram/data/images/ov6A6Xs93f.jpg differ
diff --git a/examples/gatsbygram/data/images/ov6BJ8M93g.jpg b/examples/gatsbygram/data/images/ov6BJ8M93g.jpg
new file mode 100644
index 0000000000000..9f925e356e9cb
Binary files /dev/null and b/examples/gatsbygram/data/images/ov6BJ8M93g.jpg differ
diff --git a/examples/gatsbygram/data/images/ov6Bgps93h.jpg b/examples/gatsbygram/data/images/ov6Bgps93h.jpg
new file mode 100644
index 0000000000000..78a3896541c06
Binary files /dev/null and b/examples/gatsbygram/data/images/ov6Bgps93h.jpg differ
diff --git a/examples/gatsbygram/data/images/rf52zpM98X.jpg b/examples/gatsbygram/data/images/rf52zpM98X.jpg
new file mode 100644
index 0000000000000..e262915c692ed
Binary files /dev/null and b/examples/gatsbygram/data/images/rf52zpM98X.jpg differ
diff --git a/examples/gatsbygram/data/images/saS0ZtM9x5.jpg b/examples/gatsbygram/data/images/saS0ZtM9x5.jpg
new file mode 100644
index 0000000000000..585824c4597ce
Binary files /dev/null and b/examples/gatsbygram/data/images/saS0ZtM9x5.jpg differ
diff --git a/examples/gatsbygram/data/images/tB0dMts9x9.jpg b/examples/gatsbygram/data/images/tB0dMts9x9.jpg
new file mode 100644
index 0000000000000..12f7e7cc01f13
Binary files /dev/null and b/examples/gatsbygram/data/images/tB0dMts9x9.jpg differ
diff --git a/examples/gatsbygram/data/images/tB0kS4M9yO.jpg b/examples/gatsbygram/data/images/tB0kS4M9yO.jpg
new file mode 100644
index 0000000000000..26f9d1dd3b514
Binary files /dev/null and b/examples/gatsbygram/data/images/tB0kS4M9yO.jpg differ
diff --git a/examples/gatsbygram/data/posts.json b/examples/gatsbygram/data/posts.json
new file mode 100644
index 0000000000000..e99ed326c08e0
--- /dev/null
+++ b/examples/gatsbygram/data/posts.json
@@ -0,0 +1,1301 @@
+[
+ {
+ "id": "1486495736706552111_31593318",
+ "code": "BShF_8qhtEv",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2017-04-05T20:28:42.000Z",
+ "type": "image",
+ "likes": 7,
+ "comment": 0,
+ "text": "\"EXTRODINARY fresh mustards\". This is where they're at folks",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/sh0.08/e35/17663748_1153852971404500_7070241507587915776_n.jpg",
+ "image": "images/BShF_8qhtEv.jpg"
+ },
+ {
+ "id": "1483463111452464830_31593318",
+ "code": "BSWUdcThRa-",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2017-04-01T16:03:25.000Z",
+ "type": "image",
+ "likes": 22,
+ "comment": 2,
+ "text": "Third city on my east coast swing. First New Orleans, then DC, and now Philly.",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/sh0.08/e35/c0.135.1080.1080/17662854_1280815928623035_937926441180332032_n.jpg",
+ "image": "images/BSWUdcThRa-.jpg"
+ },
+ {
+ "id": "1478435327902728655_31593318",
+ "code": "BSEdRj_B8HP",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2017-03-25T17:34:06.000Z",
+ "type": "image",
+ "likes": 20,
+ "comment": 1,
+ "text": "Raining and almost 80 degrees in New Orleans French Quarter",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/sh0.08/e35/c135.0.810.810/17494792_1133907666737199_1768011540662845440_n.jpg",
+ "image": "images/BSEdRj_B8HP.jpg"
+ },
+ {
+ "id": "1360516742464695325_31593318",
+ "code": "BLhhsTZlGwd",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2016-10-14T00:50:56.000Z",
+ "type": "image",
+ "likes": 15,
+ "comment": 0,
+ "text": "Hey San Francisco ❤️",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/sh0.08/e35/14693758_1766411793613440_7185291805863182336_n.jpg",
+ "image": "images/BLhhsTZlGwd.jpg"
+ },
+ {
+ "id": "1346779149175505545_31593318",
+ "code": "BKwuIApgkKJ",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2016-09-25T01:56:47.000Z",
+ "type": "image",
+ "likes": 18,
+ "comment": 1,
+ "text": "Timed my run nicely",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/sh0.08/e35/14360137_1696760950649699_2816603071264587776_n.jpg",
+ "image": "images/BKwuIApgkKJ.jpg"
+ },
+ {
+ "id": "1270677182602272387_31593318",
+ "code": "BGiWipNM96D",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2016-06-12T01:55:45.000Z",
+ "type": "image",
+ "likes": 26,
+ "comment": 1,
+ "text": "Sitting in setting sun on bernal hill equals heaven",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/sh0.08/e35/13398891_954318571333512_2037518487_n.jpg",
+ "image": "images/BGiWipNM96D.jpg"
+ },
+ {
+ "id": "1256134251849702933_31593318",
+ "code": "BFur3Jfs94V",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2016-05-23T00:21:33.000Z",
+ "type": "image",
+ "likes": 15,
+ "comment": 0,
+ "text": "I built this!",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/sh0.08/e35/13116581_508808719302533_932557327_n.jpg",
+ "image": "images/BFur3Jfs94V.jpg"
+ },
+ {
+ "id": "1232199266021400176_31593318",
+ "code": "BEZprQ3s95w",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2016-04-19T23:47:00.000Z",
+ "type": "image",
+ "likes": 16,
+ "comment": 1,
+ "text": "Hi Chicago",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/sh0.08/e35/12918518_1607204502935928_1750163314_n.jpg",
+ "image": "images/BEZprQ3s95w.jpg"
+ },
+ {
+ "id": "1192421294565743753_31593318",
+ "code": "BCMVNmFM9yJ",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2016-02-25T02:35:17.000Z",
+ "type": "image",
+ "likes": 19,
+ "comment": 0,
+ "text": "Fading embers",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/sh0.08/e35/12729578_238604273139219_1437358774_n.jpg",
+ "image": "images/BCMVNmFM9yJ.jpg"
+ },
+ {
+ "id": "1179335444856560759_31593318",
+ "code": "BBd11a1s9x3",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2016-02-07T01:16:02.000Z",
+ "type": "image",
+ "likes": 9,
+ "comment": 0,
+ "text": "Mt. Sutro",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/sh0.08/e35/12677693_186899455005435_855017645_n.jpg",
+ "image": "images/BBd11a1s9x3.jpg"
+ },
+ {
+ "id": "1093024552502680593_31593318",
+ "code": "8rNAoWs9wR",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2015-10-10T23:11:42.000Z",
+ "type": "image",
+ "likes": 8,
+ "comment": 1,
+ "text": "Marina SF",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/sh0.08/e35/12139643_879198768830916_1627002305_n.jpg",
+ "image": "images/8rNAoWs9wR.jpg"
+ },
+ {
+ "id": "1082958063116475674_31593318",
+ "code": "8HcJ7is90a",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2015-09-27T01:51:22.000Z",
+ "type": "image",
+ "likes": 14,
+ "comment": 0,
+ "text": "Twin Peaks SF",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/sh0.08/e35/10576216_693388384130914_1470225115_n.jpg",
+ "image": "images/8HcJ7is90a.jpg"
+ },
+ {
+ "id": "1072104297123274725_31593318",
+ "code": "7g4S2QM9_l",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2015-09-12T02:26:53.000Z",
+ "type": "image",
+ "likes": 13,
+ "comment": 0,
+ "text": "Sunset SF Sunset",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/sh0.08/e35/11909961_477080385804619_1729162928_n.jpg",
+ "image": "images/7g4S2QM9_l.jpg"
+ },
+ {
+ "id": "1050382401524719413_31593318",
+ "code": "6TtTqhM981",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2015-08-13T03:09:21.000Z",
+ "type": "image",
+ "likes": 5,
+ "comment": 1,
+ "text": "San Francisco sure is lovely",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/sh0.08/e35/11850254_1706767189554247_167276454_n.jpg",
+ "image": "images/6TtTqhM981.jpg"
+ },
+ {
+ "id": "1047380412691897508_31593318",
+ "code": "6JCu-jM9yk",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2015-08-08T23:44:56.000Z",
+ "type": "image",
+ "likes": 6,
+ "comment": 0,
+ "text": "Foggy hike",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/sh0.08/e35/11356873_1471238179865005_292092201_n.jpg",
+ "image": "images/6JCu-jM9yk.jpg"
+ },
+ {
+ "id": "1019954573251698010_31593318",
+ "code": "4nm0fJs91a",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2015-07-02T03:34:41.000Z",
+ "type": "image",
+ "likes": 10,
+ "comment": 0,
+ "text": "Foggy evening run",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/sh0.08/e35/11380117_1465341190444968_380349894_n.jpg",
+ "image": "images/4nm0fJs91a.jpg"
+ },
+ {
+ "id": "1011212316101041196_31593318",
+ "code": "4IjD5ts9ws",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2015-06-20T02:05:23.000Z",
+ "type": "image",
+ "likes": 4,
+ "comment": 0,
+ "text": "A container food truck!",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/e15/11335072_1868600436697712_1490794057_n.jpg",
+ "image": "images/4IjD5ts9ws.jpg"
+ },
+ {
+ "id": "1001206739996237060_31593318",
+ "code": "3lADm0M90E",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2015-06-06T06:46:05.000Z",
+ "type": "image",
+ "likes": 9,
+ "comment": 2,
+ "text": "National donut day @colonial donuts in Oakland",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/e15/11430188_100848140257178_1391253248_n.jpg",
+ "image": "images/3lADm0M90E.jpg"
+ },
+ {
+ "id": "996585130438155443_31593318",
+ "code": "3UlOVgM9yz",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2015-05-30T21:43:47.000Z",
+ "type": "image",
+ "likes": 5,
+ "comment": 0,
+ "text": "Chilling on the bow",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/e15/11381438_1617144825194647_1827846331_n.jpg",
+ "image": "images/3UlOVgM9yz.jpg"
+ },
+ {
+ "id": "976313048697659257_31593318",
+ "code": "2Mj4uJM995",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2015-05-02T22:26:46.000Z",
+ "type": "image",
+ "likes": 11,
+ "comment": 1,
+ "text": "Stumbled into a first row seat at the Giants game",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/e15/11201673_643314849146572_717884664_n.jpg",
+ "image": "images/2Mj4uJM995.jpg"
+ },
+ {
+ "id": "973323047219223582_31593318",
+ "code": "2B8CeRM9we",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2015-04-28T19:26:10.000Z",
+ "type": "image",
+ "likes": 9,
+ "comment": 3,
+ "text": "Home sweet home",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/e15/11191126_1611820855722488_427066186_n.jpg",
+ "image": "images/2B8CeRM9we.jpg"
+ },
+ {
+ "id": "811160600493415566_31593318",
+ "code": "tB0kS4M9yO",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2014-09-17T01:38:20.000Z",
+ "type": "image",
+ "likes": 5,
+ "comment": 1,
+ "text": "@lindawatkins has a nice view it turns out",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/e15/923785_298030550384778_1748260542_n.jpg",
+ "image": "images/tB0kS4M9yO.jpg"
+ },
+ {
+ "id": "811160112838466685_31593318",
+ "code": "tB0dMts9x9",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2014-09-17T01:37:22.000Z",
+ "type": "image",
+ "likes": 4,
+ "comment": 0,
+ "text": "Post-nap grumpy face",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/e15/10706977_294380270767284_1824123800_n.jpg",
+ "image": "images/tB0dMts9x9.jpg"
+ },
+ {
+ "id": "800034649663593593_31593318",
+ "code": "saS0ZtM9x5",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2014-09-01T17:13:03.000Z",
+ "type": "image",
+ "likes": 9,
+ "comment": 0,
+ "text": "Mesa Falls, Idaho",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/e15/10666270_686048818144270_157152842_n.jpg",
+ "image": "images/saS0ZtM9x5.jpg"
+ },
+ {
+ "id": "783599315140730647_31593318",
+ "code": "rf52zpM98X",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2014-08-10T00:58:59.000Z",
+ "type": "image",
+ "likes": 10,
+ "comment": 0,
+ "text": "Marin headlands",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/e15/10607937_618465764934873_1365604485_n.jpg",
+ "image": "images/rf52zpM98X.jpg"
+ },
+ {
+ "id": "734060454761192929_31593318",
+ "code": "ov6Bgps93h",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2014-06-02T16:34:07.000Z",
+ "type": "image",
+ "likes": 5,
+ "comment": 1,
+ "text": "Packard plant",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/e15/10369443_706391792754842_1488217259_n.jpg",
+ "image": "images/ov6Bgps93h.jpg"
+ },
+ {
+ "id": "734060430375509472_31593318",
+ "code": "ov6BJ8M93g",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2014-06-02T16:34:04.000Z",
+ "type": "image",
+ "likes": 0,
+ "comment": 0,
+ "text": "Hanging out in Detroit",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/e15/926200_533478630112183_770870098_n.jpg",
+ "image": "images/ov6BJ8M93g.jpg"
+ },
+ {
+ "id": "734060413657013727_31593318",
+ "code": "ov6A6Xs93f",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2014-06-02T16:34:02.000Z",
+ "type": "image",
+ "likes": 2,
+ "comment": 0,
+ "text": "Heidelberg project",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/e15/10431984_255514737968206_819303614_n.jpg",
+ "image": "images/ov6A6Xs93f.jpg"
+ },
+ {
+ "id": "732757276941868346_31593318",
+ "code": "orRtxus906",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2014-05-31T21:24:56.000Z",
+ "type": "image",
+ "likes": 5,
+ "comment": 0,
+ "text": "#sammarrieslaura",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/e15/10349344_1494462330766381_2076888008_n.jpg",
+ "image": "images/orRtxus906.jpg"
+ },
+ {
+ "id": "732747494080109637_31593318",
+ "code": "orPfaus9xF",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2014-05-31T21:05:29.000Z",
+ "type": "image",
+ "likes": 3,
+ "comment": 0,
+ "text": "#sammarrieslaura",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/e15/10401555_685955498137974_1036632050_n.jpg",
+ "image": "images/orPfaus9xF.jpg"
+ },
+ {
+ "id": "732734464004972239_31593318",
+ "code": "orMhzhs97P",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2014-05-31T20:39:36.000Z",
+ "type": "image",
+ "likes": 6,
+ "comment": 0,
+ "text": "#sammarrieslaura",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/e15/10362260_1492310504316697_181712081_n.jpg",
+ "image": "images/orMhzhs97P.jpg"
+ },
+ {
+ "id": "732606339090734326_31593318",
+ "code": "oqvZV5s9z2",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2014-05-31T16:25:02.000Z",
+ "type": "image",
+ "likes": 5,
+ "comment": 0,
+ "text": "#sammarrieslaura",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/e15/10358344_658003337606852_1782453008_n.jpg",
+ "image": "images/oqvZV5s9z2.jpg"
+ },
+ {
+ "id": "732532731974770038_31593318",
+ "code": "oqeqN7s912",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2014-05-31T13:58:48.000Z",
+ "type": "image",
+ "likes": 3,
+ "comment": 0,
+ "text": "#sammarrieslaura",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/e15/926760_1436717873249933_2076253966_n.jpg",
+ "image": "images/oqeqN7s912.jpg"
+ },
+ {
+ "id": "732520051645864977_31593318",
+ "code": "oqbxsdM9wR",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2014-05-31T13:33:36.000Z",
+ "type": "image",
+ "likes": 4,
+ "comment": 0,
+ "text": "#sammarrieslaura",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/e15/10358298_398846293587168_846099988_n.jpg",
+ "image": "images/oqbxsdM9wR.jpg"
+ },
+ {
+ "id": "732518754003705841_31593318",
+ "code": "oqbez7s9_x",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2014-05-31T13:31:01.000Z",
+ "type": "image",
+ "likes": 3,
+ "comment": 0,
+ "text": "#sammarrieslaura",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/e15/923987_240684122793934_1971044527_n.jpg",
+ "image": "images/oqbez7s9_x.jpg"
+ },
+ {
+ "id": "723243022496816380_31593318",
+ "code": "oJebJyM9z8",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2014-05-18T18:21:48.000Z",
+ "type": "image",
+ "likes": 4,
+ "comment": 2,
+ "text": "Church selfie",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/e15/10311024_1400448496908952_1429408879_n.jpg",
+ "image": "images/oJebJyM9z8.jpg"
+ },
+ {
+ "id": "722040340713037050_31593318",
+ "code": "oFM91Fs9z6",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2014-05-17T02:32:17.000Z",
+ "type": "image",
+ "likes": 6,
+ "comment": 0,
+ "text": "Sun's goin' down",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/e15/10349758_698597846853765_308306429_n.jpg",
+ "image": "images/oFM91Fs9z6.jpg"
+ },
+ {
+ "id": "709713470394982233_31593318",
+ "code": "nZaKQfM99Z",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2014-04-30T02:21:00.000Z",
+ "type": "image",
+ "likes": 3,
+ "comment": 0,
+ "text": "Walking home",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/e15/10311263_1500571720162241_488304399_n.jpg",
+ "image": "images/nZaKQfM99Z.jpg"
+ },
+ {
+ "id": "707264656279068376_31593318",
+ "code": "nQtXUns97Y",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2014-04-26T17:15:38.000Z",
+ "type": "image",
+ "likes": 3,
+ "comment": 0,
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/e15/10311311_269172509930751_401381103_n.jpg",
+ "image": "images/nQtXUns97Y.jpg"
+ },
+ {
+ "id": "695949453427990223_31593318",
+ "code": "moglcxM97P",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2014-04-11T02:34:21.000Z",
+ "type": "image",
+ "likes": 8,
+ "comment": 0,
+ "text": "Sunset living up to its foggy reputation",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/e15/914285_232024907001450_989329933_n.jpg",
+ "image": "images/moglcxM97P.jpg"
+ },
+ {
+ "id": "695178098877128227_31593318",
+ "code": "mlxMw3M94j",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2014-04-10T01:01:48.000Z",
+ "type": "image",
+ "likes": 9,
+ "comment": 0,
+ "text": "Foggy day #sf #oceanbeach #sutroheights",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/e15/10246211_524667710977688_1539466318_n.jpg",
+ "image": "images/mlxMw3M94j.jpg"
+ },
+ {
+ "id": "682173039289556382_31593318",
+ "code": "l3kMPSM92e",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2014-03-23T02:23:05.000Z",
+ "type": "image",
+ "likes": 9,
+ "comment": 0,
+ "text": "#sf #sunset",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/e15/11356983_996659560368958_1802776196_n.jpg",
+ "image": "images/l3kMPSM92e.jpg"
+ },
+ {
+ "id": "680440398655774583_31593318",
+ "code": "lxaO_8s993",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2014-03-20T17:00:38.000Z",
+ "type": "image",
+ "likes": 5,
+ "comment": 2,
+ "text": "Working @ Harvard Square",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/e15/11428164_1624154427831330_53333732_n.jpg",
+ "image": "images/lxaO_8s993.jpg"
+ },
+ {
+ "id": "679681270014532918_31593318",
+ "code": "lutoOTs902",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2014-03-19T15:52:23.000Z",
+ "type": "image",
+ "likes": 5,
+ "comment": 0,
+ "text": "At the zoo... or Antarctica",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/e15/11326269_936340726413259_1952229238_n.jpg",
+ "image": "images/lutoOTs902.jpg"
+ },
+ {
+ "id": "673465739406204031_31593318",
+ "code": "lYoYWVs9x_",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2014-03-11T02:03:14.000Z",
+ "type": "image",
+ "likes": 7,
+ "comment": 0,
+ "text": "Biking home part 3 #sunset #sf",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/e15/11325187_848471188533323_2115425970_n.jpg",
+ "image": "images/lYoYWVs9x_.jpg"
+ },
+ {
+ "id": "673461065357712415_31593318",
+ "code": "lYnUVSs9wf",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2014-03-11T01:53:56.000Z",
+ "type": "image",
+ "likes": 4,
+ "comment": 0,
+ "text": "Biking home part 2 #sf",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/e15/11355064_705393262905534_598512475_n.jpg",
+ "image": "images/lYnUVSs9wf.jpg"
+ },
+ {
+ "id": "673457707733475299_31593318",
+ "code": "lYmjeQs9_j",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2014-03-11T01:47:16.000Z",
+ "type": "image",
+ "likes": 5,
+ "comment": 0,
+ "text": "Biking home #sf",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/e15/11334479_1440365799601549_1338616584_n.jpg",
+ "image": "images/lYmjeQs9_j.jpg"
+ },
+ {
+ "id": "665350447119457524_31593318",
+ "code": "k7zLTbs9z0",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2014-02-27T21:19:35.000Z",
+ "type": "image",
+ "likes": 3,
+ "comment": 0,
+ "text": "Dental office #justacleaning #ihope",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/e15/1740870_1440791909490171_933390768_n.jpg",
+ "image": "images/k7zLTbs9z0.jpg"
+ },
+ {
+ "id": "650011560209800782_31593318",
+ "code": "kFThHyM95O",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2014-02-06T17:23:58.000Z",
+ "type": "image",
+ "likes": 7,
+ "comment": 0,
+ "text": "Rainy San Francisco",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/e15/1169989_1439666386267479_1805701176_n.jpg",
+ "image": "images/kFThHyM95O.jpg"
+ },
+ {
+ "id": "640022460883001336_31593318",
+ "code": "jh0QmFM9_4",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2014-01-23T22:37:24.000Z",
+ "type": "image",
+ "likes": 2,
+ "comment": 0,
+ "text": "Pastrami sandwich",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/e15/1516553_267682393389152_1988116567_n.jpg",
+ "image": "images/jh0QmFM9_4.jpg"
+ },
+ {
+ "id": "636409258827833279_31593318",
+ "code": "jU-tlcM9-_",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2014-01-18T22:58:37.000Z",
+ "type": "image",
+ "likes": 6,
+ "comment": 2,
+ "text": "Spring!",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/e15/927542_1382940688632822_791314040_n.jpg",
+ "image": "images/jU-tlcM9-_.jpg"
+ },
+ {
+ "id": "635682624046882725_31593318",
+ "code": "jSZfqEM9-l",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2014-01-17T22:54:55.000Z",
+ "type": "image",
+ "likes": 7,
+ "comment": 0,
+ "text": "San Francisco Market Street",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/e15/1599918_671503232900660_321825947_n.jpg",
+ "image": "images/jSZfqEM9-l.jpg"
+ },
+ {
+ "id": "633544903908122621_31593318",
+ "code": "jKzbvCs9_9",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2014-01-15T00:07:39.000Z",
+ "type": "image",
+ "likes": 3,
+ "comment": 0,
+ "text": "Looking back at snowshoe prints. #latergram #lehi",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/e15/1516230_1415533748685929_1687508360_n.jpg",
+ "image": "images/jKzbvCs9_9.jpg"
+ },
+ {
+ "id": "633500736435772673_31593318",
+ "code": "jKpZA4M90B",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2014-01-14T22:39:54.000Z",
+ "type": "image",
+ "likes": 7,
+ "comment": 8,
+ "text": "Purple cauliflower for lunch",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/e15/1517107_1396777213909061_1781415780_n.jpg",
+ "image": "images/jKpZA4M90B.jpg"
+ },
+ {
+ "id": "632772965954739789_31593318",
+ "code": "jID6jzM95N",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2014-01-13T22:33:57.000Z",
+ "type": "image",
+ "likes": 7,
+ "comment": 0,
+ "text": "Startup in SF means lots of bikes. #pantheon",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/e15/11352438_848263221895300_847311871_n.jpg",
+ "image": "images/jID6jzM95N.jpg"
+ },
+ {
+ "id": "620418901388549762_31593318",
+ "code": "icK7QlM96C",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2013-12-27T21:28:38.000Z",
+ "type": "image",
+ "likes": 7,
+ "comment": 0,
+ "text": "Big Cottonwood. Returning from sledding with the fam",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/e15/924517_609921485721994_568440563_n.jpg",
+ "image": "images/icK7QlM96C.jpg"
+ },
+ {
+ "id": "617411858855616370_31593318",
+ "code": "iRfNB_M99y",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2013-12-23T17:54:10.000Z",
+ "type": "image",
+ "likes": 6,
+ "comment": 2,
+ "text": "Riding Amtrak to Utah for Xmas.",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/e15/1517156_429536667173077_325353637_n.jpg",
+ "image": "images/iRfNB_M99y.jpg"
+ },
+ {
+ "id": "613426420792942449_31593318",
+ "code": "iDVBRjM99x",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2013-12-18T05:55:49.000Z",
+ "type": "image",
+ "likes": 3,
+ "comment": 10,
+ "text": "Late night Caltrain",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/e15/1515130_468120576642411_769132317_n.jpg",
+ "image": "images/iDVBRjM99x.jpg"
+ },
+ {
+ "id": "611758039731788991_31593318",
+ "code": "h9ZrIms9y_",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2013-12-15T22:41:03.000Z",
+ "type": "image",
+ "likes": 0,
+ "comment": 0,
+ "text": "Had to do it once this season",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/e15/1516240_571823206220538_1940906009_n.jpg",
+ "image": "images/h9ZrIms9y_.jpg"
+ },
+ {
+ "id": "607214368319594481_31593318",
+ "code": "htQkA2M9_x",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2013-12-09T16:13:35.000Z",
+ "type": "image",
+ "likes": 2,
+ "comment": 0,
+ "text": "Chilly morning at the train station (29)",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/e15/1169200_564665890270989_1774286305_n.jpg",
+ "image": "images/htQkA2M9_x.jpg"
+ },
+ {
+ "id": "603923376229310167_31593318",
+ "code": "hhkRxns97X",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2013-12-05T03:14:58.000Z",
+ "type": "image",
+ "likes": 8,
+ "comment": 2,
+ "text": "The Sound of Music Sing-A-Long @ Castro Theater SF",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/e15/1169082_237261336450291_650902315_n.jpg",
+ "image": "images/hhkRxns97X.jpg"
+ },
+ {
+ "id": "602898508977266473_31593318",
+ "code": "hd7P_nM98p",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2013-12-03T17:18:44.000Z",
+ "type": "image",
+ "likes": 8,
+ "comment": 4,
+ "text": "California \"winter\"",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/e15/1169297_1429416893941620_574489476_n.jpg",
+ "image": "images/hd7P_nM98p.jpg"
+ },
+ {
+ "id": "599599505648902132_31593318",
+ "code": "hSNJLVs9_0",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2013-11-29T04:04:12.000Z",
+ "type": "image",
+ "likes": 4,
+ "comment": 2,
+ "text": "South Provo Utah",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/e15/1171720_179135252280992_675162948_n.jpg",
+ "image": "images/hSNJLVs9_0.jpg"
+ },
+ {
+ "id": "597507196258082479_31593318",
+ "code": "hKxaEXs96v",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2013-11-26T06:47:10.000Z",
+ "type": "image",
+ "likes": 6,
+ "comment": 1,
+ "text": "Making cranapplesauce",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/e15/1389996_372744932872165_779748358_n.jpg",
+ "image": "images/hKxaEXs96v.jpg"
+ },
+ {
+ "id": "596440361295142025_31593318",
+ "code": "hG-1k4s9yJ",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2013-11-24T19:27:33.000Z",
+ "type": "image",
+ "likes": 9,
+ "comment": 0,
+ "text": "Hiking above Orem Utah yesterday",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/e15/1169694_662818783763068_581767053_n.jpg",
+ "image": "images/hG-1k4s9yJ.jpg"
+ },
+ {
+ "id": "587804514970754664_31593318",
+ "code": "goTReQM95o",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2013-11-12T21:29:40.000Z",
+ "type": "image",
+ "likes": 5,
+ "comment": 2,
+ "text": "1 Market St San Francisco",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/e15/924793_180271615509067_1687415809_n.jpg",
+ "image": "images/goTReQM95o.jpg"
+ },
+ {
+ "id": "584320489442499989_31593318",
+ "code": "gb7GOoM92V",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2013-11-08T02:07:32.000Z",
+ "type": "image",
+ "likes": 1,
+ "comment": 0,
+ "text": "Crazy crowded as normal on Caltrain",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/e15/915632_1435901739962475_486322309_n.jpg",
+ "image": "images/gb7GOoM92V.jpg"
+ },
+ {
+ "id": "529876495778438153_31593318",
+ "code": "daf92Rs9wJ",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2013-08-24T23:17:02.000Z",
+ "type": "image",
+ "likes": 3,
+ "comment": 0,
+ "text": "Friend bought a durian shake. We had to \"quarantine\" it in the plastic bag as the smell was making us all feel nauseous.",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/e15/11378426_466336863534615_1547307167_n.jpg",
+ "image": "images/daf92Rs9wJ.jpg"
+ },
+ {
+ "id": "529863260585057945_31593318",
+ "code": "dac9QCs96Z",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2013-08-24T22:50:44.000Z",
+ "type": "image",
+ "likes": 4,
+ "comment": 0,
+ "text": "Alien abduction. Or sunlit patch in a cave.",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/e15/11313247_900827439960757_1617982516_n.jpg",
+ "image": "images/dac9QCs96Z.jpg"
+ },
+ {
+ "id": "528199217793195914_31593318",
+ "code": "dUimPbM9-K",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2013-08-22T15:44:35.000Z",
+ "type": "image",
+ "likes": 7,
+ "comment": 0,
+ "text": "The Swiss say happy cows are key to their delicious cheese and chocolate",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/e15/11274412_962531207101572_1996053268_n.jpg",
+ "image": "images/dUimPbM9-K.jpg"
+ },
+ {
+ "id": "528198485736152948_31593318",
+ "code": "dUiblpM990",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2013-08-22T15:43:07.000Z",
+ "type": "image",
+ "likes": 3,
+ "comment": 0,
+ "text": "Lausanne Switzerland #latergram",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/e15/11380991_1604775013138554_1975699581_n.jpg",
+ "image": "images/dUiblpM990.jpg"
+ },
+ {
+ "id": "528197163355987780_31593318",
+ "code": "dUiIWFM99E",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2013-08-22T15:40:30.000Z",
+ "type": "image",
+ "likes": 6,
+ "comment": 0,
+ "text": "Zurich #latergram",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/e15/11287787_659815724150301_2060472739_n.jpg",
+ "image": "images/dUiIWFM99E.jpg"
+ },
+ {
+ "id": "523176638502133365_31593318",
+ "code": "dCsmF8s951",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2013-08-15T17:25:37.000Z",
+ "type": "image",
+ "likes": 9,
+ "comment": 0,
+ "text": "Salzburg the beautiful",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/e15/11386498_833081943412682_1392111115_n.jpg",
+ "image": "images/dCsmF8s951.jpg"
+ },
+ {
+ "id": "515988147267690192_31593318",
+ "code": "cpKHxyM97Q",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2013-08-05T19:23:22.000Z",
+ "type": "image",
+ "likes": 6,
+ "comment": 1,
+ "text": "That's THREE iconic London sites in one picture. I try to be efficient.",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/e15/11353113_1607832536141844_2018928172_n.jpg",
+ "image": "images/cpKHxyM97Q.jpg"
+ },
+ {
+ "id": "514154189823401179_31593318",
+ "code": "cipIL0M9zb",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2013-08-03T06:39:37.000Z",
+ "type": "image",
+ "likes": 7,
+ "comment": 0,
+ "text": "I guess I didn't look too sketchy",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/e15/11311410_752535601559991_1024538760_n.jpg",
+ "image": "images/cipIL0M9zb.jpg"
+ },
+ {
+ "id": "493743881078431577_31593318",
+ "code": "baIXGhs99Z",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2013-07-06T02:47:59.000Z",
+ "type": "image",
+ "likes": 1,
+ "comment": 0,
+ "text": "Baseballing",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/e15/11355159_1450771905223070_219338865_n.jpg",
+ "image": "images/baIXGhs99Z.jpg"
+ },
+ {
+ "id": "491519698525216526_31593318",
+ "code": "bSOo_Gs98O",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2013-07-03T01:08:55.000Z",
+ "type": "image",
+ "likes": 6,
+ "comment": 0,
+ "text": "Trying on some Google Glasses",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/e15/11376229_382586481941409_228274495_n.jpg",
+ "image": "images/bSOo_Gs98O.jpg"
+ },
+ {
+ "id": "474753551234752325_31593318",
+ "code": "aWqdbpM99F",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2013-06-09T21:57:35.000Z",
+ "type": "image",
+ "likes": 5,
+ "comment": 1,
+ "text": "Listening to @lindawatkins and the Symphony Parnassus",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/e15/11381478_752996551464700_2020946164_n.jpg",
+ "image": "images/aWqdbpM99F.jpg"
+ },
+ {
+ "id": "465165262878137499_31593318",
+ "code": "Z0mVePs9yb",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2013-05-27T16:27:22.000Z",
+ "type": "image",
+ "likes": 0,
+ "comment": 0,
+ "text": "Reminds me of a certain poem",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/e15/11282186_1641815769384247_553838929_n.jpg",
+ "image": "images/Z0mVePs9yb.jpg"
+ },
+ {
+ "id": "463285372889325235_31593318",
+ "code": "Zt65eQs96z",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2013-05-25T02:12:21.000Z",
+ "type": "image",
+ "likes": 3,
+ "comment": 0,
+ "text": "Me and the sky",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/e15/11312119_471864216296568_947475813_n.jpg",
+ "image": "images/Zt65eQs96z.jpg"
+ },
+ {
+ "id": "463283463063330440_31593318",
+ "code": "Zt6drmM96I",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2013-05-25T02:08:34.000Z",
+ "type": "image",
+ "likes": 2,
+ "comment": 1,
+ "text": "Portland the beautiful",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/e15/11328545_1612204442382836_321806408_n.jpg",
+ "image": "images/Zt6drmM96I.jpg"
+ },
+ {
+ "id": "433258973868842114_31593318",
+ "code": "YDPr3BM9yC",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2013-04-13T15:55:16.000Z",
+ "type": "image",
+ "likes": 3,
+ "comment": 0,
+ "text": "Iconic pizza time",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/e15/11274300_839105672792470_1770132230_n.jpg",
+ "image": "images/YDPr3BM9yC.jpg"
+ },
+ {
+ "id": "432671828728864094_31593318",
+ "code": "YBKLxfs91e",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2013-04-12T20:28:43.000Z",
+ "type": "image",
+ "likes": 5,
+ "comment": 0,
+ "text": "Beautiful old stone dam",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/e15/11282234_634169686719958_1078651290_n.jpg",
+ "image": "images/YBKLxfs91e.jpg"
+ },
+ {
+ "id": "432671016199904582_31593318",
+ "code": "YBJ_8xM91G",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2013-04-12T20:27:06.000Z",
+ "type": "image",
+ "likes": 3,
+ "comment": 0,
+ "text": "Crofton dam",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/e15/11280076_687001724737222_1069333862_n.jpg",
+ "image": "images/YBJ_8xM91G.jpg"
+ },
+ {
+ "id": "432595958039305297_31593318",
+ "code": "YA47taM9xR",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2013-04-12T17:57:58.000Z",
+ "type": "image",
+ "likes": 3,
+ "comment": 1,
+ "text": "Sleepy hollow",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/e15/11287874_421990181338785_380715_n.jpg",
+ "image": "images/YA47taM9xR.jpg"
+ },
+ {
+ "id": "402249729178853273_31593318",
+ "code": "WVE_9as9-Z",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2013-03-01T21:05:26.000Z",
+ "type": "image",
+ "likes": 4,
+ "comment": 0,
+ "text": "Crazy warm in SF today. Mid-60s",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/e15/11251145_1599823240288665_1297228813_n.jpg",
+ "image": "images/WVE_9as9-Z.jpg"
+ },
+ {
+ "id": "396657460300210097_31593318",
+ "code": "WBNdvKs9-x",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2013-02-22T03:54:35.000Z",
+ "type": "image",
+ "likes": 1,
+ "comment": 0,
+ "text": "BYU. vs St. Mary's",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/e15/11257886_365367033659818_1947115382_n.jpg",
+ "image": "images/WBNdvKs9-x.jpg"
+ },
+ {
+ "id": "394910241079418429_31593318",
+ "code": "V7AMWds949",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2013-02-19T18:03:10.000Z",
+ "type": "image",
+ "likes": 4,
+ "comment": 1,
+ "text": "Rainy morning on the train",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/e15/11256373_1399701320356390_1861180233_n.jpg",
+ "image": "images/V7AMWds949.jpg"
+ },
+ {
+ "id": "389212604606962827_31593318",
+ "code": "Vmws0_s9yL",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2013-02-11T21:22:59.000Z",
+ "type": "image",
+ "likes": 1,
+ "comment": 0,
+ "text": "Lovely spring day in San Francisco",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/e15/11252668_1583985011865990_1037189552_n.jpg",
+ "image": "images/Vmws0_s9yL.jpg"
+ },
+ {
+ "id": "388739099008425940_31593318",
+ "code": "VlFCais9_U",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2013-02-11T05:42:13.000Z",
+ "type": "image",
+ "likes": 1,
+ "comment": 2,
+ "text": "My new wall photo grid",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/e15/11230390_712086292250337_1353127328_n.jpg",
+ "image": "images/VlFCais9_U.jpg"
+ },
+ {
+ "id": "358263540721901467_31593318",
+ "code": "T4zsrIs9-b",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2012-12-31T04:32:43.000Z",
+ "type": "image",
+ "likes": 4,
+ "comment": 0,
+ "text": "A profile in concentration.",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/e15/11252415_826604620756892_429311033_n.jpg",
+ "image": "images/T4zsrIs9-b.jpg"
+ },
+ {
+ "id": "358258295744749374_31593318",
+ "code": "T4ygWXs98-",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2012-12-31T04:22:18.000Z",
+ "type": "image",
+ "likes": 3,
+ "comment": 1,
+ "text": "Game night with ma and sis",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/e15/11266018_403557056498323_762755229_n.jpg",
+ "image": "images/T4ygWXs98-.jpg"
+ },
+ {
+ "id": "354333585801731194_31593318",
+ "code": "Tq2ITZs9x6",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2012-12-25T18:24:36.000Z",
+ "type": "image",
+ "likes": 2,
+ "comment": 0,
+ "text": "A white Christmas!",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/e15/11246548_894528543936635_827529874_n.jpg",
+ "image": "images/Tq2ITZs9x6.jpg"
+ },
+ {
+ "id": "353638780796919188_31593318",
+ "code": "ToYJj0M92U",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2012-12-24T19:24:09.000Z",
+ "type": "image",
+ "likes": 1,
+ "comment": 0,
+ "text": "Snow!",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/e15/11243833_924423070955251_1998110268_n.jpg",
+ "image": "images/ToYJj0M92U.jpg"
+ },
+ {
+ "id": "348570183808573205_31593318",
+ "code": "TWXrxBM98V",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2012-12-17T19:33:45.000Z",
+ "type": "image",
+ "likes": 7,
+ "comment": 1,
+ "text": "Google self-driving car in Palo Alto",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/e15/11202518_1580336602226324_173677835_n.jpg",
+ "image": "images/TWXrxBM98V.jpg"
+ },
+ {
+ "id": "346638280792726533_31593318",
+ "code": "TPga4IM9wF",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2012-12-15T03:35:24.000Z",
+ "type": "image",
+ "likes": 1,
+ "comment": 0,
+ "text": "Oakland LDS temple lit up for Christmas",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/e15/11253250_1010655875612100_1362538936_n.jpg",
+ "image": "images/TPga4IM9wF.jpg"
+ },
+ {
+ "id": "343543150435098398_31593318",
+ "code": "TEgqzWs98e",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2012-12-10T21:05:56.000Z",
+ "type": "image",
+ "likes": 4,
+ "comment": 0,
+ "text": "Reading afternoon on the roof at work.",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/e15/11232843_377906735739746_92452298_n.jpg",
+ "image": "images/TEgqzWs98e.jpg"
+ },
+ {
+ "id": "340610814873689932_31593318",
+ "code": "S6F7tDM99M",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2012-12-06T19:59:54.000Z",
+ "type": "image",
+ "likes": 0,
+ "comment": 0,
+ "text": "Awesome!",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/e15/11259663_1452513261708104_734265453_n.jpg",
+ "image": "images/S6F7tDM99M.jpg"
+ },
+ {
+ "id": "331891615330459594_31593318",
+ "code": "SbHaprs9_K",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2012-11-24T19:16:25.000Z",
+ "type": "image",
+ "likes": 0,
+ "comment": 0,
+ "text": "Utah canyon hiking.",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/e15/11236306_957691850920654_1431258098_n.jpg",
+ "image": "images/SbHaprs9_K.jpg"
+ },
+ {
+ "id": "324760124251168427_31593318",
+ "code": "SBx5zDM96r",
+ "username": "kyle__mathews",
+ "avatar": "https://scontent-fra3-1.cdninstagram.com/t51.2885-19/11373674_1480574918906897_270256414_a.jpg",
+ "time": "2012-11-14T23:07:25.000Z",
+ "type": "image",
+ "likes": 2,
+ "comment": 0,
+ "text": "Nob Hill, San Francisco",
+ "media": "https://scontent-fra3-1.cdninstagram.com/t51.2885-15/e15/11249605_1586447784964342_439897156_n.jpg",
+ "image": "images/SBx5zDM96r.jpg"
+ }
+]
diff --git a/examples/gatsbygram/gatsby-browser.js b/examples/gatsbygram/gatsby-browser.js
new file mode 100644
index 0000000000000..6a5fd30a630c0
--- /dev/null
+++ b/examples/gatsbygram/gatsby-browser.js
@@ -0,0 +1,11 @@
+const windowWidth = window.innerWidth
+
+exports.shouldUpdateScroll = args => {
+ // Scroll position only matters on mobile as on larger screens, we use a
+ // modal.
+ if (windowWidth < 750) {
+ return true
+ } else {
+ return false
+ }
+}
diff --git a/examples/gatsbygram/gatsby-config.js b/examples/gatsbygram/gatsby-config.js
new file mode 100644
index 0000000000000..b46cd83530b57
--- /dev/null
+++ b/examples/gatsbygram/gatsby-config.js
@@ -0,0 +1,72 @@
+module.exports = {
+ siteMetadata: {
+ title: `Gatsbygram`,
+ },
+ plugins: [
+ /*
+ * Gatsby's data processing layer begins with “source”
+ * plugins. You can source data nodes from anywhere but
+ * most sites, like Gatsbygram, will include data from
+ * the filesystem so we start here with
+ * “gatsby-source-filesystem”.
+ *
+ * A site can have as many instances of
+ * gatsby-source-filesystem as you need. Each plugin
+ * instance is configured with a root path where it then
+ * recursively reads in files and adds them to the data
+ * tree.
+ */
+ {
+ resolve: `gatsby-source-filesystem`,
+ options: {
+ name: `data`,
+ path: `${__dirname}/data`,
+ },
+ },
+ // This plugin exposes helper functions for processing
+ // images with the NPM package “sharp”. It's used by
+ // several other plugins.
+ `gatsby-plugin-sharp`,
+ // This plugin identifies file nodes that are images and
+ // transforms these to create new “ImageSharp” nodes.
+ `gatsby-transformer-sharp`,
+ // This plugin transforms JSON file nodes.
+ `gatsby-transformer-json`,
+ `gatsby-typegen-filesystem`,
+ // This plugin adds GraphQL fields to the ImageSharp
+ // GraphQL type. With them you can resize images and
+ // generate sets of responsive images.
+ `gatsby-typegen-sharp`,
+ // This plugin sets up the popular css-in-js library
+ // Glamor. It handles adding a Babel plugin and webpack
+ // configuration as well as setting up optimized server
+ // rendering and client re-hydration.
+ `gatsby-plugin-glamor`,
+ // This plugin takes your configuration and generates a
+ // web manifest file so Gatsbygram can be added to your
+ // homescreen on Android.
+ {
+ resolve: `gatsby-plugin-manifest`,
+ options: {
+ name: `Gatsbygram`,
+ short_name: `Gatsbygram`,
+ start_url: `/`,
+ background_color: `#f7f7f7`,
+ theme_color: `#191919`,
+ display: `minimal-ui`,
+ },
+ },
+ // This plugin generates a service worker and AppShell
+ // html file so the site works offline and is otherwise
+ // resistant to bad networks. Works with almost any
+ // site!
+ `gatsby-plugin-offline`,
+ // This plugin sets up Google Analytics for you.
+ {
+ resolve: `gatsby-plugin-google-analytics`,
+ options: {
+ trackingId: `UA-91652198-1`,
+ },
+ },
+ ],
+}
diff --git a/examples/gatsbygram/gatsby-node.js b/examples/gatsbygram/gatsby-node.js
new file mode 100644
index 0000000000000..f876d1e8c972b
--- /dev/null
+++ b/examples/gatsbygram/gatsby-node.js
@@ -0,0 +1,68 @@
+const _ = require("lodash")
+const Promise = require("bluebird")
+const path = require("path")
+const slug = require("slug")
+const slash = require("slash")
+
+// Implement the Gatsby API “createPages”. This is
+// called after the Gatsby bootstrap is finished so you have
+// access to any information necessary to programatically
+// create pages.
+exports.createPages = ({ graphql, boundActionCreators }) => {
+ const { upsertPage } = boundActionCreators
+
+ return new Promise((resolve, reject) => {
+ // The “graphql” function allows us to run arbitrary
+ // queries against this Gatsbygram's graphql schema. Think of
+ // it like Gatsbygram has a built-in database constructed
+ // from static data that you can run queries against.
+ //
+ // Post is a data node type derived from data/posts.json
+ // which is created when scrapping Instagram. “allPosts”
+ // is a "connection" (a GraphQL convention for accessing
+ // a list of nodes) gives us an easy way to query all
+ // Post nodes.
+ graphql(
+ `
+ {
+ allPosts(limit: 1000) {
+ edges {
+ node {
+ id
+ }
+ }
+ }
+ }
+ `
+ ).then(result => {
+ if (result.errors) {
+ console.log(result.errors)
+ reject(result.errors)
+ }
+
+ // Create image post pages.
+ const postTemplate = path.resolve(`src/templates/post-page.js`)
+ // We want to create a detailed page for each
+ // Instagram post. Since the scrapped Instagram data
+ // already includes an ID field, we just use that for
+ // each page's path.
+ _.each(result.data.allPosts.edges, edge => {
+ // Gatsby uses Redux to manage its internal state.
+ // Plugins and sites can use functions like "upsertPage"
+ // to interact with Gatsby.
+ upsertPage({
+ // Each page is required to have a `path` as well
+ // as a template component. The `context` is
+ // optional but is often necessary so the template
+ // can query data specific to each page.
+ path: slug(edge.node.id),
+ component: slash(postTemplate),
+ context: {
+ id: edge.node.id,
+ },
+ })
+ })
+ resolve()
+ })
+ })
+}
diff --git a/examples/gatsbygram/package.json b/examples/gatsbygram/package.json
new file mode 100644
index 0000000000000..ad540cb0c1bef
--- /dev/null
+++ b/examples/gatsbygram/package.json
@@ -0,0 +1,46 @@
+{
+ "name": "gatsby-example-image-gallery",
+ "private": true,
+ "description": "Gatsby example site: image gallery",
+ "version": "1.0.0",
+ "author": "Kyle Mathews + My sweet title +
+Hello friends
+ browserHistory.push(`/`)}
+ css={{
+ display: `flex`,
+ position: `relative`,
+ height: `100vh`,
+ }}
+ >
+ browserHistory.push(`/`)}
+ css={{
+ cursor: `pointer`,
+ color: `rgba(255,255,255,0.8)`,
+ fontSize: `30px`,
+ position: `absolute`,
+ top: rhythm(1 / 4),
+ right: rhythm(1 / 4),
+ }}
+ />
+
+
+ this.previous(e)}
+ />
+ {this.props.children}
+ this.next(e)}
+ />
+
+
+ 
+
+ )
+
+ const PostDetails = () => (
+ + {username} +
+
+
+ )
+
+ return (
+
+
+ {likes} likes
+
+
+ {weeksAgo}w
+
+
+
+ {username} {text}
+
+ e.stopPropagation()}
+ css={{
+ background: `white`,
+ display: `flex`,
+ alignItems: `stretch`,
+ flexDirection: `column`,
+ width: `100%`,
+ [presets.Tablet]: {
+ flexDirection: `row-reverse`,
+ marginTop: rhythm(1),
+ },
+ }}
+ >
+
+ )
+ }
+}
+
+export default PostDetail
diff --git a/examples/gatsbygram/src/components/post.js b/examples/gatsbygram/src/components/post.js
new file mode 100644
index 0000000000000..74361a33e7733
--- /dev/null
+++ b/examples/gatsbygram/src/components/post.js
@@ -0,0 +1,117 @@
+import React from "react"
+import HeartIcon from "react-icons/lib/fa/heart"
+import Link from "gatsby-link"
+
+import { rhythm, scale } from "../utils/typography"
+import presets from "../utils/presets"
+
+let touched = false
+
+class Post extends React.Component {
+ constructor() {
+ super()
+ this.state = {
+ hovering: false,
+ }
+ }
+
+ render() {
+ const { image, likes, id } = this.props.post
+ const { small } = image.children[0]
+ return (
+ (touched = true)}
+ onMouseEnter={() => {
+ if (!touched) {
+ this.setState({ hovering: true })
+ }
+ }}
+ onMouseLeave={() => {
+ if (!touched) {
+ this.setState({ hovering: false })
+ }
+ }}
+ css={{
+ display: `block`,
+ backgroundColor: `lightgray`,
+ flex: `1 0 0%`,
+ marginRight: rhythm(1 / 8),
+ width: `100%`,
+ maxWidth: 290.1,
+ position: `relative`,
+ [presets.Tablet]: {
+ marginRight: rhythm(1),
+ },
+ ":last-child": {
+ marginRight: 0,
+ },
+ }}
+ >
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+ 
+
+
+ {/* overlay */}
+ {this.state.hovering &&
+
+
}
+
+ )
+ }
+}
+
+export default Post
diff --git a/examples/gatsbygram/src/html.js b/examples/gatsbygram/src/html.js
new file mode 100644
index 0000000000000..c16b8798e8906
--- /dev/null
+++ b/examples/gatsbygram/src/html.js
@@ -0,0 +1,71 @@
+import React from "react"
+import DocumentTitle from "react-document-title"
+import { GoogleFont, TypographyStyle } from "react-typography"
+
+import typography from "./utils/typography"
+import logo from "!file-loader!../static/images/logo.png"
+
+let stylesStr
+if (process.env.NODE_ENV === `production`) {
+ try {
+ stylesStr = require("!raw-loader!../public/styles.css")
+ } catch (e) {
+ console.log(e)
+ }
+}
+
+module.exports = React.createClass({
+ render() {
+ const title = DocumentTitle.rewind()
+ let css
+ if (process.env.NODE_ENV === `production`) {
+ css = (
+
+ )
+ }
+
+ return (
+
+
+
+
+ {this.props.headComponents}
+
+
+
+
+
+
+
+ )
+ }
+}
+
+DefaultLayout.childContextTypes = {
+ setEdges: React.PropTypes.func,
+}
+
+export default DefaultLayout
diff --git a/examples/gatsbygram/src/pages/about.js b/examples/gatsbygram/src/pages/about.js
new file mode 100644
index 0000000000000..75f0f8c9ed3b6
--- /dev/null
+++ b/examples/gatsbygram/src/pages/about.js
@@ -0,0 +1,40 @@
+import React from "react"
+import { rhythm } from "../utils/typography"
+
+class About extends React.Component {
+ render() {
+ return (
+
+
+
+
+
+
+
+
+ About
+
+
+
+
+
+
+ About
+
+
+ {isModal ? this.modalBackgroundChildren : this.props.children}
+
+ {isModal &&
+
+ {this.props.children}
+ }
+
+
+
+ )
+ }
+}
+
+export default About
diff --git a/examples/gatsbygram/src/pages/index.js b/examples/gatsbygram/src/pages/index.js
new file mode 100644
index 0000000000000..338f1588f1fdb
--- /dev/null
+++ b/examples/gatsbygram/src/pages/index.js
@@ -0,0 +1,241 @@
+import React from "react"
+import chunk from "lodash/chunk"
+
+import { rhythm, scale } from "../utils/typography"
+import presets from "../utils/presets"
+import Post from "../components/post"
+
+// This would normally be in a Redux store or some other global data store.
+if (typeof window !== `undefined`) {
+ window.postsToShow = 12
+}
+
+class Index extends React.Component {
+ constructor() {
+ super()
+ let postsToShow = 12
+ if (typeof window !== `undefined`) {
+ postsToShow = window.postsToShow
+ }
+
+ this.state = {
+ showingMore: postsToShow > 12,
+ postsToShow,
+ }
+ }
+
+ update() {
+ const distanceToBottom =
+ document.documentElement.offsetHeight -
+ (window.scrollY + window.innerHeight)
+ if (this.state.showingMore && distanceToBottom < 100) {
+ this.setState({ postsToShow: this.state.postsToShow + 12 })
+ }
+ this.ticking = false
+ }
+
+ handleScroll = () => {
+ if (!this.ticking) {
+ this.ticking = true
+ requestAnimationFrame(() => this.update())
+ }
+ }
+
+ componentDidMount() {
+ window.addEventListener(`scroll`, this.handleScroll)
+ }
+
+ componentWillUnmount() {
+ window.removeEventListener(`scroll`, this.handleScroll)
+ window.postsToShow = this.state.postsToShow
+ }
+
+ render() {
+ console.log(this.props)
+ this.context.setEdges(this.props.data.allPosts.edges)
+ return (
+ About Gatsbygram
++ Gatsbygram is an example website built with the JavaScript web framework + {" "} + + Gatsby + + . +
++ The code for the site lives at{" "} + + https://github.com/gatsbyjs/gatsby/tree/1.0/examples/gatsbygram + +
+ +
+ {/* user profile */}
+
+ )
+ }
+}
+
+Index.contextTypes = {
+ setEdges: React.PropTypes.func,
+}
+
+export default Index
+
+export const pageQuery = `
+query allImages {
+ allPosts {
+ edges {
+ node {
+ username
+ avatar
+ likes
+ id
+ text
+ weeksAgo: time(difference: "weeks")
+ image {
+ children {
+ ... on ImageSharp {
+ small: responsiveSizes(maxWidth: 292, maxHeight: 292) {
+ src
+ srcSet
+ }
+ big: responsiveSizes(maxWidth: 640, maxHeight: 640) {
+ src
+ srcSet
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+}
+`
diff --git a/examples/gatsbygram/src/templates/post-page.js b/examples/gatsbygram/src/templates/post-page.js
new file mode 100644
index 0000000000000..1c9cd841e25b8
--- /dev/null
+++ b/examples/gatsbygram/src/templates/post-page.js
@@ -0,0 +1,55 @@
+import React from "react"
+import PostDetail from "../components/post-detail"
+
+class PostTemplate extends React.Component {
+ render() {
+ return (
+ // PostDetail is used for this detail page and
+ // also in the modal.
+
+
+ {/* posts */}
+ {chunk(
+ this.props.data.allPosts.edges.slice(0, this.state.postsToShow),
+ 3
+ ).map(chunk => {
+ return (
+
+ ![{this.props.data.allPosts.edges[0].node.username}]({this.props.data.allPosts.edges[0].node.avatar})
+
+
+
+ + {this.props.data.allPosts.edges[0].node.username} +
++ {this.props.data.allPosts.edges.length} posts + 192k followers +
+
+ {chunk.map(edge => (
+ this.setState({ activePost: post })}
+ />
+ ))}
+
+ )
+ })}
+ {!this.state.showingMore &&
+ {
+ this.setState({
+ postsToShow: this.state.postsToShow + 12,
+ showingMore: true,
+ })
+ }}
+ >
+ Load More
+ }
+