Stop using sharp for images

packages/homepage/gatsby-browser.js

@@ -0,0 +1,2 @@
+import 'core-js/es6/map';
+import 'core-js/es6/set';

packages/homepage/gatsby-config.js

@@ -60,7 +60,6 @@ module.exports = {
         ],
       },
     },
-    `gatsby-transformer-sharp`,
     `gatsby-plugin-styled-components`,
     `gatsby-plugin-react-helmet`,
     {

packages/homepage/gatsby-node.js

@@ -1,5 +1,5 @@
 const { createFilePath } = require('gatsby-source-filesystem');
-const { resolve } = require('path');
+const { resolve, dirname } = require('path');
 
 // Parse date information out of post filename.
 const BLOG_POST_FILENAME_REGEX = /([0-9]+)\-([0-9]+)\-([0-9]+)\-(.+)\.md$/;
@@ -138,5 +138,11 @@ exports.modifyWebpackConfig = ({ config }) => {
       extensions: ['', '.js', '.jsx', '.json'],
     },
   });
+
+  config._config.resolve.alias = {
+    react: dirname(require.resolve('react')),
+    'react-dom': dirname(require.resolve('react-dom')),
+  };
+
   return config;
 };

packages/homepage/package.json

@@ -6,7 +6,6 @@
   "dependencies": {
     "algoliasearch": "^3.24.5",
     "gatsby": "^1.9.73",
-    "gatsby-image": "^1.0.24",
     "gatsby-link": "^1.6.22",
     "gatsby-plugin-google-fonts": "^0.0.3",
     "gatsby-plugin-google-tagmanager": "^1.0.8",
@@ -20,7 +19,6 @@
     "gatsby-remark-prismjs": "^1.2.11",
     "gatsby-source-filesystem": "^1.5.8",
     "gatsby-transformer-remark": "^1.7.24",
-    "gatsby-transformer-sharp": "^1.6.16",
     "gsap": "^1.20.3",
     "react-media": "^1.6.1",
     "react-transition-group": "^2.2.1",

packages/homepage/src/pages/index.js

@@ -39,26 +39,9 @@ export default class HomePage extends React.Component {
         <NPMFeature />
         <CycleFeature />
         <ExtraFeatures />
-        <RecentPublications sizes={this.props.data.publicationImages.edges} />
+        <RecentPublications />
         <Patron />
       </div>
     );
   }
 }
-
-export const pageQuery = graphql`
-  query ImageSizesQuery {
-    publicationImages: allImageSharp(
-      filter: { id: { regex: "/RecentPublications/" } }
-    ) {
-      edges {
-        node {
-          id
-          sizes(maxWidth: 400) {
-            ...GatsbyImageSharpSizes
-          }
-        }
-      }
-    }
-  }
-`;

packages/homepage/src/screens/home/RecentPublications/index.js

@@ -1,8 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import Img from 'gatsby-image';
-
 import MaxWidth from 'common/components/flex/MaxWidth';
 
 import codesandbox2Image from './1-codesandbox2.png';
@@ -65,10 +63,9 @@ const PublicationDescription = styled.p`
   text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
 `;
 
-const PublicationItem = ({ title, image, url, description, sizes }) => (
+const PublicationItem = ({ title, image, url, description }) => (
   <Item href={url} target="_blank" rel="noopener noreferrer">
-    <Img
-      sizes={sizes}
+    <img
       style={{ boxShadow: '0 4px 8px rgba(0, 0, 0, 0.3)' }}
       src={image}
       alt={title}
@@ -78,7 +75,7 @@ const PublicationItem = ({ title, image, url, description, sizes }) => (
   </Item>
 );
 
-export default ({ sizes }) => (
+export default () => (
   <Container>
     <MaxWidth width={1280}>
       <Title>Recent Publications</Title>
@@ -89,21 +86,18 @@ export default ({ sizes }) => (
           description="Announcing CodeSandbox 2.0. With GitHub commiting, a new homepage and support for static files."
           url="https://medium.com/@compuives/announcing-codesandbox-2-0-938cff3a0fcb"
           image={codesandbox2Image}
-          sizes={sizes[2].node.sizes}
         />
         <PublicationItem
           title="The Journey of CodeSandbox"
           description="Ives explains how CodeSandbox came to be, how it works and what the future holds."
           url="https://www.youtube.com/watch?v=5lR29NsJKW8"
           image={zeitTalkImage}
-          sizes={sizes[0].node.sizes}
         />
         <PublicationItem
           title="NPM in the browser"
           description="What we have done to make npm work in the browser, and what we will do in the future."
           url="https://hackernoon.com/how-we-make-npm-packages-work-in-the-browser-announcing-the-new-packager-6ce16aa4cee6"
           image={npmArticleImage}
-          sizes={sizes[1].node.sizes}
         />
       </Items>
     </MaxWidth>

yarn.lock

@@ -5679,13 +5679,6 @@ gatsby-cli@^1.1.20, gatsby-cli@^1.1.22:
     yargs "^8.0.2"
     yurnalist "^0.2.1"
 
-gatsby-image@^1.0.24:
-  version "1.0.24"
-  resolved "https://registry.yarnpkg.com/gatsby-image/-/gatsby-image-1.0.24.tgz#f6c8bb7caa0cc9061636a246e588ec463570c7c4"
-  dependencies:
-    babel-runtime "^6.26.0"
-    prop-types "^15.6.0"
-
 gatsby-link@^1.6.22:
   version "1.6.28"
   resolved "https://registry.yarnpkg.com/gatsby-link/-/gatsby-link-1.6.28.tgz#12b799aa12663ae22f626195ab258e0ee5dddc9c"
@@ -5825,15 +5818,6 @@ gatsby-transformer-remark@^1.7.24:
     unist-util-select "^1.5.0"
     unist-util-visit "^1.1.1"
 
-gatsby-transformer-sharp@^1.6.16:
-  version "1.6.16"
-  resolved "https://registry.yarnpkg.com/gatsby-transformer-sharp/-/gatsby-transformer-sharp-1.6.16.tgz#16464dcfbb2099f49805b2e244da0b3fea63b88e"
-  dependencies:
-    babel-runtime "^6.26.0"
-    bluebird "^3.5.0"
-    fs-extra "^4.0.2"
-    image-size "^0.6.0"
-
 gatsby@^1.9.73:
   version "1.9.118"
   resolved "https://registry.yarnpkg.com/gatsby/-/gatsby-1.9.118.tgz#76d94faaa91f0ebe39fd2346f91a26146bff4009"
@@ -7021,10 +7005,6 @@ image-size@^0.5.1:
   version "0.5.5"
   resolved "https://registry.yarnpkg.com/image-size/-/image-size-0.5.5.tgz#09dfd4ab9d20e29eb1c3e80b8990378df9e3cb9c"
 
-image-size@^0.6.0:
-  version "0.6.1"
-  resolved "https://registry.yarnpkg.com/image-size/-/image-size-0.6.1.tgz#98122a562d59dcc097ef1b2c8191866eb8f5d663"
-
 imagemin-pngquant@^5.0.0:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/imagemin-pngquant/-/imagemin-pngquant-5.0.1.tgz#d8a329da553afa226b11ce62debe0b7e37b439e6"