feat(using-gatsby-image): refresh design, switch to emotion (#9377)

* Initial commit :P

* Squash a few bytes

* Yo

* Don’t bind query name to image author

* Breakpoints

* wat

* Tidy z-index mess

* Use `styled`

* Doc, order, be explicit

* Use `styled`

* Simpler

* Moar `styled`, remove typography-theme-elk-glen

* Mv layouts/index -> components/layout

* Order

* Lint

* Escape from L.A.

* No named colors

* No PropTypes for now

* Don’t link away from example site

* Moar `styled`

* Order, z-index (again)

* Rm React.Fragment

* Fiddle around with image sizes

* Font size, use `blockMarginBottom`

* Images have no border-radius

* Allow setting title and background for `FloatingImage`

* Fix background colors, titles

* Limit `tracedSVG` gallery to subset of images

* rename folder
* rename query
* adjust query filter (`relativePath` -> `relativeDirectory`)

* Reduce image dimensions/file size, go with default quality where possible

* Shorten query filename regexes

* Rm two more images, add „-unsplash“ to all unsplash images

* Fix regex

* Use preset constants

* Drop object styles

* Duh

* Drop moar object styles

* Moar template literals

* feat(examples): add a remote-images plugin so as to not introduce bloat (#9605)

* feat: add a remote-images plugin so as to not introduce bloat

Note: this PR requires #9349 to be merged

* chore: source all images (besides one) from unsplash/remote data

* chore: bump all deps (to get remote image changes in
gatsby-source-filesystem)

* OCD

* Fix image `title`, tidy

- bring back image `title`/credits for homepage image, `floatingImage` and `fullWidthImage`, and `ImageGallery` images
- use function component for `TracedSVG`
- fix Gatsby logo position

* Don’t associate query title with image content

* Component name

* Function component

* Add mask-image to mobile navigation

* Fix layout (and coverImage) width for `Xxl` screens

- rn presets.Hd to presets.Xl
- add presets.Xxl
- declare units along setting presets.gutter and presets.offset values
- adjust `maxWidth` image query values

* Duh

* Fix logo link duh

* Finishing move 🤞

* refactor last pieces of CSS to use template literals
* „namespace“ media query constants in `presets` (`presets.mq`), lowercase `em
* rename `presets`’ `zIndex` to `elevation`
* fix `floatingImage` negative margin
* adjust modular scale ratio to major third, and stick to it when using `scale`
* simplify navigation active state styles
* small fix to the README of the local gatsby-source-remote-images plugin
* (almost) no more `px` and `!important`
* add link to image-processing.gatsbyjs.org

examples/using-gatsby-image/.eslintrc.json

@@ -4,5 +4,8 @@
   },
   "globals": {
     "graphql": false
+  },
+  "rules": {
+    "react/prop-types": [0]
   }
-}
+}

examples/using-gatsby-image/content/unsplash-images.yaml

@@ -0,0 +1,81 @@
+- url: https://images.unsplash.com/photo-1534432586043-ead5b99229fb
+  title: Pug with hoodie
+  credit: Charles Deluvio
+- url: https://images.unsplash.com/photo-1530041539828-114de669390e
+  title: Pug with yellow raincoat
+  credit: Charles Deluvio
+- url: https://images.unsplash.com/photo-1495121553079-4c61bcce1894
+  title: Vintage camera
+  credit: Alexander Andrews
+- url: https://images.unsplash.com/photo-1517519014922-8fc06b814a0e
+  title: Pug with red hat
+  credit: Charles Deluvio
+- url: https://images.unsplash.com/photo-1530041587872-d823b3d4bed7
+  title: Pug without hoodie
+  credit: Charles Deluvio
+
+# gallery specific
+- url: https://images.unsplash.com/photo-1528475478853-5b89bed65c4c
+  title: Cactus
+  credit: Charles Deluvio
+  gallery: true
+- url: https://images.unsplash.com/photo-1528476625962-40d0763c921f
+  title: Cacti
+  credit: Charles Deluvio
+  gallery: true
+- url: https://images.unsplash.com/photo-1525498128493-380d1990a112
+  title: Leaves
+  credit: Chris Lee
+  gallery: true
+- url: https://images.unsplash.com/photo-1539656262152-6cb9103f1a33
+  title: City from above
+  credit: chuttersnap
+  gallery: true
+- url: https://images.unsplash.com/photo-1501004318641-b39e6451bec6
+  title: Plant with leaves
+  credit: Igor Son
+  gallery: true
+- url: https://images.unsplash.com/photo-1469201039728-6c8998f9872a
+  title: Alien in the forest
+  credit: Martin Reisch
+  gallery: true
+- url: https://images.unsplash.com/photo-1483728788451-2708e0270131
+  title: Person in center from above
+  credit: Martin Reisch
+  gallery: true
+- url: https://images.unsplash.com/photo-1485827031228-b1736cb1fd06
+  title: Person on football field from above
+  credit: Martin Reisch
+  gallery: true
+- url: https://images.unsplash.com/photo-1496241028573-69327bf8f9d5
+  title: Person on roof from above
+  credit: Martin Reisch
+  gallery: true
+- url: https://images.unsplash.com/photo-1479859546309-cd77fa21c8f6
+  title: Tennis court
+  credit: Michele Feola
+  gallery: true
+- url: https://images.unsplash.com/photo-1504981775868-badb3c4ec2bd
+  title: Beach
+  credit: Ryan Christodoulou
+  gallery: true
+- url: https://images.unsplash.com/photo-1505903658795-8d3cc48039e4
+  title: Top of house
+  credit: Simone Hutsch
+  gallery: true
+- url: https://images.unsplash.com/photo-1505904909252-8ce17de9f287
+  title: Gala
+  credit: Simone Hutsch
+  gallery: true
+- url: https://images.unsplash.com/photo-1504492729478-4ea346b648ae
+  title: Pool from above
+  credit: Spencer Watson
+  gallery: true
+- url: https://images.unsplash.com/photo-1498248193836-88f8c8d70a3f
+  title: Beach and tents from above
+  credit: Syd Sujuaan
+  gallery: true
+- url: https://images.unsplash.com/photo-1516962126636-27ad087061cc
+  title: Polaroid Pronto 600
+  credit: Yoann Siloine
+  gallery: true

examples/using-gatsby-image/gatsby-config.js

@@ -1,13 +1,13 @@
 module.exports = {
   plugins: [
-    `gatsby-plugin-glamor`,
+    `gatsby-plugin-emotion`,
     `gatsby-plugin-netlify`,
     `gatsby-transformer-sharp`,
     {
       resolve: `gatsby-source-filesystem`,
       options: {
-        name: `src`,
-        path: `${__dirname}/src/`,
+        name: `content`,
+        path: `${__dirname}/content`,
       },
     },
     {
@@ -16,5 +16,12 @@ module.exports = {
         pathToConfigModule: `src/utils/typography.js`,
       },
     },
+    `gatsby-transformer-yaml`,
+    {
+      resolve: `gatsby-source-remote-images`,
+      options: {
+        filter: node => node.internal.type === `UnsplashImagesYaml`,
+      },
+    },
   ],
 }

examples/using-gatsby-image/package.json

@@ -4,23 +4,26 @@
   "description": "Gatsby example site using using-gatsby-image",
   "author": "Kyle Mathews <mathews.kyle@gmail.com>",
   "dependencies": {
-    "gatsby": "^2.0.0",
-    "gatsby-image": "^2.0.5",
-    "gatsby-plugin-glamor": "^2.0.5",
-    "gatsby-plugin-netlify": "^2.0.0",
-    "gatsby-plugin-sharp": "^2.0.5",
-    "gatsby-plugin-typography": "^2.2.0",
-    "gatsby-source-filesystem": "^2.0.1",
-    "gatsby-transformer-sharp": "^2.1.1",
-    "glamor": "^2.20.40",
+    "emotion": "^9.2.12",
+    "emotion-server": "^9.2.12",
+    "gatsby": "^2.0.36",
+    "gatsby-image": "^2.0.19",
+    "gatsby-plugin-emotion": "^2.0.6",
+    "gatsby-plugin-netlify": "^2.0.3",
+    "gatsby-plugin-sharp": "^2.0.11",
+    "gatsby-plugin-typography": "^2.2.1",
+    "gatsby-source-filesystem": "^2.0.7",
+    "gatsby-transformer-sharp": "^2.1.7",
+    "gatsby-transformer-yaml": "^2.1.4",
     "numeral": "^2.0.6",
-    "react": "^16.3.2",
-    "react-dom": "^16.3.2",
+    "react": "^16.6.0",
+    "react-dom": "^16.6.0",
+    "react-emotion": "^9.2.12",
+    "react-icons": "^3.2.1",
     "react-typography": "^0.16.13",
     "typeface-oswald": "0.0.54",
     "typeface-pt-sans": "0.0.54",
-    "typography": "^0.16.6",
-    "typography-theme-elk-glen": "^0.16.9"
+    "typography": "^0.16.6"
   },
   "license": "MIT",
   "main": "n/a",

examples/using-gatsby-image/plugins/gatsby-source-remote-images/README.md

@@ -0,0 +1,3 @@
+# gatsby-source-remote-images
+
+This is a simple plugin that will call [`createRemoteFileNode`](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-source-filesystem#createremotefilenode) with a node that contains a `url` property. It's used to source remote images from unsplash.com.

examples/using-gatsby-image/plugins/gatsby-source-remote-images/gatsby-node.js

@@ -0,0 +1,21 @@
+const { createRemoteFileNode } = require(`gatsby-source-filesystem`)
+
+exports.onCreateNode = async (
+  { actions: { createNode }, node, createContentDigest, store, cache },
+  { filter, nodeName = `localFile` }
+) => {
+  if (filter(node)) {
+    const fileNode = await createRemoteFileNode({
+      url: node.url,
+      store,
+      cache,
+      createNode,
+      createNodeId: createContentDigest,
+    })
+
+    if (fileNode) {
+      const fileNodeLink = `${nodeName}___NODE`
+      node[fileNodeLink] = fileNode.id
+    }
+  }
+}

examples/using-gatsby-image/plugins/gatsby-source-remote-images/index.js

@@ -0,0 +1 @@
+// noop

examples/using-gatsby-image/plugins/gatsby-source-remote-images/package.json

@@ -0,0 +1,3 @@
+{
+  "name": "gatsby-source-remote-images"
+}

examples/using-gatsby-image/src/components/floating-image.js

@@ -0,0 +1,70 @@
+import React from "react"
+import Img from "gatsby-image"
+import styled from "react-emotion"
+
+import { rhythm, options } from "../utils/typography"
+import { mq, gutter } from "../utils/presets"
+
+const Image = styled(Img)`
+  display: block;
+  float: right;
+  margin-bottom: ${rhythm(options.blockMarginBottom * 2)};
+  margin-left: ${rhythm(options.blockMarginBottom * 2)};
+  margin-right: -${gutter.default};
+
+  ${mq.phablet} {
+    display: none;
+  }
+`
+
+const ImageDesktop = styled(Image)`
+  display: none;
+
+  ${mq.phablet} {
+    display: block;
+  }
+
+  ${mq.tablet} {
+    margin-right: -${gutter.tablet};
+  }
+
+  ${mq.desktop} {
+    margin-right: -${gutter.desktop};
+  }
+`
+
+const FloatingImage = ({
+  imageMobile,
+  imageDesktop,
+  title,
+  backgroundColor,
+}) => (
+  <React.Fragment>
+    {/*
+        gatsby-image sets a couple of inline styles on its outer
+        container and allows overriding via its `style` prop. One
+        of these inline styles is `display: inline-block´.
+
+        In this case we have two images, one for mobile and one
+        for desktop, and toggle their visibility with `display`,
+        so we need to override the gatsby-image default to make
+        our own styles work.
+
+        https://www.gatsbyjs.org/packages/gatsby-image/#gatsby-image-props
+    */}
+    <Image
+      fixed={imageMobile}
+      backgroundColor={backgroundColor ? backgroundColor : false}
+      style={{ display: `inherit` }}
+      title={title}
+    />
+    <ImageDesktop
+      fixed={imageDesktop}
+      backgroundColor={backgroundColor ? backgroundColor : false}
+      style={{ display: `inherit` }}
+      title={title}
+    />
+  </React.Fragment>
+)
+
+export default FloatingImage

