feat: home page redesign

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

src/app/(app)/(home)/components/ActivityCard.tsx

@@ -0,0 +1,157 @@
+'use client'
+
+import React, { useMemo } from 'react'
+import clsx from 'clsx'
+import Link from 'next/link'
+import RemoveMarkdown from 'remove-markdown'
+import type { ReactActivityType } from './types'
+
+import {
+ FaSolidFeatherAlt,
+ IcTwotoneSignpost,
+ MdiLightbulbOn20,
+} from '~/components/icons/menu-collection'
+import { routeBuilder, Routes } from '~/lib/route-builder'
+import { useAggregationSelector } from '~/providers/root/aggregation-data-provider'
+
+export const iconClassName =
+ 'rounded-full border shrink-0 border-accent/30 text-xs center inline-flex size-6 text-accent'
+
+export const ActivityCard = ({ activity }: { activity: ReactActivityType }) => {
+ const siteOwner = useAggregationSelector((state) => state.user)
+ const Content = useMemo(() => {
+ switch (activity.bizType) {
+ case 'comment': {
+ return (
+ <div className="relative flex flex-col justify-center gap-2">
+ <div
+ className={clsx(
+ 'absolute left-0 top-1/2 -translate-y-1/4',
+ iconClassName,
+ )}
+ >
+ <i className="icon-[mingcute--comment-line]" />
+ </div>
+ <div className="flex items-center gap-2 pl-8">
+ <div className="space-x-2">
+ {activity.avatar && (
+ <img
+ src={activity.avatar}
+ className="inline size-[16px] rounded-full ring-2 ring-slate-200 dark:ring-zinc-800"
+ />
+ )}
+ <span className="font-medium">{activity.author}</span>{' '}
+ <small>在</small>{' '}
+ <Link
+ className="shiro-link--underline"
+ href={
+ activity.slug
+ ? `/posts/${activity.slug}`
+ : `/notes/${activity.nid}`
+ }
+ >
+ <b>{activity.title}</b>
+ </Link>{' '}
+ <small>说：</small>
+ </div>
+ </div>
+ <div className="flex pl-8">
+ <div
+ className={clsx(
+ 'relative inline-block rounded-xl p-3 text-zinc-800 dark:text-zinc-200',
+ 'rounded-tl-sm bg-zinc-600/5 dark:bg-zinc-500/20',
+ 'max-w-full overflow-auto',
+ )}
+ >
+ {RemoveMarkdown(activity.text)}
+ </div>
+ </div>
+ </div>
+ )
+ }
+ case 'note': {
+ return (
+ <div className="flex translate-y-1/4 gap-2">
+ <div className={clsx(iconClassName)}>
+ <FaSolidFeatherAlt />
+ </div>
+ <div className="space-x-2">
+ <small>发布了</small>{' '}
+ <Link href={routeBuilder(Routes.Note, { id: activity.nid })}>
+ <b>{activity.title}</b>
+ </Link>
+ </div>
+ </div>
+ )
+ }
+ case 'post': {
+ return (
+ <div className="flex translate-y-1/4 gap-2">
+ <div className={clsx(iconClassName)}>
+ <IcTwotoneSignpost />
+ </div>
+ <div className="space-x-2">
+ <small>发布了</small>{' '}
+ <Link href={`/posts/${activity.slug}`}>
+ <b>{activity.title}</b>
+ </Link>
+ </div>
+ </div>
+ )
+ }
+ case 'recent': {
+ return (
+ <div className="relative flex flex-col justify-center gap-2">
+ <div
+ className={clsx(
+ 'absolute left-0 top-1/2 -translate-y-1/4',
+ iconClassName,
+ )}
+ >
+ <MdiLightbulbOn20 />
+ </div>
+
+ <div className="flex gap-2 pl-8">
+ <img
+ src={siteOwner?.avatar}
+ className="mt-4 hidden size-6 rounded-full lg:inline"
+ />
+ <div
+ className={clsx(
+ 'relative inline-block rounded-xl p-3 text-zinc-800 dark:text-zinc-200',
+ 'rounded-tl-sm bg-zinc-600/5 dark:bg-zinc-500/20',
+ 'max-w-full overflow-auto',
+ )}
+ >
+ {RemoveMarkdown(activity.content)}
+ </div>
+ </div>
+ </div>
+ )
+ }
+ case 'like': {
+ return (
+ <div className="flex translate-y-1/4 items-start gap-2">
+ <span className={clsx(iconClassName)}>
+ <i className="icon-[mingcute--heart-line]" />
+ </span>
+ <div className="space-x-2">
+ <small>有人点赞了</small>{' '}
+ <Link
+ href={
+ activity.slug
+ ? `/posts/${activity.slug}`
+ : `/notes/${activity.nid}`
+ }
+ >
+ <b>{activity.title}</b>
+ </Link>
+ </div>
+ </div>
+ )
+ }
+ }
+ }, [activity, siteOwner?.avatar])
+
+ return <div className="pb-4 text-base">{Content}</div>
+}

