initial commit

components/readerpage/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="my-5">
+        <Giscus
+          id={props.postId}
+          repo={Config.Giscus.repo as `${string}/${string}`}
+          repoId={Config.Giscus.repoId}
+          category={Config.Giscus.category}
+          categoryId={Config.Giscus.categoryId}
+          mapping="pathname"
+          term={props.postId}
+          reactionsEnabled="1"
+          emitMetadata="0"
+          theme={theme === "light" ? "light_tritanopia" : "dark_tritanopia"}
+          inputPosition="top"
+          loading="eager"
+          lang="en"
+        />
+      </div>
+    )
+  );
+};

components/readerpage/PostCover.tsx

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

components/readerpage/ShareButtons.tsx

@@ -0,0 +1,53 @@
+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 url = `https://${Config.SiteDomain}/blog/${props.postId}`;
+  const copyShareText = `${props.title} ${props.subtitle ? `- ${props.subtitle}` : ""} - ${
+    Config.Nickname
+  }'s Blog ${url}`;
+  const { toast } = useToast();
+  return (
+    <div className="my-3 flex space-x-4 text-2xl">
+      {props.allowShare != false ? (
+        <>
+          <div className="my-auto text-sm font-bold">{"SHARE :"}</div>
+          <FacebookShareButton className="mx-2" url={url} quote={props.quote ?? props.title}>
+            <FaFacebook title="Share to Facebook" className="hover:text-blue-500" />
+          </FacebookShareButton>
+          <TwitterShareButton className="mx-2" url={url} title={props.title}>
+            <FaTwitter title="Share to Twitter" className="hover:text-sky-500" />
+          </TwitterShareButton>
+          <LinkedinShareButton className="mx-2" url={url} title={props.title}>
+            <FaLinkedin title="Share to Linkedin" className="hover:text-blue-500" />
+          </LinkedinShareButton>
+          <RedditShareButton className="mx-2" url={url} title={props.title}>
+            <FaReddit title="Share to Reddit" className="hover:text-orange-500" />
+          </RedditShareButton>
+          <CopyToClipboard
+            onCopy={() => {
+              toast({ description: "Link is copied successfully" });
+            }}
+            text={copyShareText}
+          >
+            <FaLink
+              title="Share with the post url and description"
+              className="hover:text-gray-500 mx-2 cursor-pointer"
+            />
+          </CopyToClipboard>
+        </>
+      ) : (
+        <div className="my-auto text-sm font-bold">{"SHARING IS NOT ALLOWED"}</div>
+      )}
+    </div>
+  );
+};

components/readerpage/SideTOC.tsx

@@ -0,0 +1,41 @@
+import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet";
+import { TTOCItem } from "@/types/toc.type";
+import Link from "next/link";
+import { useState } from "react";
+import { FaHeading } from "react-icons/fa";
+
+export const SideTOC = (props: { data: TTOCItem[] }) => {
+  const [isTOCOpen, setIsTOCOpen] = useState(false);
+  return (
+    <Sheet open={isTOCOpen} onOpenChange={setIsTOCOpen}>
+      <SheetTrigger
+        title="Open the table of contents"
+        className="bottom-7 right-4 fixed bg-white dark:bg-black border dark:border-gray-500 shadow-xl"
+      >
+        <FaHeading onClick={() => setIsTOCOpen(!isTOCOpen)} className="p-3 w-14 h-14" />
+      </SheetTrigger>
+      <SheetContent side={"left"}>
+        <SheetHeader>
+          <SheetTitle className="mt-8 font-bold">{"TABLE OF CONTENTS"}</SheetTitle>
+        </SheetHeader>
+        <ul className="my-3 flat-scrollbar h-[70vh] flex flex-col overflow-y-auto">
+          {props.data?.map((item) => (
+            <Link
+              className="hover:text-sky-500 border-t border-b py-2 border-dashed"
+              onClick={() => {
+                setIsTOCOpen(false);
+              }}
+              key={`flat-toc-${item.anchorId}`}
+              href={`#${item.anchorId}`}
+            >
+              <li
+                className="my-2 target:text-blue-500"
+                style={{ paddingLeft: `${item.level - 2}em` }}
+              >{`${item.title}`}</li>
+            </Link>
+          ))}
+        </ul>
+      </SheetContent>
+    </Sheet>
+  );
+};

components/readerpage/TOC.tsx

@@ -0,0 +1,21 @@
+import { TTOCItem } from "@/types/toc.type";
+import Link from "next/link";
+
+export const TOC = (props: { data: TTOCItem[] }) => {
+  return (
+    <div className="sticky top-[5em] m-5 p-2 rounded-md border-2">
+      <div className="p-2 text-center font-bold">{"TABLE OF CONTENTS"}</div>
+      <hr />
+      <ul className="flat-scrollbar my-1 px-1 h-[60vh] overflow-y-auto">
+        {props.data?.map((item) => (
+          <Link className="hover:text-sky-500" href={`#${item.anchorId}`} key={`toc-${item.anchorId}`}>
+            <li
+              className="my-2 text-sm target:text-blue-500"
+              style={{ paddingLeft: `${item.level - 1}em` }}
+            >{`${item.title}`}</li>
+          </Link>
+        ))}
+      </ul>
+    </div>
+  );
+};