mirror of
https://github.com/Unkn0wnCat/KevinK.dev.js.git
synced 2025-04-28 09:46:52 +02:00
Migrate all images to Gatsby Image
This commit is contained in:
parent
5bbd13e648
commit
4fb0aae042
11 changed files with 100 additions and 41 deletions
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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={
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
10
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==
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue