refactor: FeatureSection

data/features.tsx

@@ -1,12 +1,14 @@
-import WebDeveloperSvg from '@site/static/svg/undraw_web_developer.svg'
+import Translate, { translate } from '@docusaurus/Translate'
+import { Icon } from '@iconify/react/dist/iconify.js'
 import OpenSourceSvg from '@site/static/svg/undraw_open_source.svg'
 import SpiderSvg from '@site/static/svg/undraw_spider.svg'
-import Translate, { translate } from '@docusaurus/Translate'
+import WebDeveloperSvg from '@site/static/svg/undraw_web_developer.svg'
 
 export type FeatureItem = {
- title: string
- text: JSX.Element
- Svg: React.ComponentType<React.ComponentProps<'svg'>>
+ title: string | React.ReactNode
+ description: string | React.ReactNode
+ header: React.ReactNode
+ icon?: React.ReactNode
 }
 
 const FEATURES: FeatureItem[] = [
@@ -15,36 +17,37 @@ const FEATURES: FeatureItem[] = [
  id: 'homepage.feature.developer',
  message: 'TypeScript 全栈工程师',
  }),
- text: (
+ description: (
  <Translate>
  作为一名 TypeScript 全栈工程师，秉着能用 TS 绝不用 JS 的原则，为项目提供类型安全的保障，提高代码质量和开发效率。
  </Translate>
  ),
- Svg: WebDeveloperSvg,
+ header: <WebDeveloperSvg className={'h-[150px] w-full'} role="img" />,
+ icon: <Icon icon="logos:typescript-icon" className="h-4 w-4 text-neutral-500" />,
  },
  {
  title: translate({
  id: 'homepage.feature.spider',
  message: '会点逆向 & 爬虫',
  }),
- text: (
+ description: (
  <Translate>
  作为一名曾学习与实践逆向工程两年半的开发者，对于逆向工程有着浓厚的兴趣，同时造就了超凡的阅读代码能力。没有看不懂的代码，只有不想看的代码。
  </Translate>
  ),
- Svg: SpiderSvg,
+ header: <SpiderSvg className={'h-[150px] w-full'} role="img" />,
  },
  {
  title: translate({
  id: 'homepage.feature.enthusiast',
  message: '开源爱好者',
  }),
- text: (
+ description: (
  <Translate>
  作为一名开源爱好者，积极参与开源社区，为开源项目贡献代码，希望有生之年能够构建出一个知名的开源项目。
  </Translate>
  ),
- Svg: OpenSourceSvg,
+ header: <OpenSourceSvg className={'h-[150px] w-full'} role="img" />,
  },
 ]
 

package.json

@@ -50,6 +50,7 @@
  "raw-loader": "^4.0.2",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
+ "react-github-calendar": "^4.1.5",
  "react-icon-cloud": "^4.1.4",
  "react-popper": "^2.3.0",
  "tailwind-merge": "^2.3.0",

src/components/landing/FeaturesSection/Github.tsx

@@ -1,19 +1,33 @@
 import Translate from '@docusaurus/Translate'
+import GitHubCalendar from 'react-github-calendar'
 
+import { useColorMode } from '@docusaurus/theme-common'
 import { Icon } from '@iconify/react'
 
-export default function Skill({ className }: { className?: string }) {
+interface GithubProps {
+ className?: string
+}
+
+export default function Github({ className }: GithubProps) {
+ const { isDarkTheme } = useColorMode()
+
+ const githubStatsUrl = (type: 'overview' | 'languages') =>
+ `https://raw.githubusercontent.com/kuizuo/github-stats/master/generated/${type}.svg#gh-${
+ isDarkTheme ? 'dark' : 'light'
+ }-mode-only`
+
  return (
  <div className={className}>
- <h2 className="mb-2 flex items-center gap-1 text-base">
+ <h2 className="mb-2 flex items-center gap-1 px-4 text-base">
  <Icon icon="ri:github-line" />
  <Translate id="homepage.feature.github.title">Github</Translate>
  </h2>
- <div className="relative flex w-full items-center justify-center overflow-hidden bg-background p-4">
- <img
- src="https://metrics.lecoq.io/kuizuo?template=classic&base=header%2C%20activity%2C%20community%2C%20repositories%2C%20metadata&base.indepth=false&base.hireable=false&base.skip=false&config.timezone=Asia%2FShanghai"
- alt="kuizuo's Github chart"
- />
+ <div className="relative flex w-full flex-col items-center justify-center overflow-hidden bg-background">
+ <div className="mb-4 flex w-full justify-between gap-4 px-4">
+ <img src={githubStatsUrl('overview')} alt="GitHub Overview Stats" />
+ <img src={githubStatsUrl('languages')} alt="GitHub Languages Stats" />
+ </div>
+ <GitHubCalendar username="kuizuo" blockSize={11} colorScheme={isDarkTheme ? 'dark' : 'light'} />
  </div>
  </div>
  )

src/components/landing/FeaturesSection/index.tsx

@@ -1,39 +1,29 @@
 import Translate from '@docusaurus/Translate'
-import features, { type FeatureItem } from '@site/data/features'
-import { cn } from '@site/src/lib/utils'
+import features from '@site/data/features'
+import { BentoGrid, BentoGridItem } from '../../magicui/bento-grid'
 import { Section } from '../Section'
 import Github from './Github'
 import Skill from './Skill'
 
-function Feature({ title, Svg, text }: FeatureItem) {
- return (
- <div
- className={cn(
- 'relative flex w-full flex-col gap-2 rounded-md bg-transparent p-0 transition-all duration-300 ease-linear',
- )}
- >
- <div className="text-center">
- <Svg className={'h-[150px] w-full'} role="img" />
- </div>
- <div className="py-4 text-left">
- <h3>{title}</h3>
- <p>{text}</p>
- </div>
- </div>
- )
-}
-
 export default function FeaturesSection() {
  return (
  <Section title={<Translate id="homepage.feature.title">个人特点</Translate>} icon={'ri:map-pin-user-line'}>
- <div className="flex w-full flex-col justify-center gap-4 md:flex-row max-lg:px-4">
- {features.map((props, idx) => (
- <Feature key={idx} {...props} />
+ <BentoGrid className="mx-auto w-full">
+ {features.map((item, i) => (
+ <BentoGridItem
+ key={i}
+ title={item.title}
+ description={item.description}
+ header={item.header}
+ icon={item.icon}
+ className={i === 3 || i === 6 ? 'md:col-span-2' : ''}
+ />
  ))}
- </div>
- <div className="flex w-full flex-col justify-center gap-4 md:grid md:grid-cols-6 md:grid-rows-2 max-md:px-4">
+ </BentoGrid>
+
+ <div className="mt-4 grid grid-cols-1 justify-center gap-4 md:grid-cols-6 md:grid-rows-2 max-md:px-4">
  <Skill className="md:col-span-2 md:row-span-2" />
- <Github className="h-full md:col-span-3 md:row-span-2" />
+ <Github className="h-full md:col-span-4 md:row-span-2" />
  </div>
  </Section>
  )

src/components/magicui/bento-grid.tsx

@@ -0,0 +1,47 @@
+import { cn } from '@site/src/lib/utils'
+
+export const BentoGrid = ({
+ className,
+ children,
+}: {
+ className?: string
+ children?: React.ReactNode
+}) => {
+ return (
+ <div className={cn('mx-auto grid max-w-7xl grid-cols-1 gap-4 md:auto-rows-[20rem] md:grid-cols-3', className)}>
+ {children}
+ </div>
+ )
+}
+
+export const BentoGridItem = ({
+ className,
+ title,
+ description,
+ header,
+ icon,
+}: {
+ className?: string
+ title?: string | React.ReactNode
+ description?: string | React.ReactNode
+ header?: React.ReactNode
+ icon?: React.ReactNode
+}) => {
+ return (
+ <div
+ className={cn(
+ 'group/bento row-span-1 flex flex-col justify-between space-y-4 rounded-xl border border-transparent bg-background p-4 shadow-input transition duration-200 dark:border-white/[0.2] dark:shadow-none',
+ className,
+ )}
+ >
+ {header}
+ <div className="transition duration-200 group-hover/bento:translate-x-2">
+ <div className="mt-3 mb-3 inline-flex items-center gap-2">
+ {icon}
+ <div className="font-bold font-sans text-lg text-neutral-600 dark:text-neutral-200">{title}</div>
+ </div>
+ <div className="font-normal font-sans text-neutral-600 text-sm dark:text-neutral-300">{description}</div>
+ </div>
+ </div>
+ )
+}