[upgrade] Abstract components on the page into subcomponents

2024-09-28 00:18:55 +08:00
parent f00a79fcf3
commit 959e513dcd
31 changed files with 508 additions and 374 deletions
--- a/components/reader-page/PostRender.tsx
+++ b/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>
+  );
+};