Skip to content

Commit ad2d707

Browse files
gauravmmgauravmm
committed
Integrate side and footer icons.
1 parent a7e87e4 commit ad2d707

File tree

7 files changed

+116
-231
lines changed

7 files changed

+116
-231
lines changed

‎components/Footer.tsx

Lines changed: 19 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
11
import * as React from 'react'
22

3-
import { FaEnvelopeOpenText, FaGithub, FaLinkedin, FaMastodon, FaTwitter, FaYoutube, FaZhihu } from 'react-icons/fa'
43
import { IoMoonSharp, IoSunnyOutline } from 'react-icons/io5'
54

65
import * as config from '@/lib/config'
7-
import { DarkModeContext, useDarkMode } from '@/lib/use-dark-mode'
8-
6+
import { DarkModeContext } from '@/lib/use-dark-mode'
7+
import { socialLinks } from './PageSocial'
98
import styles from './styles.module.css'
9+
import { cs } from 'react-notion-x'
1010

11-
// TODO: merge the data and icons from PageSocial with the social links in Footer
1211

1312
export const FooterImpl: React.FC = () => {
1413
const [hasMounted, setHasMounted] = React.useState(false);
@@ -45,89 +44,29 @@ export const FooterImpl: React.FC = () => {
4544
)}
4645
</div>
4746

48-
<div className={styles.social}>
49-
{config.twitter && (
50-
<a
51-
className={styles.twitter}
52-
href={`https://twitter.com/${config.twitter}`}
53-
title={`Twitter @${config.twitter}`}
54-
target='_blank'
55-
rel='noopener noreferrer'
56-
>
57-
<FaTwitter />
58-
</a>
59-
)}
60-
61-
{config.mastodon && (
62-
<a
63-
className={styles.mastodon}
64-
href={config.mastodon}
65-
title={`Mastodon ${config.getMastodonHandle()}`}
66-
rel='me'
67-
>
68-
<FaMastodon />
69-
</a>
70-
)}
71-
72-
{config.zhihu && (
73-
<a
74-
className={styles.zhihu}
75-
href={`https://zhihu.com/people/${config.zhihu}`}
76-
title={`Zhihu @${config.zhihu}`}
77-
target='_blank'
78-
rel='noopener noreferrer'
79-
>
80-
<FaZhihu />
81-
</a>
82-
)}
83-
84-
{config.github && (
85-
<a
86-
className={styles.github}
87-
href={`https://github.com/${config.github}`}
88-
title={`GitHub @${config.github}`}
89-
target='_blank'
90-
rel='noopener noreferrer'
91-
>
92-
<FaGithub />
93-
</a>
94-
)}
47+
<style
48+
dangerouslySetInnerHTML={{
49+
__html: socialLinks.map((action) => (
50+
`.social-link-footer-${action.name} {}
51+
.social-link-footer-${action.name}:hover { color: ${action.color}; }
52+
`
53+
)).join('\n')
54+
}}
55+
/>
9556

96-
{config.linkedin && (
97-
<a
98-
className={styles.linkedin}
99-
href={`https://www.linkedin.com/in/${config.linkedin}`}
100-
title={`LinkedIn ${config.author}`}
101-
target='_blank'
102-
rel='noopener noreferrer'
103-
>
104-
<FaLinkedin />
105-
</a>
106-
)}
107-
108-
{config.newsletter && (
57+
<div className={styles.social}>
58+
{socialLinks.map((action) => (
10959
<a
110-
className={styles.newsletter}
111-
href={`${config.newsletter}`}
112-
title={`Newsletter ${config.author}`}
60+
className={cs(styles[action.name], `social-link-footer-${action.name}`)}
61+
href={action.href}
62+
title={action.title}
11363
target='_blank'
11464
rel='noopener noreferrer'
11565
>
116-
<FaEnvelopeOpenText />
66+
{action.icon({ size: 16 })}
11767
</a>
118-
)}
68+
))}
11969

120-
{config.youtube && (
121-
<a
122-
className={styles.youtube}
123-
href={`https://www.youtube.com/${config.youtube}`}
124-
title={`YouTube ${config.author}`}
125-
target='_blank'
126-
rel='noopener noreferrer'
127-
>
128-
<FaYoutube />
129-
</a>
130-
)}
13170
</div>
13271
</footer>
13372
)

‎components/PageSocial.module.css

Lines changed: 0 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -40,12 +40,6 @@
4040
align-items: center;
4141
}
4242

43-
.actionBg svg {
44-
width: 50%;
45-
height: 50%;
46-
fill: var(--fg-color-6);
47-
}
48-
4943
.actionBgPane {
5044
transition: all 300ms ease-out;
5145
border-radius: 50%;
@@ -63,71 +57,6 @@
6357
transition: all 100ms ease-out;
6458
}
6559

