- (
- ",
"dependencies": {
- "gatsby": "latest",
- "gatsby-image": "^1.0.5",
- "gatsby-plugin-glamor": "^1.6.8",
- "gatsby-plugin-google-analytics": "^1.0.8",
- "gatsby-plugin-manifest": "^1.0.8",
- "gatsby-plugin-offline": "^1.0.9",
- "gatsby-plugin-sharp": "^1.6.8",
- "gatsby-source-filesystem": "^1.5.2",
- "gatsby-transformer-json": "^1.0.8",
- "gatsby-transformer-sharp": "^1.6.8",
+ "core-js": "^2.5.5",
+ "gatsby": "canary",
+ "gatsby-image": "canary",
+ "gatsby-plugin-glamor": "canary",
+ "gatsby-plugin-google-analytics": "canary",
+ "gatsby-plugin-manifest": "canary",
+ "gatsby-plugin-offline": "canary",
+ "gatsby-plugin-sharp": "canary",
+ "gatsby-plugin-typography": "^2.1.0-alpha.e9c3027b",
+ "gatsby-source-filesystem": "canary",
+ "gatsby-transformer-json": "canary",
+ "gatsby-transformer-sharp": "canary",
+ "glamor": "^2.20.40",
"instagram-screen-scrape": "^2.0.0",
"lodash": "^4.16.4",
"mkdirp": "^0.5.1",
"mousetrap": "^1.6.0",
- "progress": "^1.1.8",
+ "progress": "^2.0.0",
"prop-types": "^15.5.8",
+ "react": "^16.3.2",
+ "react-dom": "^16.3.2",
"react-gravatar": "^2.6.1",
"react-icons": "^2.2.3",
- "react-modal": "^1.7.6",
- "react-typography": "^0.15.0",
+ "react-modal": "^3.4.2",
+ "react-typography": "^0.16.13",
"request": "^2.79.0",
"slug": "^0.9.1",
- "typeface-space-mono": "^0.0.22",
- "typography": "^0.15.0"
+ "typeface-space-mono": "0.0.54",
+ "typography": "^0.16.6"
},
"keywords": [
"gatsby"
diff --git a/examples/gatsbygram/src/components/modal.js b/examples/gatsbygram/src/components/modal.js
index ad5d4adb0376a..0fff2ec92ca98 100644
--- a/examples/gatsbygram/src/components/modal.js
+++ b/examples/gatsbygram/src/components/modal.js
@@ -6,15 +6,16 @@ import Close from "react-icons/lib/md/close"
import findIndex from "lodash/findIndex"
import mousetrap from "mousetrap"
import * as PropTypes from "prop-types"
-import { navigateTo } from "gatsby"
+import { navigateTo, StaticQuery } from "gatsby"
import { rhythm } from "../utils/typography"
+let posts
+
class GatsbyGramModal extends React.Component {
static propTypes = {
isOpen: PropTypes.bool,
location: PropTypes.object.isRequired,
- posts: PropTypes.array.isRequired,
}
componentDidMount() {
@@ -32,7 +33,7 @@ class GatsbyGramModal extends React.Component {
findCurrentIndex() {
let index
index = findIndex(
- this.props.posts,
+ posts,
post => post.id === this.props.location.pathname.split(`/`)[1]
)
@@ -45,7 +46,6 @@ class GatsbyGramModal extends React.Component {
}
const currentIndex = this.findCurrentIndex()
if (currentIndex || currentIndex === 0) {
- const posts = this.props.posts
let nextPost
// Wrap around if at end.
if (currentIndex + 1 === posts.length) {
@@ -63,7 +63,6 @@ class GatsbyGramModal extends React.Component {
}
const currentIndex = this.findCurrentIndex()
if (currentIndex || currentIndex === 0) {
- const posts = this.props.posts
let previousPost
// Wrap around if at start.
if (currentIndex === 0) {
@@ -77,94 +76,106 @@ class GatsbyGramModal extends React.Component {
render() {
return (
- navigateTo(`/`)}
- style={{
- overlay: {
- position: `fixed`,
- top: 0,
- left: 0,
- right: 0,
- bottom: 0,
- backgroundColor: `rgba(0, 0, 0, 0.75)`,
- },
- content: {
- position: `absolute`,
- border: `none`,
- background: `none`,
- padding: 0,
- top: 0,
- bottom: 0,
- right: 0,
- left: 0,
- overflow: `auto`,
- WebkitOverflowScrolling: `touch`,
- },
- }}
- contentLabel="Modal"
- >
-
+ contentLabel="Modal"
+ >
+ Gatsbygram
-
+
+ {this.props.children}
+
+
+ )
+ }
+
return (
)
}
}
-export default DefaultLayout
+export default Layout
diff --git a/examples/gatsbygram/src/pages/about.js b/examples/gatsbygram/src/pages/about.js
index 882e754d78351..39fd0bd519d92 100644
--- a/examples/gatsbygram/src/pages/about.js
+++ b/examples/gatsbygram/src/pages/about.js
@@ -1,39 +1,42 @@
import React from "react"
import { rhythm } from "../utils/typography"
+import Layout from "../layouts"
class About extends React.Component {
render() {
return (
-
-
+
+
)
}
}
diff --git a/examples/gatsbygram/.babelrc b/examples/gatsbygram/.babelrc
deleted file mode 100644
index a8b9b8bbcd312..0000000000000
--- a/examples/gatsbygram/.babelrc
+++ /dev/null
@@ -1,4 +0,0 @@
-{
- "presets": ['react', 'es2015', 'stage-1'],
- "plugins": ['add-module-exports']
-}
diff --git a/examples/gatsbygram/gatsby-browser.js b/examples/gatsbygram/gatsby-browser.js
index 6a5fd30a630c0..481872938425e 100644
--- a/examples/gatsbygram/gatsby-browser.js
+++ b/examples/gatsbygram/gatsby-browser.js
@@ -9,3 +9,7 @@ exports.shouldUpdateScroll = args => {
return false
}
}
+
+exports.onInitialClientRender = () => {
+ window.___GATSBYGRAM_INITIAL_RENDER_COMPLETE = true
+}
diff --git a/examples/gatsbygram/gatsby-config.js b/examples/gatsbygram/gatsby-config.js
index 796b0e3a16acc..a20d0a555ce32 100644
--- a/examples/gatsbygram/gatsby-config.js
+++ b/examples/gatsbygram/gatsby-config.js
@@ -67,5 +67,11 @@ module.exports = {
trackingId: `UA-91652198-1`,
},
},
+ {
+ resolve: `gatsby-plugin-typography`,
+ options: {
+ pathToConfigModule: `src/utils/typography`,
+ },
+ },
],
}
diff --git a/examples/gatsbygram/package.json b/examples/gatsbygram/package.json
index 5c1da0b7901c8..5e8a765deffc2 100644
--- a/examples/gatsbygram/package.json
+++ b/examples/gatsbygram/package.json
@@ -5,30 +5,35 @@
"version": "1.0.0",
"author": "Kyle Mathews
+ (
+
+ )}
+ />
+
+
- )}
- />
- -
-
-
+
-
- {/* no different than other usage of
+
-
+
+ {/* no different than other usage of
ReactCSSTransitionGroup, just make
sure to pass `location` to `Route`
so it can match the old location
as it animates out
*/}
-
+
navigateTo(`/`)}
- css={{
- display: `flex`,
- position: `relative`,
- height: `100vh`,
- }}
- >
- navigateTo(`/`)}
- 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({
- location: { pathname: this.props.location.pathname },
- })}
- {
+ if (!posts) {
+ posts = data.allPostsJson.edges.map(e => e.node)
+ }
+ return (
+ navigateTo(`/`)}
+ style={{
+ overlay: {
+ position: `fixed`,
+ top: 0,
+ left: 0,
+ right: 0,
+ bottom: 0,
+ backgroundColor: `rgba(0, 0, 0, 0.75)`,
+ },
+ content: {
+ position: `absolute`,
+ border: `none`,
+ background: `none`,
+ padding: 0,
+ top: 0,
+ bottom: 0,
+ right: 0,
+ left: 0,
+ overflow: `auto`,
+ WebkitOverflowScrolling: `touch`,
+ },
}}
- onClick={e => this.next(e)}
- />
-
- navigateTo(`/`)}
+ css={{
+ display: `flex`,
+ position: `relative`,
+ height: `100vh`,
+ }}
+ >
+ navigateTo(`/`)}
+ css={{
+ cursor: `pointer`,
+ color: `rgba(255,255,255,0.8)`,
+ fontSize: `30px`,
+ position: `absolute`,
+ top: rhythm(1 / 4),
+ right: rhythm(1 / 4),
+ }}
+ />
+
+
+ )
+ }}
+ />
)
}
}
export default GatsbyGramModal
-
-export const modalFragment = graphql`
- fragment Modal_posts on PostsJson {
- id
- }
-`
diff --git a/examples/gatsbygram/src/components/post.js b/examples/gatsbygram/src/components/post.js
index 680770f3c673c..d7f1d975e9b19 100644
--- a/examples/gatsbygram/src/components/post.js
+++ b/examples/gatsbygram/src/components/post.js
@@ -2,6 +2,7 @@ import * as PropTypes from "prop-types"
import React from "react"
import HeartIcon from "react-icons/lib/fa/heart"
import { Link } from "gatsby"
+import Img from "gatsby-image"
import { rhythm, scale } from "../utils/typography"
import presets from "../utils/presets"
diff --git a/examples/gatsbygram/src/html.js b/examples/gatsbygram/src/html.js
deleted file mode 100644
index 18005bc869e30..0000000000000
--- a/examples/gatsbygram/src/html.js
+++ /dev/null
@@ -1,79 +0,0 @@
-import React, { Component } from "react"
-import { TypographyStyle } from "react-typography"
-import logo from "!file-loader!../static/images/logo.png"
-import * as PropTypes from "prop-types"
-import typography from "./utils/typography"
-
-let stylesStr
-if (process.env.NODE_ENV === `production`) {
- try {
- stylesStr = require(`!raw-loader!../public/styles.css`)
- } catch (e) {
- console.log(e)
- }
-}
-
-const propTypes = {
- headComponents: PropTypes.node.isRequired,
- body: PropTypes.node.isRequired,
- postBodyComponents: PropTypes.node.isRequired,
-}
-
-class Html extends Component {
- render() {
- let css
- if (process.env.NODE_ENV === `production`) {
- css = (
-
- )
- }
-
- return (
-
-
-
-
- {this.props.headComponents}
-
-
-
-
-
-
+ this.previous(e)}
+ />
+ {this.props.children}
+ this.next(e)}
+ />
+
+
-
- {isModal
- ? this.props.children({
- ...this.props,
- location: { pathname: `/` },
- })
- : this.props.children()}
-
-
-
- {isModal && (
-
- {this.props.children}
-
- )}
-
+ {this.props.children}
-
+ 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/master/examples/gatsbygram - -
- -
+
+ 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/master/examples/gatsbygram + +
+ +
- {/* user profile */}
+
- ))}
- {!this.state.showingMore && (
- (
+
+ {/* user profile */}
- {/* posts */}
- {chunk(posts.slice(0, this.state.postsToShow), 3).map((chunk, i) => (
-
-
-
-
- - {user.username} -
-- {posts.length} posts - 192k followers -
-
- {chunk.map(node => (
- this.setState({ activePost: post })}
- />
- ))}
+
+
+
+ {user.username} +
++ {posts.length} posts + 192k followers +
+
+ {chunk.map(node => (
+ this.setState({ activePost: post })}
+ />
+ ))}
+
+ ))}
+ {!this.state.showingMore && (
+ {
- this.setState({
- postsToShow: this.state.postsToShow + 12,
- showingMore: true,
- })
- }}
- >
- Load More
-
- )}
-
+ padding: rhythm(1 / 2),
+ width: `calc(100vw - ${rhythm(1)})`,
+ marginLeft: rhythm(0.5),
+ marginRight: rhythm(0.5),
+ marginBottom: rhythm(0.5),
+ marginTop: rhythm(0.5),
+ [presets.Tablet]: {
+ borderRadius: `100%`,
+ margin: `0 auto`,
+ marginBottom: rhythm(1.5),
+ marginTop: rhythm(1.5),
+ padding: rhythm(1),
+ height: rhythm(5),
+ width: rhythm(5),
+ lineHeight: rhythm(3),
+ textAlign: `center`,
+ },
+ }}
+ onClick={() => {
+ this.setState({
+ postsToShow: this.state.postsToShow + 12,
+ showingMore: true,
+ })
+ }}
+ >
+ Load More
+
+ )}
+
+
)
}
}
@@ -215,7 +213,6 @@ export const pageQuery = graphql`
weeksAgo: time(difference: "weeks")
...Post_details
...PostDetail_details
- ...Modal_posts
}
}
}
diff --git a/examples/gatsbygram/src/templates/post-page.js b/examples/gatsbygram/src/templates/post-page.js
index a5e5cbf018c53..877e23af51b60 100644
--- a/examples/gatsbygram/src/templates/post-page.js
+++ b/examples/gatsbygram/src/templates/post-page.js
@@ -1,6 +1,7 @@
import * as PropTypes from "prop-types"
import React from "react"
import PostDetail from "../components/post-detail"
+import Layout from "../layouts"
class PostTemplate extends React.Component {
static propTypes = {
@@ -9,10 +10,21 @@ class PostTemplate extends React.Component {
}),
}
render() {
+ let isModal = false
+ // We don't want to show the modal if a user navigates
+ // directly to a post so if this code is running on Gatsby's
+ // initial render then we don't show the modal, otherwise we
+ // do.
+ if (
+ typeof window !== `undefined` &&
+ window.___GATSBYGRAM_INITIAL_RENDER_COMPLETE
+ ) {
+ isModal = true
+ }
return (
- // PostDetail is used for this detail page and
- // also in the modal.
-
+
+
)
}
}
diff --git a/examples/using-asciidoc/src/templates/article.js b/examples/using-asciidoc/src/templates/article.js
index 85f52a61578f7..542cd5410bb62 100644
--- a/examples/using-asciidoc/src/templates/article.js
+++ b/examples/using-asciidoc/src/templates/article.js
@@ -1,11 +1,15 @@
import React from "react"
+import Layout from "../layouts"
+
class Article extends React.Component {
render() {
return (
-
+ -
{this.props.data.allAsciidoc.edges.map(({ node }) => (
- @@ -13,7 +14,7 @@ class IndexPage extends React.Component { ))}
+const BlurUp = ({ data, location }) => (
+
![]()
(
},
}}
title={`Photo by Redd Angelo on Unsplash`}
- resolutions={data.reddImageMobile.resolutions}
+ resolutions={data.reddImageMobile.childImageSharp.resolutions}
/>
![]()
(
},
}}
title={`Photo by Redd Angelo on Unsplash`}
- resolutions={data.reddImage.resolutions}
+ resolutions={data.reddImage.childImageSharp.resolutions}
/>
![]( "{`Photo")
+
)
export default BlurUp
export const query = graphql`
query BackgroundColorQuery {
- reddImageMobile: imageSharp(id: { regex: "/redd/" }) {
- resolutions(width: 126) {
- ...GatsbyImageSharpResolutions_noBase64
+ reddImageMobile: file(relativePath: { regex: "/redd/" }) {
+ childImageSharp {
+ resolutions(width: 126) {
+ ...GatsbyImageSharpResolutions_noBase64
+ }
}
}
- reddImage: imageSharp(id: { regex: "/redd/" }) {
- resolutions(width: 201) {
- ...GatsbyImageSharpResolutions_noBase64
+ reddImage: file(relativePath: { regex: "/redd/" }) {
+ childImageSharp {
+ resolutions(width: 201) {
+ ...GatsbyImageSharpResolutions_noBase64
+ }
}
}
- kenImage: imageSharp(id: { regex: "/ken-treloar/" }) {
- sizes(maxWidth: 599) {
- ...GatsbyImageSharpSizes_noBase64
+ kenImage: file(relativePath: { regex: "/ken-treloar/" }) {
+ childImageSharp {
+ sizes(maxWidth: 599) {
+ ...GatsbyImageSharpSizes_noBase64
+ }
}
}
}
diff --git a/examples/using-gatsby-image/src/pages/blur-up.js b/examples/using-gatsby-image/src/pages/blur-up.js
index fe58144a9db90..5a4bca5763f10 100644
--- a/examples/using-gatsby-image/src/pages/blur-up.js
+++ b/examples/using-gatsby-image/src/pages/blur-up.js
@@ -2,11 +2,12 @@ import React from "react"
import Img from "gatsby-image"
import Lorem from "../components/lorem"
import Ipsum from "../components/ipsum"
+import Layout from "../layouts"
import { rhythm, options } from "../utils/typography"
-const BlurUp = ({ data }) => (
- Background color
+const BlurUp = ({ data, location }) => (
+
![]()
(
},
}}
title={`Photo by Redd Angelo on Unsplash`}
- resolutions={data.reddImageMobile.resolutions}
+ resolutions={data.reddImageMobile.childImageSharp.resolutions}
/>
![]()
(
},
}}
title={`Photo by Redd Angelo on Unsplash`}
- resolutions={data.reddImage.resolutions}
+ resolutions={data.reddImage.childImageSharp.resolutions}
/>
![]( "{`Photo")
+
)
export default BlurUp
export const query = graphql`
query BlurUpQuery {
- reddImageMobile: imageSharp(id: { regex: "/redd/" }) {
- resolutions(width: 125) {
- ...GatsbyImageSharpResolutions
+ reddImageMobile: file(relativePath: { regex: "/redd/" }) {
+ childImageSharp {
+ resolutions(width: 125) {
+ ...GatsbyImageSharpResolutions
+ }
}
}
- reddImage: imageSharp(id: { regex: "/redd/" }) {
- resolutions(width: 200) {
- ...GatsbyImageSharpResolutions
+ reddImage: file(relativePath: { regex: "/redd/" }) {
+ childImageSharp {
+ resolutions(width: 200) {
+ ...GatsbyImageSharpResolutions
+ }
}
}
- kenImage: imageSharp(id: { regex: "/ken-treloar/" }) {
- sizes(maxWidth: 600) {
- ...GatsbyImageSharpSizes
+ kenImage: file(relativePath: { regex: "/ken-treloar/" }) {
+ childImageSharp {
+ sizes(maxWidth: 600) {
+ ...GatsbyImageSharpSizes
+ }
}
}
}
diff --git a/examples/using-gatsby-image/src/pages/index.js b/examples/using-gatsby-image/src/pages/index.js
index f20bb94e7ce92..447eebd497d93 100644
--- a/examples/using-gatsby-image/src/pages/index.js
+++ b/examples/using-gatsby-image/src/pages/index.js
@@ -2,17 +2,18 @@ import React from "react"
import { Link } from "gatsby"
import Img from "gatsby-image"
import Navigation from "../components/navigation"
+import Layout from "../layouts"
import { rhythm, options } from "../utils/typography"
class IndexComponent extends React.Component {
render() {
return (
- Blur Up
+
![]()
-
+
)
}
}
@@ -120,9 +121,11 @@ export default IndexComponent
export const query = graphql`
query FrontPageQuery {
- imageSharp(id: { regex: "/ng-55646/" }) {
- sizes(maxWidth: 1500, rotate: 180) {
- ...GatsbyImageSharpSizes
+ file(relativePath: { regex: "/ng-55646/" }) {
+ childImageSharp {
+ sizes(maxWidth: 1500, rotate: 180) {
+ ...GatsbyImageSharpSizes
+ }
}
}
}
diff --git a/examples/using-gatsby-image/src/pages/prefer-webp.js b/examples/using-gatsby-image/src/pages/prefer-webp.js
index 196b2abf448b9..302b03a6e6af3 100644
--- a/examples/using-gatsby-image/src/pages/prefer-webp.js
+++ b/examples/using-gatsby-image/src/pages/prefer-webp.js
@@ -1,10 +1,11 @@
import React from "react"
import Img from "gatsby-image"
+import Layout from "../layouts"
import { rhythm, options } from "../utils/typography"
-const PreferWebp = ({ data }) => (
-
+const PreferWebp = ({ data, location }) => (
+
![]()
(
},
}}
title={`Photo by Redd Angelo on Unsplash`}
- resolutions={data.reddImageMobile.resolutions}
+ resolutions={data.reddImageMobile.childImageSharp.resolutions}
/>
![]()
(
},
}}
title={`Photo by Redd Angelo on Unsplash`}
- resolutions={data.reddImage.resolutions}
+ resolutions={data.reddImage.childImageSharp.resolutions}
/>
Constitit nomine senta suspirat et signis genuisse
![]( "{`Photo")
+
)
export default PreferWebp
export const query = graphql`
query PreferWebpQuery {
- reddImageMobile: imageSharp(id: { regex: "/redd/" }) {
- resolutions(width: 125) {
- ...GatsbyImageSharpResolutions_withWebp
+ reddImageMobile: file(relativePath: { regex: "/redd/" }) {
+ childImageSharp {
+ resolutions(width: 125) {
+ ...GatsbyImageSharpResolutions_withWebp
+ }
}
}
- reddImage: imageSharp(id: { regex: "/redd/" }) {
- resolutions(width: 200) {
- ...GatsbyImageSharpResolutions_withWebp
+ reddImage: file(relativePath: { regex: "/redd/" }) {
+ childImageSharp {
+ resolutions(width: 200) {
+ ...GatsbyImageSharpResolutions_withWebp
+ }
}
}
- kenImage: imageSharp(id: { regex: "/ken-treloar/" }) {
- sizes(maxWidth: 600) {
- ...GatsbyImageSharpSizes_withWebp
+ kenImage: file(relativePath: { regex: "/ken-treloar/" }) {
+ childImageSharp {
+ sizes(maxWidth: 600) {
+ ...GatsbyImageSharpSizes_withWebp
+ }
}
}
}
diff --git a/examples/using-gatsby-image/src/pages/traced-svg.js b/examples/using-gatsby-image/src/pages/traced-svg.js
index 5077f6b3ce10c..c4e696f82f947 100644
--- a/examples/using-gatsby-image/src/pages/traced-svg.js
+++ b/examples/using-gatsby-image/src/pages/traced-svg.js
@@ -5,6 +5,7 @@ import numeral from "numeral"
import Lorem from "../components/lorem"
import Ipsum from "../components/ipsum"
import { rhythm, options, scale } from "../utils/typography"
+import Layout from "../layouts"
numeral.locale(`en`)
@@ -65,7 +66,7 @@ const UnsplashMasonry = edges => (
},
}}
>
- Prefer WebP
Lorem markdownum nocens, est aut tergo, inmansuetique bella. Neve illud @@ -65,7 +66,7 @@ const PreferWebp = ({ data }) => (
Levia mihi
@@ -81,26 +82,32 @@ const PreferWebp = ({ data }) => ( Antimachumque tulit fusile. Fieri qui que prosit equidem, meis praescia monebat cacumina tergo acerbo saepe nullaque. -
+
![]( "{`Photo")
![]( "{`Photo")
![]( "{`Photo")
-
+
)
}
}
@@ -150,30 +154,38 @@ export default TracedSVG
export const query = graphql`
query TracedSVGQuery {
- reddImageMobile: imageSharp(id: { regex: "/redd/" }) {
- resolutions(width: 125) {
- ...GatsbyImageSharpResolutions_tracedSVG
+ reddImageMobile: file(relativePath: { regex: "/redd/" }) {
+ childImageSharp {
+ resolutions(width: 125) {
+ ...GatsbyImageSharpResolutions_tracedSVG
+ }
}
}
- reddImage: imageSharp(id: { regex: "/redd/" }) {
- resolutions(width: 200) {
- ...GatsbyImageSharpResolutions_tracedSVG
+ reddImage: file(relativePath: { regex: "/redd/" }) {
+ childImageSharp {
+ resolutions(width: 200) {
+ ...GatsbyImageSharpResolutions_tracedSVG
+ }
}
}
- kenImage: imageSharp(id: { regex: "/ken-treloar/" }) {
- sizes(maxWidth: 600) {
- ...GatsbyImageSharpSizes_tracedSVG
+ kenImage: file(relativePath: { regex: "/ken-treloar/" }) {
+ childImageSharp {
+ sizes(maxWidth: 600) {
+ ...GatsbyImageSharpSizes_tracedSVG
+ }
}
}
- unsplashImages: allImageSharp(filter: { id: { regex: "/unsplash/" } }) {
+ unsplashImages: allFile(filter: { relativePath: { regex: "/unsplash/" } }) {
edges {
node {
- sizes(
- maxWidth: 430
- quality: 80
- traceSVG: { background: "#f2f8f3", color: "#d6ebd9" }
- ) {
- ...GatsbyImageSharpSizes_tracedSVG
+ childImageSharp {
+ sizes(
+ maxWidth: 430
+ quality: 80
+ traceSVG: { background: "#f2f8f3", color: "#d6ebd9" }
+ ) {
+ ...GatsbyImageSharpSizes_tracedSVG
+ }
}
}
}
diff --git a/examples/using-gatsby-image/src/utils/typography.js b/examples/using-gatsby-image/src/utils/typography.js
index d1e8edabb9d32..95473172fa743 100644
--- a/examples/using-gatsby-image/src/utils/typography.js
+++ b/examples/using-gatsby-image/src/utils/typography.js
@@ -40,4 +40,9 @@ elkGlenTheme.overrideThemeStyles = ({ rhythm, scale }, options) => {
const typography = new Typography(elkGlenTheme)
+// Back out the below once Typography is upgraded for es6
export default typography
+
+export const options = typography.options
+export const scale = typography.scale
+export const rhythm = typography.rhythm
diff --git a/examples/using-hjson/package.json b/examples/using-hjson/package.json
index 0008a748ba205..b852290eea100 100644
--- a/examples/using-hjson/package.json
+++ b/examples/using-hjson/package.json
@@ -4,9 +4,12 @@
"description": "Gatsby example site using hjson",
"author": "Remi Barraquand Traced SVG Placeholders
{data.site.siteMetadata.title}
}
+ />
+)
+`
+
+var pageComponent = `
+import React from 'react'
+
+export default () => (
+ {data.site.siteMetadata.title}
+)
+
+export const query = graphql\`
+ {
+ site { siteMetadata { title }}
+ }
+\`
+`
+
+it("Transforms queries in {children()}
-
-// Pass pathname in as prop.
-// component will try fetching resources. If they exist,
-// will just render, else will render null.
-class ComponentRenderer extends React.Component {
- static getDerivedStateFromProps({ pageResources, location }, prevState) {
- let nextState = {}
-
- if (
- process.env.NODE_ENV !== `production` &&
- pageResources &&
- pageResources.json
- ) {
- nextState = { pageResources }
- }
-
- if (prevState.location.pathname !== location.pathname) {
- const pageResources = loader.getResourcesForPathname(location.pathname)
-
- if (pageResources) {
- nextState = { location, pageResources }
- } else if (!loader.getPage(location.pathname)) {
- nextState.location = { ...location, pathname: `/404.html` }
- }
- }
-
- return nextState
- }
-
- constructor(props) {
- super()
- let location = props.location
-
- // Set the pathname for 404 pages.
- if (!loader.getPage(location.pathname)) {
- location = { ...location, pathname: `/404.html` }
- }
-
- this.state = {
- location,
- pageResources: loader.getResourcesForPathname(location.pathname),
- }
- }
-
- componentDidUpdate(prevProps, prevState) {
- if (prevProps === this.props) return
-
- const { location } = this.state
- if (!loader.getResourcesForPathname(location.pathname))
- // Page resources won't be set in cases where the browser back button
- // or forward button is pushed as we can't wait as normal for resources
- // to load before changing the page.
- loader.getResourcesForPathname(location.pathname, pageResources => {
- this.setState({
- location,
- pageResources,
- })
- })
- }
-
- componentDidMount() {
- // Listen to events so when our page gets updated, we can transition.
- // This is only useful on delayed transitions as the page will get rendered
- // without the necessary page resources and then re-render once those come in.
- emitter.on(`onPostLoadPageResources`, e => {
- if (
- loader.getPage(this.state.location.pathname) &&
- e.page.path === loader.getPage(this.state.location.pathname).path
- ) {
- this.setState({ pageResources: e.pageResources })
- }
- })
- }
-
- shouldComponentUpdate(nextProps, nextState) {
- // 404
- if (!nextState.pageResources) {
- return true
- }
- // Check if the component or json have changed.
- if (!this.state.pageResources && nextState.pageResources) {
- return true
- }
- if (
- this.state.pageResources.component !== nextState.pageResources.component
- ) {
- return true
- }
-
- if (this.state.pageResources.json !== nextState.pageResources.json) {
- return true
- }
-
- // Check if location has changed on a page using internal routing
- // via matchPath configuration.
- if (
- this.state.location.key !== nextState.location.key &&
- nextState.pageResources.page &&
- (nextState.pageResources.page.matchPath ||
- nextState.pageResources.page.path)
- ) {
- return true
- }
-
- return shallowCompare(this, nextProps, nextState)
- }
-
- render() {
- const pluginResponses = apiRunner(`replaceComponentRenderer`, {
- props: { ...this.props, pageResources: this.state.pageResources },
- loader: publicLoader,
- })
- const replacementComponent = pluginResponses[0]
- // If page.
- if (this.props.isPage) {
- if (this.state.pageResources) {
- return (
- replacementComponent ||
- createElement(this.state.pageResources.component, {
- key: this.props.location.pathname,
- ...this.props,
- ...this.state.pageResources.json,
- })
- )
- } else {
- return null
- }
- // If layout.
- } else if (this.props.layout) {
- return (
- replacementComponent ||
- createElement(
- this.state.pageResources && this.state.pageResources.layout
- ? this.state.pageResources.layout
- : DefaultLayout,
- {
- key:
- this.state.pageResources && this.state.pageResources.layout
- ? this.state.pageResources.layout
- : `DefaultLayout`,
- ...this.props,
- }
- )
- )
- } else {
- return null
- }
- }
-}
-
-ComponentRenderer.propTypes = {
- isPage: PropTypes.bool,
- layout: PropTypes.bool,
- location: PropTypes.object,
-}
-
-export default polyfill(ComponentRenderer)
diff --git a/packages/gatsby/cache-dir/gatsby-browser-entry.js b/packages/gatsby/cache-dir/gatsby-browser-entry.js
new file mode 100644
index 0000000000000..1bee9b2191ffd
--- /dev/null
+++ b/packages/gatsby/cache-dir/gatsby-browser-entry.js
@@ -0,0 +1,44 @@
+import React from "react"
+import Link, { withPrefix, navigateTo } from "gatsby-link"
+import pages from "./pages.json"
+import loader from "./loader"
+import JSONStore from "./json-store"
+
+const PageRenderer = ({ location }) => {
+ const pageResources = loader.getResourcesForPathname(location.pathname)
+ const isPage = !!(pageResources && pageResources.component)
+ return React.createElement(JSONStore, {
+ pages,
+ location,
+ pageResources,
+ })
+}
+
+const StaticQueryContext = React.createContext({})
+
+const StaticQuery = props => (
+ Loading (StaticQuery)
+ }
+ }}
+ {props.children()}
-
-const getLayout = page => {
- const layout = syncRequires.layouts[page.layout]
- return layout ? layout : defaultLayout
-}
const createElement = React.createElement
@@ -108,7 +102,7 @@ export default (pagePath, callback) => {
const bodyComponent = createElement(
AltStaticRouter || StaticRouter,
{
- basename: pathPrefix,
+ basename: pathPrefix.slice(0, -1),
location: {
pathname: pagePath,
},
@@ -117,10 +111,7 @@ export default (pagePath, callback) => {
createElement(Route, {
// eslint-disable-next-line react/display-name
render: routeProps => {
- const page = getPage(
- `${routeProps.match.path}${routeProps.location.pathname}`
- )
- const layout = getLayout(page)
+ const page = getPage(routeProps.location.pathname)
const dataAndContext =
page.jsonName in staticDataPaths
@@ -133,19 +124,9 @@ export default (pagePath, callback) => {
)
: {}
- return createElement(withRouter(layout), {
- // eslint-disable-next-line react/display-name
- children: layoutProps => {
- const props = layoutProps ? layoutProps : routeProps
-
- return createElement(
- syncRequires.components[page.componentChunkName],
- {
- ...props,
- ...dataAndContext,
- }
- )
- },
+ return createElement(syncRequires.components[page.componentChunkName], {
+ ...routeProps,
+ ...dataAndContext,
})
},
})
@@ -183,7 +164,7 @@ export default (pagePath, callback) => {
const page = pages.find(page => page.path === pagePath)
let runtimeScript
const scriptsAndStyles = flatten(
- [`app`, page.layoutComponentChunkName, page.componentChunkName].map(s => {
+ [`app`, page.componentChunkName].map(s => {
const fetchKey = `assetsByChunkName[${s}]`
let chunks = get(stats, fetchKey)
@@ -280,7 +261,9 @@ export default (pagePath, callback) => {
// Add script loader for page scripts to the end of body element (after webpack manifest).
// Taken from https://www.html5rocks.com/en/tutorials/speed/script-loading/
- const scriptsString = scripts.map(s => JSON.stringify(s)).join(`,`)
+ const scriptsString = scripts
+ .map(s => `"${pathPrefix}${JSON.stringify(s).slice(1, -1)}"`)
+ .join(`,`)
postBodyComponents.push(