From 8f23e247527b2ba72875a0c599c07bc2a614f134 Mon Sep 17 00:00:00 2001 From: Kuizuo Date: Thu, 4 Jan 2024 01:52:53 +0800 Subject: [PATCH] refactor: home page --- ...20\255\345\273\272\344\271\213Vuepress.md" | 1 - .../index.tsx => data/features.tsx | 69 ++++------------ data/skills.tsx | 55 +++++++++++++ data/social.tsx | 82 +++++++++++++++++++ docs/skill/docusaurus/config.md | 2 - docusaurus.config.ts | 17 ++-- src/components/SocialLinks/index.tsx | 65 +-------------- src/components/UserCard/index.tsx | 6 +- src/components/UserCard/styles.module.scss | 2 +- .../{HomepageBlog => BlogSection}/index.tsx | 49 +++++------ .../styles.module.scss | 0 .../_components/FeaturesSection/index.tsx | 36 ++++++++ .../styles.module.scss | 0 .../{HomepageHero => Hero}/img/hero_main.svg | 0 .../{HomepageHero => Hero}/index.tsx | 81 +++--------------- .../{HomepageHero => Hero}/styles.module.scss | 0 .../index.tsx | 8 +- .../styles.module.scss | 0 .../friends/_components/FriendCard/index.tsx | 6 +- src/pages/index.tsx | 32 +++++--- 20 files changed, 263 insertions(+), 248 deletions(-) rename src/pages/_components/HomepageFeatures/index.tsx => data/features.tsx (52%) create mode 100644 data/skills.tsx create mode 100644 data/social.tsx rename src/pages/_components/{HomepageBlog => BlogSection}/index.tsx (68%) rename src/pages/_components/{HomepageBlog => BlogSection}/styles.module.scss (100%) create mode 100644 src/pages/_components/FeaturesSection/index.tsx rename src/pages/_components/{HomepageFeatures => FeaturesSection}/styles.module.scss (100%) rename src/pages/_components/{HomepageHero => Hero}/img/hero_main.svg (100%) rename src/pages/_components/{HomepageHero => Hero}/index.tsx (72%) rename src/pages/_components/{HomepageHero => Hero}/styles.module.scss (100%) rename src/pages/_components/{HomepageProject => ProjectSection}/index.tsx (94%) rename src/pages/_components/{HomepageProject => ProjectSection}/styles.module.scss (100%) diff --git "a/blog/program/\347\254\254\344\270\200\344\270\252\345\215\232\345\256\242\346\220\255\345\273\272\344\271\213Vuepress.md" "b/blog/program/\347\254\254\344\270\200\344\270\252\345\215\232\345\256\242\346\220\255\345\273\272\344\271\213Vuepress.md" index aa784369..cd1c1b4e 100644 --- "a/blog/program/\347\254\254\344\270\200\344\270\252\345\215\232\345\256\242\346\220\255\345\273\272\344\271\213Vuepress.md" +++ "b/blog/program/\347\254\254\344\270\200\344\270\252\345\215\232\345\256\242\346\220\255\345\273\272\344\271\213Vuepress.md" @@ -77,7 +77,6 @@ npm run build --- home: true heroText: 愧怍的个人空间 -tagline: 我是愧怍,沉迷于代码无法自拔 ... ``` diff --git a/src/pages/_components/HomepageFeatures/index.tsx b/data/features.tsx similarity index 52% rename from src/pages/_components/HomepageFeatures/index.tsx rename to data/features.tsx index 2874806f..36817405 100644 --- a/src/pages/_components/HomepageFeatures/index.tsx +++ b/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> - description: JSX.Element } -const FeatureList: FeatureItem[] = [ +const FEATURES: FeatureItem[] = [ { title: translate({ id: 'homepage.feature.developer', message: 'TypeScript 全栈工程师', }), - Svg: WebDeveloperSvg, - description: ( - <> + text: ( + 作为一名 TypeScript 全栈工程师，秉着能用 TS 绝不用 JS 的原则，为项目提供类型安全的保障，提高代码质量和开发效率。 - + ), + Svg: WebDeveloperSvg, }, { title: translate({ id: 'homepage.feature.spider', message: '会点逆向 & 爬虫', }), - Svg: SpiderSvg, - description: ( - <> + text: ( + 作为一名曾学习与实践逆向工程两年半的开发者，对于逆向工程有着浓厚的兴趣，同时造就了超凡的阅读代码能力。没有看不懂的代码，只有不想看的代码。 - + ), + Svg: SpiderSvg, }, { title: translate({ id: 'homepage.feature.enthusiast', message: '开源爱好者', }), - Svg: OpenSourceSvg, - description: ( - <> + text: ( + 作为一名开源爱好者，积极参与开源社区，为开源项目贡献代码，希望有生之年能够构建出一个知名的开源项目。 - + ), + Svg: OpenSourceSvg, }, ] -function Feature({ title, Svg, description }: FeatureItem) { - return ( -
-
- -
-
-

{title}

-

{description}

