feat: 动态路由展示博客

Author: coderz-w

src/app/(app)/notes/[nid]/page.tsx

@@ -9,33 +9,43 @@ import {
   PageTransition,
 } from './pageExtra';
 
+import { type PostItem as PostItemType, buildPostData } from '@/core';
 import { LayoutRightSidePortal } from '@/providers/shared/LayoutRightSideProvider';
 import { ArticleRightAside } from '@/components/modules/shared/ArticleRightAside';
 import { Signature } from '@/components/modules/shared/signature';
 
+const { postDataMap } = buildPostData();
+
+export type PageInnerProps = { postData: PostItemType };
+
 export default async function Page({ params }: { params: Record<string, any> }) {
   const { nid } = params;
-  console.log('id', nid);
+  const postData = postDataMap[nid];
+  console.log(postData);
 
   return (
     <PageTransition>
       <PaperLayout>
-        <PageInner />
+        <PageInner postData={postData} />
       </PaperLayout>
     </PageTransition>
   );
 }
 
-const PageInner = () => (
+const PageInner = ({ postData }: PageInnerProps) => (
   <>
     <div>
-      <NoteTitle />
+      <NoteTitle title={postData.title} />
       <span className="flex flex-wrap items-center text-sm text-neutral-content/60">
-        <NoteDateMeta />
+        <NoteDateMeta
+          createdAt={postData.createdAt!}
+          updatedAt={postData.updatedAt!}
+          modified={postData.modified}
+        />
       </span>
     </div>
     <IndentArticleContainer>
-      <NoteMarkdown />
+      <NoteMarkdown text={postData.text} />
       <div className="signature-animated my-2 flex w-full justify-end" data-hide-print="true">
         <Signature />
       </div>

src/app/(app)/notes/[nid]/pageExtra.tsx

@@ -4,16 +4,13 @@ import React, { PropsWithChildren, useEffect, useRef } from 'react';
 import { m } from 'framer-motion';
 import { useShallow } from 'zustand/react/shallow';
 
-import text from './test.md';
-
+import dayjs from '@/lib/dayjs';
 import { MdiClockOutline } from '@/components/icons/clock';
 import { cn } from '@/lib/helper';
 import { MainMarkdown } from '@/components/ui/markdown';
 import { useMainArticleStore } from '@/store/mainArticleStore';
 
-export const NoteTitle = () => {
-  const title = '我的一篇文章';
-
+export const NoteTitle = ({ title }: { title: string }) => {
   if (!title) return null;
 
   return (
@@ -25,11 +22,24 @@ export const NoteTitle = () => {
   );
 };
 
-export const NoteDateMeta = () => {
+export const NoteDateMeta = ({
+  createdAt,
+  updatedAt,
+  modified,
+}: {
+  createdAt: Date;
+  updatedAt: Date;
+  modified: boolean;
+}) => {
   return (
     <span className="inline-flex items-center space-x-1">
       <MdiClockOutline />
-      <time className="font-medium font-mono">2024年10月27日 星期日</time>
+      <time className=" font-semibold text-base font-mono">
+        {createdAt && !modified
+          ? dayjs(createdAt).format('YYYY 年 M 月 D 日')
+          : '1999 年 9 月 9 日'}
+        {modified && <>编辑于&nbsp;&nbsp; {dayjs(updatedAt).format('YYYY 年 M 月 D 日')}</>}
+      </time>
     </span>
   );
 };
@@ -50,7 +60,7 @@ const MarkdownRenderers: Record<string, any> = {
   },
 };
 
-export const NoteMarkdown = () => {
+export const NoteMarkdown = ({ text }: { text: string }) => {
   return <MainMarkdown className="mt-10" allowsScript renderers={MarkdownRenderers} value={text} />;
 };
 

src/components/modules/toc/TocTree.tsx

@@ -21,7 +21,6 @@ import { useStateToRef } from '@/hooks/common/use-state-ref';
 import { cn } from '@/lib/helper';
 import { springScrollToElement } from '@/lib/scroller';
 
-// 使用 `useState` 来管理本地的 activeId 状态
 function useActiveId($headings: HTMLHeadingElement[]) {
   const [activeId, setActiveId] = useState<string | null>(null);
 
@@ -75,9 +74,6 @@ export const TocTree = ({
     return Array.from($headings).map((el, idx) => {
       const depth = +el.tagName.slice(1);
       const elClone = el.cloneNode(true) as HTMLElement;
-      elClone.querySelectorAll('del, .katex-container').forEach((del) => {
-        del.remove();
-      });
 
       const title = elClone.textContent || '';
       const index = idx;