Skip to content

Commit 071cd82

Browse files
avrttavrtt
committed
Minor fixes
1 parent 0710e99 commit 071cd82

File tree

6 files changed

+79
-28
lines changed

6 files changed

+79
-28
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "avrtt.blog",
3-
"version": "4.02",
3+
"version": "4.1",
44
"homepage": "https://avrtt.github.io/",
55
"private": true,
66
"description": "My React/Gatsby website written completely from scratch & with love",

‎src/components/Image/index.tsx‎

Lines changed: 71 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -6,33 +6,91 @@ Distributed under the GNU AGPLv3 license. For details and source code, please re
66
*/
77

88
import React from "react";
9+
import { graphql, useStaticQuery } from "gatsby";
910
import { AnimationOnScroll } from 'react-animation-on-scroll';
10-
import Zoom from 'react-medium-image-zoom'
11-
import * as styles from './styles.module.scss';
12-
import 'animate.css/animate.min.css';
13-
11+
import Zoom from 'react-medium-image-zoom';
12+
import { GatsbyImage, getImage, IGatsbyImageData } from 'gatsby-plugin-image';
13+
import * as styles from './styles.module.scss';
14+
import 'animate.css/animate.min.css';
15+
1416
interface ImageProps {
15-
alt: string;
1617
p: string;
18+
alt: string;
1719
c?: string;
1820
w?: string;
1921
offset?: number;
2022
}
2123