-
-
- ) -} - -export default function HomepageFeatures(): JSX.Element { - return ( -
- - 个人特点 - -
- {FeatureList.map((props, idx) => ( - - ))} -
-
- ) -} +export default FEATURES diff --git a/data/skills.tsx b/data/skills.tsx new file mode 100644 index 00000000..594f17b7 --- /dev/null +++ b/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 diff --git a/data/social.tsx b/data/social.tsx new file mode 100644 index 00000000..ad80c84a --- /dev/null +++ b/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:hi@kuizuo.cn', +} + +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 diff --git a/docs/skill/docusaurus/config.md b/docs/skill/docusaurus/config.md index 2713ee59..e65d9f76 100644 --- a/docs/skill/docusaurus/config.md +++ b/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: [ diff --git a/docusaurus.config.ts b/docusaurus.config.ts index f22388eb..03366dd9 100644 --- a/docusaurus.config.ts +++ b/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, - 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&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:hi@kuizuo.cn', - } satisfies Social, tableOfContents: { minHeadingLevel: 2, maxHeadingLevel: 4, diff --git a/src/components/SocialLinks/index.tsx b/src/components/SocialLinks/index.tsx index f274f018..b18eb0ab 100644 --- a/src/components/SocialLinks/index.tsx +++ b/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 (
- {Object.entries(map).map(([key, { href, icon, title, color }]) => { + {Object.entries(social).map(([key, { href, icon, title, color }]) => { if (!href) return <> return ( diff --git a/src/components/UserCard/index.tsx b/src/components/UserCard/index.tsx index ff9a4fde..7bbf5dee 100644 --- a/src/components/UserCard/index.tsx +++ b/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}
-
{tagline}
+
{bio}
diff --git a/src/components/UserCard/styles.module.scss b/src/components/UserCard/styles.module.scss index 9b3e9c2f..b10e494b 100644 --- a/src/components/UserCard/styles.module.scss +++ b/src/components/UserCard/styles.module.scss @@ -42,7 +42,7 @@ margin: 0 auto; } -.description { +.bio { margin: 0.5rem auto; color: var(--ifm-secondary-text-color); font-size: 0.8rem; diff --git a/src/pages/_components/HomepageBlog/index.tsx b/src/pages/_components/BlogSection/index.tsx similarity index 68% rename from src/pages/_components/HomepageBlog/index.tsx rename to src/pages/_components/BlogSection/index.tsx index a9fd649e..fc48aab6 100644 --- a/src/pages/_components/HomepageBlog/index.tsx +++ b/src/pages/_components/BlogSection/index.tsx @@ -15,45 +15,46 @@ const chunk = (arr, size) => arr.slice(i * size, i * size + size), ) +const BLOG_POSTS_COUNT = 6 +const BLOG_POSTS_PER_ROW = 2 + export function BlogItem({ post }: { post: BlogPost }) { const { metadata: { permalink, frontMatter, title, description }, } = post return ( - <> - - {frontMatter.image && ( - - {title} - - )} -
-

- {title} -

-

{description}

-
- - + + {frontMatter.image && ( + + {title} + + )} +
+

+ {title} +

+

{description}

+
+ ) } -export default function BlogRecent(): JSX.Element { +export default function BlogSection(): JSX.Element { const blogData = usePluginData('docusaurus-plugin-content-blog') as { posts: BlogPost[] postNum: number tagNum: number } - const posts = chunk(blogData.posts.slice(0, 6), 2) + const posts = chunk(blogData.posts.slice(0, BLOG_POSTS_COUNT), BLOG_POSTS_PER_ROW) const ref = React.useRef(null) diff --git a/src/pages/_components/HomepageBlog/styles.module.scss b/src/pages/_components/BlogSection/styles.module.scss similarity index 100% rename from src/pages/_components/HomepageBlog/styles.module.scss rename to src/pages/_components/BlogSection/styles.module.scss diff --git a/src/pages/_components/FeaturesSection/index.tsx b/src/pages/_components/FeaturesSection/index.tsx new file mode 100644 index 00000000..ba757f25 --- /dev/null +++ b/src/pages/_components/FeaturesSection/index.tsx @@ -0,0 +1,36 @@ +import React from 'react' +import clsx from 'clsx' +import Translate from '@docusaurus/Translate' + +import styles from './styles.module.scss' +import features, { type FeatureItem } from '@site/data/features' +import SectionTitle from '../SectionTitle' + +function Feature({ title, Svg, text }: FeatureItem) { + return ( +
+
+ +
+
+

{title}

+

{text}

+
+
+ ) +} + +export default function FeaturesSection(): JSX.Element { + return ( +
+ + 个人特点 + +
+ {features.map((props, idx) => ( + + ))} +
+
+ ) +} diff --git a/src/pages/_components/HomepageFeatures/styles.module.scss b/src/pages/_components/FeaturesSection/styles.module.scss similarity index 100% rename from src/pages/_components/HomepageFeatures/styles.module.scss rename to src/pages/_components/FeaturesSection/styles.module.scss diff --git a/src/pages/_components/HomepageHero/img/hero_main.svg b/src/pages/_components/Hero/img/hero_main.svg similarity index 100% rename from src/pages/_components/HomepageHero/img/hero_main.svg rename to src/pages/_components/Hero/img/hero_main.svg diff --git a/src/pages/_components/HomepageHero/index.tsx b/src/pages/_components/Hero/index.tsx similarity index 72% rename from src/pages/_components/HomepageHero/index.tsx rename to src/pages/_components/Hero/index.tsx index faa2c2f8..e4b0f7cf 100644 --- a/src/pages/_components/HomepageHero/index.tsx +++ b/src/pages/_components/Hero/index.tsx @@ -7,8 +7,9 @@ import HeroMain from './img/hero_main.svg' import styles from './styles.module.scss' import SocialLinks from '@site/src/components/SocialLinks' +import skills from '@site/data/skills' -import { Icon, IconProps } from '@iconify/react' +import { Icon } from '@iconify/react' const variants: Variants = { visible: i => ({ @@ -25,7 +26,7 @@ const variants: Variants = { hidden: { opacity: 0, y: 30 }, } -function Logos() { +function Skills() { const { scrollYProgress } = useScroll() // 往下滚动 元素向上移动 @@ -38,61 +39,9 @@ function Logos() { clamp: false, }) - const logos: 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%' }, - }, - ] - return ( <> - {logos.map((l, index) => { + {skills.map((skill, index) => { const yValue = index % 2 === 0 ? y1 : y2 return ( @@ -105,12 +54,12 @@ function Logos() { delay: 0.5, }} style={{ - ...l.style, + ...skill.style, y: yValue, }} key={index} > - + ) })} @@ -118,16 +67,8 @@ function Logos() { ) } -function Background() { - return ( - <> - - - -
- - - ) +function Circle() { + return
} function Name() { @@ -188,7 +129,11 @@ export default function Hero() {
- + + + + + ) } diff --git a/src/pages/_components/HomepageHero/styles.module.scss b/src/pages/_components/Hero/styles.module.scss similarity index 100% rename from src/pages/_components/HomepageHero/styles.module.scss rename to src/pages/_components/Hero/styles.module.scss diff --git a/src/pages/_components/HomepageProject/index.tsx b/src/pages/_components/ProjectSection/index.tsx similarity index 94% rename from src/pages/_components/HomepageProject/index.tsx rename to src/pages/_components/ProjectSection/index.tsx index d94da9ab..b9206beb 100644 --- a/src/pages/_components/HomepageProject/index.tsx +++ b/src/pages/_components/ProjectSection/index.tsx @@ -15,7 +15,7 @@ import { } from 'framer-motion' import SectionTitle from '../SectionTitle' -const removeHttps = (url: string) => { +const removeHttp = (url: string) => { return url.replace(/(^\w+:|^)\/\//, '') } @@ -88,7 +88,7 @@ const Slider = ({ items }: { items: Project[] }) => { {item.title}

{item.title}

-

{removeHttps(item.website)}

+

{removeHttp(item.website)}

@@ -99,7 +99,7 @@ const Slider = ({ items }: { items: Project[] }) => { ) } -const HomepageProject = () => { +export default function ProjectSection() { return (
@@ -115,5 +115,3 @@ const HomepageProject = () => {
) } - -export default HomepageProject diff --git a/src/pages/_components/HomepageProject/styles.module.scss b/src/pages/_components/ProjectSection/styles.module.scss similarity index 100% rename from src/pages/_components/HomepageProject/styles.module.scss rename to src/pages/_components/ProjectSection/styles.module.scss diff --git a/src/pages/friends/_components/FriendCard/index.tsx b/src/pages/friends/_components/FriendCard/index.tsx index 518fe022..4ed3600b 100644 --- a/src/pages/friends/_components/FriendCard/index.tsx +++ b/src/pages/friends/_components/FriendCard/index.tsx @@ -8,11 +8,7 @@ import { type Friend } from '@site/data/friend' const FriendCard = memo(({ friend }: { friend: Friend }) => (
  • {friend.title} diff --git a/src/pages/index.tsx b/src/pages/index.tsx index b712ac14..449b0635 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,21 +1,27 @@ import React from 'react' import Layout from '@theme/Layout' -import HomepageHero from './_components/HomepageHero' -import HomepageBlog from './_components/HomepageBlog' -import HomepageFeatures from './_components/HomepageFeatures' -import HomepageProject from './_components/HomepageProject' +import Hero from './_components/Hero' +import BlogSection from './_components/BlogSection' +import FeaturesSection from './_components/FeaturesSection' +import HomepageProject from './_components/ProjectSection' +import useDocusaurusContext from '@docusaurus/useDocusaurusContext' + +export default function Home(): JSX.Element { + const { + siteConfig: { customFields, tagline }, + } = useDocusaurusContext() + const { description } = customFields as { description: string } -function Home() { return ( - - -
    - - - + +
    + +
    + + + +
    ) } - -export default Home