Skip to content

Commit cdb892d

Browse files
artolaartola
authored
enhance seo (#5621)
1 parent ff6d92f commit cdb892d

25 files changed

+108
-103
lines changed

‎website/gatsby-config.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -101,15 +101,15 @@ module.exports = {
101101
options: {
102102
rule: {
103103
include: /images/,
104-
exclude: /images\/(artwork|companies|logo)/,
104+
exclude: /images\/(artwork|brands|companies|logo)/,
105105
},
106106
},
107107
},
108108
{
109109
resolve: require.resolve(`./plugins/gatsby-plugin-svg-sprite`),
110110
options: {
111111
rule: {
112-
include: /images\/(artwork|companies|logo)/,
112+
include: /images\/(artwork|brands|companies|logo)/,
113113
},
114114
},
115115
},

‎website/src/components/blog-article/blog-article-sharebar.tsx

+6-5
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,12 @@ import React, { FC } from "react";
33
import { LinkedinShareButton, TwitterShareButton } from "react-share";
44
import styled from "styled-components";
55

6+
import { Brand } from "@/components/sprites";
67
import { BlogArticleSharebarFragment } from "@/graphql-types";
78

8-
// Icons
9-
import LinkedinIconSvg from "@/images/linkedin-square.svg";
10-
import TwitterIconSvg from "@/images/twitter-square.svg";
9+
// Brands
10+
import LinkedInIconSvg from "@/images/brands/linkedin-square.svg";
11+
import TwitterIconSvg from "@/images/brands/twitter-square.svg";
1112

1213
export interface BlogArticleSharebarProps {
1314
readonly data: BlogArticleSharebarFragment;
@@ -78,10 +79,10 @@ const ShareButtons = styled.aside`
7879
}
7980
`;
8081

81-
const TwitterIcon = styled(TwitterIconSvg)`
82+
const TwitterIcon = styled(Brand).attrs(TwitterIconSvg)`
8283
fill: #1da0f2;
8384
`;
8485

85-
const LinkedinIcon = styled(LinkedinIconSvg)`
86+
const LinkedinIcon = styled(Brand).attrs(LinkedInIconSvg)`
8687
fill: #0073b0;
8788
`;

‎website/src/components/doc-page/doc-page-community.tsx

+6-5
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,13 @@ import styled from "styled-components";
44

55
import { IconContainer } from "@/components/misc/icon-container";
66
import { Link } from "@/components/misc/link";
7+
import { Brand } from "@/components/sprites";
78
import { DocPageCommunityFragment } from "@/graphql-types";
89
import { THEME_COLORS } from "@/shared-style";
910

10-
// Icons
11-
import GitHubIconSvg from "@/images/github.svg";
12-
import SlackIconSvg from "@/images/slack.svg";
11+
// Brands
12+
import GitHubIconSvg from "@/images/brands/github.svg";
13+
import SlackIconSvg from "@/images/brands/slack.svg";
1314

1415
export interface DocPageCommunityProps {
1516
readonly data: DocPageCommunityFragment;
@@ -30,15 +31,15 @@ export const DocPageCommunity: FC<DocPageCommunityProps> = ({
3031
<CommunityItem>
3132
<CommunityLink to={docPath}>
3233
<IconContainer>
33-
<GitHubIconSvg />
34+
<Brand {...GitHubIconSvg} />
3435
</IconContainer>
3536
Edit on GitHub
3637
</CommunityLink>
3738
</CommunityItem>
3839
<CommunityItem>
3940
<CommunityLink to={metadata.tools!.slack!}>
4041
<IconContainer>
41-
<SlackIconSvg />
42+
<Brand {...SlackIconSvg} />
4243
</IconContainer>
4344
Discuss on Slack
4445
</CommunityLink>

‎website/src/components/layout/footer.tsx

+26-26
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,16 @@ import styled from "styled-components";
44

55
import { IconContainer } from "@/components/misc/icon-container";
66
import { Link } from "@/components/misc/link";
7-
import { Logo } from "@/components/misc/logo";
7+
import { Brand, Logo } from "@/components/sprites";
88
import { GetFooterDataQuery } from "@/graphql-types";
99
import { FONT_FAMILY_HEADING, THEME_COLORS } from "@/shared-style";
1010

11-
// Icons
12-
import GithubIconSvg from "@/images/github.svg";
13-
import LinkedInIconSvg from "@/images/linkedin.svg";
14-
import SlackIconSvg from "@/images/slack.svg";
15-
import TwitterIconSvg from "@/images/twitter.svg";
16-
import YouTubeIconSvg from "@/images/youtube.svg";
11+
// Brands
12+
import GithubIconSvg from "@/images/brands/github.svg";
13+
import LinkedInIconSvg from "@/images/brands/linkedin.svg";
14+
import SlackIconSvg from "@/images/brands/slack.svg";
15+
import TwitterIconSvg from "@/images/brands/twitter.svg";
16+
import YouTubeIconSvg from "@/images/brands/youtube.svg";
1717

1818
// Logos
1919
import LogoTextSvg from "@/images/logo/chillicream-text.svg";
@@ -56,8 +56,8 @@ export const Footer: FC = () => {
5656
<Section>
5757
<About>
5858
<LogoContainer>
59-
<LogoIcon {...LogoIconSvg} />
60-
<LogoText {...LogoTextSvg} />
59+
<LogoIcon />
60+
<LogoText />
6161
</LogoContainer>
6262
<Description>
6363
We at ChilliCream build the ultimate GraphQL platform.
@@ -70,32 +70,32 @@ export const Footer: FC = () => {
7070
<ConnectLink to={tools!.github!}>
7171
<IconContainer>
7272
<GithubIcon />
73-
</IconContainer>{" "}
74-
to work with us on the platform
73+
</IconContainer>
74+
{" to work with us on the platform"}
7575
</ConnectLink>
7676
<ConnectLink to={tools!.slack!}>
7777
<IconContainer>
7878
<SlackIcon />
79-
</IconContainer>{" "}
80-
to get in touch with us
79+
</IconContainer>
80+
{" to get in touch with us"}
8181
</ConnectLink>
8282
<ConnectLink to={tools!.youtube!}>
8383
<IconContainer>
8484
<YouTubeIcon />
85-
</IconContainer>{" "}
86-
to learn new stuff
85+
</IconContainer>
86+
{" to learn new stuff"}
8787
</ConnectLink>
8888
<ConnectLink to={tools!.twitter!}>
8989
<IconContainer>
9090
<TwitterIcon />
91-
</IconContainer>{" "}
92-
to stay up-to-date
91+
</IconContainer>
92+
{" to stay up-to-date"}
9393
</ConnectLink>
9494
<ConnectLink to={tools!.linkedIn!}>
9595
<IconContainer>
9696
<LinkedInIcon />
97-
</IconContainer>{" "}
98-
to connect
97+
</IconContainer>
98+
{" to connect"}
9999
</ConnectLink>
100100
</Connect>
101101
</About>
@@ -170,12 +170,12 @@ const LogoContainer = styled.div`
170170
margin-bottom: 10px;
171171
`;
172172

173-
const LogoIcon = styled(Logo)`
173+
const LogoIcon = styled(Logo).attrs(LogoIconSvg)`
174174
height: 40px;
175175
fill: ${THEME_COLORS.footerText};
176176
`;
177177

178-
const LogoText = styled(Logo)`
178+
const LogoText = styled(Logo).attrs(LogoTextSvg)`
179179
padding-left: 15px;
180180
height: 24px;
181181
fill: ${THEME_COLORS.footerText};
@@ -219,27 +219,27 @@ const ConnectLink = styled(Link)`
219219
}
220220
`;
221221

222-
const GithubIcon = styled(GithubIconSvg)`
222+
const GithubIcon = styled(Brand).attrs(GithubIconSvg)`
223223
height: 26px;
224224
fill: ${THEME_COLORS.footerText};
225225
`;
226226

227-
const LinkedInIcon = styled(LinkedInIconSvg)`
227+
const SlackIcon = styled(Brand).attrs(SlackIconSvg)`
228228
height: 22px;
229229
fill: ${THEME_COLORS.footerText};
230230
`;
231231

232-
const SlackIcon = styled(SlackIconSvg)`
232+
const YouTubeIcon = styled(Brand).attrs(YouTubeIconSvg)`
233233
height: 22px;
234234
fill: ${THEME_COLORS.footerText};
235235
`;
236236

237-
const TwitterIcon = styled(TwitterIconSvg)`
237+
const TwitterIcon = styled(Brand).attrs(TwitterIconSvg)`
238238
height: 22px;
239239
fill: ${THEME_COLORS.footerText};
240240
`;
241241

242-
const YouTubeIcon = styled(YouTubeIconSvg)`
242+
const LinkedInIcon = styled(Brand).attrs(LinkedInIconSvg)`
243243
height: 22px;
244244
fill: ${THEME_COLORS.footerText};
245245
`;

‎website/src/components/layout/header.tsx

+23-19
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,10 @@ import React, {
1212
} from "react";
1313
import styled, { createGlobalStyle } from "styled-components";
1414

15-
import { WorkshopNdcLondon } from "@/components/images/workshop-ndc-london";
1615
import { IconContainer } from "@/components/misc/icon-container";
1716
import { Link } from "@/components/misc/link";
18-
import { Logo } from "@/components/misc/logo";
1917
import { SearchModal } from "@/components/misc/search-modal";
18+
import { Brand, Logo } from "@/components/sprites";
2019
import {
2120
DocsJson,
2221
DocsJsonVersions,
@@ -27,19 +26,24 @@ import {
2726
import { FONT_FAMILY_HEADING, THEME_COLORS } from "@/shared-style";
2827
import { useObservable } from "@/state";
2928

29+
// Brands
30+
import GithubIconSvg from "@/images/brands/github.svg";
31+
import LinkedInIconSvg from "@/images/brands/linkedin.svg";
32+
import SlackIconSvg from "@/images/brands/slack.svg";
33+
import TwitterIconSvg from "@/images/brands/twitter.svg";
34+
import YouTubeIconSvg from "@/images/brands/youtube.svg";
35+
3036
// Icons
3137
import AngleRightIconSvg from "@/images/angle-right.svg";
3238
import ArrowDownSvg from "@/images/arrow-down.svg";
3339
import BarsIconSvg from "@/images/bars.svg";
3440
import ExternalLinkSvg from "@/images/external-link.svg";
35-
import GithubIconSvg from "@/images/github.svg";
36-
import LinkedInIconSvg from "@/images/linkedin.svg";
3741
import NewspaperIconSvg from "@/images/newspaper.svg";
3842
import SearchIconSvg from "@/images/search.svg";
39-
import SlackIconSvg from "@/images/slack.svg";
4043
import TimesIconSvg from "@/images/times.svg";
41-
import TwitterIconSvg from "@/images/twitter.svg";
42-
import YouTubeIconSvg from "@/images/youtube.svg";
44+
45+
// Images
46+
import { WorkshopNdcLondon } from "@/components/images/workshop-ndc-london";
4347

4448
// Logos
4549
import LogoTextSvg from "@/images/logo/chillicream-text.svg";
@@ -468,33 +472,33 @@ const DeveloperNavItem: FC<DeveloperNavItemProps> = ({ products, tools }) => {
468472
</IconContainer>
469473
Blog
470474
</SubNavLink>
471-
<SubNavLink to={tools.slack!} onClick={hideSubNav}>
475+
<SubNavLink to={tools.github!} onClick={hideSubNav}>
472476
<IconContainer size={20}>
473-
<SlackIconSvg />
477+
<Brand {...GithubIconSvg} />
474478
</IconContainer>
475-
Slack / Community
479+
GitHub
476480
</SubNavLink>
477-
<SubNavLink to={tools.twitter!} onClick={hideSubNav}>
481+
<SubNavLink to={tools.slack!} onClick={hideSubNav}>
478482
<IconContainer size={20}>
479-
<TwitterIconSvg />
483+
<Brand {...SlackIconSvg} />
480484
</IconContainer>
481-
Twitter
485+
Slack / Community
482486
</SubNavLink>
483487
<SubNavLink to={tools.youtube!} onClick={hideSubNav}>
484488
<IconContainer size={20}>
485-
<YouTubeIconSvg />
489+
<Brand {...YouTubeIconSvg} />
486490
</IconContainer>
487491
YouTube Channel
488492
</SubNavLink>
489-
<SubNavLink to={tools.github!} onClick={hideSubNav}>
493+
<SubNavLink to={tools.twitter!} onClick={hideSubNav}>
490494
<IconContainer size={20}>
491-
<GithubIconSvg />
495+
<Brand {...TwitterIconSvg} />
492496
</IconContainer>
493-
GitHub
497+
Twitter
494498
</SubNavLink>
495499
<SubNavLink to={tools.linkedIn!} onClick={hideSubNav}>
496500
<IconContainer size={20}>
497-
<LinkedInIconSvg />
501+
<Brand {...LinkedInIconSvg} />
498502
</IconContainer>
499503
LinkedIn
500504
</SubNavLink>
@@ -782,7 +786,7 @@ const SubNavSeparator = styled.div`
782786
background-color: ${THEME_COLORS.backgroundAlt};
783787
784788
@media only screen and ((min-width: 600px) and (min-height: 430px)) {
785-
margin: 5px 20px;
789+
margin: -5px 20px;
786790
}
787791
`;
788792

‎website/src/components/misc/artwork.tsx

-11
This file was deleted.

‎website/src/components/misc/company.tsx

-11
This file was deleted.

‎website/src/components/misc/logo.tsx

-7
This file was deleted.

‎website/src/components/misc/marketing-elements.tsx

+5-2
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,14 @@
11
import styled from "styled-components";
22

3+
import { Brand } from "@/components/sprites";
34
import { THEME_COLORS } from "@/shared-style";
45

6+
// Brands
7+
import SlackIconSvg from "@/images/brands/slack.svg";
8+
59
// Icons
610
import CheckIconSvg from "@/images/check.svg";
711
import EnvelopeIconSvg from "@/images/envelope.svg";
8-
import SlackIconSvg from "@/images/slack.svg";
912

1013
export const SectionRow = styled.div`
1114
display: flex;
@@ -130,7 +133,7 @@ export const EnvelopeIcon = styled(EnvelopeIconSvg)`
130133
}
131134
`;
132135

133-
export const SlackIcon = styled(SlackIconSvg)`
136+
export const SlackIcon = styled(Brand).attrs(SlackIconSvg)`
134137
width: 24px;
135138
height: 24px;
136139
vertical-align: middle;

‎website/src/components/sprites/index.tsx

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import React, { FC, SVGProps } from "react";
2+
3+
const Sprite: FC<SVGProps<SVGElement>> = ({ viewBox, id, className }) => (
4+
<svg viewBox={viewBox} className={className}>
5+
<use xlinkHref={`#${id}`} />
6+
</svg>
7+
);
8+
9+
export const Artwork = Sprite;
10+
export const Brand = Sprite;
11+
export const Company = Sprite;
12+
13+
export const Logo: FC<SVGProps<SVGElement>> = ({ viewBox, id, className }) => (
14+
<svg id="logo" viewBox={viewBox} className={className}>
15+
<use xlinkHref={`#${id}`} />
16+
</svg>
17+
);

‎website/src/components/widgets/companies-section.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import React, { FC } from "react";
22
import styled from "styled-components";
33

4-
import { Company } from "@/components/misc/company";
54
import { Link } from "@/components/misc/link";
65
import {
76
ContentContainer,
87
Section,
98
SectionRow,
109
SectionTitle,
1110
} from "@/components/misc/marketing-elements";
11+
import { Company } from "@/components/sprites";
1212
import { THEME_COLORS } from "@/shared-style";
1313

1414
// Logos

0 commit comments

Comments
 (0)