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">
-          {"TOC"}
+        <div title="Open the table of contents" onClick={() => setIsTOCOpen(!isTOCOpen)} className="p-1 font-bold">
+          <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
-                className="my-2 target:text-blue-500"
-                style={{ paddingLeft: `${item.level - 2}em` }}
-              >{`${item.title}`}</li>
+              <li className={"p-2"} 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>
-            {postItem.frontMatter.summary && (
-              <div className={`${fontSourceSerifScreenCN.className} flex my-1 justify-center`}>
-                <p>{postItem.frontMatter.summary}</p>
-              </div>
-            )}
+            <div className="text-center text-sm italic">{normalizeDate(postItem.frontMatter.time)}</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.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 "}