feat: list

Author: coderz-w

markdown/index.json

@@ -2,11 +2,13 @@
   {
     "path": "yyblog.md",
     "title": "yyblog",
-    "tag": "技术/react"
+    "tag": "技术/react",
+    "coverImage": "yyblog-cover.jpg"
   },
   {
     "path": "react19.md",
     "title": "react19",
-    "tag": "随笔/生活"
+    "tag": "随笔/生活",
+    "coverImage": "yyblog-cover.jpg"
   }
 ]

next.config.mjs

@@ -1,10 +1,8 @@
 /** @type {import('next').NextConfig} */
 import NextBundleAnalyzer from '@next/bundle-analyzer';
-import { type } from 'os';
 
 let nextConfig = {
   images: {
-    domains: ['innei.in', 'images.unsplash.com', 'assets.aceternity.com'],
     remotePatterns: [
       {
         protocol: 'https',
@@ -16,10 +14,11 @@ let nextConfig = {
       },
     ],
   },
+  // type: 'asset/source' 会让 Webpack 将文件内容直接作为字符串导出，而不是生成特定的资源文件路径。这种方式特别适用于将 Markdown、SVG、文本文件等直接导入为字符串内容的场景。
   webpack(config) {
     config.module.rules.push({
       test: /\.md$/,
-      use: 'raw-loader',
+      // use: 'raw-loader',
       type: 'asset/source',
     });
 

package.json

@@ -29,14 +29,14 @@
     "clsx": "^2.1.1",
     "colorjs.io": "^0.5.2",
     "daisyui": "^4.12.13",
+    "dayjs": "^1.11.13",
     "framer-motion": "11.11.1",
     "markdown-to-jsx": "npm:@innei/[email protected]",
     "next": "14.2.15",
     "next-themes": "^0.3.0",
     "pngjs": "^7.0.0",
     "postcss-js": "^4.0.1",
     "prettier": "3.3.2",
-    "raw-loader": "^4.0.2",
     "react": "^18",
     "react-dom": "^18",
     "shiki": "^1.22.2",

pnpm-lock.yaml

@@ -5,13 +5,10 @@ import React from 'react';
 import { m } from 'framer-motion';
 
 import { PostItem } from '@/components/modules/list/PostItem';
+import type { PostItem as PostItemType } from '@/core';
 
 interface AnimatedPostItemProps {
-  item: {
-    id: number;
-    title: string;
-    content: string;
-  };
+  item: PostItemType;
   index: number;
 }
 
@@ -29,7 +26,7 @@ const AnimatedPostItem: React.FC<AnimatedPostItemProps> = ({ item, index }) => {
           stiffness: 100,
         },
       }}
-      key={item.id}
+      key={item.path}
     >
       <PostItem data={item} />
     </m.li>

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

@@ -5,25 +5,14 @@ import AnimatedPostItem from './AnimatedPostItem';
 import { NormalContainer } from '@/components/layout/container/Normal';
 import { buildPostData } from '@/core';
 
-// 假数据
-const mockData = [
-  { id: 1, title: '文章标题 1', content: '这是文章内容 1' },
-  { id: 2, title: '文章标题 2', content: '这是文章内容 2' },
-  { id: 3, title: '文章标题 3', content: '这是文章内容 3' },
-  { id: 12, title: '文章标题 1', content: '这是文章内容 1' },
-  { id: 22, title: '文章标题 2', content: '这是文章内容 2' },
-  { id: 32, title: '文章标题 3', content: '这是文章内容 3' },
-  // 更多假数据
-];
-
 const ArticleList: React.FC = () => {
-  console.log(buildPostData());
+  const { postDataList } = buildPostData();
 
   return (
     <NormalContainer>
       <ul>
-        {mockData.map((item, index) => (
-          <AnimatedPostItem key={item.id} item={item} index={index} />
+        {postDataList.map((item, index) => (
+          <AnimatedPostItem key={item.path} item={item} index={index} />
         ))}
       </ul>
     </NormalContainer>

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

@@ -3,26 +3,28 @@ import { memo } from 'react';
 
 import { PostItemHoverOverlay } from './PostItemHoverOverlay';
 
+import dayjs from '@/lib/dayjs';
 import { MdiClockOutline } from '@/components/icons/clock';
 import { FeHash } from '@/components/icons/fa-hash';
+import type { PostItem as PostItemType } from '@/core';
 
-export const PostItem = memo<{ data: any }>(function PostItem({ data }) {
-  const categorySlug = data.category?.slug;
-  const postLink = `/posts/${categorySlug}/${data.slug}`;
+export const PostItem = memo<{ data: PostItemType }>(function PostItem({ data }) {
+  const postLink = `/notes/${data.path}`;
 
   return (
-    <Link href={postLink} className="relative flex flex-col py-8 focus-visible:!shadow-none">
+    <Link href={postLink} className="relative flex flex-col py-8 focus-visible:!shadow-none gap-2">
       <PostItemHoverOverlay />
       <h2 className="relative text-balance break-words text-2xl font-medium">{data.title}</h2>
 
       <div className="post-meta-bar mt-2 flex select-none flex-wrap items-center justify-start gap-8 text-base-content/60">
         <span className=" flex min-w-0 items-center space-x-1 text-sm">
           <MdiClockOutline />
-          <p>2024 年 6 月 4 日 星期二</p>
+          {data.createdAt ? dayjs(data.createdAt).format('YYYY 年 M 月 D 日') : '1999 年 9 月 9 日'}
+          {data.updatedAt && <>&nbsp;&nbsp;(已编辑)</>}
         </span>
         <span className="flex min-w-0 items-center space-x-1 text-sm">
           <FeHash className="translate-y-[0.5px]" />
-          <p>技术/react</p>
+          <p>{data.tag}</p>
         </span>
       </div>
     </Link>

src/components/modules/list/PostItem.tsx

@@ -2,7 +2,7 @@ import jsonData from '@md/index.json';
 import { join } from 'node:path';
 
 import { symbolsTime, symbolsCount } from '@/lib/count';
-import { getLastGitUpdateTime } from '@/lib/git';
+import { getFirstGitCommitTime, getLastGitUpdateTime } from '@/lib/git';
 
 export type PostItem = {
   path: string;
@@ -13,12 +13,16 @@ export type PostItem = {
   title: string;
   tag: string;
   updatedAt: Date | null;
+  createdAt: Date | null;
+  modified: boolean;
+  coverImage: string;
 };
 
 export type PostJsonType = {
   path: string;
   title: string;
   tag: string;
+  coverImage: string;
 };
 export type PostMap = Record<string, PostItem>;
 
@@ -40,12 +44,21 @@ export function buildPostData() {
     itemInfo.tag = item.tag;
     itemInfo.path = item.path.replace('.md', '');
     itemInfo.rawFilePath = `./${item.path}`;
+    itemInfo.coverImage = item.coverImage.startsWith('http')
+      ? item.coverImage
+      : `/postCoverImage/${item.coverImage}`;
 
     itemInfo.text = file;
     itemInfo.count = symbolsCount(file);
     itemInfo.readingTime = symbolsTime(file, 0, 200);
     itemInfo.updatedAt = getLastGitUpdateTime(join('markdown/', item.path));
-    console.log(itemInfo);
+    itemInfo.createdAt = getFirstGitCommitTime(join('markdown/', item.path));
+
+    itemInfo.modified =
+      itemInfo.updatedAt && itemInfo.createdAt
+        ? itemInfo.updatedAt.getTime() !== itemInfo.createdAt.getTime()
+        : false;
+
     postDataMap[itemInfo.path] = itemInfo;
     postDataList.push(itemInfo);
   }
@@ -54,5 +67,13 @@ export function buildPostData() {
     processPostItem(postJsonItem);
   });
 
+  postDataList.sort((a, b) => {
+    if (a.createdAt && b.createdAt) {
+      return b.createdAt.getTime() - a.createdAt.getTime();
+    }
+
+    return 0;
+  });
+
   return { postDataMap, postDataList };
 }

src/core/index.ts

@@ -0,0 +1,6 @@
+import dayjs from 'dayjs';
+import 'dayjs/locale/zh-cn';
+
+dayjs.locale('zh-cn');
+
+export default dayjs;

src/lib/dayjs.ts

@@ -2,21 +2,34 @@ import { execSync } from 'node:child_process';
 
 export function getLastGitUpdateTime(filePath: string): Date | null {
   try {
-    // 执行 git log 命令获取最后一次提交的日期
     const command = `git log -1 --format="%ai" -- "${filePath}"`;
     const stdout = execSync(command).toString().trim();
-    // 如果没有获取到日期，则返回 null
 
     if (!stdout) {
       return null;
     }
-    // 将获取到的日期字符串转换为 Date 对象
 
     return new Date(stdout);
   } catch (error) {
-    // 如果执行命令时出错（例如，文件未被跟踪或路径无效），返回 null
     console.error('Error fetching git commit time:', error);
 
     return null;
   }
 }
+
+export function getFirstGitCommitTime(filePath: string): Date | null {
+  try {
+    const command = `git log --reverse -1 --format="%ai" -- "${filePath}"`;
+    const stdout = execSync(command).toString().trim();
+
+    if (!stdout) {
+      return null;
+    }
+
+    return new Date(stdout);
+  } catch (error) {
+    console.error('Error fetching git first commit time:', error);
+
+    return null;
+  }
+}