feat: 优化部分代码,准备实现获取markdwon

Author: coderz-w

src/app/(app)/(home)/page.tsx

@@ -8,11 +8,8 @@ import { TextUpTransitionView } from '@/components/ui/transition/TextUpTransitio
 import { SocialIcon } from '@/components/modules/home/SocialIcon';
 import {
   FaSolidFeatherAlt,
-  FaSolidHistory,
   FaSolidUserFriends,
-  IcTwotoneSignpost,
   MdiFlask,
-  MdiLightbulbOn20,
   RMixPlanet,
 } from '@/components/icons/menu-collection';
 import { cn } from '@/lib/helper';
@@ -21,32 +18,15 @@ import { FocusCards } from '@/components/ui/focus-cards.tsx';
 const windsock = [
   {
     title: '文稿',
-    path: '/posts',
-    type: 'Post',
-    subMenu: [],
-    icon: IcTwotoneSignpost,
-  },
-  {
-    title: '手记',
     type: 'Note',
-    path: '/notes',
+    path: '/list',
     icon: FaSolidFeatherAlt,
   },
-  {
-    title: '度过的时光',
-    icon: FaSolidHistory,
-    path: '/timeline',
-  },
   {
     title: '朋友们',
     icon: FaSolidUserFriends,
     path: '/friends',
   },
-  {
-    title: '写下一点思考',
-    icon: MdiLightbulbOn20,
-    path: '/thinking',
-  },
   {
     title: '看看我做些啥',
     icon: MdiFlask,

src/app/(app)/friends/page.tsx

@@ -10,7 +10,7 @@ export default function Friends() {
   return (
     <div>
       <header className="prose prose-p:my-2 font-mono">
-        <h1>朋友们</h1>
+        <h2>朋友们</h2>
         <h3>海内存知己，天涯若比邻</h3>
       </header>
 
@@ -24,16 +24,16 @@ export default function Friends() {
 const FriendCardList = ({ data }: { data: FriendModel[] }) => (
   <div className="grid grid-cols-2 gap-6 md:grid-cols-3">
     {data.map((friendModel) => {
-      return <FriendCard friendModel={friendModel} />;
+      return <FriendCard key={friendModel.url} friendModel={friendModel} />;
     })}
   </div>
 );
+
 const FriendCard = ({ friendModel }: { friendModel: FriendModel }) => {
   const [enter, setEnter] = useState(false);
 
   return (
     <m.div
-      key={friendModel.name}
       role="link"
       aria-label={`Go to ${friendModel.name}'s website`}
       className="relative flex flex-col items-center justify-center cursor-pointer"

src/app/(app)/list/AnimatedPostItem.tsx

@@ -0,0 +1,39 @@
+// AnimatedPostItem.tsx
+'use client';
+
+import React from 'react';
+import { m } from 'framer-motion';
+
+import { PostItem } from '@/components/modules/list/PostItem';
+
+interface AnimatedPostItemProps {
+  item: {
+    id: number;
+    title: string;
+    content: string;
+  };
+  index: number;
+}
+
+const AnimatedPostItem: React.FC<AnimatedPostItemProps> = ({ item, index }) => {
+  return (
+    <m.li
+      initial={{ y: 50, opacity: 0.01 }}
+      animate={{
+        y: 0,
+        opacity: 1,
+        transition: {
+          delay: index * 0.1,
+          type: 'spring',
+          damping: 10,
+          stiffness: 100,
+        },
+      }}
+      key={item.id}
+    >
+      <PostItem data={item} />
+    </m.li>
+  );
+};
+
+export default AnimatedPostItem;

src/app/(app)/list/page.tsx

@@ -1,10 +1,8 @@
-'use client';
-
 import React from 'react';
-import { m } from 'framer-motion';
+
+import AnimatedPostItem from './AnimatedPostItem';
 
 import { NormalContainer } from '@/components/layout/container/Normal';
-import { PostItem } from '@/components/modules/list/PostItem';
 
 // 假数据
 const mockData = [
@@ -14,7 +12,6 @@ const mockData = [
   { id: 12, title: '文章标题 1', content: '这是文章内容 1' },
   { id: 22, title: '文章标题 2', content: '这是文章内容 2' },
   { id: 32, title: '文章标题 3', content: '这是文章内容 3' },
-
   // 更多假数据
 ];
 
@@ -23,22 +20,7 @@ const ArticleList: React.FC = () => {
     <NormalContainer>
       <ul>
         {mockData.map((item, index) => (
-          <m.li
-            initial={{ y: 50, opacity: 0.01 }}
-            animate={{
-              y: 0,
-              opacity: 1,
-              transition: {
-                delay: index * 0.1,
-                type: 'spring',
-                damping: 10,
-                stiffness: 100,
-              },
-            }}
-            key={item.id}
-          >
-            <PostItem data={item} />
-          </m.li>
+          <AnimatedPostItem key={item.id} item={item} index={index} />
         ))}
       </ul>
     </NormalContainer>

src/app/(app)/projects/page.tsx

@@ -35,7 +35,7 @@ export default function Projects() {
 const ProjectCardList = ({ data }: { data: ProjectModel[] }) => (
   <div className="grid min-w-0 grid-cols-2 gap-6 lg:grid-cols-3">
     {data.map((projectModel) => {
-      return <ProjectCard project={projectModel} />;
+      return <ProjectCard key={projectModel.name} project={projectModel} />;
     })}
   </div>
 );
@@ -52,9 +52,9 @@ const ProjectCard = ({ project }: { project: ProjectModel }) => {
         name={project.name}
       />
       <span className="flex shrink-0 grow flex-col gap-2 text-left">
-        <h4 className="m-0 text-balance p-0 text-center font-medium md:text-left">
+        <h2 className="m-0 text-balance p-0 text-center font-medium md:text-left">
           {project.name}
-        </h4>
+        </h2>
         <span className="line-clamp-5 text-balance text-center text-sm md:line-clamp-4 md:text-left lg:line-clamp-2">
           {project.desc}
         </span>

src/app/layout.tsx

@@ -50,9 +50,8 @@ export const viewport: Viewport = {
   ],
   width: 'device-width',
   initialScale: 1,
-  userScalable: false,
   minimumScale: 1,
-  maximumScale: 1,
+  maximumScale: 5,
 };
 
 export default async function RootLayout({ children }: PropsWithChildren) {

src/components/modules/home/BlogPostCard/BlogPostCard.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import Image from 'next/image';
 
 type BlogPostCardProps = {
   title: string;
@@ -30,7 +31,7 @@ const BlogPostCard: React.FC<BlogPostCardProps> = ({
       <div className="relative z-10 flex flex-col justify-between h-full p-6">
         {/* 顶部头像 */}
         <div className="flex justify-start items-center mb-4">
-          <img src="/path-to-avatar.png" alt="avatar" className="h-10 w-10 rounded-full" />
+          <Image src="/path-to-avatar.png" alt="avatar" className="h-10 w-10 rounded-full" />
         </div>
 
         {/* 中间主要标题 */}

src/components/modules/toc/TocTree.tsx

@@ -159,8 +159,6 @@ const MemoedItem = memo<{
   const { heading, isActive, onClick, rootDepth } = props;
   const itemRef = useRef<HTMLLIElement>(null);
 
-  console.log(heading);
-
   return (
     <m.li
       initial={{ x: 60, opacity: 0 }}

src/components/ui/markdown/renderbers/images.tsx

@@ -1,8 +1,17 @@
+import Image from 'next/image';
+
+// https://github.com/vercel/next.js/discussions/18474
 export const MarkdownImage = (props: { src: string; alt?: string }) => {
   return (
-    <span className="flex w-full flex-col items-center border-none mdImg">
-      <img src={props.src} alt={props.alt} loading="lazy" className="mx-auto w-[50%] rounded-md" />
-      <span className=" w-full">居中文本</span>
+    <span className=" relative w-full border-none">
+      <Image
+        width={0}
+        height={0}
+        sizes="100vw"
+        src={props.src}
+        alt={props.alt ?? 'image'}
+        className=" w-full h-auto rounded-md"
+      />
     </span>
   );
 };

src/styles/mdContainer.css

@@ -18,14 +18,6 @@
 .with-indent blockquote .paragraph > span {
   margin-left: 0 !important;
 }
-.mdImg span {
-  display: inline-block !important;
-  margin-left: 0 !important;
-  margin-right: 0 auto;
-  padding: 0;
-  text-align: center;
-}
-
 .with-indent blockquote .paragraph:first-child::first-letter {
   float: none !important;
   font-size: inherit !important;