upgrade the project

.eslintrc.json

@@ -1,6 +1,8 @@
 {
-  "extends": "next/core-web-vitals",
+  "extends": ["next/core-web-vitals"],
   "rules": {
-    "@next/next/no-img-element": "off"
+    "@next/next/no-img-element": "off",
+    "react/jsx-uses-vars": "error",
+    "react/jsx-sort-props": 2
   }
 }

.prettierignore

@@ -0,0 +1,3 @@
+*.woff2
+*.woff2
+*.ttf

.prettierrc

@@ -1,5 +1,7 @@
 {
   "printWidth": 120,
   "endOfLine": "auto",
-  "plugins": ["prettier-plugin-tailwindcss", "prettier-plugin-organize-imports"]
+  "jsxBracketSameLine": true,
+  "trailingComma": "all",
+  "plugins": ["prettier-plugin-tailwindcss", "prettier-plugin-organize-imports", "react"]
 }

components/homepage/HomeCover.tsx

@@ -1,33 +1,34 @@
 import { SocialIcons } from "@/components/utils/SocialIcons";
 import { Config } from "@/data/config";
-import { fontFangZhengXiaoBiaoSongCN, fontSourceSerifScreenCN } from "@/styles/font";
 
 export const HomeCover = () => {
   return (
     <>
-      <div
-        className="mb-20 mt-5 flex w-full justify-center rounded-xl"
-        style={{
-          aspectRatio: "4/1",
-          background: `url(${Config.PageCovers.websiteCoverURL})`,
-          backgroundSize: "cover",
-        }}
-      >
-        <img
-          className="relative top-1/2 my-auto h-24 w-24 rounded-full shadow-2xl md:h-32 md:w-32"
-          alt={Config.Nickname}
-          src={Config.AvatarURL}
-        />
-      </div>
-      <div className={`${fontFangZhengXiaoBiaoSongCN.className} my-8 text-center text-4xl font-bold`}>
-        {Config.Nickname}
+      <div className="w-full">
+        <div
+          className="mb-20 mt-5 flex w-full justify-center rounded-xl"
+          style={{
+            aspectRatio: "4/1",
+            background: `url(${Config.PageCovers.websiteCoverURL})`,
+            backgroundSize: "cover",
+          }}
+        >
+          <img
+            alt={Config.Nickname}
+            className="relative top-1/2 my-auto h-24 w-24 rounded-full shadow-2xl md:h-32 md:w-32"
+            src={Config.AvatarURL}
+          />
+        </div>
       </div>
-      <SocialIcons />
+      <div className={`font-fang-zheng-xiao-biao-song my-8 text-center text-4xl font-bold`}>{Config.Nickname}</div>
       {Config.Sentence && (
-        <div className="my-8 flex justify-center">
-          <p className={`${fontSourceSerifScreenCN.className} text-lg`}>{Config.Sentence}</p>
+        <div className="my-5 flex justify-center">
+          <p className={`font-source-serif-screen text-lg`}>{Config.Sentence}</p>
         </div>
       )}
+      <div className="my-8">
+        <SocialIcons />
+      </div>
     </>
   );
 };

components/mdx/Blockquote.tsx

@@ -0,0 +1,13 @@
+const Blockquote = (props: JSX.IntrinsicElements["blockquote"]) => {
+  return (
+    <blockquote
+      className={
+        "not-prose scroll-mt-20 my-5 px-5 py-4 bg-gray-100 dark:bg-gray-800 dark:border-gray-700 border-gray-300 border-l-4"
+      }
+    >
+      {props.children}
+    </blockquote>
+  );
+};
+
+export default Blockquote;

components/mdx/H2.tsx