22-
const Image: React.FC<ImageProps> = ({ alt, p, c="", w="100%", offset=300 }) => {
24+
const Image: React.FC<ImageProps> = ({
25+
p,
26+
alt,
27+
c = "",
28+
w = "100%",
29+
offset = 300,
30+
}) => {
31+
if (!alt) {
32+
alert(`An image with missing alt prop was detected! Please provide an informative description. Path: ${p}`);
33+
}
34+
35+
const data: {
36+
allFile: {
37+
nodes: Array<{
38+
relativePath: string;
39+
childImageSharp?: { gatsbyImageData: IGatsbyImageData };
40+
}>;
41+
};
42+
} = useStaticQuery(graphql`
43+
query AllProjectImages {
44+
allFile(
45+
filter: {
46+
sourceInstanceName: { eq: "images" }
47+
extension: { regex: "/(png|jpe?g)/" }
48+
}
49+
) {
50+
nodes {
51+
relativePath
52+
childImageSharp {
53+
gatsbyImageData(
54+
placeholder: BLURRED
55+
formats: [AUTO, WEBP]
56+
quality: 80
57+
)
58+
}
59+
}
60+
}
61+
}
62+
`);
2363

24-
if (!alt) alert(`An image with missing alt prop was detected! Please provide an informative description required for SEO. Path: ${p}`)
64+
const node = data.allFile.nodes.find((n) => n.relativePath === p);
65+
66+
if (!node || !node.childImageSharp) {
67+
console.warn(`⚠️ Image not found for path "${p}". Did you add it under src/images/${p}?`);
68+
return null;
69+
}
70+
71+
const imageData = getImage(node.childImageSharp.gatsbyImageData)!;
2572

2673
return (
2774
<center>
28-
<AnimationOnScroll offset={offset} duration={1.2} animateIn="animate__fadeIn" animateOnce={true}>
29-
<Zoom>
30-
<img alt={alt} src={p} width={w} />
31-
</Zoom>
32-
<p className={styles.caption}>{c}</p>
33-
</AnimationOnScroll>
75+
<AnimationOnScroll
76+
offset={offset}
77+
duration={1.2}
78+
animateIn="animate__fadeIn"
79+
animateOnce
80+
>
81+
<Zoom>
82+
<GatsbyImage
83+
image={imageData}
84+
alt={alt}
85+
style={{ width: w }}
86+
/>
87+
</Zoom>
88+
{c && <p className={styles.caption}>{c}</p>}
89+
<br/>
90+
</AnimationOnScroll>
3491
</center>
3592
);
3693
};
3794

3895
export default Image;
96+

‎src/components/PostBottom/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ const PostBottom: React.FC<PostBottomProps> = ({ nextPost, lastPost, keyCurrent,
4343
<PostsLastNext nextPost={nextPost} lastPost={lastPost} section={section} />
4444
<PostDonate />
4545
<div className={stylesCommentsSections.chatWrapper}>
46-
<TelegramComments dataWebAppId="6397554270:AAE-IVHvLQrTzHXQ3Bn1Pf5DDnjTNyUVX-k" websiteKey={'2JA7Wo3q'} customColor='000000' commentsNumber={5} pageId={keyCurrent} showDislikes={true} />
46+
<TelegramComments websiteKey={'2JA7Wo3q'} customColor='000000' commentsNumber={5} pageId={keyCurrent} showDislikes={true} />
4747
</div>
4848
<ChannelPreview tgLink={tgLink} ytLink={ytLink} tgChannelPicture={tgChannelPicture} tgChannelName={tgChannelName} tgChannelDesc={tgChannelDesc} />
4949
</>

‎src/components/PostImage/index.tsx‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,6 @@ import * as styles from './styles.module.scss';
1414
import 'react-medium-image-zoom/dist/styles.css'
1515
import 'animate.css/animate.min.css';
1616

17-
interface ImageNode {
18-
relativePath: string;
19-
childImageSharp: {
20-
gatsbyImageData: any;
21-
};
22-
}
23-
2417
const imageStyle = {
2518
paddingBottom: "0px",
2619
marginTop: "8px",

‎src/data/freelance/arrays.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ export const projects = [
3131
extraContentHide: false,
3232
extraDesc: '',
3333
extraDescRu: '',
34-
demoImg1: '', demoImg2: '', demoImg3: '', // '../images/freelance/projects/[PROJECT]/[IMAGE]'
34+
demoImg1: '', demoImg2: '', demoImg3: '', // 'freelance/projects/[PROJECT]/[IMAGE]'
3535
demoVidYTKey: '',
3636
showAsServiceExample: '6', // number of service from the "services" array
3737
emoji: '🪶'},
@@ -1571,7 +1571,7 @@ export const projects = [
15711571
extraContentHide: false,
15721572
extraDesc: '',
15731573
extraDescRu: '',
1574-
demoImg1: '../images/freelance/projects/dashbordina/1.png', demoImg2: '', demoImg3: '',
1574+
demoImg1: 'freelance/projects/dashbordina/1.png', demoImg2: '', demoImg3: '',
15751575
demoVidYTKey: '',
15761576
showAsServiceExample: '12',
15771577
emoji: '🔁'},
@@ -1593,7 +1593,7 @@ export const projects = [
15931593
extraContentHide: false,
15941594
extraDesc: '',
15951595
extraDescRu: '',
1596-
demoImg1: '../images/freelance/projects/dashbordina/1.png', demoImg2: '', demoImg3: '',
1596+
demoImg1: 'freelance/projects/dashbordina/1.png', demoImg2: '', demoImg3: '',
15971597
demoVidYTKey: '',
15981598
showAsServiceExample: '',
15991599
emoji: '🔁'},
@@ -1615,7 +1615,7 @@ export const projects = [
16151615
extraContentHide: false,
16161616
extraDesc: '',
16171617
extraDescRu: '',
1618-
demoImg1: '../images/freelance/projects/superset-supremacy/1.png', demoImg2: '../images/freelance/projects/superset-supremacy/2.png', demoImg3: '../images/freelance/projects/superset-supremacy/3.png',
1618+
demoImg1: 'freelance/projects/superset-supremacy/1.png', demoImg2: 'freelance/projects/superset-supremacy/2.png', demoImg3: 'freelance/projects/superset-supremacy/3.png',
16191619
demoVidYTKey: '',
16201620
showAsServiceExample: '12',
16211621
emoji: '♟️'},
@@ -1637,7 +1637,7 @@ export const projects = [
16371637
extraContentHide: false,
16381638
extraDesc: '',
16391639
extraDescRu: '',
1640-
demoImg1: '../images/freelance/projects/superset-supremacy/1.png', demoImg2: '../images/freelance/projects/superset-supremacy/2.png', demoImg3: '../images/freelance/projects/superset-supremacy/3.png',
1640+
demoImg1: 'freelance/projects/superset-supremacy/1.png', demoImg2: 'freelance/projects/superset-supremacy/2.png', demoImg3: 'freelance/projects/superset-supremacy/3.png',
16411641
demoVidYTKey: '',
16421642
showAsServiceExample: '',
16431643
emoji: '♟️'},

‎src/pages/main/goals.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -348,7 +348,7 @@ const Goals = () => {
348348
</span>
349349
</div>
350350
</div>
351-
<div className={stylesCommentsSections.chatWrapper}><TelegramComments dataWebAppId="6397554270:AAE-IVHvLQrTzHXQ3Bn1Pf5DDnjTNyUVX-k" websiteKey={'2JA7Wo3q'} customColor='000000' commentsNumber={5} pageId='goals' showDislikes={true} /></div>
351+
<div className={stylesCommentsSections.chatWrapper}><TelegramComments websiteKey={'2JA7Wo3q'} customColor='000000' commentsNumber={5} pageId='goals' showDislikes={true} /></div>
352352
</motion.div>
353353
);
354354
};

0 commit comments

Comments
 (0)