66-
.action:hover svg {
67-
transition: fill 100ms ease-out;
68-
fill: var(--bg-color);
69-
}
70-
71-
:global(.dark-mode) .action:hover svg {
72-
fill: var(--fg-color);
73-
}
74-
75-
.facebook .actionBgPane {
76-
background: #3b5998;
77-
}
78-
.facebook:hover {
79-
border-color: #3b5998;
80-
}
81-
82-
.twitter .actionBgPane {
83-
background: #2795e9;
84-
}
85-
.twitter:hover {
86-
border-color: #2795e9;
87-
}
88-
89-
.linkedin .actionBgPane {
90-
background: #0077b5;
91-
}
92-
.linkedin:hover {
93-
border-color: #0077b5;
94-
}
95-
96-
.github .actionBgPane {
97-
background: #c9510c;
98-
}
99-
.github:hover {
100-
border-color: #c9510c;
101-
}
102-
103-
.youtube .actionBgPane {
104-
background: #FF0000;
105-
}
106-
.youtube:hover {
107-
border-color: #FF0000;
108-
}
109-
110-
.medium .actionBgPane {
111-
background: #00ab6c;
112-
}
113-
.medium:hover {
114-
border-color: #00ab6c;
115-
}
116-
117-
.newsletter .actionBgPane {
118-
background: #777777;
119-
}
120-
.newsletter:hover {
121-
border-color: #777777;
122-
}
123-
124-
.email .actionBgPane {
125-
background: #777;
126-
}
127-
.email:hover {
128-
border-color: #777;
129-
}
130-
13160
@media only screen and (max-width: 768px) {
13261
.links {
13362
position: relative;

‎components/PageSocial.tsx

Lines changed: 83 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -5,90 +5,123 @@ import cs from 'classnames'
55
import * as config from '@/lib/config'
66

77
import styles from './PageSocial.module.css'
8+
import { FaGithub, FaLinkedin, FaTwitter, FaYoutube } from 'react-icons/fa'
9+
import { FaXTwitter, FaGitlab, FaEnvelopeOpenText } from 'react-icons/fa6'
10+
import { IoIosBug } from 'react-icons/io'
11+
12+
813

914
interface SocialLink {
10-
name: string
11-
title: string
12-
icon: React.ReactNode
13-
href?: string
14-
}
15+
name: string;
16+
title: string;
17+
icon: ({ size }: { size: number }) => React.ReactNode;
18+
color: string;
19+
href?: string;
20+
};
1521

16-
const socialLinks: SocialLink[] = [
22+
export const socialLinks: SocialLink[] = [
1723
config.twitter && {
1824
name: 'twitter',
1925
href: `https://twitter.com/${config.twitter}`,
2026
title: `Twitter @${config.twitter}`,
21-
icon: (
22-
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>
23-
<path d='M23.44 4.83c-.8.37-1.5.38-2.22.02.93-.56.98-.96 1.32-2.02-.88.52-1.86.9-2.9 1.1-.82-.88-2-1.43-3.3-1.43-2.5 0-4.55 2.04-4.55 4.54 0 .36.03.7.1 1.04-3.77-.2-7.12-2-9.36-4.75-.4.67-.6 1.45-.6 2.3 0 1.56.8 2.95 2 3.77-.74-.03-1.44-.23-2.05-.57v.06c0 2.2 1.56 4.03 3.64 4.44-.67.2-1.37.2-2.06.08.58 1.8 2.26 3.12 4.25 3.16C5.78 18.1 3.37 18.74 1 18.46c2 1.3 4.4 2.04 6.97 2.04 8.35 0 12.92-6.92 12.92-12.93 0-.2 0-.4-.02-.6.9-.63 1.96-1.22 2.56-2.14z' />
24-
</svg>
25-
)
27+
color: "#2795e9",
28+
icon: FaTwitter
29+
},
30+
31+
config.twitterX && {
32+
name: 'twitterX',
33+
href: `https://twitter.com/${config.twitterX}`,
34+
title: `X @${config.twitterX}`,
35+
color: "#222",
36+
icon: FaXTwitter
2637
},
2738

2839
config.github && {
2940
name: 'github',
3041
href: `https://github.com/${config.github}`,
3142
title: `GitHub @${config.github}`,
32-
icon: (
33-
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>
34-
<path d='M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22'></path>
35-
</svg>
36-
)
43+
color: "#c9510c",
44+
icon: FaGithub
45+
},
46+
47+
config.gitlab && {
48+
name: 'github',
49+
href: `https://github.com/${config.github}`,
50+
title: `GitLab @${config.github}`,
51+
color: "#e24329",
52+
icon: FaGitlab
3753
},
3854

3955
config.linkedin && {
4056
name: 'linkedin',
4157
href: `https://www.linkedin.com/in/${config.linkedin}`,
4258
title: `LinkedIn ${config.author}`,
43-
icon: (
44-
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>
45-
<path d='M6.5 21.5h-5v-13h5v13zM4 6.5C2.5 6.5 1.5 5.3 1.5 4s1-2.4 2.5-2.4c1.6 0 2.5 1 2.6 2.5 0 1.4-1 2.5-2.6 2.5zm11.5 6c-1 0-2 1-2 2v7h-5v-13h5V10s1.6-1.5 4-1.5c3 0 5 2.2 5 6.3v6.7h-5v-7c0-1-1-2-2-2z' />
46-
</svg>
47-
)
59+
color: "#0077b5",
60+
icon: FaLinkedin
4861
},
4962

5063
config.newsletter && {
5164
name: 'newsletter',
5265
href: `${config.newsletter}`,
5366
title: `Newsletter ${config.author}`,
54-
icon: (
55-
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>
56-
<path d='M12 .64L8.23 3H5V5L2.97 6.29C2.39 6.64 2 7.27 2 8V18C2 19.11 2.9 20 4 20H20C21.11 20 22 19.11 22 18V8C22 7.27 21.61 6.64 21.03 6.29L19 5V3H15.77M7 5H17V9.88L12 13L7 9.88M8 6V7.5H16V6M5 7.38V8.63L4 8M19 7.38L20 8L19 8.63M8 8.5V10H16V8.5Z' />
57-
</svg>
58-
)
67+
color: "#777",
68+
icon: FaEnvelopeOpenText
5969
},
6070

6171
config.youtube && {
6272
name: 'youtube',
6373
href: `https://www.youtube.com/${config.youtube}`,
6474
title: `YouTube ${config.youtube}`,
65-
icon: (
66-
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>
67-
<path d='M10,15L15.19,12L10,9V15M21.56,7.17C21.69,7.64 21.78,8.27 21.84,9.07C21.91,9.87 21.94,10.56 21.94,11.16L22,12C22,14.19 21.84,15.8 21.56,16.83C21.31,17.73 20.73,18.31 19.83,18.56C19.36,18.69 18.5,18.78 17.18,18.84C15.88,18.91 14.69,18.94 13.59,18.94L12,19C7.81,19 5.2,18.84 4.17,18.56C3.27,18.31 2.69,17.73 2.44,16.83C2.31,16.36 2.22,15.73 2.16,14.93C2.09,14.13 2.06,13.44 2.06,12.84L2,12C2,9.81 2.16,8.2 2.44,7.17C2.69,6.27 3.27,5.69 4.17,5.44C4.64,5.31 5.5,5.22 6.82,5.16C8.12,5.09 9.31,5.06 10.41,5.06L12,5C16.19,5 18.8,5.16 19.83,5.44C20.73,5.69 21.31,6.27 21.56,7.17Z' />
68-
</svg>
69-
)
75+
color: "#ff0000",
76+
icon: FaYoutube
77+
},
78+
79+
config.bugtracker && {
80+
name: 'bugtracker',
81+
href: `${config.bugtracker}`,
82+
title: `Bugtracker`,
83+
color: "#e24329",
84+
icon: IoIosBug
7085
}
7186
].filter(Boolean)
7287

73-
export const PageSocial: React.FC = () => {
88+
function generateCssFrag(prefix: string) {
89+
return socialLinks.map((action) => (
90+
`.social-link-${prefix}-${action.name} {}
91+
.social-link-${prefix}-${action.name}:hover {
92+
background: ${action.color};
93+
color: white;
94+
}
95+
`
96+
)).join('\n');
97+
}
98+
99+
export const PageSocial: React.FC = (prefix: string) => {
74100
return (
75-
<div className={styles.pageSocial}>
76-
{socialLinks.map((action) => (
77-
<a
78-
className={cs(styles.action, styles[action.name])}
79-
href={action.href}
80-
key={action.name}
81-
title={action.title}
82-
target='_blank'
83-
rel='noopener noreferrer'
84-
>
85-
<div className={styles.actionBg}>
86-
<div className={styles.actionBgPane} />
87-
</div>
88-
89-
<div className={styles.actionBg}>{action.icon}</div>
90-
</a>
91-
))}
92-
</div>
101+
<>
102+
<style
103+
dangerouslySetInnerHTML={{ __html: generateCssFrag("side") }}
104+
/>
105+
<div className={styles.pageSocial}>
106+
{socialLinks.map((action) => (
107+
<>
108+
<a
109+
className={cs(styles.action, styles[action.name], `social-link-side-${action.name}`)}
110+
href={action.href}
111+
key={action.name}
112+
title={action.title}
113+
target='_blank'
114+
rel='noopener noreferrer'
115+
>
116+
<div className={styles.actionBg}>
117+
<div className={styles.actionBgPane} />
118+
</div>
119+
120+
<div className={styles.actionBg}>{action.icon({ size: 24 })}</div>
121+
</a>
122+
</>
123+
))}
124+
</div>
125+
</>
93126
)
94127
}

0 commit comments

Comments
 (0)