[upgrade] Abstract components on the page into subcomponents

components/reader-page/BottomCard.tsx

@@ -1,10 +1,14 @@
+import seal from "@/assets/icons/seal.svg";
 import { Config } from "@/data/config";
 
 export const BottomCard = () => {
   return (
-    <div className="flex w-full flex-col justify-center p-8">
-      <img alt={Config.AuthorName} className="mx-auto h-24 w-24 rounded-full" src={Config.AvatarURL} />
-      <p className="mx-auto mt-5 content-font">{Config.Sentence}</p>
+    <div className="flex w-full select-none flex-col justify-center p-8">
+      <div
+        className="mx-auto h-24 w-24"
+        style={{ backgroundImage: `url(${seal.src})`, backgroundRepeat: "no-repeat", backgroundSize: "contain" }}
+      />
+      <p className={"mx-auto mt-5 content-font"}>{Config.Sentence}</p>
     </div>
   );
 };

components/reader-page/DrawerTOC.tsx

@@ -1,12 +1,12 @@
 import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet";
 import { useActiveHeading } from "@/hooks/useActiveHeading";
 import useDrawerTOCState from "@/stores/useDrawerTOCState";
-import type { TTOCItem } from "@/types/docs.type";
+import type { TPostTOCItem } from "@/types/docs.type";
 import Link from "next/link";
 import { MdMenuBook } from "react-icons/md";
 import { twMerge } from "tailwind-merge";
 
