From 024663969f0e7156555bc301145823d8699a3eac Mon Sep 17 00:00:00 2001 From: Kyle Mathews Date: Mon, 17 Sep 2018 09:50:30 -0600 Subject: [PATCH 01/20] bump version --- packages/gatsby-plugin-postcss/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/gatsby-plugin-postcss/package.json b/packages/gatsby-plugin-postcss/package.json index 77160805ec592..68502813b53f9 100644 --- a/packages/gatsby-plugin-postcss/package.json +++ b/packages/gatsby-plugin-postcss/package.json @@ -1,7 +1,7 @@ { "name": "gatsby-plugin-postcss", "description": "Gatsby plugin to handle PostCSS", - "version": "2.0.0-rc.3", + "version": "2.0.0-rc.4", "author": "Marat Dreizin ", "bugs": { "url": "https://github.com/gatsbyjs/gatsby/issues" From 8aa1bad5d6f9f72902edfe9d0d274ada8838d5a4 Mon Sep 17 00:00:00 2001 From: Kyle Mathews Date: Mon, 17 Sep 2018 09:50:56 -0600 Subject: [PATCH 02/20] chore(release): Publish - gatsby-plugin-postcss@2.0.0-rc.5 --- packages/gatsby-plugin-postcss/CHANGELOG.md | 6 ++++++ packages/gatsby-plugin-postcss/package.json | 2 +- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/gatsby-plugin-postcss/CHANGELOG.md b/packages/gatsby-plugin-postcss/CHANGELOG.md index 84ca97d5bb131..e7f0437bf3e89 100644 --- a/packages/gatsby-plugin-postcss/CHANGELOG.md +++ b/packages/gatsby-plugin-postcss/CHANGELOG.md @@ -3,6 +3,12 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. + + +# [2.0.0-rc.5](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-postcss/compare/gatsby-plugin-postcss@2.0.0-rc.3...gatsby-plugin-postcss@2.0.0-rc.5) (2018-09-17) + +**Note:** Version bump only for package gatsby-plugin-postcss + # [2.0.0-rc.3](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-postcss/compare/gatsby-plugin-postcss@2.0.0-rc.2...gatsby-plugin-postcss@2.0.0-rc.3) (2018-09-17) diff --git a/packages/gatsby-plugin-postcss/package.json b/packages/gatsby-plugin-postcss/package.json index 68502813b53f9..0d4816ac99502 100644 --- a/packages/gatsby-plugin-postcss/package.json +++ b/packages/gatsby-plugin-postcss/package.json @@ -1,7 +1,7 @@ { "name": "gatsby-plugin-postcss", "description": "Gatsby plugin to handle PostCSS", - "version": "2.0.0-rc.4", + "version": "2.0.0-rc.5", "author": "Marat Dreizin ", "bugs": { "url": "https://github.com/gatsbyjs/gatsby/issues" From 9ced666b707bd30b2f3b832205cab4a6cd693426 Mon Sep 17 00:00:00 2001 From: Kyle Mathews Date: Mon, 17 Sep 2018 10:01:58 -0600 Subject: [PATCH 03/20] Added short user stories to top --- docs/blog/2018-09-14-gatsby-v2.md | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/docs/blog/2018-09-14-gatsby-v2.md b/docs/blog/2018-09-14-gatsby-v2.md index e6dfcca96669c..5db267915c9bb 100644 --- a/docs/blog/2018-09-14-gatsby-v2.md +++ b/docs/blog/2018-09-14-gatsby-v2.md @@ -6,9 +6,10 @@ author: "Kyle Mathews" We're incredibly pleased to announce the 2nd major release of Gatsby! -Gatsby is a modern website and app generator. Thousands of developers use Gatsby to create amazing blogs, apps, marketing sites, ecommerce, documentation, and more! - -[Read more](/) about how Gatsby improves developer productivity and performance by leveraging the latest web technologies. +Gatsby is a modern website and app generator. Thousands of developers use Gatsby to create amazing blogs, apps, marketing and ecommerce sites, documentation, and more! +Facebook uses Gatsby to power the [ReactJS docs and blog!](https://reactjs.org/) +Nike built their [“Just Do It” campaign site](https://justdoit.nike.com/) with Gatsby to tell the stories of athletes with crazy (read: impressive) dreams +[Airbnb shows off their engineering and data science projects](https://airbnb.io/) on their site built with Gatsby V2.0.0 is the result of months of hard work by the Gatsby core team and 315 contributors. Thank you! @@ -16,7 +17,7 @@ This release focuses on performance and developer experience. Highlights include - Reduced build times by up to 75% - Shrunk JavaScript client runtime by 31% -- Upgraded Gatsby to latest version of core dependencies, webpack 4, Babel 7, React 16.5 +- Upgraded Gatsby's core dependencies to their latest versions: webpack 4, Babel 7, React 16.5 [Sign up for our v2 webinar to learn more about the new features in Gatsby v2](https://www.gatsbyjs.com/v2-launch-webinar). @@ -58,11 +59,11 @@ Improvements include: - [My "hulksmash" PR includes many small fixes to refactor slow algorithms](https://github.com/gatsbyjs/gatsby/pull/6226) - [Use all available cores when server rendering pages](https://github.com/gatsbyjs/gatsby/pull/6417) -There's still lots to be done to improve build performance! Our goal is to help Gatsby scale to sites of any size. More on this in coming months. +There's still more to be done to improve build performance! Our goal is to help Gatsby scale to sites of any size. More on this in coming months. ### Shrunk JavaScript client runtime by 31% -We shrunk the core JavaScript we ship with every Gatsby site by 31%! Less JavaScript means faster sites! +We shrunk the core JavaScript shipped with every Gatsby site by 31%! Less JavaScript means faster sites! Gatsby v1's core JavaScript was 78.5kb and **v2 is 53.9kb** (both gzipped sizes). From 2f2558493d6116c025d1e9054b0fb1e96922f701 Mon Sep 17 00:00:00 2001 From: Kyle Mathews Date: Mon, 17 Sep 2018 11:11:58 -0600 Subject: [PATCH 04/20] Fix date for blog post --- docs/blog/{2018-09-14-gatsby-v2.md => 2018-09-17-gatsby-v2.md} | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) rename docs/blog/{2018-09-14-gatsby-v2.md => 2018-09-17-gatsby-v2.md} (99%) diff --git a/docs/blog/2018-09-14-gatsby-v2.md b/docs/blog/2018-09-17-gatsby-v2.md similarity index 99% rename from docs/blog/2018-09-14-gatsby-v2.md rename to docs/blog/2018-09-17-gatsby-v2.md index 5db267915c9bb..9641e612a850b 100644 --- a/docs/blog/2018-09-14-gatsby-v2.md +++ b/docs/blog/2018-09-17-gatsby-v2.md @@ -1,6 +1,6 @@ --- title: "Announcing Gatsby 2.0.0 🎉🎉🎉" -date: "2018-09-14" +date: "2018-09-17" author: "Kyle Mathews" --- From 49e17f8bd12ad33f294b28da7f22e38d3fa622c0 Mon Sep 17 00:00:00 2001 From: Michal Piechowiak Date: Mon, 17 Sep 2018 19:13:27 +0200 Subject: [PATCH 05/20] add key to PageRenderer (#8218) --- packages/gatsby/cache-dir/json-store.js | 6 +++++- packages/gatsby/cache-dir/production-app.js | 1 + packages/gatsby/cache-dir/public-page-renderer-prod.js | 1 + 3 files changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/gatsby/cache-dir/json-store.js b/packages/gatsby/cache-dir/json-store.js index 632a5591aec20..655b0d8971527 100644 --- a/packages/gatsby/cache-dir/json-store.js +++ b/packages/gatsby/cache-dir/json-store.js @@ -90,7 +90,11 @@ class JSONStore extends React.Component { return ( - + ) } diff --git a/packages/gatsby/cache-dir/production-app.js b/packages/gatsby/cache-dir/production-app.js index 55e31c6ad26d9..b6329d1a5a3ec 100644 --- a/packages/gatsby/cache-dir/production-app.js +++ b/packages/gatsby/cache-dir/production-app.js @@ -50,6 +50,7 @@ apiRunnerAsync(`onClientEntry`).then(() => { {({ pageResources, location }) => ( { const pageResources = loader.getResourcesForPathnameSync(location.pathname) return React.createElement(InternalPageRenderer, { + key: location.pathname, location, pageResources, ...pageResources.json, From e759d21061d9519b296430d54b33f3c00b773fe4 Mon Sep 17 00:00:00 2001 From: Michal Piechowiak Date: Mon, 17 Sep 2018 19:19:06 +0200 Subject: [PATCH 06/20] fix linting (#8220) --- integration-tests/gatsby-image/src/pages/index.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/integration-tests/gatsby-image/src/pages/index.js b/integration-tests/gatsby-image/src/pages/index.js index 3a0676113252d..e940f630ea03c 100644 --- a/integration-tests/gatsby-image/src/pages/index.js +++ b/integration-tests/gatsby-image/src/pages/index.js @@ -1,13 +1,15 @@ import React from 'react' import { Link } from 'gatsby' -import PropTypes from 'prop-types' import Layout from '../components/layout' const IndexPage = () => (

Gatsby Image integration test

-

Please navigate to /fixed, /fluid, or /traced.

+

+ Please navigate to /fixed,{` `} + /fluid, or /traced. +

) From 22a845ba40f561662b651915184b4a15816924e0 Mon Sep 17 00:00:00 2001 From: Michal Piechowiak Date: Mon, 17 Sep 2018 19:28:39 +0200 Subject: [PATCH 07/20] use gatsby v2 version of filesystem plugin in gatsby-image integration test (#8222) --- integration-tests/gatsby-image/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/integration-tests/gatsby-image/package.json b/integration-tests/gatsby-image/package.json index 323c3e154becb..75606596a3bc2 100644 --- a/integration-tests/gatsby-image/package.json +++ b/integration-tests/gatsby-image/package.json @@ -11,7 +11,7 @@ "gatsby-plugin-offline": "next", "gatsby-plugin-react-helmet": "next", "gatsby-plugin-sharp": "^2.0.0-rc.7", - "gatsby-source-filesystem": "^1.5.39", + "gatsby-source-filesystem": "next", "gatsby-transformer-sharp": "^2.1.1-rc.3", "react": "^16.4.2", "react-dom": "^16.4.2", From e41c1cac0e1b3833525deec26234c783bd0bc85a Mon Sep 17 00:00:00 2001 From: Kyle Mathews Date: Mon, 17 Sep 2018 11:38:47 -0600 Subject: [PATCH 08/20] Fix user stories section in blog --- docs/blog/2018-09-17-gatsby-v2.md | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/docs/blog/2018-09-17-gatsby-v2.md b/docs/blog/2018-09-17-gatsby-v2.md index 9641e612a850b..f2431df29c336 100644 --- a/docs/blog/2018-09-17-gatsby-v2.md +++ b/docs/blog/2018-09-17-gatsby-v2.md @@ -7,9 +7,10 @@ author: "Kyle Mathews" We're incredibly pleased to announce the 2nd major release of Gatsby! Gatsby is a modern website and app generator. Thousands of developers use Gatsby to create amazing blogs, apps, marketing and ecommerce sites, documentation, and more! -Facebook uses Gatsby to power the [ReactJS docs and blog!](https://reactjs.org/) -Nike built their [“Just Do It” campaign site](https://justdoit.nike.com/) with Gatsby to tell the stories of athletes with crazy (read: impressive) dreams -[Airbnb shows off their engineering and data science projects](https://airbnb.io/) on their site built with Gatsby + +- Facebook uses Gatsby to power the [ReactJS docs and blog!](https://reactjs.org/) +- Nike built their [“Just Do It” campaign site](https://justdoit.nike.com/) with Gatsby to tell the stories of athletes with crazy (read: impressive) dreams +- [Stitch Fix runs their personal styling eCommerce store on Gatsby!](https://www.stitchfix.com/) V2.0.0 is the result of months of hard work by the Gatsby core team and 315 contributors. Thank you! From f4aed6ceca0b340768074f5258f81b4f2c30cf08 Mon Sep 17 00:00:00 2001 From: Kyle Mathews Date: Mon, 17 Sep 2018 11:48:38 -0600 Subject: [PATCH 09/20] Move Nike off first set of featured sites as screenshot is blank currently (#8219) Something with the timeout for taking screenshots --- docs/sites.yml | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/docs/sites.yml b/docs/sites.yml index 480f6d91b4645..53f98284ca6ad 100644 --- a/docs/sites.yml +++ b/docs/sites.yml @@ -6,13 +6,6 @@ categories: - Web Dev - Featured -- title: Nike - Just Do It - main_url: "https://justdoit.nike.com/" - url: "https://justdoit.nike.com/" - featured: true - categories: - - eCommerce - - Featured - title: Stitch Fix main_url: "https://www.stitchfix.com/" url: "https://www.stitchfix.com/" @@ -246,6 +239,13 @@ - Documentation - Web Dev - Open Source +- title: Nike - Just Do It + main_url: "https://justdoit.nike.com/" + url: "https://justdoit.nike.com/" + featured: true + categories: + - eCommerce + - Featured - title: Cardiogram main_url: "https://cardiogr.am/" url: "https://cardiogr.am/" From ae2548fbcc3cc2e3826411a4747a8184100651f6 Mon Sep 17 00:00:00 2001 From: Kyle Mathews Date: Mon, 17 Sep 2018 11:52:44 -0600 Subject: [PATCH 10/20] chore(release): Publish - gatsby@2.0.0-rc.27 --- packages/gatsby/CHANGELOG.md | 6 ++++++ packages/gatsby/package.json | 2 +- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/gatsby/CHANGELOG.md b/packages/gatsby/CHANGELOG.md index 43d7d7949a0c3..9b20d4c379254 100644 --- a/packages/gatsby/CHANGELOG.md +++ b/packages/gatsby/CHANGELOG.md @@ -3,6 +3,12 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. + + +# [2.0.0-rc.27](https://github.com/gatsbyjs/gatsby/compare/gatsby@2.0.0-rc.26...gatsby@2.0.0-rc.27) (2018-09-17) + +**Note:** Version bump only for package gatsby + # [2.0.0-rc.26](https://github.com/gatsbyjs/gatsby/compare/gatsby@2.0.0-rc.25...gatsby@2.0.0-rc.26) (2018-09-17) diff --git a/packages/gatsby/package.json b/packages/gatsby/package.json index 06e94909a459f..318a1d2875ced 100644 --- a/packages/gatsby/package.json +++ b/packages/gatsby/package.json @@ -1,7 +1,7 @@ { "name": "gatsby", "description": "Blazing fast modern site generator for React", - "version": "2.0.0-rc.26", + "version": "2.0.0-rc.27", "author": "Kyle Mathews ", "bin": { "gatsby": "./dist/bin/gatsby.js" From 8a2fae42467b642ccd7a93bf621d0f2ea1329b24 Mon Sep 17 00:00:00 2001 From: Kyle Mathews Date: Mon, 17 Sep 2018 11:54:49 -0600 Subject: [PATCH 11/20] Bump www's gatsby version --- www/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/www/package.json b/www/package.json index 6f965b20173cd..1ad90331bca8a 100644 --- a/www/package.json +++ b/www/package.json @@ -7,7 +7,7 @@ "bluebird": "^3.5.1", "email-validator": "^1.1.1", "fuse.js": "^3.2.0", - "gatsby": "^2.0.0-rc.13", + "gatsby": "^2.0.0-rc.27", "gatsby-image": "next", "gatsby-plugin-canonical-urls": "next", "gatsby-plugin-catch-links": "next", From 70d1f3242acec96c9b667a2422a6b750c538c30a Mon Sep 17 00:00:00 2001 From: Michal Piechowiak Date: Mon, 17 Sep 2018 20:17:52 +0200 Subject: [PATCH 12/20] update official starters links to use demos built and hosted on netlify (#8165) --- docs/docs/gatsby-starters.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/docs/gatsby-starters.md b/docs/docs/gatsby-starters.md index f64eb2e625f2f..597e08d77f9f9 100644 --- a/docs/docs/gatsby-starters.md +++ b/docs/docs/gatsby-starters.md @@ -25,11 +25,11 @@ There are several starters that have been created. Create a PR to include yours! ## Official starters - [gatsby-starter-default](https://github.com/gatsbyjs/gatsby-starter-default) - [(demo)](http://gatsbyjs.github.io/gatsby-starter-default/) + [(demo)](https://gatsby-starter-default-demo.netlify.com/) - [gatsby-starter-blog](https://github.com/gatsbyjs/gatsby-starter-blog) - [(demo)](http://gatsbyjs.github.io/gatsby-starter-blog/) + [(demo)](https://gatsby-starter-blog-demo.netlify.com/) - [gatsby-starter-hello-world](https://github.com/gatsbyjs/gatsby-starter-hello-world) - [(demo)](https://aberrant-fifth.surge.sh/) + [(demo)](https://gatsby-starter-hello-world-demo.netlify.com/) ### Using Gatsby v2 with the official starters From 4a6ca849541af1e26134f00461acbf0b0c629610 Mon Sep 17 00:00:00 2001 From: Kyle Mathews Date: Mon, 17 Sep 2018 12:27:53 -0600 Subject: [PATCH 13/20] Copy tweak --- docs/blog/2018-09-17-gatsby-v2.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/blog/2018-09-17-gatsby-v2.md b/docs/blog/2018-09-17-gatsby-v2.md index f2431df29c336..04d235ba6ea42 100644 --- a/docs/blog/2018-09-17-gatsby-v2.md +++ b/docs/blog/2018-09-17-gatsby-v2.md @@ -10,7 +10,7 @@ Gatsby is a modern website and app generator. Thousands of developers use Gatsby - Facebook uses Gatsby to power the [ReactJS docs and blog!](https://reactjs.org/) - Nike built their [“Just Do It” campaign site](https://justdoit.nike.com/) with Gatsby to tell the stories of athletes with crazy (read: impressive) dreams -- [Stitch Fix runs their personal styling eCommerce store on Gatsby!](https://www.stitchfix.com/) +- [Stitch Fix runs their styling service eCommerce store](https://www.stitchfix.com/) on Gatsby! V2.0.0 is the result of months of hard work by the Gatsby core team and 315 contributors. Thank you! From 2cfca077ef77c6b9e9ca175fd3cac3395d5a7b0a Mon Sep 17 00:00:00 2001 From: Kyle Mathews Date: Mon, 17 Sep 2018 12:29:11 -0600 Subject: [PATCH 14/20] Remove gatsby-link from plugins library (#8225) As it's built into the `gatsby` package now. Once we do the final v2 release, algolia _should_ stop showing gatsby-link as the v2 version of the package will be the `latest` version then. --- packages/gatsby-link/package.json | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/gatsby-link/package.json b/packages/gatsby-link/package.json index 208a45eb20c5d..dec5fa59b579b 100644 --- a/packages/gatsby-link/package.json +++ b/packages/gatsby-link/package.json @@ -21,8 +21,7 @@ }, "homepage": "https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-link#readme", "keywords": [ - "gatsby", - "gatsby-component" + "gatsby" ], "license": "MIT", "main": "index.js", From 0de459a47912c26d049e08a9755c3e50b848c519 Mon Sep 17 00:00:00 2001 From: Dustin Schau Date: Mon, 17 Sep 2018 14:29:39 -0400 Subject: [PATCH 15/20] feat: add generator meta tag for gatsby version (#8221) * feat: add generator meta tag for gatsby version * refactor: use cache-dir instead of of webpack config * chore: remove comments * fix: use join * refactor: simply require (thanks @pieh) * refactor: use headComponents array to set generator version * chore: remove gatsby version from prop types * test: update snapshots * test: make snapshots deterministic for gatsby version --- .../cache-dir/__tests__/__snapshots__/static-entry.js.snap | 6 +++--- packages/gatsby/cache-dir/__tests__/static-entry.js | 3 +++ packages/gatsby/cache-dir/static-entry.js | 5 ++++- 3 files changed, 10 insertions(+), 4 deletions(-) diff --git a/packages/gatsby/cache-dir/__tests__/__snapshots__/static-entry.js.snap b/packages/gatsby/cache-dir/__tests__/__snapshots__/static-entry.js.snap index 1c17950fd9f0e..216b25d460e66 100644 --- a/packages/gatsby/cache-dir/__tests__/__snapshots__/static-entry.js.snap +++ b/packages/gatsby/cache-dir/__tests__/__snapshots__/static-entry.js.snap @@ -6,8 +6,8 @@ exports[`develop-static-entry onPreRenderHTML can be used to replace postBodyCom exports[`develop-static-entry onPreRenderHTML can be used to replace preBodyComponents 1`] = `"
div3
div2
div1
"`; -exports[`static-entry onPreRenderHTML can be used to replace headComponents 1`] = `"
"`; +exports[`static-entry onPreRenderHTML can be used to replace headComponents 1`] = `"
"`; -exports[`static-entry onPreRenderHTML can be used to replace postBodyComponents 1`] = `"
div3
div2
div1
"`; +exports[`static-entry onPreRenderHTML can be used to replace postBodyComponents 1`] = `"
div3
div2
div1
"`; -exports[`static-entry onPreRenderHTML can be used to replace preBodyComponents 1`] = `"
div3
div2
div1
"`; +exports[`static-entry onPreRenderHTML can be used to replace preBodyComponents 1`] = `"
div3
div2
div1
"`; diff --git a/packages/gatsby/cache-dir/__tests__/static-entry.js b/packages/gatsby/cache-dir/__tests__/static-entry.js index 88d57863a1440..785247fb23692 100644 --- a/packages/gatsby/cache-dir/__tests__/static-entry.js +++ b/packages/gatsby/cache-dir/__tests__/static-entry.js @@ -2,6 +2,9 @@ import React from "react" import DevelopStaticEntry from "../develop-static-entry" jest.mock(`fs`) +jest.mock(`gatsby/package.json`, () => ({ + version: '2.0.0' +})); jest.mock( `../sync-requires`, diff --git a/packages/gatsby/cache-dir/static-entry.js b/packages/gatsby/cache-dir/static-entry.js index e3b3ee6693bc0..66b3bf83ac260 100644 --- a/packages/gatsby/cache-dir/static-entry.js +++ b/packages/gatsby/cache-dir/static-entry.js @@ -8,6 +8,7 @@ const { get, merge, isObject, flatten, uniqBy } = require(`lodash`) const apiRunner = require(`./api-runner-ssr`) const syncRequires = require(`./sync-requires`) const { dataPaths, pages } = require(`./data.json`) +const { version: gatsbyVersion } = require(`gatsby/package.json`) // Speed up looking up pages. const pagesObjectMap = new Map() @@ -50,7 +51,9 @@ const createElement = React.createElement export default (pagePath, callback) => { let bodyHtml = `` - let headComponents = [] + let headComponents = [ + + ] let htmlAttributes = {} let bodyAttributes = {} let preBodyComponents = [] From 76c50aa00653d988043333ceefec7abb34078fca Mon Sep 17 00:00:00 2001 From: stefanprobst Date: Mon, 17 Sep 2018 20:30:00 +0200 Subject: [PATCH 16/20] [gatsby-image] Remove outer wrapper div (#7826) * [gatsby-image] Remove outer wrapper div * Add note to migration guide * chore: remove comment * test: fix snapshots --- docs/docs/migrating-from-v1-to-v2.md | 12 ++ .../using-gatsby-image/src/pages/index.js | 194 +++++++++--------- packages/gatsby-image/README.md | 2 - packages/gatsby-image/index.d.ts | 2 - .../src/__tests__/__snapshots__/index.js.snap | 106 +++++----- packages/gatsby-image/src/index.js | 188 ++++++++--------- 6 files changed, 238 insertions(+), 266 deletions(-) diff --git a/docs/docs/migrating-from-v1-to-v2.md b/docs/docs/migrating-from-v1-to-v2.md index 0e51bad8e4dfb..ffe604c8fbc58 100644 --- a/docs/docs/migrating-from-v1-to-v2.md +++ b/docs/docs/migrating-from-v1-to-v2.md @@ -676,6 +676,18 @@ export default ({ children }) => ( TODO: add a code snippet that uses [`onCreateWebpackConfig`](/docs/node-apis/#onCreateWebpackConfig) to revert to Gatsby's v1 behaviour. +### gatsby-image's `outerWrapperClassName` was removed + +Because the outer wrapper `div` was removed, you can no longer use `outerWrapperClassName` for styling your images. You should merge those styles into your wrapper's class. + +```diff + +``` + ## Resolving Deprecations ### Import Link from Gatsby diff --git a/examples/using-gatsby-image/src/pages/index.js b/examples/using-gatsby-image/src/pages/index.js index 81422c191c4d3..6e71b01c38b23 100644 --- a/examples/using-gatsby-image/src/pages/index.js +++ b/examples/using-gatsby-image/src/pages/index.js @@ -9,111 +9,113 @@ import { rhythm, options } from "../utils/typography" class IndexComponent extends React.Component { render() { return ( - +
-
+
- -
- {` `} -

- - gatsby-image - - {` `} - is the official Image component for use in building Gatsby websites. - It provides the fastest, most optimized image loading performance - possible for Gatsby (and other React) websites. -

-

- The component requires - {` `} - - no configuration - - {` `} - when used within Gatsby. All image processing is done within Gatsby - and official plugins. -

-

- - See the component's documentation - +

+ +
{` `} - as well as - {` `} - - view this site's source - - {` `} - to learn how to start using gatsby-image on your Gatsby sites. -

-

Demo pages

-
    -
  • - Blur Up -
    • -
  • - Background color -
    • -
  • - Traced SVG -
    • -
  • - Prefer WebP -
    • -
-

Out of the box it:

-
    -
  • - Loads the optimal size of image for each device size and screen - resolution -
    • -
  • - Holds the image position while loading so your page doesn't jump - around as images load -
    • -
  • - Uses the "blur-up" effect i.e. it loads a tiny version of the - image to show while the full image is loading -
    • -
  • - Alternatively provides a "traced placeholder" SVG of the image. -
    • -
  • - Lazy loads images which reduces bandwidth and speeds the initial - load time -
    • -
  • Uses WebP images if browser supports the format
    • -
-

Documentation

-

- - See the project README for documentation on using the plugin. - -

-
- +

+ + gatsby-image + + {` `} + is the official Image component for use in building Gatsby + websites. It provides the fastest, most optimized image loading + performance possible for Gatsby (and other React) websites. +

+

+ The component requires + {` `} + + no configuration + + {` `} + when used within Gatsby. All image processing is done within + Gatsby and official plugins. +

+

+ + See the component's documentation + + {` `} + as well as + {` `} + + view this site's source + + {` `} + to learn how to start using gatsby-image on your Gatsby sites. +

+

Demo pages

+
    +
  • + Blur Up +
    • +
  • + Background color +
    • +
  • + Traced SVG +
    • +
  • + Prefer WebP +
    • +
+

Out of the box it:

+
    +
  • + Loads the optimal size of image for each device size and screen + resolution +
    • +
  • + Holds the image position while loading so your page doesn't jump + around as images load +
    • +
  • + Uses the "blur-up" effect i.e. it loads a tiny version of the + image to show while the full image is loading +
    • +
  • + Alternatively provides a "traced placeholder" SVG of the image. +
    • +
  • + Lazy loads images which reduces bandwidth and speeds the initial + load time +
    • +
  • Uses WebP images if browser supports the format
    • +
+

Documentation

+

+ + See the project README for documentation on using the plugin. + +

+
+ + ) } } diff --git a/packages/gatsby-image/README.md b/packages/gatsby-image/README.md index 61643cdbc0419..93a58c23b2634 100644 --- a/packages/gatsby-image/README.md +++ b/packages/gatsby-image/README.md @@ -272,10 +272,8 @@ prop. e.g. `` | `title` | `string` | Passed to the `img` element | | `alt` | `string` | Passed to the `img` element | | `className` | `string` / `object` | Passed to the wrapper element. Object is needed to support Glamor's css prop | -| `outerWrapperClassName` | `string` / `object` | Passed to the outer wrapper element. Object is needed to support Glamor's css prop | | `style` | `object` | Spread into the default styles in the wrapper element | | `imgStyle` | `object` | Spread into the default styles for the actual `img` element | -| `position` | `string` | Defaults to `relative`. Pass in `absolute` to make the component `absolute` positioned | | `backgroundColor` | `string` / `bool` | Set a colored background placeholder. If true, uses "lightgray" for the color. You can also pass in any valid color string. | | `onLoad` | `func` | A callback that is called when the full-size image has loaded. | | `Tag` | `string` | Which HTML tag to use for wrapping elements. Defaults to `div`. | diff --git a/packages/gatsby-image/index.d.ts b/packages/gatsby-image/index.d.ts index 980e625e61a8f..95d7c67770e83 100644 --- a/packages/gatsby-image/index.d.ts +++ b/packages/gatsby-image/index.d.ts @@ -9,10 +9,8 @@ interface GatsbyImageProps { title?: string; alt?: string; className?: string | object; - outerWrapperClassName?: string | object; style?: object; imgStyle?: object; - position?: string; backgroundColor?: string | boolean; onLoad?: (event: any) => void; Tag?: string; diff --git a/packages/gatsby-image/src/__tests__/__snapshots__/index.js.snap b/packages/gatsby-image/src/__tests__/__snapshots__/index.js.snap index 0368ce5806d81..76b82e995267a 100644 --- a/packages/gatsby-image/src/__tests__/__snapshots__/index.js.snap +++ b/packages/gatsby-image/src/__tests__/__snapshots__/index.js.snap @@ -3,38 +3,33 @@ exports[` should render fixed size images 1`] = `
-
+ + + + Alt text for the image - - - - Alt text for the image - - -
+ +
`; @@ -42,41 +37,36 @@ exports[` should render fixed size images 1`] = ` exports[` should render fluid images 1`] = `
-
+
+ + + -
- - - - Alt text for the image - - -
+ +
`; diff --git a/packages/gatsby-image/src/index.js b/packages/gatsby-image/src/index.js index 4b7c3afe16308..103b94451acd0 100644 --- a/packages/gatsby-image/src/index.js +++ b/packages/gatsby-image/src/index.js @@ -195,7 +195,6 @@ class Image extends React.Component { title, alt, className, - outerWrapperClassName, style = {}, imgStyle = {}, placeholderStyle = {}, @@ -228,33 +227,23 @@ class Image extends React.Component { if (fluid) { const image = fluid - // The outer div is necessary to reset the z-index to 0. return ( + {/* Preserve the aspect ratio. */} - {/* Preserve the aspect ratio. */} - + /> {/* Show the blurry base64 image. */} {image.base64 && ( @@ -327,7 +316,6 @@ class Image extends React.Component { }} /> )} - ) } @@ -347,99 +335,88 @@ class Image extends React.Component { delete divStyle.display } - // The outer div is necessary to reset the z-index to 0. return ( - - {/* Show the blurry base64 image. */} - {image.base64 && ( - {alt} + )} + + {/* Show the traced SVG image. */} + {image.tracedSVG && ( + {alt} + )} + + {/* Show a solid background color. */} + {bgColor && ( + + )} + + {/* Once the image is visible, start downloading the image */} + {this.state.isVisible && ( + + {image.srcSetWebp && ()} + + - )} - {/* Show the traced SVG image. */} - {image.tracedSVG && ( {alt} - )} - - {/* Show a solid background color. */} - {bgColor && ( - + )} + + {/* Show the original image during server-side rendering if JavaScript is disabled */} + {this.state.hasNoScript && ( +