src/app/(app)/(home)/components/ActivityPostList.tsx

@@ -0,0 +1,92 @@
+'use client'
+
+import React from 'react'
+import { m } from 'framer-motion'
+import Link from 'next/link'
+
+import { Divider } from '~/components/ui/divider'
+import { RelativeTime } from '~/components/ui/relative-time'
+import { softBouncePreset } from '~/constants/spring'
+import { routeBuilder, Routes } from '~/lib/route-builder'
+
+import { useHomeQueryData } from '../query'
+
+export const ActivityPostList = () => {
+ const { notes, posts } = useHomeQueryData()
+ return (
+ <m.section
+ initial={{ opacity: 0.0001, y: 50 }}
+ animate={{ opacity: 1, y: 0 }}
+ transition={softBouncePreset}
+ className="mt-8 flex flex-col gap-4 lg:mt-0"
+ >
+ <h2 className="text-2xl font-medium leading-loose">最近更新的文稿</h2>
+ <ul className="shiro-timeline mt-4">
+ {posts.map((post) => {
+ return (
+ <li key={post.id} className="flex min-w-0 justify-between">
+ <Link
+ prefetch
+ className="min-w-0 shrink truncate"
+ href={routeBuilder(Routes.Post, {
+ category: post.category.slug,
+ slug: post.slug,
+ })}
+ >
+ {post.title}
+ </Link>
+
+ <span className="ml-2 shrink-0 self-end text-xs opacity-70">
+ <RelativeTime
+ date={post.created}
+ displayAbsoluteTimeAfterDay={180}
+ />
+ </span>
+ </li>
+ )
+ })}
+ </ul>
+
+ <Link
+ className="flex items-center justify-end opacity-70 duration-200 hover:text-accent"
+ href={routeBuilder(Routes.Posts, {})}
+ >
+ <i className="icon-[mingcute--arrow-right-circle-line]" />
+ <span className="ml-2">还有更多</span>
+ </Link>
+
+ <Divider />
+ <h2 className="text-2xl font-medium leading-loose">最近更新的手记</h2>
+ <ul className="shiro-timeline mt-4">
+ {notes.map((note, i) => {
+ return (
+ <li key={note.id} className="flex min-w-0 justify-between">
+ <Link
+ className="min-w-0 shrink truncate"
+ href={routeBuilder(Routes.Note, {
+ id: note.nid,
+ })}
+ >
+ {note.title}
+ </Link>
+
+ <span className="ml-2 shrink-0 self-end text-xs opacity-70">
+ <RelativeTime
+ date={note.created}
+ displayAbsoluteTimeAfterDay={180}
+ />
+ </span>
+ </li>
+ )
+ })}
+ </ul>
+ <Link
+ className="flex items-center justify-end opacity-70 duration-200 hover:text-accent"
+ href={routeBuilder(Routes.Timelime, { type: 'note' })}
+ >
+ <i className="icon-[mingcute--arrow-right-circle-line]" />
+ <span className="ml-2">还有更多</span>
+ </Link>
+ </m.section>
+ )
+}

src/app/(app)/(home)/components/ActivityRecent.tsx