examples/using-gatsby-image/src/components/image-gallery.js

@@ -0,0 +1,119 @@
+import React from "react"
+import Img from "gatsby-image"
+import styled from "react-emotion"
+import numeral from "numeral"
+
+import { mq, gutter, offset, offsetXxl } from "../utils/presets"
+import { options, scale } from "../utils/typography"
+
+const OuterContainer = styled(`div`)`
+  background: #fff;
+
+  ${mq.tablet} {
+    margin: 0;
+    margin-left: calc(-${offset} - ${gutter.tablet});
+    padding: 6.25rem;
+    padding-right: 0;
+  }
+
+  ${mq.desktop} {
+    margin-left: calc(-${offset} - ${gutter.desktop});
+  }
+
+  ${mq.xl} {
+    margin-right: -${gutter.desktop};
+  }
+
+  ${mq.xxl} {
+    margin-left: calc(-${offsetXxl} - ${gutter.desktop});
+  }
+`
+
+const Grid = styled(`div`)`
+  column-count: 1;
+  column-gap: ${gutter.default};
+
+  ${mq.mobile} {
+    column-count: 2;
+  }
+
+  ${mq.tablet} {
+    column-count: 3;
+  }
+
+  ${mq.xl} {
+    column-gap: ${gutter.tablet};
+  }
+`
+
+const GridItem = styled(`div`)`
+  break-inside: avoid;
+  position: relative;
+  margin-bottom: ${gutter.default};
+
+  ${mq.xl} {
+    margin-bottom: ${gutter.tablet};
+  }
+`
+
+const GridItemImage = styled(Img)`
+  &:hover {
+    div + img {
+      opacity: 1 !important;
+      transition: none !important;
+    }
+
+    img + picture > img {
+      opacity: 0 !important;
+    }
+
+    span: {
+      opacity: 1 !important;
+    }
+  }
+`
+
+const Badge = styled(`span`)`
+  background: #fff;
+  bottom: 0.625rem;
+  border-radius: 0.125rem;
+  color: ${options.bodyColor};
+  font-family: ${options.monospaceFontFamily.join(`,`)};
+  font-size: ${scale(-2).fontSize};
+  line-height: 1;
+  padding: 0.25rem;
+  pointer-events: none;
+  position: absolute;
+  opacity: 0.5;
+  right: 0.625rem;
+`
+
+const ImageGallery = edges => (
+  <OuterContainer>
+    <Grid>
+      {edges.images.map((image, index) => (
+        <GridItem key={index}>
+          <GridItemImage
+            fluid={image.node.localFile.childImageSharp.fluid}
+            title={`“${image.node.title}” by ${
+              image.node.credit
+            } (via unsplash.com)`}
+          />
+          <Badge>
+            SVG
+            {` `}
+            {numeral(
+              Buffer.byteLength(
+                image.node.localFile.childImageSharp.fluid.tracedSVG,
+                `utf8`
+              )
+            ).format()}
+            {` `}B
+          </Badge>
+        </GridItem>
+      ))}
+    </Grid>
+  </OuterContainer>
+)
+
+export default ImageGallery