Skip to content

Commit 0816e38

Browse files
Magda-R-bitMagda-R-bit
committed
Merge branch 'master' into prod
2 parents 09e6dba + 74428f8 commit 0816e38

5 files changed

Lines changed: 92 additions & 37 deletions

File tree

‎src/components/social-media/Icons.tsx‎

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -17,40 +17,48 @@ const SocialMediaLink = styled.a`
1717
interface IIcon {
1818
href: string;
1919
img: string;
20+
alt?: string;
2021
}
2122

22-
const Icon: React.FC<IIcon> = ({ href, img }) => {
23+
const Icon: React.FC<IIcon> = ({ href, img, alt }) => {
2324
return (
2425
<SocialMediaLink href={href} target="blank">
25-
<img src={img} />
26+
<img src={img} alt={alt} />
2627
</SocialMediaLink>
2728
);
2829
};
2930

3031
interface ISocialMedia {
3132
type?: 'unfilled' | 'filled';
33+
alt?: string;
3234
}
3335

34-
export const Facebook: React.FC<ISocialMedia> = ({ type }) => {
36+
export const Facebook: React.FC<ISocialMedia> = ({ type, alt = 'Facebook' }) => {
3537
return (
3638
<Icon
3739
href={urls.external.polaSocialMedia.facebook.href}
3840
img={type === 'filled' ? FacebookIconFill : FacebookIcon}
41+
alt={alt}
3942
/>
4043
);
4144
};
4245

43-
export const Instagram: React.FC<ISocialMedia> = ({ type }) => {
46+
export const Instagram: React.FC<ISocialMedia> = ({ type, alt = 'Instagram' }) => {
4447
return (
4548
<Icon
4649
href={urls.external.polaSocialMedia.instagram.href}
4750
img={type === 'filled' ? InstagramIconFill : InstagramIcon}
51+
alt={alt}
4852
/>
4953
);
5054
};
5155

52-
export const Twitter: React.FC<ISocialMedia> = ({ type }) => {
56+
export const Twitter: React.FC<ISocialMedia> = ({ type, alt = 'Twitter' }) => {
5357
return (
54-
<Icon href={urls.external.polaSocialMedia.twitter.href} img={type === 'filled' ? TwitterIconFill : TwitterIcon} />
58+
<Icon
59+
href={urls.external.polaSocialMedia.twitter.href}
60+
img={type === 'filled' ? TwitterIconFill : TwitterIcon}
61+
alt={alt}
62+
/>
5563
);
5664
};

‎src/layout/PolaLogo.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import Logo from '@Assets/logo/pola-color.svg';
88

99
interface IPolaLogo {
1010
size?: number;
11+
alt?: string;
1112
}
1213

1314
export const LogoColor = styled.div`
@@ -20,6 +21,6 @@ export const LogoColor = styled.div`
2021

2122
export const PolaLogo: React.FC<IPolaLogo> = ({ size = 80 }) => (
2223
<LogoColor>
23-
<img width={size} height={size} src={Logo} />
24+
<img width={size} height={size} src={Logo} alt="Pola logo" loading="lazy" />
2425
</LogoColor>
2526
);

‎src/layout/footer/PageFooter.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ const PageFooter: React.FC<PageFooterProps> = ({ newsletterStatus, follower, sub
6767
<div className="footer-content">
6868
<FooterSection>
6969
<div className="logo">
70-
<img src={LogoWhite} />
70+
<img src={LogoWhite} alt="Pola" />
7171
</div>
7272
</FooterSection>
7373
<CommunitySections />

‎src/layout/nav/HamburgerMenu.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ export const HamburgerMenu: React.FC<IHamburgerMenu> = ({ expanded, children, on
7272
<HamburgerLayout className="hamburger-menu">
7373
<Navbar>
7474
<Link to={urls.pola.home()}>
75-
<img width="auto" height="100%" src={LogoColor} />
75+
<img width="auto" height="100%" src={LogoColor} alt="Pola" />
7676
</Link>
7777
<FontAwesomeIcon icon={faBars} onClick={handleOpen} className="menu-icon" size="2x" />
7878
</Navbar>

‎src/utils/browser/SEOMetadata.tsx‎

Lines changed: 74 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -8,50 +8,76 @@ interface ISEOMetadata {
88
meta?: any[];
99
description?: string;
1010
image?: string;
11+
pathname?: string;
12+
keywords?: string[];
1113
}
1214

13-
const SEOMetadata: React.FC<ISEOMetadata> = ({ image = '', pageTitle, description = '', lang = 'en', meta = [] }) => {
14-
const { site, allFile } = useStaticQuery(
15-
graphql`
16-
query {
17-
site {
18-
siteMetadata {
19-
title
20-
description
21-
author
22-
siteUrl
23-
}
15+
const SEOMetadata: React.FC<ISEOMetadata> = ({
16+
image = '',
17+
pageTitle,
18+
description = '',
19+
lang = 'pl',
20+
meta = [],
21+
pathname = '',
22+
keywords = [],
23+
}) => {
24+
const { site, allFile } = useStaticQuery(graphql`
25+
query {
26+
site {
27+
siteMetadata {
28+
title
29+
description
30+
author
31+
siteUrl
2432
}
25-
allFile(filter: {name: {eq: "background3"}, ext: {eq: ".jpg"}}) {
26-
edges {
27-
node {
28-
publicURL
29-
}
33+
}
34+
allFile(filter: { name: { eq: "background3" }, ext: { eq: ".jpg" } }) {
35+
edges {
36+
node {
37+
publicURL
3038
}
3139
}
3240
}
33-
`
34-
);
41+
}
42+
`);
3543

3644
const metaDescription = description || site.siteMetadata.description;
37-
const browserTabTitle = `${pageTitle} | Pola Web`;
38-
const metaImage = image ? image : `${site.siteMetadata.siteUrl}${allFile.edges[0].node.publicURL}`
45+
const siteTitle = site.siteMetadata.title || 'Pola';
46+
const fullTitle = `${pageTitle} | ${siteTitle}`;
47+
const metaImage = image || `${site.siteMetadata.siteUrl}${allFile.edges[0].node.publicURL}`;
48+
const canonicalUrl = pathname ? `${site.siteMetadata.siteUrl}${pathname}` : site.siteMetadata.siteUrl;
49+
50+
const defaultKeywords = [
51+
'polskie produkty',
52+
'polskie firmy',
53+
'kod EAN',
54+
'sprawdz czy produkt jest polski',
55+
'Pola aplikacja',
56+
];
57+
58+
const allKeywords = [...new Set([...defaultKeywords, ...keywords])];
3959

4060
return (
4161
<Helmet
4262
htmlAttributes={{
4363
lang,
4464
}}
45-
title={browserTabTitle}
46-
titleTemplate={`%s | ${site.siteMetadata.title}`}
65+
title={fullTitle}
66+
titleTemplate={`%s`}
4767
meta={[
4868
{
4969
name: 'description',
5070
content: metaDescription,
5171
},
72+
allKeywords.length > 0
73+
? {
74+
name: 'keywords',
75+
content: allKeywords.join(', '),
76+
}
77+
: {},
5278
{
5379
property: 'og:title',
54-
content: pageTitle,
80+
content: fullTitle,
5581
},
5682
{
5783
property: 'og:description',
@@ -61,35 +87,55 @@ const SEOMetadata: React.FC<ISEOMetadata> = ({ image = '', pageTitle, descriptio
6187
property: 'og:type',
6288
content: 'website',
6389
},
90+
{
91+
property: 'og:site_name',
92+
content: siteTitle,
93+
},
94+
{
95+
property: 'og:url',
96+
content: canonicalUrl,
97+
},
6498
{
6599
name: 'twitter:card',
66-
content: 'summary',
100+
content: 'summary_large_image',
67101
},
68102
{
69103
name: 'twitter:creator',
70104
content: site.siteMetadata.author,
71105
},
106+
{
107+
name: 'twitter:site',
108+
content: site.siteMetadata.author,
109+
},
72110
{
73111
name: 'twitter:title',
74-
content: pageTitle,
112+
content: fullTitle,
75113
},
76114
{
77115
name: 'twitter:description',
78116
content: metaDescription,
79117
},
80118
{
81-
name: 'og:image',
119+
property: 'og:image',
82120
content: metaImage,
83121
},
84122
{
85123
name: 'twitter:image',
86124
content: metaImage,
87125
},
88126
{
89-
name: 'og:image:width',
127+
property: 'og:image:width',
90128
content: '1200',
91129
},
92-
].concat(meta)}
130+
]
131+
.filter(Boolean as any)
132+
.concat(meta)}
133+
link={[
134+
{
135+
rel: 'canonical',
136+
href: canonicalUrl,
137+
},
138+
]}
93139
/>
94140
);
95141
};

0 commit comments

Comments
 (0)