feat: improve social logo

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: {

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 (
  <a href={href} target="_blank" {...prop} title={title}>
  {typeof icon === 'string' ? <Icon icon={icon} /> : 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 (
- <div className={styles.social__links} {...prop}>
- {socials.github && <SocialLink href={socials.github} title="gitub" icon="ri:github-line" />}
- {socials.juejin && <SocialLink href={socials.juejin} title="掘金" icon={<JuejinIcon />} />}
- {socials.twitter && <SocialLink href={socials.twitter} title="X" icon="ri:twitter-x-line" />}
- {socials.qq && <SocialLink href={socials.qq} title="QQ" icon="ri:qq-line" />}
- {socials.zhihu && <SocialLink href={socials.zhihu} title="知乎" icon="ri:zhihu-line" />}
- {socials.email && <SocialLink href={socials.email} title="Email" icon="ri:mail-line" />}
- {socials.cloudmusic && (
- <SocialLink href={socials.cloudmusic} title="Music" icon="ri:netease-cloud-music-line" />
- )}
- <SocialLink href="/blog/rss.xml" title="Rss" icon="ri:rss-line" />
+ <div className={styles.socialLinks} {...prop}>
+ {Object.entries(map).map(([key, { href, icon, title, color }]) => {
+ if (!href) return <></>
+
+ return (
+ <SocialLink
+ key={key}
+ href={href}
+ title={title}
+ icon={icon}
+ style={{ '--color': color }}
+ ></SocialLink>
+ )
+ })}
  </div>
  )
 }

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;
 }

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;
 

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 {

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);