Skip to content

Commit 8216b20

Browse files
onnimonnionnimonni
committed
Merge social icon refactoring from transitive-bullshit#648 
2 parents 003db38 + aa75868 commit 8216b20

12 files changed

+175
-309
lines changed

‎components/Footer.tsx

Lines changed: 37 additions & 125 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,15 @@
1-
import { FaEnvelopeOpenText } from '@react-icons/all-files/fa/FaEnvelopeOpenText'
2-
import { FaGithub } from '@react-icons/all-files/fa/FaGithub'
3-
import { FaLinkedin } from '@react-icons/all-files/fa/FaLinkedin'
4-
import { FaMastodon } from '@react-icons/all-files/fa/FaMastodon'
5-
import { FaTwitter } from '@react-icons/all-files/fa/FaTwitter'
6-
import { FaYoutube } from '@react-icons/all-files/fa/FaYoutube'
7-
import { FaZhihu } from '@react-icons/all-files/fa/FaZhihu'
8-
import { IoMoonSharp } from '@react-icons/all-files/io5/IoMoonSharp'
9-
import { IoSunnyOutline } from '@react-icons/all-files/io5/IoSunnyOutline'
101
import * as React from 'react'
2+
import cs from 'classnames'
3+
import { IoMoonSharp, IoSunnyOutline } from 'react-icons/io5'
114

125
import * as config from '@/lib/config'
136
import { useDarkMode } from '@/lib/use-dark-mode'
7+
import { PageSocialButtons } from './PageSocial'
148

159
import styles from './styles.module.css'
1610
import { StaticLogo } from './StaticLogo'
1711
import { footerLinks } from '@/lib/config'
1812
import { useNotionContext } from 'react-notion-x'
19-
import cs from 'classnames'
2013

2114
// TODO: merge the data and icons from PageSocial with the social links in Footer
2215

@@ -57,126 +50,45 @@ export function FooterImpl() {
5750
</a>
5851
)}
5952
</div>
60-
6153
<div className={styles.social}>
62-
{config.twitter && (
63-
<a
64-
className={styles.twitter}
65-
href={`https://twitter.com/${config.twitter}`}
66-
title={`Twitter @${config.twitter}`}
67-
target='_blank'
68-
rel='noopener noreferrer'
69-
>
70-
<FaTwitter />
71-
</a>
72-
)}
73-
74-
{config.mastodon && (
75-
<a
76-
className={styles.mastodon}
77-
href={config.mastodon}
78-
title={`Mastodon ${config.getMastodonHandle()}`}
79-
rel='me'
80-
>
81-
<FaMastodon />
82-
</a>
83-
)}
84-
85-
{config.zhihu && (
86-
<a
87-
className={styles.zhihu}
88-
href={`https://zhihu.com/people/${config.zhihu}`}
89-
title={`Zhihu @${config.zhihu}`}
90-
target='_blank'
91-
rel='noopener noreferrer'
92-
>
93-
<FaZhihu />
94-
</a>
95-
)}
96-
97-
{config.github && (
98-
<a
99-
className={styles.github}
100-
href={`https://github.com/${config.github}`}
101-
title={`GitHub @${config.github}`}
102-
target='_blank'
103-
rel='noopener noreferrer'
104-
>
105-
<FaGithub />
106-
</a>
107-
)}
108-
109-
{config.linkedin && (
110-
<a
111-
className={styles.linkedin}
112-
href={`https://www.linkedin.com/in/${config.linkedin}`}
113-
title={`LinkedIn ${config.author}`}
114-
target='_blank'
115-
rel='noopener noreferrer'
116-
>
117-
<FaLinkedin />
118-
</a>
119-
)}
120-
121-
{config.newsletter && (
122-
<a
123-
className={styles.newsletter}
124-
href={`${config.newsletter}`}
125-
title={`Newsletter ${config.author}`}
126-
target='_blank'
127-
rel='noopener noreferrer'
128-
>
129-
<FaEnvelopeOpenText />
130-
</a>
131-
)}
132-
133-
{config.youtube && (
134-
<a
135-
className={styles.youtube}
136-
href={`https://www.youtube.com/${config.youtube}`}
137-
title={`YouTube ${config.author}`}
138-
target='_blank'
139-
rel='noopener noreferrer'
140-
>
141-
<FaYoutube />
142-
</a>
143-
)}
54+
<PageSocialButtons iconSize={32} />
14455
</div>
14556
</div>
146-
<div className="SiteInfo">
147-
<div className={styles.siteInfoLinks}>
148-
{footerLinks
149-
?.map((link, index) => {
150-
if (!link.pageId && !link.url) {
151-
return null
152-
}
15357

154-
if (link.pageId) {
155-
return (
156-
<components.PageLink
157-
href={mapPageUrl(link.pageId)}
158-
key={index}
159-
className={cs(styles.navLink, 'breadcrumb', 'button')}
160-
>
161-
{link.title}
162-
</components.PageLink>
163-
)
164-
} else {
165-
return (
166-
<components.Link
167-
href={link.url}
168-
key={index}
169-
className={cs(styles.navLink, 'breadcrumb', 'button')}
170-
>
171-
{link.title}
172-
</components.Link>
173-
)
174-
}
175-
})
176-
.filter(Boolean)}
58+
<div className="SiteInfo">
59+
<div className={styles.siteInfoLinks}>
60+
{footerLinks
61+
?.map((link, index) => {
62+
if (!link.pageId && !link.url) {
63+
return null
64+
}
65+
66+
if (link.pageId) {
67+
return (
68+
<components.PageLink
69+
href={mapPageUrl(link.pageId)}
70+
key={index}
71+
className={cs(styles.navLink, 'breadcrumb', 'button')}
72+
>
73+
{link.title}
74+
</components.PageLink>
75+
)
76+
} else {
77+
return (
78+
<components.Link
79+
href={link.url}
80+
key={index}
81+
className={cs(styles.navLink, 'breadcrumb', 'button')}
82+
>
83+
{link.title}
84+
</components.Link>
85+
)
86+
}
87+
})
88+
.filter(Boolean)}
89+
</div>
90+
<div className={styles.copyright}>© Copyright {currentYear}. All rights reserved.</div>
17791
</div>
178-
<div className={styles.copyright}>© Copyright {currentYear}. All rights reserved.</div>
179-
</div>
18092
</footer>
18193
)
18294
}