-export const DrawerTOC = (props: { data: TTOCItem[] }) => {
+export const DrawerTOC = (props: { data: TPostTOCItem[] }) => {
   const isTOCOpen = useDrawerTOCState((state) => state.isOpen);
   const setIsTOCOpen = useDrawerTOCState((state) => state.changeDrawerTOCOpen);
   const activeId = useActiveHeading(props.data.map((item) => `#${item.anchorId}`));
@@ -16,13 +16,18 @@ export const DrawerTOC = (props: { data: TTOCItem[] }) => {
         className="fixed right-5 bottom-16 border border-gray-700 bg-white shadow-xl dark:border-gray-500 dark:bg-black"
         title="Open the table of contents"
       >
-        <div className="p-1 font-bold" onClick={() => setIsTOCOpen(!isTOCOpen)} title="Open the table of contents">
+        <div
+          className="p-1 font-bold"
+          onClick={() => setIsTOCOpen(!isTOCOpen)}
+          onKeyDown={() => {}}
+          title="Open the table of contents"
+        >
           <MdMenuBook className="text-3xl" />
         </div>
       </SheetTrigger>
-      <SheetContent side={"left"}>
+      <SheetContent side={"right"}>
         <SheetHeader>
-          <SheetTitle className="mt-8 font-bold">{"TABLE OF CONTENTS"}</SheetTitle>
+          <SheetTitle className="mt-8 text-center font-bold text-base">{"TABLE OF CONTENTS"}</SheetTitle>
         </SheetHeader>
         <ul className="flat-scrollbar flat-scrollbar-normal my-3 flex h-[70vh] flex-col overflow-y-auto">
           {props.data?.map((item) => (

components/reader-page/MorePostLinks.tsx

@@ -0,0 +1,26 @@
+import type { TPostListItem } from "@/types/docs.type";
+import Link from "next/link";
+
+export const MorePostLinks = (props: {
+  prevPostListItem: TPostListItem | null;
+  nextPostListItem: TPostListItem | null;
+}) => {
+  return (
+    <ul className="my-5 flex list-disc flex-col justify-center px-5">
+      {props.prevPostListItem && (
+        <li className="my-1">
+          <Link className=" hover:text-sky-600 dark:hover:text-sky-500" href={`/blog/${props.prevPostListItem?.id}`}>
+            {props.prevPostListItem?.frontMatter.title}
+          </Link>
+        </li>
+      )}
+      {props.nextPostListItem && (
+        <li className="my-1">
+          <Link className=" hover:text-sky-600 dark:hover:text-sky-500" href={`/blog/${props.nextPostListItem?.id}`}>
+            {props.nextPostListItem?.frontMatter.title}
+          </Link>
+        </li>
+      )}
+    </ul>
+  );
+};

components/reader-page/PostComments.tsx

@@ -11,7 +11,6 @@ export const PostComments = (props: { postId: string }) => {
           category={Config.Giscus.category}
           categoryId={Config.Giscus.categoryId}
           emitMetadata="0"
-          id={props.postId}
           inputPosition="top"
           lang="en"
           loading="eager"

components/reader-page/PostCover.tsx

@@ -3,7 +3,7 @@ export const PostCover = (props: { coverURL: string }) => {
     <div
       className="mt-0 mb-8 flex w-full justify-center rounded-md"
       style={{
-        aspectRatio: "5/2",
+        aspectRatio: "5/1",
         background: `url(${props.coverURL})`,
         backgroundSize: "cover",
         backgroundRepeat: "no-repeat",

components/reader-page/PostRender.tsx

@@ -0,0 +1,70 @@
+import { MDXComponentsSet } from "@/components/mdx";
+import { normalizeDate } from "@/lib/date";
+import type { TPostFrontmatter, TPostListItem, TPostTOCItem } from "@/types/docs.type";
+import { nanoid } from "nanoid";
+import { MDXRemote, type MDXRemoteSerializeResult } from "next-mdx-remote";
+import Link from "next/link";
+
+export const PostRender = (props: {
+  compiledSource: MDXRemoteSerializeResult;
+  tocList: TPostTOCItem[];
+  frontMatter: TPostFrontmatter;
+  postId: string;
+  nextPostListItem: TPostListItem | null;
+  prevPostListItem: TPostListItem | null;
+}) => {
+  const compiledSource = props.compiledSource;
+  return (
+    <div className="typesetting">
+      <div className="border-black border-b-2 pb-1 dark:border-gray-300">
+        <div
+          className={
+            "caption-font my-2 flex justify-center whitespace-normal break-words font-bold text-[1.8rem] text-black leading-[2.1rem] dark:text-white"
+          }
+        >
+          {props.frontMatter?.title}
+        </div>
+        {props.frontMatter?.subtitle && (
+          <div className={"my-1 flex justify-center font-bold text-xl content-font"}>{props.frontMatter.subtitle}</div>
+        )}
+        <div className="my-1 flex justify-center text-sm italic">{normalizeDate(props.frontMatter?.time)}</div>
+        {props.frontMatter?.summary && (
+          <p
+            className={
+              "my-4 border-gray-400 border-l-4 bg-gray-100 py-5 pr-2 pl-5 text-[16px] text-gray-800 content-font dark:border-gray-600 dark:bg-gray-900 dark:text-gray-300"
+            }
+          >
+            {props.frontMatter?.summary}
+          </p>
+        )}
+        {props.frontMatter.tags && (
+          <div className={"flex flex-wrap border-black border-t-2 pt-1 dark:border-gray-300"}>
+            {props.frontMatter.tags.map((tagName) => (
+              <Link
+                className="not-prose my-1 mr-2 border-2 border-black px-2 py-1 font-bold text-gray-700 text-xs hover:text-black dark:border-gray-300 dark:text-gray-300 dark:hover:text-gray-200"
+                href={`/tags/${tagName}`}
+                key={`tags-${nanoid()}`}
+              >
+                {tagName}
+              </Link>
+            ))}
+          </div>
+        )}
+      </div>
+      <div
+        className={`text-wrap border-gray-500 content-font ${!props.frontMatter.allowShare ? "select-none" : ""}`}
+        // {...handleLeftSwipe}
+      >
+        {compiledSource && (
+          <MDXRemote
+            compiledSource={compiledSource.compiledSource}
+            // @ts-ignore
+            components={MDXComponentsSet}
+            frontmatter={compiledSource.frontmatter}
+            scope={compiledSource.scope}
+          />
+        )}
+      </div>
+    </div>
+  );
+};

components/reader-page/TOC.tsx

@@ -1,13 +1,13 @@
 import { useActiveHeading } from "@/hooks/useActiveHeading";
-import type { TTOCItem } from "@/types/docs.type";
+import type { TPostTOCItem } from "@/types/docs.type";
 import Link from "next/link";
 import { twMerge } from "tailwind-merge";
 
-export const TOC = (props: { data: TTOCItem[] }) => {
+export const TOC = (props: { data: TPostTOCItem[] }) => {
   const activeId = useActiveHeading(props.data.map((item) => `#${item.anchorId}`));
 
   return (
-    <div className="mx-5">
+    <div className="mr-5">
       <div className="border-gray-500 border-t-2 border-b-2 p-2 text-center font-bold text-lg">
         {"TABLE OF CONTENTS"}
       </div>