optimize performance of images.

gatsby-config.js

@@ -86,6 +86,20 @@ module.exports = {
     'gatsby-plugin-typescript',
     'gatsby-plugin-sharp',
     'gatsby-transformer-sharp',
+    { 
+        resolve: `gatsby-source-filesystem`, 
+        options: { 
+            path: `./src/resources/`,
+            name: `resources`
+        } 
+    },
+    {
+        resolve: `gatsby-source-filesystem`,
+        options: {
+            path: `./static`,
+            name: `static`
+        }
+    },
     'gatsby-plugin-react-helmet',
     'gatsby-plugin-catch-links',
     {

package.json

@@ -30,6 +30,7 @@
     "classnames": "^2.2.6",
     "env-cmd": "^10.1.0",
     "gatsby": "^2.22.12",
+    "gatsby-background-image": "^1.4.0",
     "gatsby-image": "^2.4.5",
     "gatsby-plugin-algolia-docsearch": "^1.0.5",
     "gatsby-plugin-canonical-urls": "^2.3.2",

src/blog/build-a-webhook-for-google-assistant.md

@@ -4,7 +4,7 @@ date: Wed Jun 26 2019 11:57:00 GMT+0000 (UTC)
 author: anudeepreddy
 subtitle: Build and test your webhook using Gitpod
 title: Build a Webhook for Google Assistant Action
-image: https://res-3.cloudinary.com/anudeepc/image/upload/q_auto/v1/blog-images/Build-and-test-your-webhook.png
+image: /Build-and-test-your-webhook.png
 ---
 
 This post is all about how to build your webhook for your Google Assistant action and host it temporarily on Gitpod and test your code.

src/blog/dev-env-as-code.md

@@ -2,7 +2,7 @@
 subtitle: How to streamline developer onboarding
 title: Dev environments as code
 date: Mon Nov 19 2018 15:39:56 GMT+0000 (UTC)
-image: /dev-env-gilbert.gif
+image: /dev-env-gilbert.png
 author: svenefftinge
 url: /dev-env-gilbert.gif
 ---

src/blog/developing-nuxtjs-in-browser.md

@@ -3,8 +3,7 @@ url: https://medium.com/gitpod/developing-a-nuxt-js-app-entirely-in-your-browser
 date: Fri Sep 21 2018 13:23:34 GMT+0000 (UTC)
 author: svenefftinge
 title: Developing a Nuxt.js app entirely in your browser
-image: https://cdn-images-1.medium.com/max/10368/0*YlpGv4nlbQP5sEPr
-teaserImage: https://cdn-images-1.medium.com/max/10368/0*YlpGv4nlbQP5sEPr
+image: /developing-nuxtjs-in-a-browser.jpeg
 ---
 
 A walkthrough to create a fully working Nuxt.js web application with only a browser, using Gitpod.io the online IDE for GitHub.

src/blog/docker-in-gitpod.md

@@ -3,8 +3,7 @@ url: https://medium.com/gitpod/bring-your-own-docker-image-to-gitpod-52db1aa861d
 date: Wed Sep 12 2018 08:25:15 GMT+0000 (UTC)
 author: geropl
 title: Bring your own (Docker) image to Gitpod
-image: https://images.unsplash.com/photo-1493946740644-2d8a1f1a6aff
-teaserImage: https://images.unsplash.com/photo-1493946740644-2d8a1f1a6aff
+image: /docker-in-gitpod.jpeg
 ---
 
 Since we released Gitpod into Public Beta it has been incredibly exciting to see people from all over the world use our service. Even more so with feedback like this:

src/blog/frictionless-oss-contributions.md

@@ -3,8 +3,7 @@ subtitle: Frictionless Open Source Contributions For Everyone
 title: Announcing contribute.dev — Open Source in One Click
 date: Mon Oct 7 2019
 author: nisarhassan12
-teaserImage: https://user-images.githubusercontent.com/46004116/66325437-b11a9980-e940-11e9-9db4-69af48a0a52a.png
-image: https://user-images.githubusercontent.com/46004116/66325437-b11a9980-e940-11e9-9db4-69af48a0a52a.png
+image: /frictionless-oss-contributions.png
 ---
 
 To celebrate Open Source and Hacktoberfest, we're stoked <span aria-hidden="true">🧙✨🥰</span> to announce <a href="https://contribute.dev" target="blank">contribute.dev</a>, a list of welcoming open-source projects featuring ready-to-code Gitpod setups.

src/blog/github-flow.md

@@ -4,7 +4,7 @@ date: Thu Jul 05 2018 11:49:24 GMT+0000 (UTC)
 author: svenefftinge
 subtitle: Stop setting up, start coding!
 title: A Better GitHub Flow
-image: https://cdn-images-1.medium.com/max/2048/0*f260tcqJvgvCguFu
+image: /a-better-github-flow.png
 ---
 
 As software developers, we already spend a lot of our time in browsers. Be it for searching Google/StackOverflow, checking our latest Continuous Integration builds on Jenkins resp. Travis, or doing code reviews on GitHub, Bitbucket, or Gerrit. Also, communication with the team happens in web applications, such as Gmail, Google Hangout or Slack. The convenience of web applications and OAuth-based authentication allows us to use any computer to do most of our work immediately.

src/blog/gitpod-launch.md

@@ -46,7 +46,7 @@ Once you've installed the app for your GitHub repository, it will pre-build dev
 
 We call this feature prebuilt workspaces and you can read more about it in [Chris' post](/blog/prebuilds/).
 
-![Prebuilt Workspaces](./gitpod-launch/prebuilt-workspaces.png)
+![Prebuilt Workspaces](/prebuilt-workspaces.png)
 
 ## More Flow
 Your dev environment opens differently depending on the GitHub page you are coming from. You can, for instance, open branches or files by simply going to the respective GitHub page and pressing the button (or prefixing the URL) there.

src/blog/gitpod-online-ide.md

@@ -4,7 +4,7 @@ date: Tue Jul 31 2018 06:02:26 GMT+0000 (UTC)
 author: svenefftinge
 subtitle: One Click to Coding!
 title: Gitpod — Online IDE For GitHub
-image: https://cdn-images-1.medium.com/max/6908/1*HNDYawJpDgX6gP_e0w17mg.png
+image: /gitpod-online-ide.png
 ---
 
 After over one year of intensive work, we are proud to announce the public Beta of Gitpod.

src/blog/node-js-development.md

@@ -3,8 +3,7 @@ url: https://medium.com/gitpod/sustainable-node-js-development-with-only-a-brows
 date: Wed Dec 12 2018 11:44:33 GMT+0000 (UTC)
 author: akosyakov
 title: Sustainable Node.js development with only a browser
-image: https://cdn-images-1.medium.com/max/4000/1*7zkVCKjkjvyutzD5hFn_Tw.jpeg
-teaserImage: https://cdn-images-1.medium.com/max/4000/1*7zkVCKjkjvyutzD5hFn_Tw.jpeg
+image: /node-js-development-with-only-a-browser.jpeg
 ---
 
 Nowadays, there are many collaborative platforms for showcasing JS code snippets and frameworks. Most of them run in your browser, some even manage to magically run Node.js applications in the cloud. They abstract away many possibilities in order to focus on prototyping and learning.

src/blog/node-js-gitpod.md

@@ -3,7 +3,7 @@ url: https://medium.com/gitpod/debugging-node-js-applications-in-theia-76c94c76f
 date: Tue Nov 13 2018 12:41:55 GMT+0000 (UTC)
 author: akosyakov
 title: Debugging Node.js applications in Theia
-image: https://cdn-images-1.medium.com/max/2992/0*WySkgfqLHyOkQq_c
+image: /node-js-gitpod.png
 ---
 
 Gitpod is based on the open-source Theia IDE Framework, which is highly inspired by VS Code, reuses its major components like the Monaco editor and intelligent-language support and is designed to run as a web application.

src/blog/october-2018-release.md

@@ -4,7 +4,7 @@ date: Wed Sep 26 2018 09:35:09 GMT+0000 (UTC)
 author: svenefftinge
 subtitle: What's new this month?
 title: Gitpod — October 2018 Release
-image: https://cdn-images-1.medium.com/max/10944/0*TrpIB26qJjpdoAmh
+image: /october-2018-release.jpeg
 ---
 
 It has been a month already since we went public with Gitpod.io. We want to take a moment and send out a big thank you for all the great feedback and kind words! <span aria-hidden="true">❤️</span>

src/blog/when-code-reviews-lgtm.md

@@ -3,7 +3,7 @@ url: https://hackernoon.com/when-code-reviews-lgtm-say-goodbye-to-shallow-review
 date: Thu Dec 20 2018 21:51:05 GMT+0000 (UTC)
 title: When code reviews LGTM
 subtitle: Say goodbye to shallow reviews!
-image: https://cdn-images-1.medium.com/max/13440/0*mNLW_yw55sVQgN36
+image: /when-code-reviews-lgtm.jpeg
 teaserImage: https://cdn-images-1.medium.com/max/13440/0*mNLW_yw55sVQgN36
 author: svenefftinge
 ---

src/blog/workspace-snapshots.md

@@ -4,8 +4,7 @@ date: Wed Nov 21 2018 13:34:27 GMT+0000 (UTC)
 author: svenefftinge
 title: Creating reproducibles for any programming language
 subtitle: Code never lies
-image: https://cdn-images-1.medium.com/max/7776/0*xIYVtetr9mExEzBd
-teaserImage: https://cdn-images-1.medium.com/max/7776/0*xIYVtetr9mExEzBd
+image: /workspace-snapshots.jpeg
 ---
 
 Whenever you want to share a reproducible example on StackOverflow or an issue report, providing real code that can be quickly tried, executed and explored is the best you can do. Online code playgrounds, such as CodePen or JSFiddle, are an excellent way to do that, as they are very accessible for both the creator and the readers. Unfortunately, they are not available for every programming platform, language and often don’t work for larger projects or examples.

src/components/Banner.tsx

@@ -10,7 +10,7 @@ const StyledBanner = styled.header`
 
   display: flex;
   justify-content: space-between;
-  align-items: center;
+  align-items: stretch;
   padding: 14rem 0 10rem;
 
   @media (max-width: 960px) {
@@ -27,6 +27,10 @@ const StyledBanner = styled.header`
     text-align: center;
   }
 
+  .banner__text {
+    flex: 0 0 55%;
+  }
+
   .para {
     margin-top: 3rem;
 
@@ -47,46 +51,55 @@ const StyledBanner = styled.header`
     margin-top: 3rem;
   }
 
-  object,
-  img {
-    display: block;
-    height: 35rem;
 
+  .img-container {
+    display: block;
+    flex: 0 0 30%;
+    
     @media (min-width: 961px) {
       margin-left: 3rem;
     }
 
     @media (max-width: 960px) {
       height: 20rem;
+      width: 100%;
+      height: 100%;
+      max-width: 30rem;
       margin: 5rem 0;
     }
+
+    @media (max-width: 500px) {
+        max-width: 22rem;
+    }
   }
 `
 
 interface BannerProps {
-  subtitle: string
-  title: JSX.Element
-  paragraph?: string | JSX.Element
-  linkPath: string
-  linkText: string
-  img: JSX.Element
+    subtitle: string
+    title: JSX.Element
+    paragraph?: string | JSX.Element
+    linkPath: string
+    linkText: string
+    img: JSX.Element
 }
 
 const Banner: React.SFC<BannerProps> = ({ subtitle, title, paragraph, linkPath, linkText, img, children }) => (
-  <div className="row pattern">
-    <StyledBanner role="banner" className="banner">
-      <div className="banner__text">
-        <header>
-            <p className="sub h3">{subtitle}</p>
-            {title}
-        </header>
-        {paragraph ? <p className="para">{paragraph}</p> : null}
-        {link(linkPath, linkText, '', true, false)}
-        {children}
-      </div>
-      {img}
-    </StyledBanner>
-  </div>
+    <div className="row pattern">
+        <StyledBanner role="banner" className="banner">
+            <div className="banner__text">
+                <header>
+                    <p className="sub h3">{subtitle}</p>
+                    {title}
+                </header>
+                {paragraph ? <p className="para">{paragraph}</p> : null}
+                {link(linkPath, linkText, '', true, false)}
+                {children}
+            </div>
+            <div className="img-container">
+                {img}
+            </div>
+        </StyledBanner>
+    </div>
 )
 
 export default Banner

src/components/FeatureCard.tsx

@@ -279,6 +279,7 @@ export interface FeatureCardProps {
   Figure?: () => JSX.Element
   figFootnote?: string | JSX.Element
   footnote?: string | JSX.Element
+  gatsbyImage?: JSX.Element
 }
 
 const FeatureCard = ({
@@ -294,7 +295,8 @@ const FeatureCard = ({
   Figure,
   opposite,
   figFootnote,
-  footnote
+  footnote,
+  gatsbyImage
 }: FeatureCardProps) => {
   const [renderedGraphic, setRenderedGraphic] = useState<string>('')
   const hasFigFootnote = typeof figFootnote == 'string' || typeof figFootnote == 'object'
@@ -309,6 +311,9 @@ const FeatureCard = ({
       <div className="img-container in-view">
         {Graphic ? <Graphic renderedGraphic={renderedGraphic} /> : null}
         {src ? <img src={src} alt={alt} style={featuresList && featuresList.length ? { transform: 'scale(.9)' } : {}} /> : null}
+        {
+            gatsbyImage ? gatsbyImage : null
+        }
         {featuresList && featuresList.length ? (
           <ul>
             {featuresList.map((feat, i) => (

src/components/ImageProvider.tsx

@@ -0,0 +1,71 @@
+import React, { CSSProperties } from 'react'
+import { graphql, useStaticQuery } from 'gatsby'
+import Img from 'gatsby-image'
+
+import styled from '@emotion/styled'
+
+const StyledImageProvider = styled.div`
+    height: 100%;
+    width: 100%;
+`
+
+interface ImageProviderProps {
+    fileName: string
+    alt: string
+    wrapperStyles?: CSSProperties
+    imageStyles?: CSSProperties
+    isNotRelativeToGatsbyImgWrapper?: boolean
+    IsAPricingBoxIcon?: boolean
+    isBlurred?: boolean
+}
+
+const ImageProvider = ({ fileName, alt, wrapperStyles, imageStyles, isNotRelativeToGatsbyImgWrapper, IsAPricingBoxIcon, isBlurred }: ImageProviderProps) => {
+  const { allImageSharp } = useStaticQuery(graphql`
+    query {
+      allImageSharp {
+        nodes {
+          fluid(traceSVG: { color: "#0b2144" }) {
+            originalName
+            tracedSVG
+            src
+          }
+          blurredFluid: fluid {
+                originalName
+            ...GatsbyImageSharpFluid
+          }
+        }
+      }
+    }
+  `)
+
+  let resultingFluid
+
+  const found = allImageSharp.nodes.find((n: any) => {
+    return n.fluid.originalName === fileName
+  })
+
+  resultingFluid = isBlurred ? found.blurredFluid : found.fluid
+
+  const imageStylesIfIsNotRelativeToGatsbyImgWrapper = {
+    top: '50%', 
+    transform: 'translateY(-50%) scale(.93)',
+  };
+
+  let position;
+
+  if (isNotRelativeToGatsbyImgWrapper) {
+    position = 'none'
+  } else if (IsAPricingBoxIcon) {
+    position = 'static'
+  } else {
+    position = 'relative'
+  }
+
+  return (
+    <StyledImageProvider>
+      <Img className="gatsby-image" fluid={resultingFluid} alt={alt} style={{position, ...wrapperStyles}} imgStyle={isNotRelativeToGatsbyImgWrapper ? imageStylesIfIsNotRelativeToGatsbyImgWrapper : imageStyles ? imageStyles : {}} />
+    </StyledImageProvider>
+  )
+}
+
+export default ImageProvider;

src/components/Offers.tsx

@@ -57,22 +57,7 @@ const Offers: React.SFC<OffersProps> = ({ offers, title, para }) => (
                         (offer, i) => (
                             <PricingBox
                                 key={i}
-                                title={offer.title}
-                                img={offer.img}
-                                price={offer.price}
-                                duration={offer.duration}
-                                feature={offer.feature}
-                                features={offer.features}
-                                transform={offer.transform}
-                                btnText={offer.btnText}
-                                link={offer.link}
-                                background={offer.background}
-                                hideButton={offer.hideButton}
-                                btn={offer.btn}
-                                text={offer.text}
-                                banner={offer.banner}
-                                bannerColor={offer.bannerColor}
-                                headingLevel='h3'
+                                {...offer}
                             />
                         )
                     )