[fix] reorganize some modules

components/reader-page/BottomCard.tsx

@@ -0,0 +1,10 @@
+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>
+  );
+};

components/reader-page/DrawerTOC.tsx

@@ -0,0 +1,47 @@
+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/toc.type";
+import Link from "next/link";
+import { MdMenuBook } from "react-icons/md";
+import { twMerge } from "tailwind-merge";
+
+export const DrawerTOC = (props: { data: TTOCItem[] }) => {
+  const isTOCOpen = useDrawerTOCState((state) => state.isOpen);
+  const setIsTOCOpen = useDrawerTOCState((state) => state.changeDrawerTOCOpen);
+  const activeId = useActiveHeading(props.data.map((item) => `#${item.anchorId}`));
+  return (
+    <Sheet onOpenChange={setIsTOCOpen} open={isTOCOpen}>
+      <SheetTrigger
+        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">
+          <MdMenuBook className="text-3xl" />
+        </div>
+      </SheetTrigger>
+      <SheetContent side={"left"}>
+        <SheetHeader>
+          <SheetTitle className="mt-8 font-bold">{"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) => (
+            <Link
+              className={twMerge(
+                "border-t border-b border-dashed px-2 py-1 hover:bg-gray-100 hover:dark:bg-gray-900",
+                activeId === `#${item.anchorId}` ? "bg-gray-100 text-sky-700 dark:bg-gray-900 dark:text-sky-500" : "",
+              )}
+              href={`#${item.anchorId}`}
+              key={`drawer-toc-${item.anchorId}`}
+              onClick={() => {
+                setIsTOCOpen(false);
+              }}
+            >
+              <li className={"p-2"} style={{ paddingLeft: `${item.level - 2}em` }}>{`${item.title}`}</li>
+            </Link>
+          ))}
+        </ul>
+      </SheetContent>
+    </Sheet>
+  );
+};

components/reader-page/PostComments.tsx

@@ -0,0 +1,28 @@
+import { Config } from "@/data/config";
+import Giscus from "@giscus/react";
+import { useTheme } from "next-themes";
+
+export const PostComments = (props: { postId: string }) => {
+  const { theme } = useTheme();
+  return (
+    Config.Giscus && (
+      <div className="mt-10 mb-5">
+        <Giscus
+          category={Config.Giscus.category}
+          categoryId={Config.Giscus.categoryId}
+          emitMetadata="0"
+          id={props.postId}
+          inputPosition="top"
+          lang="en"
+          loading="eager"
+          mapping="pathname"
+          reactionsEnabled="1"
+          repo={Config.Giscus.repo as `${string}/${string}`}
+          repoId={Config.Giscus.repoId}
+          term={props.postId}
+          theme={theme === "light" ? "light_tritanopia" : "dark_tritanopia"}
+        />
+      </div>
+    )
+  );
+};

components/reader-page/PostCover.tsx

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

components/reader-page/ShareButtons.tsx

@@ -0,0 +1,52 @@
+import { useToast } from "@/components/ui/use-toast";
+import { Config } from "@/data/config";
+import { FacebookShareButton, LinkedinShareButton, RedditShareButton, TwitterShareButton } from "next-share";
+import { CopyToClipboard } from "react-copy-to-clipboard";
+import { FaFacebook, FaLink, FaLinkedin, FaReddit, FaTwitter } from "react-icons/fa6";
+
+export const ShareButtons = (props: {
+  postId: string;
+  allowShare?: boolean | null;
+  subtitle?: string | null;
+  title: string;
+  quote?: string | null;
+}) => {
+  const postURL = encodeURI(`https://${Config.SiteDomain}/blog/${props.postId}`);
+  const copyShareText = `${props.title} ${props.subtitle ? `- ${props.subtitle}` : ""} - ${
+    Config.Nickname
+  }'s Blog ${postURL}`;
+  const { toast } = useToast();
+  return (
+    <div className="flex justify-center space-x-4 py-3 text-2xl">
+      {props.allowShare !== false ? (
+        <>
+          <FacebookShareButton className="mx-2" quote={props.quote ?? props.title} url={postURL}>
+            <FaFacebook className="hover:text-blue-500" title="Share to Facebook" />
+          </FacebookShareButton>
+          <TwitterShareButton className="mx-2" title={props.title} url={postURL}>
+            <FaTwitter className="hover:text-sky-500" title="Share to Twitter" />
+          </TwitterShareButton>
+          <LinkedinShareButton className="mx-2" title={props.title} url={postURL}>
+            <FaLinkedin className="hover:text-blue-500" title="Share to Linkedin" />
+          </LinkedinShareButton>
+          <RedditShareButton className="mx-2" title={props.title} url={postURL}>
+            <FaReddit className="hover:text-orange-500" title="Share to Reddit" />
+          </RedditShareButton>
+          <CopyToClipboard
+            onCopy={() => {
+              toast({ description: "Link is copied successfully" });
+            }}
+            text={copyShareText}
+          >
+            <FaLink
+              className="mx-2 cursor-pointer hover:text-gray-500"
+              title="Share with the post url and description"
+            />
+          </CopyToClipboard>
+        </>
+      ) : (
+        <div className="my-auto font-bold text-sm">{"SHARING IS NOT ALLOWED"}</div>
+      )}
+    </div>
+  );
+};

components/reader-page/TOC.tsx

@@ -0,0 +1,31 @@
+import { useActiveHeading } from "@/hooks/useActiveHeading";
+import type { TTOCItem } from "@/types/toc.type";
+import Link from "next/link";
+import { twMerge } from "tailwind-merge";
+
+export const TOC = (props: { data: TTOCItem[] }) => {
+  const activeId = useActiveHeading(props.data.map((item) => `#${item.anchorId}`));
+
+  return (
+    <div className="mx-5">
+      <div className="border-gray-500 border-t-2 border-b-2 p-2 text-center font-bold text-lg">
+        {"TABLE OF CONTENTS"}
+      </div>
+      <div className="flat-scrollbar-normal h-[60vh] overflow-y-auto px-2 py-2">
+        <div>
+          {props.data?.map((item) => (
+            <Link href={`#${item.anchorId}`} key={`toc-${item.anchorId}`}>
+              <div
+                className={twMerge(
+                  "rounded-lg py-2 text-sm hover:text-sky-700 dark:hover:text-sky-400",
+                  activeId === `#${item.anchorId}` ? "text-sky-700 dark:text-sky-400" : "",
+                )}
+                style={{ paddingLeft: `${item.level - 1}em` }}
+              >{`${item.title}`}</div>
+            </Link>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};