kevin/KevinK.dev.js
1
0
Fork 0
mirror of https://github.com/Unkn0wnCat/KevinK.dev.js.git synced 2025-04-28 17:56:51 +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-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: {

1
package.json
View file

@ -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",

16
src/pages/friends.js
View file

@ -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

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

@ -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;
}
}

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 { 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

17
src/pages/projects.js
View file

@ -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={

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

@ -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 {

14
src/pages/social.js
View file

@ -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>

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

@ -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;
}
}
}

13
src/templates/project.js
View file

@ -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>

10
yarn.lock
View file

@ -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==