‎components/NotionPageHeader.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import type * as types from 'notion-types'
2-
import { IoMoonSharp } from '@react-icons/all-files/io5/IoMoonSharp'
3-
import { IoSunnyOutline } from '@react-icons/all-files/io5/IoSunnyOutline'
42
import cs from 'classnames'
53
import * as React from 'react'
4+
import { IoMoonSharp, IoSunnyOutline } from 'react-icons/io5'
65
import { Breadcrumbs, Header, Search, useNotionContext } from 'react-notion-x'
76

87
import { isSearchEnabled, navigationLinks, navigationStyle } from '@/lib/config'

‎components/PageActions.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { AiOutlineRetweet } from '@react-icons/all-files/ai/AiOutlineRetweet'
2-
import { IoHeartOutline } from '@react-icons/all-files/io5/IoHeartOutline'
1+
import { AiOutlineRetweet } from 'react-icons/ai'
2+
import { IoHeartOutline } from 'react-icons/io5'
33

44
import styles from './styles.module.css'
55

‎components/PageSocial.module.css

Lines changed: 10 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,10 @@
66
color: var(--fg-color);
77
}
88

9-
.action {
9+
.pageSocial a {
1010
position: relative;
1111
border-radius: 50%;
1212
border: 2px solid var(--fg-color-6);
13-
transition: all 300ms ease-out;
1413
width: 3.5em;
1514
height: 3.5em;
1615
margin: 0 0 1em;
@@ -23,119 +22,32 @@
2322
cursor: pointer;
2423
}
2524

26-
.action:last-child {
27-
margin-bottom: 0;
25+
.pageSocial a:hover {
26+
border: 2px solid var(--hover-background);
2827
}
2928

30-
.actionBg {
31-
position: absolute;
32-
top: 0;
33-
left: 0;
34-
right: 0;
35-
bottom: 0;
36-
37-
display: flex;
38-
flex-direction: column;
39-
justify-content: center;
40-
align-items: center;
29+
.socialLink {
30+
transition: all 500ms ease-out;
4131
}
4232

43-
.actionBg svg {
44-
width: 50%;
45-
height: 50%;
46-
fill: var(--fg-color-6);
47-
}
48-
49-
.actionBgPane {
50-
transition: all 300ms ease-out;
33+
.socialLink:hover {
5134
border-radius: 50%;
52-
width: 0;
53-
height: 0;
35+
color: var(--hover-color);
36+
background: var(--hover-background);
5437
}
5538

56-
.action:hover {
57-
transition: all 100ms ease-out;
58-
}
59-
60-
.action:hover .actionBgPane {
61-
width: 100%;
62-
height: 100%;
63-
transition: all 100ms ease-out;
64-
}
65-
66-
.action:hover svg {
67-
transition: fill 100ms ease-out;
68-
fill: var(--bg-color);
69-
}
70-
71-
:global(.dark-mode) .action:hover svg {
39+
:global(.dark-mode) .socialLink:hover svg {
7240
fill: var(--fg-color);
7341
}
7442

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-
13143
@media only screen and (max-width: 768px) {
13244
.links {
13345
position: relative;
13446
left: 0.5em;
13547
flex-wrap: wrap;
13648
}
13749

138-
.action:last-child {
50+
.pageSocial a:last-child {
13951
margin-right: 1em;
14052
}
14153
}

0 commit comments

Comments
 (0)