feat: header

Signed-off-by: Innei <[email protected]>

Author: Innei

next.config.mts

@@ -17,10 +17,14 @@ const isProd = process.env.NODE_ENV === 'production'
 let nextConfig: NextConfig = {
   experimental: {
     appDir: true,
-    serverComponentsExternalPackages: ['socket.io-client', 'ws'],
   },
 
   webpack: (config, options) => {
+    config.externals.push({
+      'utf-8-validate': 'commonjs utf-8-validate',
+      bufferutil: 'commonjs bufferutil',
+    })
+
     if (
       process.env.SENTRY === 'true' &&
       process.env.NEXT_PUBLIC_SENTRY_DSN &&

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

@@ -1,16 +1,15 @@
 'use client'
 
-import { useRef } from 'react'
 import { useParams } from 'next/navigation'
 
 import { PageDataHolder } from '~/components/common/PageHolder'
 import { Toc, TocAutoScroll } from '~/components/widgets/toc'
+import { useBeforeMounted } from '~/hooks/common/use-before-mounted'
 import { useNoteByNidQuery } from '~/hooks/data/use-note'
 import { ArticleElementProvider } from '~/providers/article/article-element-provider'
 import { useSetCurrentNoteId } from '~/providers/note/current-note-id-provider'
 import { NoteLayoutRightSidePortal } from '~/providers/note/right-side-provider'
 import { parseMarkdown } from '~/remark'
-import { isClientSide } from '~/utils/env'
 
 const PageImpl = () => {
   const { id } = useParams() as { id: string }
@@ -23,11 +22,11 @@ const PageImpl = () => {
   // For example, `ComA` use `useParams()` just want to get value `id`,
   // but if router params or query changes `page` params, will cause `CompA` re - render.
   const setNoteId = useSetCurrentNoteId()
-  const onceRef = useRef(false)
-  if (isClientSide() && !onceRef.current) {
-    onceRef.current = true
+
+  useBeforeMounted(() => {
     setNoteId(id)
-  }
+  })
+
   return (
     <article className="prose">
       <header>

src/atoms/viewport.ts

@@ -1,4 +1,7 @@
-import { atom } from 'jotai'
+import { useCallback } from 'react'
+import { atom, useAtomValue } from 'jotai'
+import { selectAtom } from 'jotai/utils'
+import type { ExtractAtomValue } from 'jotai'
 
 export const viewportAtom = atom({
   /**
@@ -29,3 +32,14 @@ export const viewportAtom = atom({
   h: 0,
   w: 0,
 })
+
+export const useViewport = <T>(
+  selector: (value: ExtractAtomValue<typeof viewportAtom>) => T,
+): T =>
+  useAtomValue(
+    // @ts-ignore
+    selectAtom(
+      viewportAtom,
+      useCallback((atomValue) => selector(atomValue), []),
+    ),
+  )

src/components/common/PageHolder.tsx

@@ -7,7 +7,7 @@ const LoadingComponent = () => <Loading loadingText="别着急，坐和放宽" /
 export const PageDataHolder = (
   PageImpl: FC<any>,
   useQuery: () => UseQueryResult<any>,
-) => {
+): FC => {
   const Component: FC = (props) => {
     const { data, isLoading } = useQuery()
 

src/components/layout/footer/FooterInfo.tsx

@@ -2,75 +2,9 @@ import Link from 'next/link'
 
 import { clsxm } from '~/utils/helper'
 
+import { linkSections } from './config'
 import { GatewayCount } from './GatewayCount'
 
-interface LinkSection {
-  name: string
-  links: {
-    name: string
-    href: string
-    external?: boolean
-  }[]
-}
-
-export const linkSections: LinkSection[] = [
-  {
-    name: '关于',
-    links: [
-      {
-        name: '关于本站',
-        href: '/about-site',
-      },
-      {
-        name: '关于我',
-        href: '/about-me',
-      },
-      {
-        name: '关于此项目',
-        href: 'https://github.com/innei/springtide',
-        external: true,
-      },
-    ],
-  },
-  {
-    name: '更多',
-    links: [
-      {
-        name: '时间线',
-        href: '/timeline',
-      },
-      {
-        name: '友链',
-        href: '/friends',
-      },
-      {
-        name: '监控',
-        href: 'https://status.shizuri.net/status/main',
-        external: true,
-      },
-    ],
-  },
-  {
-    name: '联系',
-    links: [
-      {
-        name: '写留言',
-        href: '/message',
-      },
-      {
-        name: '发邮件',
-        href: 'mailto:[email protected]',
-        external: true,
-      },
-      {
-        name: 'GitHub',
-        href: 'https://github.com/innei',
-        external: true,
-      },
-    ],
-  },
-]
-
 export const FooterInfo = () => {
   return (
     <>

src/components/layout/footer/config.ts

@@ -0,0 +1,66 @@
+interface LinkSection {
+  name: string
+  links: {
+    name: string
+    href: string
+    external?: boolean
+  }[]
+}
+
+export const linkSections: LinkSection[] = [
+  {
+    name: '关于',
+    links: [
+      {
+        name: '关于本站',
+        href: '/about-site',
+      },
+      {
+        name: '关于我',
+        href: '/about-me',
+      },
+      {
+        name: '关于此项目',
+        href: 'https://github.com/innei/springtide',
+        external: true,
+      },
+    ],
+  },
+  {
+    name: '更多',
+    links: [
+      {
+        name: '时间线',
+        href: '/timeline',
+      },
+      {
+        name: '友链',
+        href: '/friends',
+      },
+      {
+        name: '监控',
+        href: 'https://status.shizuri.net/status/main',
+        external: true,
+      },
+    ],
+  },
+  {
+    name: '联系',
+    links: [
+      {
+        name: '写留言',
+        href: '/message',
+      },
+      {
+        name: '发邮件',
+        href: 'mailto:[email protected]',
+        external: true,
+      },
+      {
+        name: 'GitHub',
+        href: 'https://github.com/innei',
+        external: true,
+      },
+    ],
+  },
+]

src/components/layout/header/BluredBackground.tsx

@@ -0,0 +1,31 @@
+'use client'
+
+import { useDeferredValue } from 'react'
+
+import { usePageScrollLocation } from '~/providers/root/page-scroll-info-provider'
+import { clsxm } from '~/utils/helper'
+
+export const useHeaderOpacity = () => {
+  const threshold = 50
+  const y = usePageScrollLocation()
+  const headerOpacity = useDeferredValue(
+    y >= threshold ? 1 : Math.floor((y / threshold) * 100) / 100,
+  )
+
+  return headerOpacity
+}
+
+export const BluredBackground = () => {
+  const headerOpacity = useHeaderOpacity()
+  return (
+    <div
+      className={clsxm(
+        'absolute inset-0 transform-gpu [backdrop-filter:saturate(180%)_blur(20px)] [backface-visibility:hidden]',
+        'bg-themed-bg_opacity [border-bottom:1px_solid_rgb(187_187_187_/_20%)]',
+      )}
+      style={{
+        opacity: headerOpacity,
+      }}
+    />
+  )
+}

src/components/layout/header/Header.tsx

@@ -1,3 +1,6 @@
+import { BluredBackground } from './BluredBackground'
+import { HeaderContent } from './HeaderContent'
+
 const Logo = () => {
   return (
     <svg
@@ -40,12 +43,13 @@ const Logo = () => {
 
 export const Header = () => {
   return (
-    <header className="uk-material-ultrathin fixed left-0 right-0 top-0 z-[9] h-[4.5rem]">
+    <header className="fixed left-0 right-0 top-0 z-[9] h-[4.5rem]">
+      <BluredBackground />
       <div className="relative mx-auto grid h-full min-h-0 max-w-7xl grid-cols-[4.5rem_auto_8rem] lg:px-8">
         <Logo />
         <div className="flex min-w-0 flex-grow">
           <div className="flex flex-grow items-center justify-center">
-            Content
+            <HeaderContent />
           </div>
         </div>
         <div className="flex items-center">