Skip to content

Commit 8450b1d

Browse files
CodeDeadCodeDead
committed
Updated gatsby and image plugin
1 parent b1a6cae commit 8450b1d

12 files changed

Lines changed: 1052 additions & 1057 deletions

File tree

‎gatsby-config.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ const path = require('path');
77

88
module.exports = {
99
polyfill: false,
10-
/* Your site config here */
1110
siteMetadata: {
1211
title: 'CodeDead',
1312
description: 'Solving problems using code',
@@ -61,9 +60,10 @@ module.exports = {
6160
'gatsby-plugin-react-helmet',
6261
'gatsby-transformer-remark',
6362
'gatsby-theme-material-ui',
64-
'gatsby-transformer-sharp',
65-
'gatsby-plugin-sharp',
6663
'gatsby-plugin-sitemap',
6764
'gatsby-plugin-robots-txt',
65+
'gatsby-plugin-image',
66+
'gatsby-plugin-sharp',
67+
'gatsby-transformer-sharp',
6868
],
6969
};

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@
1818
"@material-ui/icons": "^4.11.2",
1919
"@material-ui/lab": "^4.0.0-alpha.57",
2020
"gatsby": "^3.0.3",
21-
"gatsby-image": "^3.0.0",
2221
"gatsby-plugin-google-gtag": "^3.0.0",
22+
"gatsby-plugin-image": "^1.0.0",
2323
"gatsby-plugin-robots-txt": "^1.5.5",
2424
"gatsby-plugin-sharp": "^3.0.0",
2525
"gatsby-plugin-sitemap": "^3.0.0",

‎src/pages/index.jsx‎

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import Grid from '@material-ui/core/Grid';
44
import {
55
graphql, useStaticQuery, navigate, Link,
66
} from 'gatsby';
7-
import Img from 'gatsby-image';
7+
import { GatsbyImage } from 'gatsby-plugin-image';
88
import Typography from '@material-ui/core/Typography';
99
import Button from '@material-ui/core/Button';
1010
import Divider from '@material-ui/core/Divider';
@@ -36,23 +36,17 @@ const Home = () => {
3636
},
3737
deadhash: file(relativePath: { eq: "DeadHash/DeadHash.png" }) {
3838
childImageSharp {
39-
fluid(maxHeight: 250) {
40-
...GatsbyImageSharpFluid
41-
}
39+
gatsbyImageData(layout: FULL_WIDTH)
4240
}
4341
},
4442
memplus: file(relativePath: { eq: "MemPlus/memplus.png" }) {
4543
childImageSharp {
46-
fluid(maxHeight: 250) {
47-
...GatsbyImageSharpFluid
48-
}
44+
gatsbyImageData(layout: FULL_WIDTH)
4945
}
5046
},
5147
pkfinder: file(relativePath: { eq: "PK Finder/pkfinder.png" }) {
5248
childImageSharp {
53-
fluid(maxHeight: 250) {
54-
...GatsbyImageSharpFluid
55-
}
49+
gatsbyImageData(layout: FULL_WIDTH)
5650
}
5751
}
5852
}`);
@@ -89,10 +83,12 @@ const Home = () => {
8983
<Grid container spacing={2}>
9084
<Grid item xs={12} md={6} lg={6}>
9185
<Link to="/software/memplus">
92-
<Img fluid={{
93-
...data.memplus.childImageSharp.fluid,
94-
aspectRatio: 21 / 9,
95-
}}
86+
<GatsbyImage
87+
image={{
88+
...data.memplus.childImageSharp.gatsbyImageData,
89+
aspectRatio: 21 / 9,
90+
}}
91+
alt="MemPlus"
9692
/>
9793
</Link>
9894
</Grid>
@@ -121,10 +117,12 @@ const Home = () => {
121117
<Grid container spacing={2}>
122118
<Grid item xs={12} md={6} lg={6}>
123119
<Link to="/software/deadhash">
124-
<Img fluid={{
125-
...data.deadhash.childImageSharp.fluid,
126-
aspectRatio: 21 / 9,
127-
}}
120+
<GatsbyImage
121+
image={{
122+
...data.deadhash.childImageSharp.gatsbyImageData,
123+
aspectRatio: 21 / 9,
124+
}}
125+
alt="DeadHash"
128126
/>
129127
</Link>
130128
</Grid>
@@ -153,10 +151,12 @@ const Home = () => {
153151
<Grid container spacing={2}>
154152
<Grid item xs={12} md={6} lg={6}>
155153
<Link to="/software/pk-finder">
156-
<Img fluid={{
157-
...data.pkfinder.childImageSharp.fluid,
158-
aspectRatio: 21 / 9,
159-
}}
154+
<GatsbyImage
155+
image={{
156+
...data.pkfinder.childImageSharp.gatsbyImageData,
157+
aspectRatio: 21 / 9,
158+
}}
159+
alt="PK Finder"
160160
/>
161161
</Link>
162162
</Grid>

‎src/pages/software/advanced-passgen/index.jsx‎

Lines changed: 10 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { useContext, useEffect } from 'react';
22
import { Container } from '@material-ui/core';
33
import { graphql, useStaticQuery } from 'gatsby';
4-
import Img from 'gatsby-image/index';
4+
import { GatsbyImage } from 'gatsby-plugin-image';
55
import Grid from '@material-ui/core/Grid';
66
import Typography from '@material-ui/core/Typography';
77
import Divider from '@material-ui/core/Divider';
@@ -23,23 +23,17 @@ const AdvancedPassGenPage = () => {
2323
query {
2424
advancedpassgen: file(relativePath: { eq: "Advanced PassGen/ap.png" }) {
2525
childImageSharp {
26-
fixed {
27-
...GatsbyImageSharpFixed
28-
}
26+
gatsbyImageData(layout: FULL_WIDTH)
2927
}
3028
},
3129
advancedpassgensettings: file(relativePath: { eq: "Advanced PassGen/ap_theme_settings.png" }) {
3230
childImageSharp {
33-
fixed {
34-
...GatsbyImageSharpFixed
35-
}
31+
gatsbyImageData(layout: FULL_WIDTH)
3632
}
3733
},
3834
advancedpassgensettingsadvanced: file(relativePath: { eq: "Advanced PassGen/ap_advanced_settings.png" }) {
3935
childImageSharp {
40-
fixed {
41-
...GatsbyImageSharpFixed
42-
}
36+
gatsbyImageData(layout: FULL_WIDTH)
4337
}
4438
}
4539
}`);
@@ -80,7 +74,7 @@ const AdvancedPassGenPage = () => {
8074
</Typography>
8175
</Grid>
8276
<Grid item xs={12} md={6} lg={6}>
83-
<Img fixed={data.advancedpassgen.childImageSharp.fixed} />
77+
<GatsbyImage image={data.advancedpassgen.childImageSharp.gatsbyImageData} alt="Advanced PassGen" />
8478
</Grid>
8579
</Grid>
8680
</CardContent>
@@ -92,7 +86,7 @@ const AdvancedPassGenPage = () => {
9286
<CardContent>
9387
<Grid container spacing={2}>
9488
<Grid item xs={12} md={6} lg={6}>
95-
<Img fixed={data.advancedpassgensettings.childImageSharp.fixed} />
89+
<GatsbyImage image={data.advancedpassgensettings.childImageSharp.gatsbyImageData} alt="Advanced PassGen settings" />
9690
</Grid>
9791
<Grid item xs={12} md={6} lg={6}>
9892
<Typography variant="h6">
@@ -124,7 +118,10 @@ const AdvancedPassGenPage = () => {
124118
</Typography>
125119
</Grid>
126120
<Grid item xs={12} md={6} lg={6}>
127-
<Img fixed={data.advancedpassgensettingsadvanced.childImageSharp.fixed} />
121+
<GatsbyImage
122+
image={data.advancedpassgensettingsadvanced.childImageSharp.gatsbyImageData}
123+
alt="Advanced PassGen advanced settings"
124+
/>
128125
</Grid>
129126
</Grid>
130127
</CardContent>

‎src/pages/software/advanced-portchecker/index.jsx‎

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { Container } from '@material-ui/core';
44
import Grid from '@material-ui/core/Grid';
55
import Typography from '@material-ui/core/Typography';
66
import Divider from '@material-ui/core/Divider';
7-
import Img from 'gatsby-image';
7+
import { GatsbyImage } from 'gatsby-plugin-image';
88
import Button from '@material-ui/core/Button';
99
import Card from '@material-ui/core/Card';
1010
import CardContent from '@material-ui/core/CardContent';
@@ -23,23 +23,17 @@ const AdvancedPortCheckerPage = () => {
2323
query {
2424
main: file(relativePath: { eq: "Advanced PortChecker/ap.png" }) {
2525
childImageSharp {
26-
fixed {
27-
...GatsbyImageSharpFixed
28-
}
26+
gatsbyImageData(layout: FULL_WIDTH)
2927
}
3028
},
3129
settings: file(relativePath: { eq: "Advanced PortChecker/ap_general_settings.png" }) {
3230
childImageSharp {
33-
fixed {
34-
...GatsbyImageSharpFixed
35-
}
31+
gatsbyImageData(layout: FULL_WIDTH)
3632
}
3733
},
3834
about: file(relativePath: { eq: "Advanced PortChecker/ap_about.png" }) {
3935
childImageSharp {
40-
fixed {
41-
...GatsbyImageSharpFixed
42-
}
36+
gatsbyImageData(layout: FULL_WIDTH)
4337
}
4438
}
4539
}`);
@@ -79,7 +73,10 @@ const AdvancedPortCheckerPage = () => {
7973
</Typography>
8074
</Grid>
8175
<Grid item xs={12} md={6} lg={6}>
82-
<Img fixed={data.main.childImageSharp.fixed} />
76+
<GatsbyImage
77+
image={data.main.childImageSharp.gatsbyImageData}
78+
alt="Advanced PortChecker main window"
79+
/>
8380
</Grid>
8481
</Grid>
8582
</CardContent>
@@ -91,7 +88,10 @@ const AdvancedPortCheckerPage = () => {
9188
<CardContent>
9289
<Grid container spacing={2}>
9390
<Grid item xs={12} md={6} lg={6}>
94-
<Img fixed={data.settings.childImageSharp.fixed} />
91+
<GatsbyImage
92+
image={data.settings.childImageSharp.gatsbyImageData}
93+
alt="Advanced PortChecker settings"
94+
/>
9595
</Grid>
9696
<Grid item xs={12} md={6} lg={6}>
9797
<Typography variant="h6">
@@ -124,7 +124,10 @@ const AdvancedPortCheckerPage = () => {
124124
</Typography>
125125
</Grid>
126126
<Grid item xs={12} md={6} lg={6}>
127-
<Img fixed={data.about.childImageSharp.fixed} />
127+
<GatsbyImage
128+
image={data.about.childImageSharp.gatsbyImageData}
129+
alt="Advanced PortChecker about"
130+
/>
128131
</Grid>
129132
</Grid>
130133
</CardContent>

‎src/pages/software/aniview/index.jsx‎

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { Container } from '@material-ui/core';
44
import Grid from '@material-ui/core/Grid';
55
import Typography from '@material-ui/core/Typography';
66
import Divider from '@material-ui/core/Divider';
7-
import Img from 'gatsby-image';
7+
import { GatsbyImage } from 'gatsby-plugin-image';
88
import Button from '@material-ui/core/Button';
99
import Card from '@material-ui/core/Card';
1010
import CardContent from '@material-ui/core/CardContent';
@@ -23,23 +23,17 @@ const AniViewPage = () => {
2323
query {
2424
main: file(relativePath: { eq: "AniView/aniview.png" }) {
2525
childImageSharp {
26-
fixed {
27-
...GatsbyImageSharpFixed
28-
}
26+
gatsbyImageData(layout: FULL_WIDTH)
2927
}
3028
},
3129
settings: file(relativePath: { eq: "AniView/settings.png" }) {
3230
childImageSharp {
33-
fixed {
34-
...GatsbyImageSharpFixed
35-
}
31+
gatsbyImageData(layout: FULL_WIDTH)
3632
}
3733
},
3834
image: file(relativePath: { eq: "AniView/av_settings_image.png" }) {
3935
childImageSharp {
40-
fixed {
41-
...GatsbyImageSharpFixed
42-
}
36+
gatsbyImageData(layout: FULL_WIDTH)
4337
}
4438
}
4539
}`);
@@ -80,7 +74,10 @@ const AniViewPage = () => {
8074
</Typography>
8175
</Grid>
8276
<Grid item xs={12} md={6} lg={6}>
83-
<Img fixed={data.main.childImageSharp.fixed} />
77+
<GatsbyImage
78+
image={data.main.childImageSharp.gatsbyImageData}
79+
alt="AniView main window"
80+
/>
8481
</Grid>
8582
</Grid>
8683
</CardContent>
@@ -92,7 +89,10 @@ const AniViewPage = () => {
9289
<CardContent>
9390
<Grid container spacing={2}>
9491
<Grid item xs={12} md={6} lg={6}>
95-
<Img fixed={data.settings.childImageSharp.fixed} />
92+
<GatsbyImage
93+
image={data.settings.childImageSharp.gatsbyImageData}
94+
alt="AniView settings"
95+
/>
9696
</Grid>
9797
<Grid item xs={12} md={6} lg={6}>
9898
<Typography variant="h6">
@@ -125,7 +125,10 @@ const AniViewPage = () => {
125125
</Typography>
126126
</Grid>
127127
<Grid item xs={12} md={6} lg={6}>
128-
<Img fixed={data.image.childImageSharp.fixed} />
128+
<GatsbyImage
129+
image={data.image.childImageSharp.gatsbyImageData}
130+
alt="AniView image"
131+
/>
129132
</Grid>
130133
</Grid>
131134
</CardContent>

‎src/pages/software/deadhash/index.jsx‎

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import Grid from '@material-ui/core/Grid';
33
import Typography from '@material-ui/core/Typography';
44
import Divider from '@material-ui/core/Divider';
55
import { Container } from '@material-ui/core';
6-
import Img from 'gatsby-image';
6+
import { GatsbyImage } from 'gatsby-plugin-image';
77
import { graphql, useStaticQuery } from 'gatsby';
88
import Button from '@material-ui/core/Button';
99
import Card from '@material-ui/core/Card';
@@ -23,23 +23,17 @@ const DeadHashPage = () => {
2323
query {
2424
deadhash: file(relativePath: { eq: "DeadHash/DeadHash.png" }) {
2525
childImageSharp {
26-
fixed {
27-
...GatsbyImageSharpFixed
28-
}
26+
gatsbyImageData(layout: FULL_WIDTH)
2927
}
3028
},
3129
deadhashresult: file(relativePath: { eq: "DeadHash/deadhash_result.png" }) {
3230
childImageSharp {
33-
fixed {
34-
...GatsbyImageSharpFixed
35-
}
31+
gatsbyImageData(layout: FULL_WIDTH)
3632
}
3733
},
3834
deadhashtext: file(relativePath: { eq: "DeadHash/deadhash_text.png" }) {
3935
childImageSharp {
40-
fixed {
41-
...GatsbyImageSharpFixed
42-
}
36+
gatsbyImageData(layout: FULL_WIDTH)
4337
}
4438
}
4539
}`);
@@ -81,7 +75,10 @@ const DeadHashPage = () => {
8175
</Typography>
8276
</Grid>
8377
<Grid item xs={12} md={6} lg={6}>
84-
<Img fixed={data.deadhash.childImageSharp.fixed} />
78+
<GatsbyImage
79+
image={data.deadhash.childImageSharp.gatsbyImageData}
80+
alt="DeadHash main window"
81+
/>
8582
</Grid>
8683
</Grid>
8784
</CardContent>
@@ -93,7 +90,10 @@ const DeadHashPage = () => {
9390
<CardContent>
9491
<Grid container spacing={2}>
9592
<Grid item xs={12} md={6} lg={6}>
96-
<Img fixed={data.deadhashresult.childImageSharp.fixed} />
93+
<GatsbyImage
94+
image={data.deadhashresult.childImageSharp.gatsbyImageData}
95+
alt="DeadHash result"
96+
/>
9797
</Grid>
9898
<Grid item xs={12} md={6} lg={6}>
9999
<Typography variant="h6">
@@ -128,7 +128,10 @@ const DeadHashPage = () => {
128128
</Typography>
129129
</Grid>
130130
<Grid item xs={12} md={6} lg={6}>
131-
<Img fixed={data.deadhashtext.childImageSharp.fixed} />
131+
<GatsbyImage
132+
image={data.deadhashtext.childImageSharp.gatsbyImageData}
133+
alt="DeadHash text"
134+
/>
132135
</Grid>
133136
</Grid>
134137
</CardContent>

0 commit comments

Comments
 (0)