kevin/KevinK.dev.js
1
0
Fork 0
mirror of https://github.com/Unkn0wnCat/KevinK.dev.js.git synced 2025-04-29 18:26:52 +02:00
Code Issues Projects Releases Wiki Activity

Migrate all images to Gatsby Image

Browse source
This commit is contained in:
Kevin Kandlbinder 2021-09-24 15:13:11 +02:00
parent 5bbd13e648
commit 4fb0aae042
11 changed files with 100 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
gatsby-config.js
View file

@ -26,6 +26,20 @@ module.exports = {
`gatsby-plugin-sharp`, `gatsby-plugin-sharp`,
`gatsby-transformer-sharp`, `gatsby-transformer-sharp`,
`gatsby-transformer-json`, `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`, resolve: `gatsby-source-filesystem`,
options: { options: {

1
package.json
View file

@ -32,6 +32,7 @@
"gatsby-plugin-offline": "4.14.0", "gatsby-plugin-offline": "4.14.0",
"gatsby-plugin-react-helmet": "4.14.0", "gatsby-plugin-react-helmet": "4.14.0",
"gatsby-plugin-react-i18next": "1.1.1", "gatsby-plugin-react-i18next": "1.1.1",
"gatsby-plugin-remote-images": "^3.0.0",
"gatsby-plugin-robots-txt": "1.6.10", "gatsby-plugin-robots-txt": "1.6.10",
"gatsby-plugin-sass": "4.14.0", "gatsby-plugin-sass": "4.14.0",
"gatsby-plugin-sharp": "^3.14.0", "gatsby-plugin-sharp": "^3.14.0",

16
src/pages/friends.js
View file

@ -5,6 +5,7 @@ import { graphql } from "gatsby";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import * as styles from "./friends.module.scss"; import * as styles from "./friends.module.scss";
import { GatsbyImage, getImage } from "gatsby-plugin-image";
export const query = graphql` export const query = graphql`
query AllFriendsQuery($language: String!) { query AllFriendsQuery($language: String!) {
@ -13,7 +14,11 @@ export const query = graphql`
name name
profession profession
url url
imageURL localImage {
childImageSharp {
gatsbyImageData(height: 300, width: 300, placeholder: BLURRED)
}
}
} }
} }
locales: allLocale(filter: { language: { eq: $language } }) { locales: allLocale(filter: { language: { eq: $language } }) {
@ -62,12 +67,6 @@ const FriendsPage = ({ data }) => {
> >
<div <div
className={styles.friendImage} className={styles.friendImage}
style={{
backgroundImage:
"url(" +
friend.imageURL +
")",
}}
key={ key={
friend.url + friend.url +
"#" + "#" +
@ -75,6 +74,9 @@ const FriendsPage = ({ data }) => {
"#image" "#image"
} }
> >
<div className={styles.friendBg}>
<GatsbyImage image={getImage(friend.localImage)}></GatsbyImage>
</div>
<span <span
className={ className={
styles.friendName styles.friendName

12
src/pages/friends.module.scss
View file

@ -21,14 +21,26 @@
flex-direction: column-reverse; flex-direction: column-reverse;
text-shadow: 0 0 10px black, 0 0 10px black, 0 0 20px black; text-shadow: 0 0 10px black, 0 0 10px black, 0 0 20px black;
color: white; color: white;
position: relative;
.friendBg {
position: absolute;
z-index: 0;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.friendName { .friendName {
font-size: 2em; font-size: 2em;
margin-top: -5px; margin-top: -5px;
z-index: 100;
} }
.friendTitle { .friendTitle {
margin-top: auto; margin-top: auto;
z-index: 100;
} }
} }

18
src/pages/index.js
View file

@ -8,7 +8,7 @@ import * as projectStyles from "./projects.module.scss";
import { Trans, Link } from "gatsby-plugin-react-i18next"; import { Trans, Link } from "gatsby-plugin-react-i18next";
import { graphql } from "gatsby"; import { graphql } from "gatsby";
import { MDXRenderer } from "gatsby-plugin-mdx"; import { MDXRenderer } from "gatsby-plugin-mdx";
import { StaticImage } from "gatsby-plugin-image"; import { StaticImage, GatsbyImage } from "gatsby-plugin-image";
import anime from "animejs"; import anime from "animejs";
import { tsParticles } from "tsparticles"; import { tsParticles } from "tsparticles";
@ -45,9 +45,7 @@ export const query = graphql`
name name
image { image {
childImageSharp { childImageSharp {
resize(width: 400, quality: 90) { gatsbyImageData(placeholder: BLURRED, layout: FULL_WIDTH)
src
}
} }
} }
shortDescription shortDescription
@ -262,14 +260,12 @@ const IndexPage = (props) => {
className={ className={
projectStyles.projectCardImage 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 <div
className={ className={
projectStyles.projectCardMeta projectStyles.projectCardMeta

17
src/pages/projects.js
View file

@ -5,6 +5,7 @@ import { graphql } from "gatsby";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import * as styles from "./projects.module.scss"; import * as styles from "./projects.module.scss";
import { GatsbyImage } from "gatsby-plugin-image";
export const query = graphql` export const query = graphql`
query GetProjects($language: String) { query GetProjects($language: String) {
@ -18,9 +19,7 @@ export const query = graphql`
name name
image { image {
childImageSharp { childImageSharp {
resize(width: 400, quality: 90) { gatsbyImageData(placeholder: BLURRED, layout: FULL_WIDTH)
src
}
} }
} }
shortDescription shortDescription
@ -62,14 +61,12 @@ const ProjectsPage = ({ data }) => {
> >
<div <div
className={styles.projectCardImage} 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}> <div className={styles.projectCardMeta}>
<span <span
className={ className={

11
src/pages/projects.module.scss
View file

@ -13,6 +13,7 @@
flex-grow: 1; flex-grow: 1;
width: 300px; width: 300px;
flex-shrink: 0; flex-shrink: 0;
position: relative;
.projectCardActivityIndicator { .projectCardActivityIndicator {
position: absolute; position: absolute;
@ -46,6 +47,13 @@
color: white; color: white;
} }
.projectCardBg {
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
}
.projectCardMeta { .projectCardMeta {
padding: 10px; padding: 10px;
flex-grow: 1; flex-grow: 1;
@ -54,6 +62,9 @@
padding: 10px; padding: 10px;
height: 100%; height: 100%;
background: linear-gradient(to bottom, transparent, black); background: linear-gradient(to bottom, transparent, black);
position: absolute;
z-index: 2;
width: 100%;
} }
.projectCardTitle { .projectCardTitle {

14
src/pages/social.js
View file

@ -5,15 +5,20 @@ import { graphql } from "gatsby";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import * as styles from "./social.module.scss"; import * as styles from "./social.module.scss";
import { GatsbyImage, getImage } from "gatsby-plugin-image";
export const query = graphql` export const query = graphql`
query AllSocialsQuery($language: String!) { query AllSocialsQuery($language: String!) {
allSocialsJson { allSocialsJson {
nodes { nodes {
image
platformHandle platformHandle
platformName platformName
url url
localImage {
childImageSharp {
gatsbyImageData(height: 300, width: 300)
}
}
} }
} }
locales: allLocale(filter: { language: { eq: $language } }) { locales: allLocale(filter: { language: { eq: $language } }) {
@ -56,11 +61,10 @@ const SocialPage = ({ data }) => {
> >
<div <div
className={styles.socialImage} className={styles.socialImage}
style={{
backgroundImage:
"url(" + social.image + ")",
}}
> >
<div className={styles.socialBg}>
<GatsbyImage image={getImage(social.localImage)}></GatsbyImage>
</div>
<span className={styles.socialName}> <span className={styles.socialName}>
{social.platformName} {social.platformName}
</span> </span>

13
src/pages/social.module.scss
View file

@ -8,6 +8,7 @@
@include cardGeneric; @include cardGeneric;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position: relative;
.socialImage { .socialImage {
width: 300px; width: 300px;
@ -19,14 +20,26 @@
flex-direction: column-reverse; flex-direction: column-reverse;
text-shadow: 0 0 10px black, 0 0 10px black, 0 0 20px black; text-shadow: 0 0 10px black, 0 0 10px black, 0 0 20px black;
color: white; color: white;
position: relative;
.socialBg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
}
.socialName { .socialName {
font-size: 2em; font-size: 2em;
margin-top: -5px; margin-top: -5px;
z-index: 100;
} }
.socialUsername { .socialUsername {
margin-top: auto; margin-top: auto;
z-index: 100;
} }
} }
} }

13
src/templates/project.js
View file

@ -6,6 +6,7 @@ import PropTypes from "prop-types";
import * as styles from "./project.module.scss"; import * as styles from "./project.module.scss";
import { MDXRenderer } from "gatsby-plugin-mdx"; import { MDXRenderer } from "gatsby-plugin-mdx";
import { GatsbyImage } from "gatsby-plugin-image";
export const query = graphql` export const query = graphql`
query GetProject($urlname: String!, $lang: String!, $language: String!) { query GetProject($urlname: String!, $lang: String!, $language: String!) {
@ -21,7 +22,9 @@ export const query = graphql`
website website
} }
image { image {
publicURL childImageSharp {
gatsbyImageData(placeholder: BLURRED, layout: FULL_WIDTH)
}
} }
shortDescription shortDescription
} }
@ -65,11 +68,9 @@ const ProjectTemplate = ({ data }) => {
<div style={{ paddingTop: 0 }}> <div style={{ paddingTop: 0 }}>
<div <div
className={styles.headerBackground} className={styles.headerBackground}
style={{ >
backgroundImage: <GatsbyImage image={project.image.childImageSharp.gatsbyImageData} style={{width: "100%", height: "100%"}} objectFit="cover"></GatsbyImage>
"url(" + project.image.publicURL + ")", </div>
}}
></div>
<header> <header>
<div className={styles.headerInner}> <div className={styles.headerInner}>
<h1> <h1>

10
yarn.lock
View file

@ -5750,6 +5750,14 @@ gatsby-plugin-react-i18next@1.1.1:
optionalDependencies: optionalDependencies:
react-helmet "^6.1.0" 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: gatsby-plugin-robots-txt@1.6.10:
version "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" 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" xstate "^4.9.1"
yoga-layout-prebuilt "^1.9.6" 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" version "3.14.0"
resolved "https://registry.yarnpkg.com/gatsby-source-filesystem/-/gatsby-source-filesystem-3.14.0.tgz#ae2b930091a932b33270cb9cc2d9caaf0abc1742" 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== integrity sha512-Gg5GGxiWXhjapWMYdXOGk7zp+ajYowS+xNmaDUkL1gH+IQLvE18XbvKh00B/HiFaHm4azJfS2QRrRI/mPTZX+w==