feat: hero

Signed-off-by: Innei <i@innei.in>

src/app.config.ts

@@ -8,6 +8,36 @@ export const appConfig = {
  favicon: '/innei.svg',
  },
 
+ hero: {
+ title: {
+ template: [
+ {
+ type: 'h1',
+ text: '你好呀，我是',
+ class: 'font-light text-4xl',
+ },
+ {
+ type: 'h1',
+ text: 'Innei',
+ class: 'font-medium mx-2 text-4xl',
+ },
+ {
+ type: 'h1',
+ text: '👋。',
+ class: 'font-light text-4xl',
+ },
+ {
+ type: 'br',
+ },
+ {
+ type: 'h1',
+ text: '一个独立开发者',
+ class: 'font-light text-4xl',
+ },
+ ],
+ },
+ description: `一位深入研究编程领域的独立开发者，热衷于纯音乐、二次元文化和电子产品。持有强烈的创新精神，始终以用户体验为首要考虑，在技术开发中追求卓越。`,
+ },
  module: {
  donate: {
  enable: true,

src/app/(home)/page.tsx

@@ -1,12 +1,22 @@
 'use client'
 
-import { forwardRef } from 'react'
+import { createElement, forwardRef } from 'react'
+import clsx from 'clsx'
 import { m } from 'framer-motion'
 import type { PropsWithChildren } from 'react'
 
+import { BottomToUpTransitionView } from '~/components/ui/transition/BottomToUpTransitionView'
+import { SocialIcon } from '~/components/widgets/home/SocialIcon'
 import { softBouncePrest } from '~/constants/spring'
+import { useConfig } from '~/hooks/data/use-config'
+import { isDev } from '~/lib/env'
 import { clsxm } from '~/lib/helper'
+import { noopObj } from '~/lib/noop'
+import { useAggregationSelector } from '~/providers/root/aggregation-data-provider'
 
+const debugStyle = {
+ outline: '1px solid #0088cc',
+}
 const Screen = forwardRef<
  HTMLDivElement,
  PropsWithChildren<{
@@ -16,7 +26,11 @@ const Screen = forwardRef<
  return (
  <div
  ref={ref}
- className={clsxm('flex h-screen flex-col center', props.className)}
+ style={isDev ? debugStyle : undefined}
+ className={clsxm(
+ 'relative flex h-screen flex-col center',
+ props.className,
+ )}
  >
  {props.children}
  </div>
@@ -37,9 +51,7 @@ export default function Home() {
  <Welcome />
 
  <Screen>
- <h1>
- 在这个矩阵中，你可以找到各种各样的代码块，它们是我在计算机科学的探索和实践的证明。
- </h1>
+ <PostBlock />
  </Screen>
  <Screen>
  <h1>
@@ -61,17 +73,96 @@ export default function Home() {
 }
 
 const Welcome = () => {
+ const { title, description } = useConfig().hero
+ const siteOwner = useAggregationSelector((agg) => agg.user)
+ const { avatar, socialIds } = siteOwner || {}
  return (
  <Screen className="mt-[-4.5rem]">
- <div>
- <m.h1
- initial={{ opacity: 0.0001, y: 100 }}
+ <div className="flex h-full w-full flex-col flex-wrap items-center lg:flex-row">
+ <div className="flex h-1/2 w-full flex-col center lg:h-auto lg:w-1/2">
+ <div className="relative max-w-xl">
+ <m.div
+ className="relative leading-[4] [&_*]:inline-block"
+ initial={{ opacity: 0.0001, y: 50 }}
+ animate={{ opacity: 1, y: 0 }}
+ transition={softBouncePrest}
+ >
+ {title.template.map((t, i) => {
+ const { type } = t
+ return createElement(
+ type,
+ { key: i, className: t.class },
+ t.text,
+ )
+ })}
+ </m.div>
+
+ <BottomToUpTransitionView
+ delay={300}
+ transition={softBouncePrest}
+ className="my-3"
+ >
+ <span className="opacity-80">{description}</span>
+ </BottomToUpTransitionView>
+
+ <ul className="flex space-x-4 center lg:mt-[7rem] lg:block">
+ {Object.entries(socialIds || noopObj).map(
+ ([type, id]: any, index) => {
+ return (
+ <BottomToUpTransitionView
+ key={type}
+ delay={index * 100 + 500}
+ className="inline-block"
+ as="li"
+ >
+ <SocialIcon id={id} type={type} />
+ </BottomToUpTransitionView>
+ )
+ },
+ )}
+ </ul>
+ </div>
+ </div>
+
+ <div className="flex h-1/2 w-full center lg:h-full lg:w-1/2">
+ <img
+ src={avatar}
+ alt="Site Owner Avatar"
+ className={clsxm(
+ 'aspect-square rounded-full ring-1 ring-slate-200 dark:ring-neutral-800',
+ 'lg:h-[300px] lg:w-[300px]',
+ 'h-[200px] w-[200px]',
+ )}
+ />
+ </div>
+ </div>
+
+ <div
+ className={clsx(
+ 'absolute bottom-0 left-0 right-0 flex flex-col center',
+
+ 'text-neutral-800/80 center dark:text-neutral-200/80',
+ )}
+ >
+ <m.small
+ initial={{ opacity: 0.0001, y: 50 }}
  animate={{ opacity: 1, y: 0 }}
  transition={softBouncePrest}
  >
  欢迎，来到这个小小的宇宙，一个闪烁着光彩的星球，等待着你的探索。
- </m.h1>
+ </m.small>
+ <span className="mt-8 animate-bounce">
+ <i className="icon-[mingcute--right-line] rotate-90 text-2xl" />
+ </span>
  </div>
  </Screen>
  )
 }
+
+const PostBlock = () => {
+ return (
+ <h1>
+ 在这个矩阵中，你可以找到各种各样的代码块，它们是我在计算机科学的探索和实践的证明。
+ </h1>
+ )
+}

src/components/widgets/home/SocialIcon.tsx

@@ -0,0 +1,119 @@
+import { memo, useMemo } from 'react'
+
+import { MotionButtonBase } from '~/components/ui/button'
+import { FloatPopover } from '~/components/ui/float-popover'
+
+interface SocialIconProps {
+ type: string
+ id: string
+}
+
+const type2Copy = {
+ github: 'GitHub',
+ twitter: 'Twitter',
+ telegram: 'Telegram',
+ mail: 'Email',
+ rss: 'RSS',
+ email: 'Email',
+ feed: 'RSS',
+} as any
+export const SocialIcon = memo((props: SocialIconProps) => {
+ const { id, type } = props
+ const Icon = useMemo(() => {
+ switch (type) {
+ case 'github': {
+ return <i className="icon-[mingcute--github-line]" />
+ }
+ case 'twitter': {
+ return <i className="icon-[mingcute--twitter-line]" />
+ }
+
+ case 'telegram': {
+ return <i className="icon-[mingcute--telegram-line]" />
+ }
+ case 'mail':
+ case 'email': {
+ return <i className="icon-[mingcute--mail-line]" />
+ }
+ case 'rss':
+ case 'feed': {
+ return <i className="icon-[mingcute--rss-line]" />
+ }
+ }
+
+ return null
+ }, [type])
+ const href = useMemo(() => {
+ switch (type) {
+ case 'github': {
+ return `https://github.com/${id}`
+ }
+ case 'twitter': {
+ return `https://twitter.com/${id}`
+ }
+
+ case 'telegram': {
+ return `https://t.me/${id}`
+ }
+ case 'mail':
+ case 'email': {
+ return `mailto:${id}`
+ }
+ case 'rss':
+ case 'feed': {
+ return id
+ }
+ }
+ }, [id, type])
+
+ const iconBg = useMemo(() => {
+ switch (type) {
+ case 'github': {
+ return '#181717'
+ }
+ case 'twitter': {
+ return '#1DA1F2'
+ }
+
+ case 'telegram': {
+ return '#0088cc'
+ }
+ case 'mail':
+ case 'email': {
+ return '#D44638'
+ }
+ case 'rss':
+ case 'feed': {
+ return '#FFA500'
+ }
+ }
+ }, [type])
+
+ if (!Icon) return null
+
+ return (
+ <FloatPopover
+ type="tooltip"
+ TriggerComponent={() => (
+ <MotionButtonBase
+ className="flex aspect-square h-10 w-10 rounded-full text-2xl text-white center"
+ style={{
+ background: iconBg,
+ }}
+ >
+ <a
+ target="_blank"
+ href={href}
+ className="flex center"
+ rel="noreferrer"
+ >
+ {Icon}
+ </a>
+ </MotionButtonBase>
+ )}
+ >
+ {type2Copy[type] || ''}
+ </FloatPopover>
+ )
+})
+SocialIcon.displayName = 'SocialIcon'

src/styles/image-zoom.css

@@ -1,12 +1,12 @@
 /* image-zoom */
 .medium-zoom-overlay {
- z-index: 9;
+ z-index: 99;
 
  @apply !bg-slate-50 dark:!bg-neutral-900;
 }
 
 .medium-zoom-overlay + .medium-zoom-image {
- z-index: 10;
+ z-index: 100;
 }
 
 .medium-zoom-image {