feat: 文章页头部显示meta数据

Author: coderz-w

src/components/layout/Header/AnimatedLogo.tsx

@@ -1,14 +1,17 @@
 'use client';
 
-import { useRouter, usePathname } from 'next/navigation';
+import { useRouter, usePathname, useParams } from 'next/navigation';
 import Image from 'next/image';
 import { useMemo } from 'react';
-import { m } from 'framer-motion';
+import { m, AnimatePresence } from 'framer-motion';
 
-export const AnimatedLogo = () => {
+export const AnimatedLogo = ({ forcePlay = false }: { forcePlay?: boolean }) => {
   const router = useRouter();
   const pathName = usePathname();
+  const params = useParams();
+  const nid = params.nid;
   const handleClick = useMemo(() => () => router.push('/'), [pathName]);
+  if (nid && !forcePlay) return null;
 
   return (
     <button className=" cursor-pointer" onClick={() => handleClick()}>
@@ -20,21 +23,24 @@ export const AnimatedLogo = () => {
 
 const SideOwnerAvatar = () => {
   return (
-    <m.div
-      initial={{ opacity: 0, y: 10 }}
-      animate={{ opacity: 1, y: 0 }}
-      exit={{ opacity: 0, y: -10 }}
-      className="pointer-events-none relative z-[9] size-[40px] select-none"
-    >
-      <div className=" mask mask-squircle overflow-hidden">
-        <Image
-          src="/image/owner.jpg"
-          alt="Site Owner Avatar"
-          width={40}
-          height={40}
-          className="ring-2 ring-slate-200 dark:ring-neutral-800"
-        />
-      </div>
-    </m.div>
+    <AnimatePresence>
+      {' '}
+      <m.div
+        initial={{ opacity: 0, y: 10 }}
+        animate={{ opacity: 1, y: 0 }}
+        exit={{ opacity: 0, y: -10 }}
+        className="pointer-events-none relative z-[9] size-[40px] select-none"
+      >
+        <div className=" mask mask-squircle overflow-hidden">
+          <Image
+            src="/image/owner.jpg"
+            alt="Site Owner Avatar"
+            width={40}
+            height={40}
+            className="ring-2 ring-slate-200 dark:ring-neutral-800"
+          />
+        </div>
+      </m.div>
+    </AnimatePresence>
   );
 };

src/components/layout/Header/Header.tsx

@@ -6,8 +6,12 @@ import { HeaderCenterArea, HeaderLeftButtonArea, HeaderLogoArea } from './Header
 import { HeaderCenterContent } from './HeaderCenterContent';
 import { AnimatedLogo } from './AnimatedLogo';
 import styles from './header.module.css';
+import { HeaderMeta } from './HeaderMeta';
 
 import { cn } from '@/lib/helper';
+import { buildPostData } from '@/core';
+
+const { postDataMap } = buildPostData();
 
 const Header = () => {
   return (
@@ -23,11 +27,15 @@ const Header = () => {
 
         <HeaderLogoArea>
           <AnimatedLogo />
+
+          <div className="block lg:hidden">
+            <HeaderMeta postDataMap={postDataMap} />
+          </div>
         </HeaderLogoArea>
         <div className=" sr-only"></div>
         <HeaderCenterArea>
           <HeaderCenterContent />
-          {/* TODO 文章页面时显示一些文章信息 */}
+          <HeaderMeta postDataMap={postDataMap} />
         </HeaderCenterArea>
 
         {/* <div className="flex size-full [grid-area:right] items-center"></div> */}

src/components/layout/Header/HeaderCenterContent.tsx

@@ -2,7 +2,7 @@
 
 import { LayoutGroup, m, useMotionTemplate, useMotionValue } from 'framer-motion';
 import React, { memo } from 'react';
-import { usePathname } from 'next/navigation';
+import { usePathname, useParams } from 'next/navigation';
 import Link from 'next/link';
 
 import { MenuPopover } from './MenuPopover';
@@ -17,6 +17,9 @@ import {
 import { cn } from '@/lib/helper';
 
 export const HeaderCenterContent = () => {
+  const params = useParams();
+  if (params.nid) return null;
+
   return (
     <LayoutGroup>
       <AnimatedMenu>

src/components/layout/Header/HeaderMeta.tsx

@@ -0,0 +1,64 @@
+'use client';
+
+import { useParams } from 'next/navigation';
+import { AnimatePresence, m } from 'framer-motion';
+
+import { AnimatedLogo } from './AnimatedLogo';
+
+import type { PostMap } from '@/core';
+
+const animationProps = {
+  initial: {
+    opacity: 0,
+    y: 20,
+  },
+  exit: {
+    opacity: 0,
+    y: 20,
+  },
+  animate: {
+    opacity: 1,
+    y: 0,
+
+    transition: {
+      type: 'spring',
+      stiffness: 300,
+      damping: 20,
+    },
+  },
+};
+
+export const HeaderMeta = ({ postDataMap }: { postDataMap: PostMap }) => {
+  const params = useParams();
+  const postId = params.nid as string;
+  console.log(postId);
+
+  const postData = postDataMap[postId];
+  console.log(postData);
+
+  return (
+    <AnimatePresence>
+      {postData && (
+        <m.div
+          className="absolute inset-0 flex min-w-0 items-center justify-between gap-3 px-0 lg:px-16"
+          data-testid="header-meta"
+          {...animationProps}
+        >
+          <div className="flex min-w-0 shrink grow flex-col">
+            <small className="min-w-0 truncate">
+              <span className="text-gray-600/60 dark:text-gray-300/60">{postData.tag}</span>
+            </small>
+            <h2 className="min-w-0 truncate text-[1.2rem] font-medium leading-normal">
+              {postData.title}
+            </h2>
+          </div>
+
+          <div className=" min-w-0 shrink-[5] flex-col text-right leading-5 flex">
+            <AnimatedLogo forcePlay={true} />
+            <span className="font-medium sr-only">{'zwの小站'}</span>
+          </div>
+        </m.div>
+      )}
+    </AnimatePresence>
+  );
+};