refactor: home page

blog/program/第一个博客搭建之Vuepress.md

@@ -77,7 +77,6 @@ npm run build
 ---
 home: true
 heroText: 愧怍的个人空间
-tagline: 我是愧怍,沉迷于代码无法自拔
 ...
 ```
 

src/pages/_components/HomepageFeatures/index.tsx → data/features.tsx

@@ -1,87 +1,52 @@
-import React from 'react'
-import clsx from 'clsx'
-import Translate, { translate } from '@docusaurus/Translate'
-
-import styles from './styles.module.scss'
-
 import WebDeveloperSvg from '@site/static/svg/undraw_web_developer.svg'
 import OpenSourceSvg from '@site/static/svg/undraw_open_source.svg'
 import SpiderSvg from '@site/static/svg/undraw_spider.svg'
-import SectionTitle from '../SectionTitle'
+import Translate, { translate } from '@docusaurus/Translate'
 
-type FeatureItem = {
+export type FeatureItem = {
   title: string
+  text: JSX.Element
   Svg: React.ComponentType<React.ComponentProps<'svg'>>
-  description: JSX.Element
 }
 
-const FeatureList: FeatureItem[] = [
+const FEATURES: FeatureItem[] = [
   {
     title: translate({
       id: 'homepage.feature.developer',
       message: 'TypeScript 全栈工程师',
     }),
-    Svg: WebDeveloperSvg,
-    description: (
-      <>
+    text: (
+      <Translate>
         作为一名 TypeScript 全栈工程师，秉着能用 TS 绝不用 JS
         的原则，为项目提供类型安全的保障，提高代码质量和开发效率。
-      </>
+      </Translate>
     ),
+    Svg: WebDeveloperSvg,
   },
   {
     title: translate({
       id: 'homepage.feature.spider',
       message: '会点逆向 & 爬虫',
     }),
-    Svg: SpiderSvg,
-    description: (
-      <>
+    text: (
+      <Translate>
         作为一名曾学习与实践逆向工程两年半的开发者，对于逆向工程有着浓厚的兴趣，同时造就了超凡的阅读代码能力。没有看不懂的代码，只有不想看的代码。
-      </>
+      </Translate>
     ),
+    Svg: SpiderSvg,
   },
   {
     title: translate({
       id: 'homepage.feature.enthusiast',
       message: '开源爱好者',
     }),
-    Svg: OpenSourceSvg,
-    description: (
-      <>
+    text: (
+      <Translate>
         作为一名开源爱好者，积极参与开源社区，为开源项目贡献代码，希望有生之年能够构建出一个知名的开源项目。
-      </>
+      </Translate>
     ),
+    Svg: OpenSourceSvg,
   },
 ]
 
-function Feature({ title, Svg, description }: FeatureItem) {
-  return (
-    <div className={clsx('col', styles.feature)}>
-      <div className="text--center">
-        <Svg className={styles.featureSvg} role="img" />
-      </div>
-      <div className="text--left padding-horiz--md">
-        <h3>{title}</h3>
-        <p>{description}</p>
-      </div>
-    </div>
-  )
-}
-
-export default function HomepageFeatures(): JSX.Element {
-  return (
-    <section
-      className={clsx(styles.featureContainer, 'container padding-vert--sm')}
-    >
-      <SectionTitle icon={'ri:map-pin-user-line'}>
-        <Translate id="homepage.feature.title">个人特点</Translate>
-      </SectionTitle>
-      <div className={clsx('row', styles.features)}>
-        {FeatureList.map((props, idx) => (
-          <Feature key={idx} {...props} />
-        ))}
-      </div>
-    </section>
-  )
-}
+export default FEATURES

data/skills.tsx

@@ -0,0 +1,55 @@
+import { IconProps } from '@iconify/react'
+
+const SKILLS: IconProps[] = [
+  {
+    icon: 'logos:vue',
+    style: { left: '1%', top: '1%' },
+  },
+  {
+    icon: 'logos:nuxt-icon',
+    style: { left: '4%', top: '5%' },
+  },
+
+  {
+    icon: 'logos:react',
+    style: { right: '2%', top: '11%' },
+  },
+  {
+    icon: 'logos:nextjs-icon',
+    style: { right: '8%', top: '14%' },
+  },
+
+  {
+    icon: 'logos:javascript',
+    style: { top: '5%', left: '52%' },
+  },
+  {
+    icon: 'logos:typescript-icon',
+    style: { top: '9%', left: '58%' },
+  },
+
+  {
+    icon: 'logos:nodejs-icon-alt',
+    style: { top: '15%', left: '30%' },
+  },
+  {
+    icon: 'logos:nestjs',
+    style: { top: '20%', left: '38%' },
+  },
+
+  {
+    icon: 'logos:tailwindcss-icon',
+    style: { top: '30%', left: '70%' },
+  },
+
+  {
+    icon: 'logos:visual-studio-code',
+    style: { bottom: '25%', right: '5%' },
+  },
+  {
+    icon: 'logos:docusaurus',
+    style: { bottom: '1%', left: '1%' },
+  },
+]
+
+export default SKILLS

data/social.tsx

@@ -0,0 +1,82 @@
+export type Social = {
+  github?: string
+  twitter?: string
+  juejin?: string
+  csdn?: string
+  qq?: string
+  wx?: string
+  cloudmusic?: string
+  zhihu?: string
+  email?: string
+}
+
+const social: Social = {
+  github: 'https://github.com/kuizuo',
+  twitter: 'https://twitter.com/kuizuo',
+  juejin: 'https://juejin.cn/user/1565318510545901',
+  csdn: 'https://blog.csdn.net/kuizuo12',
+  qq: 'https://wpa.qq.com/msgrd?v=3&uin=911993023&site=qq',
+  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:[email protected]',
+}
+
+const SOCIAL = {
+  github: {
+    href: social.github,
+    title: 'GitHub',
+    icon: 'ri:github-line',
+    color: '#010409',
+  },
+  juejin: {
+    href: social.juejin,
+    title: '掘金',
+    icon: 'simple-icons:juejin',
+    color: '#1E81FF',
+  },
+  twitter: {
+    href: social.twitter,
+    title: 'Twitter',
+    icon: 'ri:twitter-line',
+    color: '#1da1f2',
+  },
+  qq: {
+    href: social.qq,
+    title: 'QQ',
+    icon: 'ri:qq-line',
+    color: '#1296db',
+  },
+  wx: {
+    href: social.wx,
+    title: '微信',
+    icon: 'ri:wechat-2-line',
+    color: '#07c160',
+  },
+  zhihu: {
+    href: social.zhihu,
+    title: '知乎',
+    icon: 'ri:zhihu-line',
+    color: '#1772F6',
+  },
+  email: {
+    href: social.email,
+    title: '邮箱',
+    icon: 'ri:mail-line',
+    color: '#D44638',
+  },
+  cloudmusic: {
+    href: social.cloudmusic,
+    title: '网易云',
+    icon: 'ri:netease-cloud-music-line',
+    color: '#C20C0C',
+  },
+  rss: {
+    href: '/blog/rss.xml',
+    title: 'RSS',
+    icon: 'ri:rss-line',
+    color: '#FFA501',
+  },
+}
+
+export default SOCIAL

docs/skill/docusaurus/config.md

@@ -14,13 +14,11 @@ authors: kuizuo
 ```typescript title='docusaurus.config.ts' icon='logos:docusaurus'
 const config: Config = {
   title: '愧怍的小站',
-  titleDelimiter: '-',
   url: 'https://kuizuo.cn',
   baseUrl: '/',
   favicon: 'img/favicon.ico',
   organizationName: 'kuizuo',
   projectName: 'blog',
-  tagline: '记录所学知识，领略编程之美',
   themeConfig: {
     image: 'img/logo.png',
     metadata: [

docusaurus.config.ts

@@ -15,7 +15,11 @@ const config: Config = {
   favicon: 'img/favicon.ico',
   organizationName: 'kuizuo',
   projectName: 'blog',
-  tagline: '道阻且长，行则将至',
+  customFields: {
+    bio: '道阻且长，行则将至',
+    description:
+      '是一个由愧怍创建的个人博客，主要分享编程开发知识和项目，该网站基于 React 驱动的静态网站生成器 Docusaurus 构建。',
+  },
   themeConfig: {
     // announcementBar: {
     //   id: 'announcementBar-3',
@@ -165,17 +169,6 @@ const config: Config = {
       theme: 'light',
       darkTheme: 'dark_dimmed',
     } satisfies Partial<GiscusConfig>,
-    socials: {
-      github: 'https://github.com/kuizuo',
-      twitter: 'https://twitter.com/kuizuo',
-      juejin: 'https://juejin.cn/user/1565318510545901',
-      csdn: 'https://blog.csdn.net/kuizuo12',
-      qq: 'https://wpa.qq.com/msgrd?v=3&amp;uin=911993023&amp;site=qq',
-      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:[email protected]',
-    } satisfies Social,
     tableOfContents: {
       minHeadingLevel: 2,
       maxHeadingLevel: 4,

src/components/SocialLinks/index.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { useThemeConfig } from '@docusaurus/theme-common'
 import { ThemeConfig } from '@docusaurus/preset-classic'
 import { Icon } from '@iconify/react'
-
+import social from '@site/data/social'
 import styles from './styles.module.scss'
 
 export type Social = {
@@ -34,70 +34,9 @@ function SocialLink({ href, icon, title, color, ...prop }: Props) {
 }
 
 export default function SocialLinks({ ...prop }) {
-  const themeConfig = useThemeConfig() as ThemeConfig & { socials: Social }
-
-  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.socialLinks} {...prop}>
-      {Object.entries(map).map(([key, { href, icon, title, color }]) => {
+      {Object.entries(social).map(([key, { href, icon, title, color }]) => {
         if (!href) return <></>
 
         return (

src/components/UserCard/index.tsx

@@ -22,8 +22,10 @@ type Count = {
 
 export default function UserCard({ isNavbar = false }: { isNavbar?: boolean }) {
   const {
-    siteConfig: { tagline },
+    siteConfig: { customFields },
   } = useDocusaurusContext()
+  const { bio } = customFields as { bio: string }
+
   const {
     navbar: { title, logo = { src: '' } },
   } = useThemeConfig()
@@ -56,7 +58,7 @@ export default function UserCard({ isNavbar = false }: { isNavbar?: boolean }) {
           {title}
         </Link>
       </div>
-      <div className={styles.description}>{tagline}</div>
+      <div className={styles.bio}>{bio}</div>
       <div className={styles.num}>
         <Link className={styles.numItem} href="/archive">
           <Icon icon="carbon:blog" width="20" height="20" />