@@ -0,0 +1,90 @@
+'use client'
+
+import { useQuery } from '@tanstack/react-query'
+import React, { useMemo } from 'react'
+import clsx from 'clsx'
+import { m } from 'framer-motion'
+import type { ReactActivityType } from './types'
+
+import { ScrollArea } from '~/components/ui/scroll-area'
+import { softBouncePreset } from '~/constants/spring'
+import { apiClient } from '~/lib/request'
+
+import { ActivityCard, iconClassName } from './ActivityCard'
+
+export const ActivityRecent = () => {
+ const { data, isLoading } = useQuery({
+ queryKey: ['home-activity-recent'],
+ queryFn: async () => {
+ return (await apiClient.activity.getRecentActivities()).$serialized
+ },
+ refetchOnMount: true,
+ meta: {
+ persist: true,
+ },
+ })
+
+ const flatData = useMemo(() => {
+ return [...Object.entries(data || {})]
+ .map(([type, items]) => {
+ if (!Array.isArray(items)) return []
+ return items.map((item: any) => {
+ return { ...item, bizType: type }
+ })
+ })
+ .flat()
+ .sort((a, b) => {
+ return new Date(b.created).getTime() - new Date(a.created).getTime()
+ }) as ReactActivityType[]
+ // .slice(0, 6) as ReactActivityType[]
+ }, [data])
+
+ return (
+ <m.div
+ initial={{ opacity: 0.0001, y: 50 }}
+ animate={{ opacity: 1, y: 0 }}
+ transition={softBouncePreset}
+ className="mt-8 w-full text-lg lg:mt-0"
+ >
+ <m.h2 className="mb-8 text-2xl font-medium leading-loose lg:ml-14">
+ 最近发生的事
+ </m.h2>
+
+ {isLoading ? (
+ <div className="relative h-[400px] max-h-[80vh]">
+ <ul className="shiro-timeline mt-4 flex animate-pulse flex-col pb-4 pl-2 text-slate-200 dark:!text-neutral-700">
+ {new Array(6).fill(null).map((_, i) => {
+ return (
+ <li key={i} className="flex w-full items-center gap-2">
+ <div
+ className={clsx(
+ iconClassName,
+ 'border-0 bg-current text-inherit',
+ )}
+ />
+
+ <div className="mb-4 box-content h-16 w-full rounded-md bg-current" />
+ </li>
+ )
+ })}
+ </ul>
+ </div>
+ ) : (
+ <ScrollArea.ScrollArea rootClassName="h-[400px] relative max-h-[80vh]">
+ <ul className="shiro-timeline mt-4 flex flex-col pb-8 pl-2">
+ {flatData.map((activity) => {
+ return (
+ <li
+ key={`${activity.bizType}-${activity.id}-${activity.created}`}
+ className="flex min-w-0 justify-between"
+ >
+ <ActivityCard activity={activity} />
+ </li>
+ )
+ })}
+ </ul>
+ </ScrollArea.ScrollArea>
+ )}
+ </m.div>
+ )
+}

src/app/(app)/(home)/components/Screen.tsx

@@ -0,0 +1,54 @@
+'use client'
+
+import React, { forwardRef, useRef } from 'react'
+import { useInView } from 'framer-motion'
+import type { PropsWithChildren } from 'react'
+
+import { isDev } from '~/lib/env'
+import { clsxm } from '~/lib/helper'
+
+const debugStyle = {
+ outline: '1px solid #0088cc',
+}
+export const Screen = forwardRef<
+ HTMLDivElement,
+ PropsWithChildren<{
+ className?: string
+ }>
+>((props, ref) => {
+ return (
+ <InViewScreen
+ ref={ref}
+ className={clsxm(
+ 'h-dvh min-h-[800px] min-w-0 max-w-screen overflow-hidden',
+ props.className,
+ )}
+ >
+ {props.children}
+ </InViewScreen>
+ )
+})
+
+export const InViewScreen = forwardRef<
+ HTMLDivElement,
+ PropsWithChildren<{
+ className?: string
+ }>
+>((props, ref) => {
+ const inViewRef = useRef<HTMLSpanElement>(null)
+ const inView = useInView(inViewRef, { once: true })
+
+ return (
+ <div
+ ref={ref}
+ style={isDev ? debugStyle : undefined}
+ className={clsxm('relative flex flex-col center', props.className)}
+ >
+ <span ref={inViewRef} />
+ {inView && props.children}
+ </div>
+ )
+})
+
+InViewScreen.displayName = 'InViewScreen'
+Screen.displayName = 'Screen'