From 9ab15dddeeeb2e64a75c88cb328b04249280ee18 Mon Sep 17 00:00:00 2001 From: Kuizuo Date: Sat, 30 Dec 2023 09:38:38 +0800 Subject: [PATCH] feat: improve social logo --- docusaurus.config.ts | 5 +- src/components/SocialLinks/index.tsx | 96 +++++++++++++++---- src/components/SocialLinks/styles.module.scss | 25 +++-- src/css/custom.scss | 1 - .../HomepageHero/styles.module.scss | 3 - .../BlogPostGridItems/styles.module.scss | 3 - static/svg/juejin.svg | 3 - 7 files changed, 96 insertions(+), 40 deletions(-) delete mode 100644 static/svg/juejin.svg diff --git a/docusaurus.config.ts b/docusaurus.config.ts index f5e3a25e..f22388eb 100644 --- a/docusaurus.config.ts +++ b/docusaurus.config.ts @@ -171,8 +171,9 @@ const config: Config = { juejin: 'https://juejin.cn/user/1565318510545901', csdn: 'https://blog.csdn.net/kuizuo12', qq: 'https://wpa.qq.com/msgrd?v=3&uin=911993023&site=qq', - zhihu: 'https://www.zhihu.com/people/kuizuo', - cloudmusic: 'https://music.163.com/#/user/home?id=1333010742', + wx: 'https://img.kuizuo.cn/wechat.png', + // zhihu: 'https://www.zhihu.com/people/kuizuo', + // cloudmusic: 'https://music.163.com/#/user/home?id=1333010742', email: 'mailto:hi@kuizuo.cn', } satisfies Social, tableOfContents: { diff --git a/src/components/SocialLinks/index.tsx b/src/components/SocialLinks/index.tsx index 7cb3eb10..f274f018 100644 --- a/src/components/SocialLinks/index.tsx +++ b/src/components/SocialLinks/index.tsx @@ -2,7 +2,6 @@ import React from 'react' import { useThemeConfig } from '@docusaurus/theme-common' import { ThemeConfig } from '@docusaurus/preset-classic' import { Icon } from '@iconify/react' -import JuejinIcon from '@site/static/svg/juejin.svg' import styles from './styles.module.scss' @@ -18,16 +17,15 @@ export type Social = { email?: string } -function SocialLink({ - href, - icon, - title, - ...prop -}: { +interface Props { href: string title: string + color?: string icon: string | JSX.Element -}) { + [key: string]: unknown +} + +function SocialLink({ href, icon, title, color, ...prop }: Props) { return ( {typeof icon === 'string' ? : icon} @@ -40,18 +38,78 @@ export default function SocialLinks({ ...prop }) { const socials = themeConfig.socials + const map = { + github: { + href: socials.github, + title: 'GitHub', + icon: 'ri:github-line', + color: '#010409', + }, + juejin: { + href: socials.juejin, + title: '掘金', + icon: 'simple-icons:juejin', + color: '#1E81FF', + }, + twitter: { + href: socials.twitter, + title: 'Twitter', + icon: 'ri:twitter-line', + color: '#1da1f2', + }, + qq: { + href: socials.qq, + title: 'QQ', + icon: 'ri:qq-line', + color: '#1296db', + }, + wx: { + href: socials.wx, + title: '微信', + icon: 'ri:wechat-2-line', + color: '#07c160', + }, + zhihu: { + href: socials.zhihu, + title: '知乎', + icon: 'ri:zhihu-line', + color: '#1772F6', + }, + email: { + href: socials.email, + title: '邮箱', + icon: 'ri:mail-line', + color: '#D44638', + }, + cloudmusic: { + href: socials.cloudmusic, + title: '网易云', + icon: 'ri:netease-cloud-music-line', + color: '#C20C0C', + }, + rss: { + href: '/blog/rss.xml', + title: 'RSS', + icon: 'ri:rss-line', + color: '#FFA501', + }, + } + return ( -
- {socials.github && } - {socials.juejin && } />} - {socials.twitter && } - {socials.qq && } - {socials.zhihu && } - {socials.email && } - {socials.cloudmusic && ( - - )} - +
+ {Object.entries(map).map(([key, { href, icon, title, color }]) => { + if (!href) return <> + + return ( + + ) + })}
) } diff --git a/src/components/SocialLinks/styles.module.scss b/src/components/SocialLinks/styles.module.scss index 1f3ce7a3..05cb11b3 100644 --- a/src/components/SocialLinks/styles.module.scss +++ b/src/components/SocialLinks/styles.module.scss @@ -1,4 +1,4 @@ -.social__links { +.socialLinks { width: 100%; display: flex; align-items: center; @@ -11,17 +11,26 @@ a { display: inline-flex; - border: none; + box-sizing: content-box; width: 2rem; height: 2rem; align-items: center; justify-content: center; - border-radius: 50%; - line-height: 1; transition: all 0.3s ease-in-out; transition-property: all; transition-duration: 0.3s; transition-delay: 0s; + + border-radius: 50%; + padding: 0.25rem; + + &:hover { + background-color: var(--color); + + > svg path { + color: white; + } + } } .dropdown { @@ -42,11 +51,9 @@ } } -.social__links > *, -.social__links svg, -.social__links svg path { +.socialLinks svg, +.socialLinks svg path { width: 24px; height: 24px; - color: var(--ifm-color-primary); - fill: var(--ifm-color-primary); + transition: all 0.3s ease-in-out; } diff --git a/src/css/custom.scss b/src/css/custom.scss index 066b0e28..f244902a 100644 --- a/src/css/custom.scss +++ b/src/css/custom.scss @@ -12,7 +12,6 @@ --ifm-heading-font-family: ui-sans-serif, system-ui, -apple-system; --ifm-navbar-shadow: 0 4px 28px rgb(0 0 0 / 10%); - --text-color: #2b333e; --ifm-menu-color: #0d203a; diff --git a/src/pages/_components/HomepageHero/styles.module.scss b/src/pages/_components/HomepageHero/styles.module.scss index 94beff7f..65b7ad6f 100644 --- a/src/pages/_components/HomepageHero/styles.module.scss +++ b/src/pages/_components/HomepageHero/styles.module.scss @@ -32,9 +32,6 @@ .hero_text { font-size: calc(1.5em + 1.2vw); - - --x: 0; - --y: 0; } .name { diff --git a/src/theme/BlogPostGridItems/styles.module.scss b/src/theme/BlogPostGridItems/styles.module.scss index 2327e8c4..331b1b9e 100644 --- a/src/theme/BlogPostGridItems/styles.module.scss +++ b/src/theme/BlogPostGridItems/styles.module.scss @@ -21,9 +21,6 @@ border-radius: 6px; transition: all 0.3s; - --x: 0; - --y: 0; - &:hover { box-sizing: border-box; box-shadow: var(--blog-item-shadow); diff --git a/static/svg/juejin.svg b/static/svg/juejin.svg deleted file mode 100644 index 71ac8871..00000000 --- a/static/svg/juejin.svg +++ /dev/null @@ -1,3 +0,0 @@ - - -