diff --git a/components/Footer.tsx b/components/Footer.tsx index e927b79606..5d8a42fe7b 100644 --- a/components/Footer.tsx +++ b/components/Footer.tsx @@ -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' @@ -54,88 +48,7 @@ export function FooterImpl() {
- {config.twitter && ( - - - - )} - - {config.mastodon && ( - - - - )} - - {config.zhihu && ( - - - - )} - - {config.github && ( - - - - )} - - {config.linkedin && ( - - - - )} - - {config.newsletter && ( - - - - )} - - {config.youtube && ( - - - - )} +
) diff --git a/components/NotionPageHeader.tsx b/components/NotionPageHeader.tsx index 5fbb087ce3..36a6658c1f 100644 --- a/components/NotionPageHeader.tsx +++ b/components/NotionPageHeader.tsx @@ -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' diff --git a/components/PageActions.tsx b/components/PageActions.tsx index 755c60880c..e6ec96cf6b 100644 --- a/components/PageActions.tsx +++ b/components/PageActions.tsx @@ -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' diff --git a/components/PageSocial.module.css b/components/PageSocial.module.css index c82a8ee9a9..5761a0c720 100644 --- a/components/PageSocial.module.css +++ b/components/PageSocial.module.css @@ -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%; @@ -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; diff --git a/components/PageSocial.tsx b/components/PageSocial.tsx index 5301c06656..f232bb3529 100644 --- a/components/PageSocial.tsx +++ b/components/PageSocial.tsx @@ -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: ( - - - - ) + 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: ( - - - - ) + color: "#c9510c", + icon: FaGithub }, config.linkedin && { name: 'linkedin', href: `https://www.linkedin.com/in/${config.linkedin}`, title: `LinkedIn ${config.author}`, - icon: ( - - - - ) + color: "#0077b5", + icon: FaLinkedin }, config.newsletter && { name: 'newsletter', href: `${config.newsletter}`, title: `Newsletter ${config.author}`, - icon: ( - - - - ) + color: "#777", + icon: FaEnvelopeOpenText }, config.youtube && { name: 'youtube', href: `https://www.youtube.com/${config.youtube}`, title: `YouTube ${config.youtube}`, - icon: ( - - - - ) - } + color: "#ff0000", + icon: FaYoutube + }, ].filter(Boolean) export function PageSocial() { return ( -
+ <> +
+ {socialLinks.map((action) => ( + <> + +
+
+
+ +
{action.icon({ size: 24 })}
+ + + ))} +
+ + ) +} + +export function PageSocialButtons() { + return ( + <> {socialLinks.map((action) => ( -
-
-
- -
{action.icon}
+ {action.icon({ size: 32 })} ))} -
+ ) } diff --git a/components/styles.module.css b/components/styles.module.css index bea8ff1ed9..900c19bde7 100644 --- a/components/styles.module.css +++ b/components/styles.module.css @@ -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; diff --git a/package.json b/package.json index 11c066255e..f59569ad5a 100644 --- a/package.json +++ b/package.json @@ -33,7 +33,7 @@ "@fisch0920/use-dark-mode": "^2.4.0", "@keyvhq/core": "^1.6.9", "@keyvhq/redis": "^1.6.10", - "@react-icons/all-files": "^4.1.0", + "react-icons": "^5.3.0", "@vercel/og": "^0.6.3", "classnames": "^2.5.1", "date-fns": "^2.30.0", diff --git a/pages/_document.tsx b/pages/_document.tsx index 28cc023758..1b0f437ce3 100644 --- a/pages/_document.tsx +++ b/pages/_document.tsx @@ -1,5 +1,5 @@ -import { IconContext } from '@react-icons/all-files' import Document, { Head, Html, Main, NextScript } from 'next/document' +import { IconContext } from 'react-icons' export default class MyDocument extends Document { render() { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5f3290c0f8..5eea58c91e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -17,9 +17,6 @@ importers: '@keyvhq/redis': specifier: ^1.6.10 version: 1.6.28 - '@react-icons/all-files': - specifier: ^4.1.0 - version: 4.1.0(react@18.3.1) '@vercel/og': specifier: ^0.6.3 version: 0.6.3 @@ -74,6 +71,9 @@ importers: react-dom: specifier: ^18.2.0 version: 18.3.1(react@18.3.1) + react-icons: + specifier: ^5.3.0 + version: 5.3.0(react@18.3.1) react-notion-x: specifier: ^7.0.1 version: 7.0.1(@babel/runtime@7.26.0)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -388,11 +388,6 @@ packages: '@polka/url@1.0.0-next.28': resolution: {integrity: sha512-8LduaNlMZGwdZ6qWrKlfa+2M4gahzFkprZiAt2TF8uS0qQgBizKXpXURqvTJ4WtmupWxaLqjRb2UCTe72mu+Aw==} - '@react-icons/all-files@4.1.0': - resolution: {integrity: sha512-hxBI2UOuVaI3O/BhQfhtb4kcGn9ft12RWAFVMUeNjqqhLsHvFtzIkFaptBJpFDANTKoDfdVoHTKZDlwKCACbMQ==} - peerDependencies: - react: '*' - '@resvg/resvg-wasm@2.4.0': resolution: {integrity: sha512-C7c51Nn4yTxXFKvgh2txJFNweaVcfUPQxwEUFw4aWsCmfiBDJsTSwviIF8EcwjQ6k8bPyMWCl1vw4BdxE569Cg==} engines: {node: '>= 10'} @@ -1929,6 +1924,11 @@ packages: react: '>=16.8.1' react-dom: '>=16.8.1' + react-icons@5.3.0: + resolution: {integrity: sha512-DnUk8aFbTyQPSkCfF8dbX6kQjXA9DktMeJqfjrg6cK9vwQVMxmcA3BfP4QoiztVmEHtwlTgLFsPuH2NskKT6eg==} + peerDependencies: + react: '*' + react-image@4.1.0: resolution: {integrity: sha512-qwPNlelQe9Zy14K2pGWSwoL+vHsAwmJKS6gkotekDgRpcnRuzXNap00GfibD3eEPYu3WCPlyIUUNzcyHOrLHjw==} peerDependencies: @@ -2758,10 +2758,6 @@ snapshots: '@polka/url@1.0.0-next.28': {} - '@react-icons/all-files@4.1.0(react@18.3.1)': - dependencies: - react: 18.3.1 - '@resvg/resvg-wasm@2.4.0': {} '@rtsao/scc@1.1.0': {} @@ -3386,7 +3382,7 @@ snapshots: debug: 4.3.7 enhanced-resolve: 5.17.1 eslint: 8.57.1 - eslint-module-utils: 2.12.0(@typescript-eslint/parser@7.18.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1) + eslint-module-utils: 2.12.0(@typescript-eslint/parser@7.18.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@7.18.0(eslint@8.57.1)(typescript@5.6.3))(eslint-plugin-import@2.31.0)(eslint@8.57.1))(eslint@8.57.1) fast-glob: 3.3.2 get-tsconfig: 4.8.1 is-bun-module: 1.2.1 @@ -3399,7 +3395,7 @@ snapshots: - eslint-import-resolver-webpack - supports-color - eslint-module-utils@2.12.0(@typescript-eslint/parser@7.18.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1): + eslint-module-utils@2.12.0(@typescript-eslint/parser@7.18.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@7.18.0(eslint@8.57.1)(typescript@5.6.3))(eslint-plugin-import@2.31.0)(eslint@8.57.1))(eslint@8.57.1): dependencies: debug: 3.2.7 optionalDependencies: @@ -3421,7 +3417,7 @@ snapshots: doctrine: 2.1.0 eslint: 8.57.1 eslint-import-resolver-node: 0.3.9 - eslint-module-utils: 2.12.0(@typescript-eslint/parser@7.18.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1) + eslint-module-utils: 2.12.0(@typescript-eslint/parser@7.18.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@7.18.0(eslint@8.57.1)(typescript@5.6.3))(eslint-plugin-import@2.31.0)(eslint@8.57.1))(eslint@8.57.1) hasown: 2.0.2 is-core-module: 2.15.1 is-glob: 4.0.3 @@ -4452,6 +4448,10 @@ snapshots: react: 18.3.1 react-dom: 18.3.1(react@18.3.1) + react-icons@5.3.0(react@18.3.1): + dependencies: + react: 18.3.1 + react-image@4.1.0(@babel/runtime@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1): dependencies: '@babel/runtime': 7.26.0