@@ -1,9 +1,9 @@
-import { fontFangZhengXiaoBiaoSongCN } from "@/styles/font";
-
-export const H2 = (props: JSX.IntrinsicElements["h2"]) => {
+const H2 = (props: JSX.IntrinsicElements["h2"]) => {
   return (
-    <h2 className={`${fontFangZhengXiaoBiaoSongCN.className} mt-4 mb-2 scroll-mt-20`} id={props.id}>
+    <h2 className={`font-fang-zheng-xiao-biao-song scroll-mt-20`} id={props.id}>
       {props.children}
     </h2>
   );
 };
+
+export default H2;

components/mdx/PreWrapper.tsx

@@ -1,4 +1,7 @@
 import { useRef, useState } from "react";
+import { FaCheck } from "react-icons/fa";
+import { IoCopyOutline } from "react-icons/io5";
+import { Button } from "../ui/button";
 
 const PreWrapper = ({ children }: { children: JSX.Element }) => {
   const textInput = useRef(null);
@@ -16,51 +19,23 @@ const PreWrapper = ({ children }: { children: JSX.Element }) => {
     setCopied(true);
     //@ts-ignore
     textInput.current && navigator.clipboard.writeText(textInput.current.textContent);
-    setTimeout(() => {
-      setCopied(false);
-    }, 2000);
   };
 
   return (
-    <div ref={textInput} onMouseEnter={onEnter} onMouseLeave={onExit} className="relative flat-scrollbar-normal">
+    <div className="relative flat-scrollbar-normal" onMouseLeave={onExit} onMouseMove={onEnter} ref={textInput}>
       {hovered && (
-        <button
+        <Button
           aria-label="Copy code"
-          className={`absolute right-2 top-2 h-8 w-8 rounded border-2 bg-gray-700 p-1 dark:bg-gray-800 ${
-            copied ? "border-green-400 focus:border-green-400 focus:outline-none" : "border-gray-300"
-          }`}
+          className={`absolute right-2 top-2 h-8 w-8 rounded p-1 ${copied ? "hover:text-green-500 text-green-500" : ""}`}
           onClick={onCopy}
+          variant={"outline"}
         >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-            fill="none"
-            className={copied ? "text-green-400" : "text-gray-300"}
-          >
-            {copied ? (
-              <>
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"
-                />
-              </>
-            ) : (
-              <>
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
-                />
-              </>
-            )}
-          </svg>
-        </button>
+          {copied ? <FaCheck /> : <IoCopyOutline />}
+        </Button>
       )}
-      <pre className="flat-scrollbar-normal">{children}</pre>
+      <pre className="p-2 dark:bg-[#0d1117] bg-[#F6F8FA] rounded-md flat-scrollbar-normal not-prose text-sm dark:selection:bg-gray-700 selection:bg-gray-300 selection:text-inherit">
+        {children}
+      </pre>
     </div>
   );
 };

components/mdx/index.ts

@@ -1,4 +1,5 @@
-import { H2 } from "./H2";
+import Blockquote from "./Blockquote";
+import H2 from "./H2";
 import ImageWrapper from "./ImageWrapper";
 import PreWrapper from "./PreWrapper";
 import TableWrapper from "./TableWrapper";
@@ -8,4 +9,5 @@ export const MDXComponentsSet = {
   table: TableWrapper,
   img: ImageWrapper,
   h2: H2,
+  blockquote: Blockquote,
 };

components/readerpage/BottomCard.tsx

@@ -0,0 +1,10 @@
+import { Config } from "@/data/config";
+
+export const BottomCard = () => {
+  return (
+    <div className="p-8 w-full flex flex-col justify-center">
+      <img alt={Config.AuthorName} className="h-24 w-24 rounded-full mx-auto" src={Config.AvatarURL} />
+      <p className="mx-auto mt-5 font-source-serif-screen">{Config.Sentence}</p>
+    </div>
+  );
+};

components/readerpage/DrawerTOC.tsx

@@ -11,12 +11,12 @@ export const DrawerTOC = (props: { data: TTOCItem[] }) => {
   const setIsTOCOpen = useDrawerTOCState((state) => state.changeDrawerTOCOpen);
   const activeId = useActiveHeading(props.data.map((item) => `#${item.anchorId}`));
   return (
-    <Sheet open={isTOCOpen} onOpenChange={setIsTOCOpen}>
+    <Sheet onOpenChange={setIsTOCOpen} open={isTOCOpen}>
       <SheetTrigger
-        title="Open the table of contents"
         className="bottom-16 right-5 fixed bg-white dark:bg-black border-gray-700 border dark:border-gray-500 shadow-xl"
+        title="Open the table of contents"
       >
-        <div title="Open the table of contents" onClick={() => setIsTOCOpen(!isTOCOpen)} className="p-1 font-bold">
+        <div className="p-1 font-bold" onClick={() => setIsTOCOpen(!isTOCOpen)} title="Open the table of contents">
           <MdMenuBook className="text-3xl" />
         </div>
       </SheetTrigger>
@@ -31,11 +31,11 @@ export const DrawerTOC = (props: { data: TTOCItem[] }) => {
                 "border-t border-b py-1 px-2 border-dashed hover:bg-gray-100 hover:dark:bg-gray-900",
                 activeId === `#${item.anchorId}` ? "bg-gray-100 dark:bg-gray-900 text-sky-700 dark:text-sky-500" : "",
               )}
+              href={`#${item.anchorId}`}
+              key={`drawer-toc-${item.anchorId}`}
               onClick={() => {
                 setIsTOCOpen(false);
               }}
-              key={`drawer-toc-${item.anchorId}`}
-              href={`#${item.anchorId}`}
             >
               <li className={"p-2"} style={{ paddingLeft: `${item.level - 2}em` }}>{`${item.title}`}</li>
             </Link>

components/readerpage/PostComments.tsx

@@ -8,19 +8,19 @@ export const PostComments = (props: { postId: string }) => {
     Config.Giscus && (
       <div className="mt-10 mb-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"}
+          id={props.postId}
           inputPosition="top"
-          loading="eager"
           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/readerpage/PostCover.tsx

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

components/readerpage/ShareButtons.tsx

@@ -11,27 +11,26 @@ export const ShareButtons = (props: {
   title: string;
   quote?: string | null;
 }) => {
-  const postURL = `https://${Config.SiteDomain}/blog/${props.postId}`;
+  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="my-3 flex space-x-4 text-2xl">
+    <div className="py-3 flex justify-center space-x-4 text-2xl">
       {props.allowShare != false ? (
         <>
-          <div className="my-auto text-sm font-bold">{"SHARE :"}</div>
-          <FacebookShareButton className="mx-2" url={postURL} quote={props.quote ?? props.title}>
-            <FaFacebook title="Share to Facebook" className="hover:text-blue-500" />
+          <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" url={postURL} title={props.title}>
-            <FaTwitter title="Share to Twitter" className="hover:text-sky-500" />
+          <TwitterShareButton className="mx-2" title={props.title} url={postURL}>
+            <FaTwitter className="hover:text-sky-500" title="Share to Twitter" />
           </TwitterShareButton>
-          <LinkedinShareButton className="mx-2" url={postURL} title={props.title}>
-            <FaLinkedin title="Share to Linkedin" className="hover:text-blue-500" />
+          <LinkedinShareButton className="mx-2" title={props.title} url={postURL}>
+            <FaLinkedin className="hover:text-blue-500" title="Share to Linkedin" />
           </LinkedinShareButton>
-          <RedditShareButton className="mx-2" url={postURL} title={props.title}>
-            <FaReddit title="Share to Reddit" className="hover:text-orange-500" />
+          <RedditShareButton className="mx-2" title={props.title} url={postURL}>
+            <FaReddit className="hover:text-orange-500" title="Share to Reddit" />
           </RedditShareButton>
           <CopyToClipboard
             onCopy={() => {
@@ -40,8 +39,8 @@ export const ShareButtons = (props: {
             text={copyShareText}
           >
             <FaLink
-              title="Share with the post url and description"
               className="hover:text-gray-500 mx-2 cursor-pointer"
+              title="Share with the post url and description"
             />
           </CopyToClipboard>
         </>

components/readerpage/TOC.tsx

@@ -1,34 +1,31 @@
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { useActiveHeading } from "@/hooks/useActiveHeading";
 import { TTOCItem } from "@/types/toc.type";
 import Link from "next/link";
 import { twMerge } from "tailwind-merge";
-import { Separator } from "../ui/separator";
 
 export const TOC = (props: { data: TTOCItem[] }) => {
   const activeId = useActiveHeading(props.data.map((item) => `#${item.anchorId}`));
 
   return (
-    <Card className="sticky top-[5em] mx-5">
-      <CardHeader className="p-3">
-        <CardTitle className="text-lg text-center">{"TABLE OF CONTENTS"}</CardTitle>
-      </CardHeader>
-      <Separator />
-      <CardContent className="px-2 py-2 h-[60vh] overflow-y-auto flat-scrollbar-normal">
-        <ul>
+    <div className="mx-5">
+      <div className="text-lg text-center p-2 font-bold border-t-2 border-b-2 border-gray-500">
+        {"TABLE OF CONTENTS"}
+      </div>
+      <div className="px-2 py-2 h-[60vh] overflow-y-auto flat-scrollbar-normal">
+        <div>
           {props.data?.map((item) => (
-            <Link className={""} href={`#${item.anchorId}`} key={`toc-${item.anchorId}`}>
-              <li
+            <Link href={`#${item.anchorId}`} key={`toc-${item.anchorId}`}>
+              <div
                 className={twMerge(
-                  `py-2 text-sm rounded-lg hover:bg-gray-100 hover:dark:bg-gray-900`,
-                  activeId === `#${item.anchorId}` ? "bg-gray-100 dark:bg-gray-900 text-sky-700 dark:text-sky-500" : "",
+                  `py-2 text-sm rounded-lg 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}`}</li>
+              >{`${item.title}`}</div>
             </Link>
           ))}
-        </ul>
-      </CardContent>
-    </Card>
+        </div>
+      </div>
+    </div>
   );
 };