From 4fb0aae042b89b996bcc09ac37ef4e50e55c27f2 Mon Sep 17 00:00:00 2001
From: Kevin Kandlbinder <kevin@kevink.dev>
Date: Fri, 24 Sep 2021 15:13:11 +0200
Subject: [PATCH] Migrate all images to Gatsby Image

---
 gatsby-config.js               | 14 ++++++++++++++
 package.json                   |  1 +
 src/pages/friends.js           | 18 ++++++++++--------
 src/pages/friends.module.scss  | 12 ++++++++++++
 src/pages/index.js             | 18 +++++++-----------
 src/pages/projects.js          | 17 +++++++----------
 src/pages/projects.module.scss | 11 +++++++++++
 src/pages/social.js            | 14 +++++++++-----
 src/pages/social.module.scss   | 13 +++++++++++++
 src/templates/project.js       | 13 +++++++------
 yarn.lock                      | 10 +++++++++-
 11 files changed, 100 insertions(+), 41 deletions(-)

diff --git a/gatsby-config.js b/gatsby-config.js
index 340a59f..4059d1b 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -26,6 +26,20 @@ module.exports = {
         `gatsby-plugin-sharp`,
         `gatsby-transformer-sharp`,
         `gatsby-transformer-json`,
+        {
+            resolve: `gatsby-plugin-remote-images`,
+            options: {
+                nodeType: 'SocialsJson',
+                imagePath: 'image',
+            },
+        },
+        {
+            resolve: `gatsby-plugin-remote-images`,
+            options: {
+                nodeType: 'FriendsJson',
+                imagePath: 'imageURL',
+            },
+        },
         {
             resolve: `gatsby-source-filesystem`,
             options: {
diff --git a/package.json b/package.json
index 5809225..e4df3da 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
         "gatsby-plugin-offline": "4.14.0",
         "gatsby-plugin-react-helmet": "4.14.0",
         "gatsby-plugin-react-i18next": "1.1.1",
+        "gatsby-plugin-remote-images": "^3.0.0",
         "gatsby-plugin-robots-txt": "1.6.10",
         "gatsby-plugin-sass": "4.14.0",
         "gatsby-plugin-sharp": "^3.14.0",
diff --git a/src/pages/friends.js b/src/pages/friends.js
index 96d917e..9f88de8 100644
--- a/src/pages/friends.js
+++ b/src/pages/friends.js
@@ -5,6 +5,7 @@ import { graphql } from "gatsby";
 import PropTypes from "prop-types";
 
 import * as styles from "./friends.module.scss";
+import { GatsbyImage, getImage } from "gatsby-plugin-image";
 
 export const query = graphql`
     query AllFriendsQuery($language: String!) {
@@ -13,7 +14,11 @@ export const query = graphql`
                 name
                 profession
                 url
-                imageURL
+                localImage {
+                    childImageSharp {
+                    gatsbyImageData(height: 300, width: 300, placeholder: BLURRED)
+                    }
+                }
             }
         }
         locales: allLocale(filter: { language: { eq: $language } }) {
@@ -62,12 +67,6 @@ const FriendsPage = ({ data }) => {
                                         >
                                             <div
                                                 className={styles.friendImage}
-                                                style={{
-                                                    backgroundImage:
-                                                        "url(" +
-                                                        friend.imageURL +
-                                                        ")",
-                                                }}
                                                 key={
                                                     friend.url +
                                                     "#" +
@@ -75,6 +74,9 @@ const FriendsPage = ({ data }) => {
                                                     "#image"
                                                 }
                                             >
+                                                <div className={styles.friendBg}>
+                                                    <GatsbyImage image={getImage(friend.localImage)}></GatsbyImage>
+                                                </div>
                                                 <span
                                                     className={
                                                         styles.friendName
@@ -85,7 +87,7 @@ const FriendsPage = ({ data }) => {
                                                         friend.name +
                                                         "#name"
                                                     }
-                                                >
+                                                > 
                                                     {friend.name}
                                                 </span>
                                                 <span
diff --git a/src/pages/friends.module.scss b/src/pages/friends.module.scss
index cc576e2..32b526d 100644
--- a/src/pages/friends.module.scss
+++ b/src/pages/friends.module.scss
@@ -21,14 +21,26 @@
             flex-direction: column-reverse;
             text-shadow: 0 0 10px black, 0 0 10px black, 0 0 20px black;
             color: white;
+            position: relative;
+
+            .friendBg {
+                position: absolute;
+                z-index: 0;
+                width: 100%;
+                height: 100%;
+                top: 0;
+                left: 0;
+            }
 
             .friendName {
                 font-size: 2em;
                 margin-top: -5px;
+                z-index: 100;
             }
 
             .friendTitle {
                 margin-top: auto;
+                z-index: 100;
             }
         }
 
diff --git a/src/pages/index.js b/src/pages/index.js
index b062d95..364cbf2 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -8,7 +8,7 @@ import * as projectStyles from "./projects.module.scss";
 import { Trans, Link } from "gatsby-plugin-react-i18next";
 import { graphql } from "gatsby";
 import { MDXRenderer } from "gatsby-plugin-mdx";
-import { StaticImage } from "gatsby-plugin-image";
+import { StaticImage, GatsbyImage } from "gatsby-plugin-image";
 
 import anime from "animejs";
 import { tsParticles } from "tsparticles";
@@ -45,9 +45,7 @@ export const query = graphql`
                 name
                 image {
                     childImageSharp {
-                        resize(width: 400, quality: 90) {
-                            src
-                        }
+                        gatsbyImageData(placeholder: BLURRED, layout: FULL_WIDTH)
                     }
                 }
                 shortDescription
@@ -262,14 +260,12 @@ const IndexPage = (props) => {
                                         className={
                                             projectStyles.projectCardImage
                                         }
-                                        style={{
-                                            backgroundImage:
-                                                "url(" +
-                                                project.image.childImageSharp
-                                                    .resize.src +
-                                                ")",
-                                        }}
                                     >
+                                        <div className={
+                                            projectStyles.projectCardBg
+                                        }>
+                                            <GatsbyImage image={project.image.childImageSharp.gatsbyImageData} objectFit="cover" style={{height: "100%"}}></GatsbyImage>
+                                        </div>
                                         <div
                                             className={
                                                 projectStyles.projectCardMeta
diff --git a/src/pages/projects.js b/src/pages/projects.js
index 8165668..3ec1c0a 100644
--- a/src/pages/projects.js
+++ b/src/pages/projects.js
@@ -5,6 +5,7 @@ import { graphql } from "gatsby";
 import PropTypes from "prop-types";
 
 import * as styles from "./projects.module.scss";
+import { GatsbyImage } from "gatsby-plugin-image";
 
 export const query = graphql`
     query GetProjects($language: String) {
@@ -18,9 +19,7 @@ export const query = graphql`
                 name
                 image {
                     childImageSharp {
-                        resize(width: 400, quality: 90) {
-                            src
-                        }
+                        gatsbyImageData(placeholder: BLURRED, layout: FULL_WIDTH)
                     }
                 }
                 shortDescription
@@ -62,14 +61,12 @@ const ProjectsPage = ({ data }) => {
                                 >
                                     <div
                                         className={styles.projectCardImage}
-                                        style={{
-                                            backgroundImage:
-                                                "url(" +
-                                                project.image.childImageSharp
-                                                    .resize.src +
-                                                ")",
-                                        }}
                                     >
+                                        <div className={
+                                            styles.projectCardBg
+                                        }>
+                                            <GatsbyImage image={project.image.childImageSharp.gatsbyImageData} objectFit="cover" style={{height: "100%"}}></GatsbyImage>
+                                        </div>
                                         <div className={styles.projectCardMeta}>
                                             <span
                                                 className={
diff --git a/src/pages/projects.module.scss b/src/pages/projects.module.scss
index dd3970c..86dd1d8 100644
--- a/src/pages/projects.module.scss
+++ b/src/pages/projects.module.scss
@@ -13,6 +13,7 @@
     flex-grow: 1;
     width: 300px;
     flex-shrink: 0;
+    position: relative;
 
     .projectCardActivityIndicator {
         position: absolute;
@@ -46,6 +47,13 @@
         color: white;
     }
 
+    .projectCardBg {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        z-index: 1;
+    }
+
     .projectCardMeta {
         padding: 10px;
         flex-grow: 1;
@@ -54,6 +62,9 @@
         padding: 10px;
         height: 100%;
         background: linear-gradient(to bottom, transparent, black);
+        position: absolute;
+        z-index: 2;
+        width: 100%;
     }
 
     .projectCardTitle {
diff --git a/src/pages/social.js b/src/pages/social.js
index 775ebe5..85fcf3c 100644
--- a/src/pages/social.js
+++ b/src/pages/social.js
@@ -5,15 +5,20 @@ import { graphql } from "gatsby";
 import PropTypes from "prop-types";
 
 import * as styles from "./social.module.scss";
+import { GatsbyImage, getImage } from "gatsby-plugin-image";
 
 export const query = graphql`
     query AllSocialsQuery($language: String!) {
         allSocialsJson {
             nodes {
-                image
                 platformHandle
                 platformName
                 url
+                localImage {
+                    childImageSharp {
+                    gatsbyImageData(height: 300, width: 300)
+                    }
+                }
             }
         }
         locales: allLocale(filter: { language: { eq: $language } }) {
@@ -56,11 +61,10 @@ const SocialPage = ({ data }) => {
                                 >
                                     <div
                                         className={styles.socialImage}
-                                        style={{
-                                            backgroundImage:
-                                                "url(" + social.image + ")",
-                                        }}
                                     >
+                                        <div className={styles.socialBg}>
+                                            <GatsbyImage image={getImage(social.localImage)}></GatsbyImage>
+                                        </div>
                                         <span className={styles.socialName}>
                                             {social.platformName}
                                         </span>
diff --git a/src/pages/social.module.scss b/src/pages/social.module.scss
index 6e0c952..c4412b2 100644
--- a/src/pages/social.module.scss
+++ b/src/pages/social.module.scss
@@ -8,6 +8,7 @@
         @include cardGeneric;
         display: flex;
         flex-direction: column;
+        position: relative;
 
         .socialImage {
             width: 300px;
@@ -19,14 +20,26 @@
             flex-direction: column-reverse;
             text-shadow: 0 0 10px black, 0 0 10px black, 0 0 20px black;
             color: white;
+            position: relative;
+
+            .socialBg {
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                z-index: 0;
+            }
 
             .socialName {
                 font-size: 2em;
                 margin-top: -5px;
+                z-index: 100;
             }
 
             .socialUsername {
                 margin-top: auto;
+                z-index: 100;
             }
         }
     }
diff --git a/src/templates/project.js b/src/templates/project.js
index 2d7683d..a15b023 100644
--- a/src/templates/project.js
+++ b/src/templates/project.js
@@ -6,6 +6,7 @@ import PropTypes from "prop-types";
 
 import * as styles from "./project.module.scss";
 import { MDXRenderer } from "gatsby-plugin-mdx";
+import { GatsbyImage } from "gatsby-plugin-image";
 
 export const query = graphql`
     query GetProject($urlname: String!, $lang: String!, $language: String!) {
@@ -21,7 +22,9 @@ export const query = graphql`
                     website
                 }
                 image {
-                    publicURL
+                    childImageSharp {
+                        gatsbyImageData(placeholder: BLURRED, layout: FULL_WIDTH)
+                    }
                 }
                 shortDescription
             }
@@ -65,11 +68,9 @@ const ProjectTemplate = ({ data }) => {
                 <div style={{ paddingTop: 0 }}>
                     <div
                         className={styles.headerBackground}
-                        style={{
-                            backgroundImage:
-                                "url(" + project.image.publicURL + ")",
-                        }}
-                    ></div>
+                    >
+                       <GatsbyImage image={project.image.childImageSharp.gatsbyImageData} style={{width: "100%", height: "100%"}} objectFit="cover"></GatsbyImage> 
+                    </div>
                     <header>
                         <div className={styles.headerInner}>
                             <h1>
diff --git a/yarn.lock b/yarn.lock
index 1e8eb1d..cf77cf7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5750,6 +5750,14 @@ gatsby-plugin-react-i18next@1.1.1:
   optionalDependencies:
     react-helmet "^6.1.0"
 
+gatsby-plugin-remote-images@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/gatsby-plugin-remote-images/-/gatsby-plugin-remote-images-3.0.0.tgz#63bbba949527eafddef755e0d8891e5ad2c59db9"
+  integrity sha512-pJ2QSHM7SfJvKA+dbCpULNv9ha3DuqF4kKyuLTVDYBUbb3QWBNorXMTazshZsoLwMyER16CS3GIARsLOUkmsaQ==
+  dependencies:
+    gatsby-source-filesystem "^3.4.0"
+    lodash "^4.17.15"
+
 gatsby-plugin-robots-txt@1.6.10:
   version "1.6.10"
   resolved "https://registry.yarnpkg.com/gatsby-plugin-robots-txt/-/gatsby-plugin-robots-txt-1.6.10.tgz#b178efe3da65718a39d1acd2e5768f687b205cf0"
@@ -5894,7 +5902,7 @@ gatsby-recipes@^0.25.0:
     xstate "^4.9.1"
     yoga-layout-prebuilt "^1.9.6"
 
-gatsby-source-filesystem@^3.14.0:
+gatsby-source-filesystem@^3.14.0, gatsby-source-filesystem@^3.4.0:
   version "3.14.0"
   resolved "https://registry.yarnpkg.com/gatsby-source-filesystem/-/gatsby-source-filesystem-3.14.0.tgz#ae2b930091a932b33270cb9cc2d9caaf0abc1742"
   integrity sha512-Gg5GGxiWXhjapWMYdXOGk7zp+ajYowS+xNmaDUkL1gH+IQLvE18XbvKh00B/HiFaHm4azJfS2QRrRI/mPTZX+w==