Upgrade UI design and improve some functions

components/homepage/HomeCover.tsx

@@ -6,7 +6,7 @@ export const HomeCover = () => {
   return (
     <>
       <div
-        className="mb-24 mt-3 flex w-full justify-center rounded-xl"
+        className="mb-20 mt-5 flex w-full justify-center rounded-xl"
         style={{
           aspectRatio: "4/1",
           background: `url(${Config.PageCovers.websiteCoverURL})`,

components/layouts/index.tsx

@@ -3,5 +3,5 @@ export const Page = ({ children }: { children: React.ReactNode }) => {
 };
 
 export const ContentContainer = ({ children }: { children: React.ReactNode }) => {
-  return <main className="px-5 lg:px-20 xl:px-32 2xl:px-52 flex-grow">{children}</main>;
+  return <main className="px-5 md:px-10 lg:px-20 xl:px-32 2xl:px-52 flex-grow">{children}</main>;
 };

components/readerpage/DrawerTOC.tsx

@@ -1,19 +1,23 @@
 import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet";
+import { useActiveHeading } from "@/hooks/useActiveHeading";
 import useDrawerTOCState from "@/stores/useDrawerTOCState";
 import { 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 open={isTOCOpen} onOpenChange={setIsTOCOpen}>
       <SheetTrigger
         title="Open the table of contents"
-        className="bottom-7 right-4 fixed bg-white dark:bg-black border-gray-700 border dark:border-gray-500 shadow-xl"
+        className="bottom-16 right-5 fixed bg-white dark:bg-black border-gray-700 border dark:border-gray-500 shadow-xl"
       >
-        <div onClick={() => setIsTOCOpen(!isTOCOpen)} className="p-2 font-bold">
+        <div title="Open the table of contents" onClick={() => setIsTOCOpen(!isTOCOpen)} className="p-1 font-bold">
-          {"TOC"}
+          <MdMenuBook className="text-3xl" />
         </div>
       </SheetTrigger>
       <SheetContent side={"left"}>
@@ -23,17 +27,17 @@ export const DrawerTOC = (props: { data: TTOCItem[] }) => {
         <ul className="my-3 flat-scrollbar h-[70vh] flex flex-col overflow-y-auto flat-scrollbar-normal">
           {props.data?.map((item) => (
             <Link
-              className="hover:text-sky-500 border-t border-b py-2 border-dashed"
+              className={twMerge(
+                "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" : "",
+              )}
               onClick={() => {
                 setIsTOCOpen(false);
               }}
               key={`drawer-toc-${item.anchorId}`}
               href={`#${item.anchorId}`}
             >
-              <li
+              <li className={"p-2"} style={{ paddingLeft: `${item.level - 2}em` }}>{`${item.title}`}</li>
-                className="my-2 target:text-blue-500"
-                style={{ paddingLeft: `${item.level - 2}em` }}
-              >{`${item.title}`}</li>
             </Link>
           ))}
         </ul>

components/readerpage/PostComments.tsx

@@ -6,7 +6,7 @@ export const PostComments = (props: { postId: string }) => {
   const { theme } = useTheme();
   return (
     Config.Giscus && (
-      <div className="my-5">
+      <div className="mt-10 mb-5">
         <Giscus
           id={props.postId}
           repo={Config.Giscus.repo as `${string}/${string}`}

components/readerpage/TOC.tsx

@@ -1,21 +1,28 @@
 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-1 py-2 h-[60vh] overflow-y-auto flat-scrollbar-normal">
+      <CardContent className="px-2 py-2 h-[60vh] overflow-y-auto flat-scrollbar-normal">
         <ul>
           {props.data?.map((item) => (
-            <Link className="hover:text-sky-500" href={`#${item.anchorId}`} key={`toc-${item.anchorId}`}>
+            <Link className={""} href={`#${item.anchorId}`} key={`toc-${item.anchorId}`}>
               <li
-                className="my-2 text-sm target:text-blue-500"
+                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" : "",
+                )}
                 style={{ paddingLeft: `${item.level - 1}em` }}
               >{`${item.title}`}</li>
             </Link>

components/utils/Footer.tsx

@@ -19,11 +19,6 @@ export const Footer = () => {
       }}
     >
       <footer className="my-5 flex flex-col justify-center py-2 text-sm">
-        <div className="flex justify-center">
-          <Link target="_blank" href="https://vercel.com/?utm_source=github-contributions-chart&utm_campaign=oss">
-            <img src="/powered-by-vercel.svg" alt="Powered by vercel" className="h-8" />
-          </Link>
-        </div>
         <div className="my-2 flex flex-wrap justify-center space-x-3 text-center text-gray-500 underline dark:text-gray-400">
           <Link href="https://github.com/PrinOrange/nextjs-lexical-blog" title="Sponsor me for my works.">
             {"Source Code"}

components/utils/NavBar.tsx

@@ -33,7 +33,7 @@ export const NavBar = () => {
 
   return (
     <Sheet open={isSideNavOpen} onOpenChange={(open) => setIsSideNavOpen(open)}>
-      <div className="sticky top-0 z-50 border-gray-200 dark:border-gray-700 border-b flex flex-wrap justify-between py-3 backdrop-blur bg-white/50 dark:bg-gray-950/50 px-5 lg:px-20 xl:px-32 2xl:px-52">
+      <div className="sticky top-0 z-50 border-gray-200 dark:border-gray-700 border-b flex flex-wrap justify-between py-3 backdrop-blur bg-white/50 dark:bg-gray-950/50 px-5 md:px-10 lg:px-20 xl:px-32 2xl:px-52">
         <Link href="/" className="cursor-pointer my-auto text-2xl font-bold">
           <h1 className={`${fontFangZhengXiaoBiaoSongCN.className} my-auto`}>{Config.SiteTitle}</h1>
         </Link>
@@ -62,7 +62,7 @@ export const NavBar = () => {
             {theme === "light" ? <MdOutlineDarkMode /> : <MdOutlineLightMode />}
           </div>
         </div>
-        <div className="flex flex-wrap text-3xl sm:hidden">
+        <div className="text-3xl sm:hidden my-auto">
           <SheetTrigger
             title="Spread the navigation menu"
             className="text-black rounded-full p-1 hover:bg-gray-200 dark:text-gray-50 dark:hover:bg-gray-800"
@@ -75,7 +75,7 @@ export const NavBar = () => {
           </SheetTrigger>
         </div>
       </div>
-      <SheetContent className="bg:white border-none shadow-md dark:bg-black flex flex-col justify-end text-end">
+      <SheetContent className="bg:white border-none py-16 shadow-md dark:bg-black flex flex-col text-end">
         {MenuItems.map((menuItem) => (
           <Link
             href={menuItem.href}

components/utils/PostList.tsx

@@ -23,21 +23,25 @@ export const PostList = (props: { data: TPostListItem[] }) => {
                 </div>
               )}
             </div>
-            <div className="text-center">{normalizeDate(postItem.frontMatter.time)}</div>
+            <div className="text-center text-sm italic">{normalizeDate(postItem.frontMatter.time)}</div>
-            {postItem.frontMatter.summary && (
-              <div className={`${fontSourceSerifScreenCN.className} flex my-1 justify-center`}>
-                <p>{postItem.frontMatter.summary}</p>
-              </div>
-            )}
             {postItem.frontMatter.tags && (
               <div className="my-2 flex justify-center">
                 {postItem.frontMatter.tags.map((tagName) => (
-                  <Badge className="mx-1" key={`tags-${nanoid()}`}>
+                  <Badge
+                    variant={"secondary"}
+                    className="mx-1 text-gray-600 dark:text-gray-300"
+                    key={`tags-${nanoid()}`}
+                  >
                     {tagName}
                   </Badge>
                 ))}
               </div>
             )}
+            {postItem.frontMatter.summary && (
+              <div className={`${fontSourceSerifScreenCN.className} flex my-1 justify-center`}>
+                <p>{postItem.frontMatter.summary}</p>
+              </div>
+            )}
           </div>
         </Link>
       ))}

hooks/useActiveHeading.tsx

@@ -0,0 +1,48 @@
+import * as React from "react";
+
+function removeFirstHash(str: string): string {
+  return str.replace(/^#/, "");
+}
+
+/**
+ * React hook to highlight a heading a user is currently reading.
+ * @param headingList List of links to the headings (ex. "#title")
+ * @param options Options for the Intersectionobserver (ex. rootMargin)
+ * @returns The Id/Link to the heading, that is currently active.
+ */
+export function useActiveHeading(headingList: string[], options?: IntersectionObserverInit) {
+  const [activeId, setActiveId] = React.useState("");
+
+  React.useEffect(() => {
+    const callback: IntersectionObserverCallback = (headingEntries) => {
+      // Get all headings that are currently visible on the page
+      const visibleHeadings = headingEntries.filter((e) => e.isIntersecting);
+
+      if (visibleHeadings.length === 0) {
+        //Necessary if a user scrolls down and then reloads.
+        //In that case the IntersectionObserver didn't see the Heading onscreen
+        const element = headingEntries.reverse().find((e) => e.boundingClientRect.bottom < 150);
+        if (element) {
+          setActiveId(`#${element.target.id}`);
+        }
+      } else {
+        // If there is more than one visible heading,
+        // choose the one that is closest to the top of the page
+        // the entries are always sorted top to bottom.
+        setActiveId(`#${visibleHeadings[0].target.id}`);
+      }
+    };
+
+    const observer = new IntersectionObserver(callback, options);
+
+    //Observe all (non-null) elements
+    headingList
+      .map((heading) => document?.querySelector(`[id='${removeFirstHash(heading)}']`))
+      //Remove null elments
+      .flatMap((f) => (!!f ? [f] : []))
+      .forEach((element) => observer.observe(element));
+
+    return () => observer.disconnect();
+  }, [headingList, options]);
+  return activeId;
+}

lib/rss.tsx

@@ -2,6 +2,7 @@ import { CopyrightAnnouncement, LatestPostCountInHomePage, WebsiteURL } from "@/
 import { Config } from "@/data/config";
 import { Feed } from "feed";
 import fs from "fs";
+import { JSDOM } from "jsdom";
 import { MDXRemote } from "next-mdx-remote";
 import { serialize } from "next-mdx-remote/serialize";
 import { renderToString } from "react-dom/server";
@@ -17,6 +18,25 @@ import { getPostFileContent, sortedPosts } from "./post-process";
 
 const NoticeForRSSReaders = `\n---\n**NOTE:** Different RSS reader may have deficient even no support for svg formulations rendering. If it happens, please read the origin page to have better experience.`;
 
+function minifyHTMLCode(htmlString: string): string {
+  const dom = new JSDOM(htmlString);
+  const document = dom.window.document;
+  const elements = document.querySelectorAll("*");
+  const unusedElements = document.querySelectorAll("script, style");
+
+  // Remove all class attributes.
+  elements.forEach((element) => {
+    element.removeAttribute("class");
+  });
+
+  // Remove all script and style tags.
+  unusedElements.forEach((element) => {
+    element.parentElement?.removeChild(element);
+  });
+
+  return dom.serialize();
+}
+
 /**
  * Generate the RSS Feed File in `./public` so it could be visited by https://domain/rss.xml
  */
@@ -49,7 +69,7 @@ export const generateRSSFeed = async () => {
         format: "md",
       },
     });
-    const htmlContent = renderToString(<MDXRemote {...mdxSource} />);
+    const htmlContent = minifyHTMLCode(renderToString(<MDXRemote {...mdxSource} />));
 
     feed.addItem({
       title: post.frontMatter.title,

lib/search.ts

@@ -1,5 +1,7 @@
 import { cutForSearch } from "@node-rs/jieba";
+import Colors from "colors";
 import minisearch from "minisearch";
+import sizeof from "object-sizeof";
 import { getPostFileContent, sortedPosts } from "./post-process";
 
 // Due to the flaws of the word tokenizer,
@@ -30,6 +32,8 @@ function makeSearchIndex() {
       content: content,
     });
   }
+  const sizeofIndex = (sizeof(miniSearch) / 1024 ** 2).toFixed(3);
+  console.log(Colors.cyan(`Search index is ready. And the size of index is ${sizeofIndex} mb`));
   return miniSearch;
 }
 

package-lock.json

@@ -39,6 +39,7 @@
         "next-seo": "^6.4.0",
         "next-share": "^0.27.0",
         "next-themes": "^0.2.1",
+        "object-sizeof": "^2.6.3",
         "postcss": "8.4.31",
         "prism": "^1.0.0",
         "prismjs": "^1.29.0",
@@ -2672,7 +2673,6 @@
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
       "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -5917,7 +5917,6 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
       "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -12524,6 +12523,37 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/object-sizeof": {
+      "version": "2.6.3",
+      "resolved": "https://registry.npmjs.org/object-sizeof/-/object-sizeof-2.6.3.tgz",
+      "integrity": "sha512-GNkVRrLh11Qr5BGr73dwwPE200/78QG2rbx30cnXPnMvt7UuttH4Dup5t+LtcQhARkg8Hbr0c8Kiz52+CFxYmw==",
+      "dependencies": {
+        "buffer": "^6.0.3"
+      }
+    },
+    "node_modules/object-sizeof/node_modules/buffer": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
+      "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "dependencies": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.2.1"
+      }
+    },
     "node_modules/object.assign": {
       "version": "4.1.5",
       "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.5.tgz",

package.json

@@ -55,6 +55,7 @@
     "next-seo": "^6.4.0",
     "next-share": "^0.27.0",
     "next-themes": "^0.2.1",
+    "object-sizeof": "^2.6.3",
     "postcss": "8.4.31",
     "prism": "^1.0.0",
     "prismjs": "^1.29.0",

pages/404.tsx

@@ -1,8 +1,9 @@
 import { ContentContainer, Page } from "@/components/layouts";
 import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
 import { Footer } from "@/components/utils/Footer";
 import { NavBar } from "@/components/utils/NavBar";
-import { fontSourceSerifScreenCN } from "@/styles/font";
+import { fontFangZhengXiaoBiaoSongCN, fontSourceSerifScreenCN } from "@/styles/font";
 import { TfiFaceSad } from "react-icons/tfi";
 
 export default function NotFoundPage() {
@@ -14,9 +15,12 @@ export default function NotFoundPage() {
     <Page>
       <NavBar />
       <ContentContainer>
-        <div className="flex flex-col justify-center">
+        <h2 className={`my-5 flex justify-center text-2xl font-bold ${fontFangZhengXiaoBiaoSongCN.className}`}>
+          {"404 NOT FOUND"}
+        </h2>
+        <Separator />
+        <div className="my-5 flex flex-col justify-center">
           <TfiFaceSad className="mx-auto my-4" size={"6em"} />
-          <p className="mx-auto my-3 text-center text-2xl font-bold">{"404 NOT FOUND"}</p>
           <p className={`${fontSourceSerifScreenCN.className} mx-auto my-3 text-center text-xl`}>
             {"This page does not exist for it might be removed or closed."}
           </p>

pages/about.tsx

@@ -38,11 +38,11 @@ export default function AboutPage() {
             Additionally, I am also interested in XXXX.
           </div>
         </div>
-        <hr />
+        <Separator />
         <SocialIcons />
-        <hr />
+        <Separator />
 
-        <ul className="mx-auto my-10 md:w-2/3 list-disc">
+        <ul className="mx-auto my-10 px-5 md:w-2/3 list-disc">
           {Config.SocialLinks.github && (
             <li className="my-2">
               {"📕 Check out my github profile at "}

pages/api/search/[keyword].ts

@@ -11,7 +11,7 @@ export default function handler(req: NextApiRequest, res: NextApiResponse<Respon
     res.status(200).json([]);
     return;
   }
-  if (searchText.length < 10) {
+  if (searchText.length < 4) {
     res.status(200).json([]);
     return;
   }

pages/blog/[id].tsx

@@ -5,6 +5,7 @@ import { PostComments } from "@/components/readerpage/PostComments";
 import { PostCover } from "@/components/readerpage/PostCover";
 import { ShareButtons } from "@/components/readerpage/ShareButtons";
 import { TOC } from "@/components/readerpage/TOC";
+import { Separator } from "@/components/ui/separator";
 import { Toaster } from "@/components/ui/toaster";
 import { Footer } from "@/components/utils/Footer";
 import { NavBar } from "@/components/utils/NavBar";
@@ -50,7 +51,7 @@ const ReaderPage = (props: ReaderPageProps) => {
 
   // Only the TOC length reaches 3 can be displayed.
   // In order to avoid large blank spaces that ruin the visual perception
-  const isTOCLongEnough = props.tocList.length > 2;
+  const isTOCLongEnough = props.tocList.length > 4;
   const handleRightSwipe = useSwipeable({
     onSwipedRight: () => {
       isTOCLongEnough && setIsTOCOpen(true);
@@ -68,12 +69,12 @@ const ReaderPage = (props: ReaderPageProps) => {
       <Toaster />
       <NavBar />
       <ContentContainer>
-        <div className="py-5 justify-center md:flex">
+        <div className="py-5 justify-center lg:flex" style={{ borderRadius: "5px" }}>
-          <div className="md:w-2/3 py-5">
+          <div className={`${isTOCLongEnough ? "lg:w-2/3" : "lg:w-5/6"} py-5`}>
             <div className="typesetting">
               {props.frontMatter.coverURL && <PostCover coverURL={props.frontMatter.coverURL} />}
               <div
-                className={`${fontFangZhengXiaoBiaoSongCN.className} flex justify-center whitespace-normal break-words text-3xl font-bold capitalize`}
+                className={`${fontFangZhengXiaoBiaoSongCN.className} my-5 text-black dark:text-white flex justify-center whitespace-normal break-words text-3xl font-bold capitalize`}
               >
                 {props.frontMatter?.title}
               </div>
@@ -95,7 +96,7 @@ const ReaderPage = (props: ReaderPageProps) => {
                   <div className="my-auto font-bold mr-2">{"TAGS: "}</div>
                   {props.frontMatter.tags.map((tagName) => (
                     <Link
-                      className="mx-2 my-auto text-gray-700 hover:text-black dark:text-gray-300 dark:hover:text-white font-bold text-sm"
+                      className="mx-1 my-auto text-gray-700 underline-offset-4 hover:text-black dark:text-gray-300 dark:hover:text-white font-bold text-sm"
                       href={`/tags/${tagName}`}
                       key={`tags-${nanoid()}`}
                     >
@@ -122,7 +123,7 @@ const ReaderPage = (props: ReaderPageProps) => {
                 )}
               </div>
             </div>
-            <hr />
+            <Separator />
             <ShareButtons
               subtitle={props.frontMatter.subtitle}
               title={props.frontMatter.title}
@@ -130,8 +131,8 @@ const ReaderPage = (props: ReaderPageProps) => {
               postId={props.postId}
               allowShare={props.frontMatter.allowShare}
             />
-            <hr />
+            <Separator />
-            <ul className="my-2 px-5 flex flex-col justify-center list-disc">
+            <ul className="my-5 px-5 flex flex-col justify-center list-disc">
               {props.prevPostListItem && (
                 <li className="my-1">
                   <Link
@@ -156,7 +157,7 @@ const ReaderPage = (props: ReaderPageProps) => {
             <PostComments postId={props.postId} />
           </div>
           {isTOCLongEnough && (
-            <div className="hidden lg:block lg:w-1/3 py-5">
+            <div className="hidden lg:block md:w-1/3 py-5">
               <TOC data={props.tocList} />
             </div>
           )}

pages/friends.tsx

@@ -15,19 +15,19 @@ export default function FriendsPage() {
       <SEO title={`${Config.SiteTitle} - Friends`} description={"My Friend Links"} />
       <NavBar />
       <ContentContainer>
-        <h2 className={`my-10 flex justify-center text-2xl font-bold ${fontFangZhengXiaoBiaoSongCN.className}`}>
+        <h2 className={`my-5 flex justify-center text-2xl font-bold ${fontFangZhengXiaoBiaoSongCN.className}`}>
           {"FRIENDS"}
         </h2>
         <Separator />
-        <div className={`my-5 py-3 flex flex-wrap justify-center text-2xl ${fontSourceSerifScreenCN.className}`}>
+        <div className={`my-5 flex flex-wrap justify-center text-2xl ${fontSourceSerifScreenCN.className}`}>
           {FriendsList.map((item) => (
-            <Link className="mx-3 p-2 underline" href={item.url} key={nanoid()}>
+            <Link className="mx-2 p-2 underline" href={item.url} key={nanoid()}>
               {item.title}
             </Link>
           ))}
         </div>
         <Separator />
-        <div className="my-3 text-base flex-col flex justify-start">
+        <div className="my-2 text-base flex-col flex justify-start">
           <div className="mx-auto">
             {"Welcome to exchange our friend links and every high-quality blog websites are welcomed. "}
             <Link className="underline" href={`mailto:${Config.SocialLinks.email}`}>

pages/posts/[[...slug]].tsx

@@ -62,7 +62,7 @@ export default function PostsPage(props: PostsPageProps) {
         {!isEmptyArray(props.tagList) && props.pageNumber === 1 && (
           <>
             <Separator />
-            <div className={`my-5 flex flex-wrap justify-center px-2 ${fontSourceSerifScreenCN.className}`}>
+            <div className={`my-5 flex flex-wrap text-sm justify-center px-2 ${fontSourceSerifScreenCN.className}`}>
               {props.tagList.map((item) => (
                 <Link
                   className="m-1 p-1 underline underline-offset-[5px] my-auto text-gray-700 hover:text-black dark:text-gray-300 dark:hover:text-white font-bold"

pages/search.tsx

@@ -21,12 +21,12 @@ export default function SearchPage() {
   const [searchResult, setSearchResult] = useState<TSearchResultItem[]>([]);
   const { toast } = useToast();
 
-  const fetchAPI = async (param: string) => {
+  const fetchSearchAPI = async (param: string) => {
     const response = (await axios.get<TSearchResultItem[]>(`/api/search/${param}`)).data;
     return response;
   };
 
-  const querySearch = useQuery("searchData", () => fetchAPI(searchText), {
+  const querySearch = useQuery("searchData", () => fetchSearchAPI(searchText), {
     enabled: false,
     onSuccess: (data) => {
       setSearchResult(data);
@@ -52,8 +52,8 @@ export default function SearchPage() {
       toast({ title: "Enter a Keyword", description: "Please enter one keyword at least." });
       return;
     }
-    if (searchText.length < 10) {
+    if (searchText.length < 4) {
-      toast({ title: "Keywords too short", description: "Keyword length must be at least 10." });
+      toast({ title: "Keywords too short", description: "Keyword length must be at least 5." });
       return;
     }
     querySearch.refetch();

pages/sponsor.tsx

@@ -1,5 +1,6 @@
 import { ContentContainer, Page } from "@/components/layouts";
 import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
 import { Footer } from "@/components/utils/Footer";
 import { NavBar } from "@/components/utils/NavBar";
 import { SEO } from "@/components/utils/SEO";
@@ -54,11 +55,11 @@ export default function AboutPage() {
                     </div>
                   </div>
                   <div className="my-2 bg-white p-1">
-                    <QRCodeSVG width={120} value={Config.Sponsor?.WechatPayQRCodeContent!} />
+                    <QRCodeSVG width={100} height={100} value={Config.Sponsor?.WechatPayQRCodeContent!} />
                   </div>
                 </div>
               )}
-              <hr />
+              <Separator />
               {!isEmptyString(Config.Sponsor?.AlipayLink) && (
                 <div className="my-6 flex justify-between">
                   <div className="my-auto flex">
@@ -76,7 +77,7 @@ export default function AboutPage() {
                   </div>
                 </div>
               )}
-              <hr />
+              <Separator />
               {!isEmptyString(Config.Sponsor?.PaypalId) && (
                 <div className="my-6 flex justify-between">
                   <div className="my-auto flex">
@@ -94,7 +95,7 @@ export default function AboutPage() {
                   </div>
                 </div>
               )}
-              <hr />
+              <Separator />
               {!isEmptyString(Config.Sponsor?.PatreonId) && (
                 <div className="my-6 flex justify-between">
                   <div className="my-auto flex">
@@ -112,7 +113,7 @@ export default function AboutPage() {
                   </div>
                 </div>
               )}
-              <hr />
+              <Separator />
             </div>
           </div>
         </div>

pages/tags/[...slug].tsx

@@ -46,12 +46,12 @@ export default function TagsContentPage(props: TagsContentPageProps) {
 
   return (
     <Page>
-      <NavBar />
       <SEO
         title={`Tag - ${props.tagName}`}
         description={`Here are posts under the tag ${props.tagName}.`}
         coverURL={Config.PageCovers.websiteCoverURL}
       />
+      <NavBar />
       <ContentContainer>
         <h2
           className={`my-5 flex flex-col justify-center text-center text-3xl font-bold ${fontFangZhengXiaoBiaoSongCN.className}`}

styles/font.ts

@@ -1,6 +1,12 @@
 import localFont from "next/font/local";
 
 // 思源屏显臻宋 简体中文
-export const fontSourceSerifScreenCN = localFont({ src: "../assets/fonts/SourceSerifScreen-CN.woff2" });
+export const fontSourceSerifScreenCN = localFont({
+  src: "../assets/fonts/SourceSerifScreen-CN.woff2",
+  variable: "--font-source-serif-screen-cn",
+});
 // 方正小标宋 简体中文
-export const fontFangZhengXiaoBiaoSongCN = localFont({ src: "../assets/fonts/FangZhengXiaoBiaoSong-CN.woff2" });
+export const fontFangZhengXiaoBiaoSongCN = localFont({
+  src: "../assets/fonts/FangZhengXiaoBiaoSong-CN.woff2",
+  variable: "--font-fangzhengxiaobiaosong",
+});

styles/globals.css

@@ -84,7 +84,7 @@
 .selection-style {
   @apply selection:bg-black
       selection:text-white
-      dark:selection:bg-white
+      dark:selection:bg-gray-500
       dark:selection:text-black;
 }
 

styles/typesetting.css

@@ -1,23 +1,49 @@
 .typesetting {
-  @apply prose
+  @apply prose 
   max-w-full 
   overflow-x-auto 
-  break-words 
+  break-words
-  px-0
+
-  dark:prose-invert 
+  px-0 
+
+  dark:prose-invert
 
   prose-headings:scroll-mt-20
   
+  prose-headings:target:text-sky-700
   prose-a:text-sky-700
+
+  prose-blockquote:bg-gray-100
+  prose-blockquote:px-5
+  prose-blockquote:py-0.5
+  prose-blockquote:text-base
+  prose-blockquote:not-italic
   prose-figure:mx-auto
-  prose-table:border-4
+
+  prose-code:mx-1
+
+  prose-code:rounded-sm
+  prose-code:bg-gray-200
+  prose-code:px-1
+  prose-code:py-0.5
+  prose-code:text-gray-800
+  prose-code:before:content-['']
+
+  prose-code:after:content-['']
+  prose-table:border-4 
   prose-tr:border-2
   prose-tr:p-2
-  prose-th:border
 
+  prose-th:border
   prose-th:p-2
   prose-td:border-2
   prose-td:p-2
+
   prose-img:mx-auto
-  dark:prose-a:text-sky-500;
+
+  dark:prose-a:text-sky-500
+
+ dark:prose-blockquote:bg-gray-800
+ dark:prose-code:bg-gray-700
+ dark:prose-code:text-gray-100;
 }

tailwind.config.js

@@ -1,3 +1,5 @@
+const colors = require("tailwindcss/colors");
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   darkMode: ["class"],
@@ -11,6 +13,10 @@ module.exports = {
       },
     },
     extend: {
+      fontFamily: {
+        fangzhengxiaobiaosong: "--font-fangzhengxiaobiaosong",
+        sourceSerifScreenCN: "--font-source-serif-screen-cn",
+      },
       colors: {
         border: "hsl(var(--border))",
         input: "hsl(var(--input))",