Skip to content
Open
95 changes: 4 additions & 91 deletions components/Footer.tsx
Original file line number Diff line number Diff line change
@@ -1,16 +1,10 @@
import { FaEnvelopeOpenText } from '@react-icons/all-files/fa/FaEnvelopeOpenText'
import { FaGithub } from '@react-icons/all-files/fa/FaGithub'
import { FaLinkedin } from '@react-icons/all-files/fa/FaLinkedin'
import { FaMastodon } from '@react-icons/all-files/fa/FaMastodon'
import { FaTwitter } from '@react-icons/all-files/fa/FaTwitter'
import { FaYoutube } from '@react-icons/all-files/fa/FaYoutube'
import { FaZhihu } from '@react-icons/all-files/fa/FaZhihu'
import { IoMoonSharp } from '@react-icons/all-files/io5/IoMoonSharp'
import { IoSunnyOutline } from '@react-icons/all-files/io5/IoSunnyOutline'
import * as React from 'react'
import cs from 'classnames'
import { IoMoonSharp, IoSunnyOutline } from 'react-icons/io5'

import * as config from '@/lib/config'
import { useDarkMode } from '@/lib/use-dark-mode'
import { PageSocialButtons } from './PageSocial'

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

Expand Down Expand Up @@ -54,88 +48,7 @@ export function FooterImpl() {
</div>

<div className={styles.social}>
{config.twitter && (
<a
className={styles.twitter}
href={`https://twitter.com/${config.twitter}`}
title={`Twitter @${config.twitter}`}
target='_blank'
rel='noopener noreferrer'
>
<FaTwitter />
</a>
)}

{config.mastodon && (
<a
className={styles.mastodon}
href={config.mastodon}
title={`Mastodon ${config.getMastodonHandle()}`}
rel='me'
>
<FaMastodon />
</a>
)}

{config.zhihu && (
<a
className={styles.zhihu}
href={`https://zhihu.com/people/${config.zhihu}`}
title={`Zhihu @${config.zhihu}`}
target='_blank'
rel='noopener noreferrer'
>
<FaZhihu />
</a>
)}

{config.github && (
<a
className={styles.github}
href={`https://github.com/${config.github}`}
title={`GitHub @${config.github}`}
target='_blank'
rel='noopener noreferrer'
>
<FaGithub />
</a>
)}

{config.linkedin && (
<a
className={styles.linkedin}
href={`https://www.linkedin.com/in/${config.linkedin}`}
title={`LinkedIn ${config.author}`}
target='_blank'
rel='noopener noreferrer'
>
<FaLinkedin />
</a>
)}

{config.newsletter && (
<a
className={styles.newsletter}
href={`${config.newsletter}`}
title={`Newsletter ${config.author}`}
target='_blank'
rel='noopener noreferrer'
>
<FaEnvelopeOpenText />
</a>
)}

{config.youtube && (
<a
className={styles.youtube}
href={`https://www.youtube.com/${config.youtube}`}
title={`YouTube ${config.author}`}
target='_blank'
rel='noopener noreferrer'
>
<FaYoutube />
</a>
)}
<PageSocialButtons />
</div>
</footer>
)
Expand Down
3 changes: 1 addition & 2 deletions components/NotionPageHeader.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
import type * as types from 'notion-types'
import { IoMoonSharp } from '@react-icons/all-files/io5/IoMoonSharp'
import { IoSunnyOutline } from '@react-icons/all-files/io5/IoSunnyOutline'
import cs from 'classnames'
import * as React from 'react'
import { IoMoonSharp, IoSunnyOutline } from 'react-icons/io5'
import { Breadcrumbs, Header, Search, useNotionContext } from 'react-notion-x'

import { isSearchEnabled, navigationLinks, navigationStyle } from '@/lib/config'
Expand Down
4 changes: 2 additions & 2 deletions components/PageActions.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { AiOutlineRetweet } from '@react-icons/all-files/ai/AiOutlineRetweet'
import { IoHeartOutline } from '@react-icons/all-files/io5/IoHeartOutline'
import { AiOutlineRetweet } from 'react-icons/ai'
import { IoHeartOutline } from 'react-icons/io5'

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

Expand Down
69 changes: 13 additions & 56 deletions components/PageSocial.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,19 @@
color: var(--fg-color);
}

.socialLink:hover {
color: var(--hover-color);
}

.pageSocial .actionBgPane {
background: var(--hover-color);
}

.pageSocial .socialLink:hover {
color: var(--fg-color);
border-color: var(--hover-color);;
}

.action {
position: relative;
border-radius: 50%;
Expand Down Expand Up @@ -72,62 +85,6 @@
fill: var(--fg-color);
}

