feat: proj page

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

src/app/layout.tsx

@@ -26,7 +26,7 @@ export const generateMetadata = defineMetadata(async (_, getData) => {
  return {
  metadataBase: new URL(url.webUrl),
  title: {
- template: `%s | ${seo.title}`,
+ template: `%s - ${seo.title}`,
  default: `${seo.title} - ${seo.description}`,
  },
  description: seo.description,

src/app/projects/[id]/layout.tsx

@@ -0,0 +1,8 @@
+import type { PropsWithChildren } from 'react'
+
+export const metadata = {
+ title: '项目详情',
+}
+export default function Page(props: PropsWithChildren) {
+ return props.children
+}

src/app/projects/[id]/page.tsx

@@ -0,0 +1,38 @@
+'use client'
+
+import { useQuery } from '@tanstack/react-query'
+import { useEffect } from 'react'
+import { useParams, useRouter } from 'next/navigation'
+
+import { NotFound404 } from '~/components/common/404'
+import { Loading } from '~/components/ui/loading'
+import { apiClient } from '~/utils/request'
+
+export default function Page() {
+ const { id } = useParams()
+
+ const { data, isLoading } = useQuery({
+ queryKey: [id, 'project'],
+ queryFn: async ({ queryKey }) => {
+ const [id] = queryKey
+ return apiClient.project.getById(id)
+ },
+ })
+ const router = useRouter()
+ useEffect(() => {
+ if (data?.projectUrl) {
+ window.open(data.projectUrl)
+ router.back()
+ }
+ }, [data?.projectUrl])
+
+ if (isLoading) {
+ return <Loading useDefaultLoadingText />
+ }
+
+ if (!data) {
+ return <NotFound404 />
+ }
+
+ return null
+}

src/app/projects/layout.tsx

@@ -0,0 +1,11 @@
+import type { Metadata } from 'next'
+import type { PropsWithChildren } from 'react'
+
+import { WiderContainer } from '~/components/layout/container/Wider'
+
+export const metadata: Metadata = {
+ title: '项目',
+}
+export default async function Layout(props: PropsWithChildren) {
+ return <WiderContainer>{props.children}</WiderContainer>
+}

src/app/projects/page.tsx

@@ -0,0 +1,60 @@
+'use client'
+
+import { useQuery } from '@tanstack/react-query'
+
+import { CodiconGithubInverted } from '~/components/icons/menu-collection'
+import { Loading } from '~/components/ui/loading'
+import { BottomToUpTransitionView } from '~/components/ui/transition/BottomToUpTransitionView'
+import { ProjectList } from '~/components/widgets/project/ProjectList'
+import { NothingFound } from '~/components/widgets/shared/NothingFound'
+import { noopArr } from '~/lib/noop'
+import { useAggregationSelector } from '~/providers/root/aggregation-data-provider'
+import { apiClient } from '~/utils/request'
+
+export default function Page() {
+ const { data, isLoading } = useQuery({
+ queryKey: ['projects'],
+ queryFn: async () => {
+ const data = await apiClient.project.getAll()
+ return data.data
+ },
+ })
+
+ const githubUsername = useAggregationSelector(
+ (state) => state.user?.socialIds?.github,
+ )
+
+ if (isLoading) {
+ return <Loading useDefaultLoadingText />
+ }
+
+ if (!data) return <NothingFound />
+
+ return (
+ <div>
+ <header className="prose">
+ <h1>项目们</h1>
+ </header>
+
+ <main className="mt-10">
+ <div className="my-12 inline-flex items-center text-3xl font-medium">
+ 项目{' '}
+ {githubUsername && (
+ <a
+ href={`https://github.com/${githubUsername}`}
+ className="ml-2 inline-flex !text-inherit"
+ target="_blank"
+ aria-label="view on GitHub"
+ rel="noopener noreferrer"
+ >
+ <CodiconGithubInverted />
+ </a>
+ )}
+ </div>
+ <BottomToUpTransitionView>
+ <ProjectList projects={data || noopArr} />
+ </BottomToUpTransitionView>
+ </main>
+ </div>
+ )
+}

src/components/layout/header/internal/HeaderContent.tsx

@@ -2,7 +2,12 @@
 
 import React, { memo } from 'react'
 import clsx from 'clsx'
-import { AnimatePresence, m, useMotionValue } from 'framer-motion'
+import {
+ AnimatePresence,
+ m,
+ useMotionTemplate,
+ useMotionValue,
+} from 'framer-motion'
 import Link from 'next/link'
 import { usePathname } from 'next/navigation'
 import type { IHeaderMenu } from '../config'
@@ -12,7 +17,11 @@ import { usePageScrollDirectionSelector } from '~/providers/root/page-scroll-inf
 import { clsxm } from '~/utils/helper'
 
 import { useHeaderConfig } from './HeaderDataConfigureProvider'
-import { useHeaderBgOpacity, useMenuOpacity } from './hooks'
+import {
+ useHeaderBgOpacity,
+ useHeaderHasMetaInfo,
+ useMenuOpacity,
+} from './hooks'
 import { MenuPopover } from './MenuPopover'
 
 export const HeaderContent = () => {
@@ -28,12 +37,13 @@ export const HeaderContent = () => {
 
 const AccessibleMenu: Component = () => {
  const headerOpacity = useHeaderBgOpacity()
+ const hasMetaInfo = useHeaderHasMetaInfo()
 
  const showShow = usePageScrollDirectionSelector(
  (d) => {
- return d === 'up' && headerOpacity > 0.8
+ return d === 'up' && headerOpacity > 0.8 && hasMetaInfo
  },
- [headerOpacity],
+ [headerOpacity, hasMetaInfo],
  )
  return (
  <RootPortal>
@@ -56,20 +66,25 @@ const AccessibleMenu: Component = () => {
 const AnimatedMenu: Component = ({ children }) => {
  const opacity = useMenuOpacity()
 
+ const hasMetaInfo = useHeaderHasMetaInfo()
+ const shouldHideNavBg = !hasMetaInfo && opacity === 0
  return (
  <m.div
  className="duration-[100ms]"
  style={{
- opacity,
- visibility: opacity === 0 ? 'hidden' : 'visible',
+ opacity: hasMetaInfo ? opacity : 1,
+ visibility: opacity === 0 && hasMetaInfo ? 'hidden' : 'visible',
  }}
  >
- {children}
+ {/* @ts-ignore */}
+ {React.cloneElement(children, { shouldHideNavBg })}
  </m.div>
  )
 }
 
-const ForDesktop: Component = ({ className }) => {
+const ForDesktop: Component<{
+ shouldHideNavBg?: boolean
+}> = ({ className, shouldHideNavBg }) => {
  const mouseX = useMotionValue(0)
  const mouseY = useMotionValue(0)
  const radius = useMotionValue(0)
@@ -86,6 +101,8 @@ const ForDesktop: Component = ({ className }) => {
  const { config: headerMenuConfig } = useHeaderConfig()
  const pathname = usePathname()
 
+ const background = useMotionTemplate`radial-gradient(${radius}px circle at ${mouseX}px ${mouseY}px, var(--spotlight-color) 0%, transparent 65%)`
+
  return (
  <m.nav
  layout="size"
@@ -95,19 +112,32 @@ const ForDesktop: Component = ({ className }) => {
  'rounded-full bg-gradient-to-b from-zinc-50/70 to-white/90',
  'shadow-lg shadow-zinc-800/5 ring-1 ring-zinc-900/5 backdrop-blur-md',
  'dark:from-zinc-900/70 dark:to-zinc-800/90 dark:ring-zinc-100/10',
-
+ 'group [--spotlight-color:hsl(var(--a)_/_0.05)]',
+ 'duration-200',
+ shouldHideNavBg && 'bg-none shadow-none ring-transparent',
  className,
  )}
  >
+ {/* Spotlight overlay */}
+ <m.div
+ className="pointer-events-none absolute -inset-px rounded-full opacity-0 transition-opacity duration-500 group-hover:opacity-100"
+ style={{ background }}
+ aria-hidden="true"
+ />
  <div className="flex px-4 font-medium text-zinc-800 dark:text-zinc-200 ">
  {headerMenuConfig.map((section) => {
+ const subItemActive =
+ section.subMenu?.findIndex((item) => item.path === pathname) || -1
  return (
  <HeaderMenuItem
  section={section}
  key={section.path}
+ subItemActive={section.subMenu?.[subItemActive]}
  isActive={
  pathname === section.path ||
- pathname.startsWith(`${section.path}/`)
+ pathname.startsWith(`${section.path}/`) ||
+ subItemActive > -1 ||
+ false
  }
  />
  )
@@ -120,7 +150,8 @@ const ForDesktop: Component = ({ className }) => {
 const HeaderMenuItem = memo<{
  section: IHeaderMenu
  isActive: boolean
-}>(({ section, isActive }) => {
+ subItemActive?: IHeaderMenu
+}>(({ section, isActive, subItemActive }) => {
  const href = section.path
 
  return (
@@ -136,10 +167,10 @@ const HeaderMenuItem = memo<{
  layoutId="header-menu-icon"
  className={clsxm('mr-2 flex items-center')}
  >
- {section.icon}
+ {subItemActive?.icon ?? section.icon}
  </m.span>
  )}
- <m.span layout>{section.title}</m.span>
+ <m.span layout>{subItemActive?.title ?? section.title}</m.span>
  </span>
  </AnimatedItem>
  </MenuPopover>

src/components/layout/header/internal/hooks.ts

@@ -77,3 +77,13 @@ export const useHeaderMetaInfo = () => {
  slug: useAtomValue(headerMetaSlugAtom),
  }
 }
+
+const headerHasMetaInfoAtom = atom((get) => {
+ const title = get(headerMetaTitleAtom)
+ const description = get(headerMetaDescriptionAtom)
+
+ return title !== '' && description !== ''
+})
+export const useHeaderHasMetaInfo = () => {
+ return useAtomValue(headerHasMetaInfoAtom)
+}

src/components/ui/text/FlexText.tsx

@@ -35,3 +35,5 @@ export const FlexText: FC<{ text: string; scale: number }> = memo((props) => {
  </span>
  )
 })
+
+FlexText.displayName = 'FlexText'

src/components/widgets/project/ProjectIcon.tsx

@@ -0,0 +1,30 @@
+import { ImageLazy } from '~/components/ui/image'
+import { FlexText } from '~/components/ui/text'
+import { clsxm } from '~/utils/helper'
+
+export const ProjectIcon: Component<{ avatar?: string; name?: string }> = (
+ props,
+) => {
+ const { avatar, name, className } = props
+ return (
+ <div
+ className={clsxm(
+ 'project-icon flex flex-shrink-0 flex-grow items-center justify-center rounded-xl',
+ avatar
+ ? 'ring-2 ring-slate-200 dark:ring-neutral-800'
+ : 'bg-slate-300 text-white dark:bg-neutral-800',
+ 'aspect-square rounded-md transition-all duration-300',
+ className,
+ )}
+ >
+ {avatar ? (
+ <ImageLazy
+ className="aspect-square rounded-xl transition-shadow duration-300"
+ src={avatar}
+ />
+ ) : (
+ <FlexText text={name?.charAt(0).toUpperCase() || ''} scale={0.5} />
+ )}
+ </div>
+ )
+}

src/components/widgets/project/ProjectList.tsx

@@ -0,0 +1,44 @@
+import Link from 'next/link'
+import type { FC } from 'react'
+
+import { routeBuilder, Routes } from '~/lib/route-builder'
+
+import { ProjectIcon } from './ProjectIcon'
+
+export type Project = {
+ id: string
+ avatar?: string
+ name: string
+ description?: string
+}
+export const ProjectList: FC<{ projects: Project[] }> = (props) => {
+ const projects = props.projects
+
+ return (
+ <section key="list" className="text-center">
+ <div className="grid grid-cols-1 gap-12 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+ {projects.map((project) => {
+ return (
+ <Link
+ href={routeBuilder(Routes.Project, { id: project.id })}
+ key={project.id}
+ className="group grid grid-cols-[1fr_2fr] gap-4"
+ >
+ <ProjectIcon
+ className="group-hover:-translate-y-2 group-hover:shadow-out-sm"
+ avatar={project.avatar}
+ name={project.name}
+ />
+ <span className="flex flex-shrink-0 flex-grow flex-col gap-2 text-left">
+ <h4 className="font-2xl m-0 p-0 font-medium">{project.name}</h4>
+ <span className="line-clamp-5 text-sm md:line-clamp-4 lg:line-clamp-2">
+ {project.description}
+ </span>
+ </span>
+ </Link>
+ )
+ })}
+ </div>
+ </section>
+ )
+}