From d03939d99af04dbb10038e87d02aca4ee449ea1a Mon Sep 17 00:00:00 2001
From: Innei <i@innei.in>
Date: Tue, 4 Jul 2023 23:02:52 +0800
Subject: [PATCH] feat: hero

Signed-off-by: Innei <i@innei.in>
---
 src/app.config.ts                          |  30 ++++++
 src/app/(home)/page.tsx                    | 109 +++++++++++++++++--
 src/components/widgets/home/SocialIcon.tsx | 119 +++++++++++++++++++++
 src/styles/image-zoom.css                  |   4 +-
 4 files changed, 251 insertions(+), 11 deletions(-)
 create mode 100644 src/components/widgets/home/SocialIcon.tsx

diff --git a/src/app.config.ts b/src/app.config.ts
index 87026db16b..366b349ccf 100644
--- a/src/app.config.ts
+++ b/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,
diff --git a/src/app/(home)/page.tsx b/src/app/(home)/page.tsx
index 427a13339d..8f6be236c7 100644
--- a/src/app/(home)/page.tsx
+++ b/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>
+  )
+}
diff --git a/src/components/widgets/home/SocialIcon.tsx b/src/components/widgets/home/SocialIcon.tsx
new file mode 100644
index 0000000000..0e1023ad3e
--- /dev/null
+++ b/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'
diff --git a/src/styles/image-zoom.css b/src/styles/image-zoom.css
index d61102a6c1..3ddfa22598 100644
--- a/src/styles/image-zoom.css
+++ b/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 {