.facebook .actionBgPane {
background: #3b5998;
}
.facebook:hover {
border-color: #3b5998;
}

.twitter .actionBgPane {
background: #2795e9;
}
.twitter:hover {
border-color: #2795e9;
}

.linkedin .actionBgPane {
background: #0077b5;
}
.linkedin:hover {
border-color: #0077b5;
}

.github .actionBgPane {
background: #c9510c;
}
.github:hover {
border-color: #c9510c;
}

.youtube .actionBgPane {
background: #ff0000;
}
.youtube:hover {
border-color: #ff0000;
}

.medium .actionBgPane {
background: #00ab6c;
}
.medium:hover {
border-color: #00ab6c;
}

.newsletter .actionBgPane {
background: #777777;
}
.newsletter:hover {
border-color: #777777;
}

.email .actionBgPane {
background: #777;
}
.email:hover {
border-color: #777;
}

@media only screen and (max-width: 768px) {
.links {
position: relative;
Expand Down
95 changes: 58 additions & 37 deletions components/PageSocial.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,90 +4,111 @@ import cs from 'classnames'
import * as config from '@/lib/config'

import styles from './PageSocial.module.css'
import { FaGithub, FaLinkedin, FaTwitter, FaYoutube } from 'react-icons/fa'
import { FaEnvelopeOpenText } from 'react-icons/fa6'

interface SocialLink {
name: string
title: string
icon: React.ReactNode
icon: ({ size }: { size: number }) => React.ReactNode
color: string
href?: string
}

const socialLinks: SocialLink[] = [
export const socialLinks: SocialLink[] = [
config.twitter && {
name: 'twitter',
href: `https://twitter.com/${config.twitter}`,
title: `Twitter @${config.twitter}`,
icon: (
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>
<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' />
</svg>
)
color: "#2795e9",
icon: FaTwitter
},

config.mastodon && {
name: 'mastodon',
href: config.mastodon,
title: 'Mastodon',
color: "#5a4be1",
icon: FaMastodon
},

config.github && {
name: 'github',
href: `https://github.com/${config.github}`,
title: `GitHub @${config.github}`,
icon: (
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>
<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>
</svg>
)
color: "#c9510c",
icon: FaGithub
},

config.linkedin && {
name: 'linkedin',
href: `https://www.linkedin.com/in/${config.linkedin}`,
title: `LinkedIn ${config.author}`,
icon: (
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>
<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' />
</svg>
)
color: "#0077b5",
icon: FaLinkedin
},

config.newsletter && {
name: 'newsletter',
href: `${config.newsletter}`,
title: `Newsletter ${config.author}`,
icon: (
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>
<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' />
</svg>
)
color: "#777",
icon: FaEnvelopeOpenText
},

config.youtube && {
name: 'youtube',
href: `https://www.youtube.com/${config.youtube}`,
title: `YouTube ${config.youtube}`,
icon: (
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>
<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' />
</svg>
)
}
color: "#ff0000",
icon: FaYoutube
},
].filter(Boolean)

export function PageSocial() {
return (
<div className={styles.pageSocial}>
<>
<div className={styles.pageSocial}>
{socialLinks.map((action) => (
<>
<a
key={action.name}
style={{ '--hover-color': action.color } as React.CSSProperties}
className={cs(styles.action, styles[action.name], styles.socialLink)}
href={action.href}
title={action.title}
target='_blank'
rel='noopener noreferrer'
>
<div className={styles.actionBg}>
<div className={styles.actionBgPane} />
</div>

<div className={styles.actionBg}>{action.icon({ size: 24 })}</div>
</a>
</>
))}
</div>
</>
)
}

export function PageSocialButtons() {
return (
<>
{socialLinks.map((action) => (
<a
className={cs(styles.action, styles[action.name])}
href={action.href}
key={action.name}
style={{ '--hover-color': action.color } as React.CSSProperties}
className={cs(styles[action.name], styles.socialLink)}
href={action.href}
title={action.title}
target='_blank'
rel='noopener noreferrer'
>
<div className={styles.actionBg}>
<div className={styles.actionBgPane} />
</div>

<div className={styles.actionBg}>{action.icon}</div>
{action.icon({ size: 32 })}
</a>
))}
</div>
</>
)
}
28 changes: 0 additions & 28 deletions components/styles.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -90,34 +90,6 @@
color: #2795e9;
}

.twitter:hover {
color: #2795e9;
}

.mastodon:hover {
color: #5a4be1;
}

.zhihu:hover {
color: #0066ff;
}

.github:hover {
color: #c9510c;
}

.youtube:hover {
color: #ff0000;
}

.linkedin:hover {
color: #0077b5;
}

.newsletter:hover {
color: #777777;
}

.comments {
width: 100%;
margin-top: 2em;
Expand Down
Loading