Merge pull request #1372 from cpinitiative/new-gatsby-img

New gatsby img

Author: thecodingwizard

gatsby-config.ts

@@ -71,6 +71,7 @@ const plugins = [
       name: `announcements`,
     },
   },
+  `gatsby-plugin-image`,
   `gatsby-plugin-sharp`,
   {
     resolve: `gatsby-plugin-postcss`,

package.json

@@ -6,6 +6,7 @@
   "author": "Nathan Wang <nathan.r.wang@gmail.com>",
   "dependencies": {
     "@babel/core": "^7.13.15",
+    "@babel/plugin-syntax-typescript": "^7.12.13",
     "@babel/preset-env": "^7.13.15",
     "@babel/preset-react": "^7.13.13",
     "@headlessui/react": "^0.3.2",
@@ -31,13 +32,14 @@
     "gatsby-plugin-create-client-paths": "^3.3.0",
     "gatsby-plugin-google-analytics": "^3.3.0",
     "gatsby-plugin-hotjar": "^1.1.1",
+    "gatsby-plugin-image": "^1.3.1",
     "gatsby-plugin-manifest": "^3.3.0",
     "gatsby-plugin-meta-redirect": "^1.1.1",
     "gatsby-plugin-offline": "^4.3.0",
     "gatsby-plugin-postcss": "^4.3.0",
     "gatsby-plugin-react-helmet": "^4.3.0",
     "gatsby-plugin-sentry": "^1.0.1",
-    "gatsby-plugin-sharp": "^3.3.0",
+    "gatsby-plugin-sharp": "^3.3.1",
     "gatsby-plugin-sitemap": "^3.3.0",
     "gatsby-plugin-styled-components": "^4.3.0",
     "gatsby-remark-autolink-headers": "^4.0.0",

src/components/Dashboard/DailyStreak.tsx

@@ -1,5 +1,5 @@
 import { graphql, useStaticQuery } from 'gatsby';
-import Img from 'gatsby-image';
+import { GatsbyImage } from 'gatsby-plugin-image';
 import * as React from 'react';
 import { useContext, useState } from 'react';
 import UserDataContext from '../../context/UserDataContext/UserDataContext';
@@ -37,22 +37,27 @@ const ComeBackTimer = ({ tomorrowMilliseconds }) => {
 
 const PhotoCard = ({ img, day, tomorrowMilliseconds, hiddenOnDesktop }) => {
   return (
-    <div className={'mb-8' + (hiddenOnDesktop ? ' lg:hidden' : '')}>
+    <div
+      className={
+        'max-w-[592px] mx-auto mb-8' + (hiddenOnDesktop ? ' lg:hidden' : '')
+      }
+    >
       <div className="bg-white dark:bg-gray-900 shadow sm:rounded-lg overflow-hidden flex flex-col">
         <div className="px-4 pt-5 sm:px-6 sm:pt-6 pb-4">
           <h3 className="text-lg leading-6 font-medium text-gray-900 dark:text-dark-high-emphasis">
             Day {day} Photo
           </h3>
         </div>
-        <div className="overflow-hidden relative">
+        {/* We set text size to 0px because GatsbyImage is inline block. Without it, there's extra space after the image. */}
+        <div className="overflow-hidden relative text-[0px]">
           {tomorrowMilliseconds >= 0 ? (
-            <div className="absolute inset-0 text-center flex items-center justify-center text-black font-medium bg-white dark:bg-black dark:text-white bg-opacity-25 dark:bg-opacity-25 z-10 p-4">
+            <div className="text-base absolute inset-0 text-center flex items-center justify-center text-black font-medium bg-white dark:bg-black dark:text-white bg-opacity-25 dark:bg-opacity-25 z-10 p-4">
               <ComeBackTimer tomorrowMilliseconds={tomorrowMilliseconds} />
             </div>
           ) : null}
-          <Img
+          <GatsbyImage
+            image={img}
             className="w-full object-cover"
-            fluid={img}
             alt="Cow"
             style={tomorrowMilliseconds >= 0 ? { filter: 'blur(60px)' } : null}
           />
@@ -64,17 +69,15 @@ const PhotoCard = ({ img, day, tomorrowMilliseconds, hiddenOnDesktop }) => {
 
 export default function DailyStreak({ streak }) {
   const data = useStaticQuery(graphql`
-    query {
+    {
       allFile(
         filter: { relativePath: { regex: "/^cows/.*/" } }
         sort: { fields: name }
       ) {
         edges {
           node {
             childImageSharp {
-              fluid(maxWidth: 1000, quality: 100) {
-                ...GatsbyImageSharpFluid
-              }
+              gatsbyImageData(quality: 100, layout: CONSTRAINED, width: 592)
             }
             name
           }
@@ -84,7 +87,9 @@ export default function DailyStreak({ streak }) {
   `);
   // https://www.digitalocean.com/community/tutorials/react-usememo
   const cows = React.useMemo(() => {
-    return data.allFile.edges.map(({ node }) => node.childImageSharp.fluid);
+    return data.allFile.edges.map(
+      ({ node }) => node.childImageSharp.gatsbyImageData
+    );
   }, []);
   const { lastVisitDate } = useContext(UserDataContext);
 

src/components/Index/AuthorsSection.tsx

@@ -1,5 +1,5 @@
 import { graphql, useStaticQuery } from 'gatsby';
-import Img from 'gatsby-image';
+import { GatsbyImage } from 'gatsby-plugin-image';
 import * as React from 'react';
 import { Author, Authors } from '../../../content/authors/authors';
 
@@ -86,9 +86,9 @@ const AuthorCard = ({
             className={`inline-flex rounded-full border-2 border-white dark:border-gray-200`}
           >
             <div className="w-36 h-36 md:h-48 md:w-48 lg:h-36 lg:w-36 xl:h-48 xl:w-48">
-              <Img
+              <GatsbyImage
+                image={gatsbyImage.gatsbyImageData}
                 className="rounded-full"
-                fixed={gatsbyImage.fixed}
                 alt={author.name}
                 style={{ width: '100%', height: '100%' }}
               />
@@ -129,14 +129,18 @@ const AuthorCard = ({
 
 export default function AuthorsSection() {
   const data = useStaticQuery(graphql`
-    query {
+    {
       allFile(filter: { relativePath: { regex: "/^authors/images/.*/" } }) {
         edges {
           node {
             childImageSharp {
-              fixed(width: 192, height: 192, cropFocus: CENTER, quality: 100) {
-                ...GatsbyImageSharpFixed
-              }
+              gatsbyImageData(
+                width: 192
+                height: 192
+                quality: 100
+                transformOptions: { cropFocus: CENTER }
+                layout: FIXED
+              )
             }
             name
           }

src/components/Video.tsx

@@ -1,23 +1,21 @@
 import { graphql, useStaticQuery } from 'gatsby';
-import Img from 'gatsby-image';
+import { GatsbyImage } from 'gatsby-plugin-image';
 import * as React from 'react';
 import Youtube from './markdown/Youtube';
 export default function Video() {
   const [showVideo, setShowVideo] = React.useState(false);
   const data = useStaticQuery(graphql`
-    query {
+    {
       thumbnail: file(relativePath: { eq: "index-video-thumbnail.jpg" }) {
         childImageSharp {
-          fluid(maxWidth: 1200) {
-            ...GatsbyImageSharpFluid_withWebp
-          }
+          gatsbyImageData(layout: CONSTRAINED, width: 512, quality: 100)
         }
       }
     }
   `);
   return (
     <>
-      <div className="relative mx-auto w-full rounded-lg shadow-lg lg:mx-4 xl:mx-8">
+      <div className="relative mx-auto w-full rounded-lg shadow-lg lg:mx-4 xl:mx-8 max-w-[512px]">
         {showVideo && (
           <div className="relative block w-full min-h-32 lg:min-h-64 xl:min-h-80 rounded-lg overflow-hidden focus:outline-none focus:shadow-outline bg-gray-300">
             <Youtube id={'ueNT-w7Oluw'} autoplay />
@@ -27,11 +25,12 @@ export default function Video() {
           <button
             onClick={() => setShowVideo(true)}
             type="button"
-            className="relative block w-full rounded-lg overflow-hidden focus:outline-none focus:shadow-outline"
+            className="relative block w-full rounded-lg overflow-hidden focus:outline-none focus:shadow-outline text-[0px]"
           >
-            <Img
+            {/* We put 0px as text size above since GatsbyImage is inline block, so there's unwanted bottom spacing */}
+            <GatsbyImage
+              image={data.thumbnail.childImageSharp.gatsbyImageData}
               className="w-full"
-              fluid={data.thumbnail.childImageSharp.fluid}
               alt="Video by William Lin"
             />
 

yarn.lock

@@ -5773,6 +5773,11 @@ babel-jest@^26.6.3:
     graceful-fs "^4.2.4"
     slash "^3.0.0"
 
+babel-jsx-utils@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/babel-jsx-utils/-/babel-jsx-utils-1.1.0.tgz#304ce4fce0c86cbeee849551a45eb4ed1036381a"
+  integrity sha512-Mh1j/rw4xM9T3YICkw22aBQ78FhsHdsmlb9NEk4uVAFBOg+Ez9ZgXXHugoBPCZui3XLomk/7/JBBH4daJqTkQQ==
+
 babel-loader@^8.2.2:
   version "8.2.2"
   resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.2.2.tgz#9363ce84c10c9a40e6c753748e1441b60c8a0b81"
@@ -10881,6 +10886,24 @@ gatsby-plugin-hotjar@^1.1.1:
   dependencies:
     babel-runtime "^6.26.0"
 
+gatsby-plugin-image@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/gatsby-plugin-image/-/gatsby-plugin-image-1.3.1.tgz#c3e1c39159fa32d02bd8737fb67c50bfc51efd23"
+  integrity sha512-ZSXBOFSYfbXGWxwc4JkFCoBMZjWLkj8vWkJ9Fu+4Gh5C4KdzveKTDJ0ypBJZU12z5qW+srnMDXVI2Ym+zL57Vw==
+  dependencies:
+    "@babel/code-frame" "^7.12.13"
+    "@babel/parser" "^7.12.5"
+    "@babel/traverse" "^7.12.5"
+    babel-jsx-utils "^1.1.0"
+    babel-plugin-remove-graphql-queries "^3.3.0"
+    camelcase "^5.3.1"
+    chokidar "^3.5.1"
+    common-tags "^1.8.0"
+    fs-extra "^8.1.0"
+    gatsby-core-utils "^2.3.0"
+    objectFitPolyfill "^2.3.0"
+    prop-types "^15.7.2"
+
 gatsby-plugin-manifest@^3.3.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/gatsby-plugin-manifest/-/gatsby-plugin-manifest-3.3.0.tgz#211b7ad6b0ff8dccd182a34bdb21a31c1fbd9377"
@@ -10948,10 +10971,10 @@ gatsby-plugin-sentry@^1.0.1:
   dependencies:
     "@sentry/browser" latest
 
-gatsby-plugin-sharp@^3.3.0:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/gatsby-plugin-sharp/-/gatsby-plugin-sharp-3.3.0.tgz#e6992c1a8175031edad3c2ea6c831e4a4de27771"
-  integrity sha512-56jRS02/Ir4t4AZ3sGNi+Ia+MVKui3IC7X9vSyrptf7jvOM8Ckc9JLqubjy2KG6+UYsXuOPcZVtn6l4mmTqnuQ==
+gatsby-plugin-sharp@^3.3.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/gatsby-plugin-sharp/-/gatsby-plugin-sharp-3.3.1.tgz#103c967ba23789a522ffedbb42920f181834e6b0"
+  integrity sha512-mwY9L/9PiLQuNmKNAx2H1OaMHYqBhePxa80yI4gW3RzUl4gsKIDLS+UonmQVogVg+LFhaEMwZ8tiQ6tM+8RZjg==
   dependencies:
     "@babel/runtime" "^7.12.5"
     async "^3.2.0"
@@ -16353,6 +16376,11 @@ object.values@^1.1.0, object.values@^1.1.1, object.values@^1.1.3:
     es-abstract "^1.18.0-next.2"
     has "^1.0.3"
 
+objectFitPolyfill@^2.3.0:
+  version "2.3.5"
+  resolved "https://registry.yarnpkg.com/objectFitPolyfill/-/objectFitPolyfill-2.3.5.tgz#be8c83064aabfa4e88780f776c2013c48ce1f745"
+  integrity sha512-8Quz071ZmGi0QWEG4xB3Bv5Lpw6K0Uca87FLoLMKMWjB6qIq9IyBegP3b/VLNxv2WYvIMGoeUQ+c6ibUkNa8TA==
+
 objectorarray@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/objectorarray/-/objectorarray-1.0.4.tgz#d69b2f0ff7dc2701903d308bb85882f4ddb49483"