Optimize UI details and fix some defects

pages/404.tsx

@@ -12,8 +12,8 @@ export default function NotFoundPage() {
   };
   return (
     <Page>
+      <NavBar />
       <ContentContainer>
-        <NavBar />
         <div className="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>

pages/about.tsx

@@ -16,8 +16,8 @@ export default function AboutPage() {
         description={"Type your brief self-introduction in a sentence here make SEO recognize it easily."}
         coverURL={Config.PageCovers.websiteCoverURL}
       />
+      <NavBar />
       <ContentContainer>
-        <NavBar />
         <h2 className={`my-5 flex justify-around text-2xl font-bold ${fontFangZhengXiaoBiaoSongCN.className}`}>
           {"ABOUT ME"}
         </h2>

pages/blog/[id].tsx

@@ -9,7 +9,6 @@ import { Toaster } from "@/components/ui/toaster";
 import { Footer } from "@/components/utils/Footer";
 import { NavBar } from "@/components/utils/NavBar";
 import { SEO } from "@/components/utils/SEO";
-import { TagBadge } from "@/components/utils/TagBadge";
 import { Config } from "@/data/config";
 import { normalizeDate } from "@/lib/date";
 import { getPostFileContent, sortedPosts } from "@/lib/post-process";
@@ -67,17 +66,17 @@ const ReaderPage = (props: ReaderPageProps) => {
         coverURL={props.frontMatter.coverURL ?? Config.AvatarURL}
       />
       <Toaster />
+      <NavBar />
       <ContentContainer>
-        <NavBar />
-        <div className="my-5 justify-center md:flex">
-          <div className="md:w-2/3">
-            <div className="py-1">
+        <div className="py-5 justify-center md:flex">
+          <div className="md:w-2/3 py-5">
+            <div className="typesetting">
               {props.frontMatter.coverURL && <PostCover coverURL={props.frontMatter.coverURL} />}
-              <h2
+              <div
                 className={`${fontFangZhengXiaoBiaoSongCN.className} flex justify-center whitespace-normal break-words text-3xl font-bold capitalize`}
               >
                 {props.frontMatter?.title}
-              </h2>
+              </div>
               {props.frontMatter?.subtitle && (
                 <div
                   className={`${fontFangZhengXiaoBiaoSongCN.className} my-1 flex justify-center text-xl font-bold capitalize`}
@@ -93,28 +92,35 @@ const ReaderPage = (props: ReaderPageProps) => {
               )}
               {props.frontMatter.tags && (
                 <div className={`py-3 flex flex-wrap justify-start border-t border-b`}>
-                  <div className="font-bold mr-2 my-1">{"TAGS : "}</div>
+                  <div className="my-auto font-bold mr-2">{"TAGS: "}</div>
                   {props.frontMatter.tags.map((tagName) => (
-                    <TagBadge name={tagName} size="sm" key={`tags-${nanoid()}`} />
+                    <Link
+                      className="mx-2 my-auto text-gray-700 hover:text-black dark:text-gray-300 dark:hover:text-white font-bold text-sm"
+                      href={`/tags/${tagName}`}
+                      key={`tags-${nanoid()}`}
+                    >
+                      {tagName}
+                    </Link>
                   ))}
                 </div>
               )}
-            </div>
-            <div
-              className={`typesetting ${fontSourceSerifScreenCN.className} mt-0 mb-10 ${
-                !props.frontMatter.allowShare && "select-none"
-              }`}
-              {...handleRightSwipe}
-            >
-              {compiledSource && (
-                <MDXRemote
-                  compiledSource={compiledSource.compiledSource}
-                  frontmatter={compiledSource.frontmatter}
-                  scope={compiledSource.scope}
-                  //@ts-ignore
-                  components={MDXComponentsSet}
-                />
-              )}
+
+              <div
+                className={`py-5 ${fontSourceSerifScreenCN.className} ${
+                  !props.frontMatter.allowShare ? "select-none" : ""
+                }`}
+                {...handleRightSwipe}
+              >
+                {compiledSource && (
+                  <MDXRemote
+                    compiledSource={compiledSource.compiledSource}
+                    frontmatter={compiledSource.frontmatter}
+                    scope={compiledSource.scope}
+                    //@ts-ignore
+                    components={MDXComponentsSet}
+                  />
+                )}
+              </div>
             </div>
             <hr />
             <ShareButtons
@@ -150,13 +156,13 @@ const ReaderPage = (props: ReaderPageProps) => {
             <PostComments postId={props.postId} />
           </div>
           {isTOCLongEnough && (
-            <div className="hidden md:block md:w-1/3">
+            <div className="hidden lg:block lg:w-1/3 py-5">
               <TOC data={props.tocList} />
             </div>
           )}
         </div>
         {isTOCLongEnough && (
-          <div className="md:hidden">
+          <div className="lg:hidden">
             <DrawerTOC data={props.tocList} />
           </div>
         )}

pages/friends.tsx

@@ -13,8 +13,8 @@ export default function FriendsPage() {
   return (
     <Page>
       <SEO title={`${Config.SiteTitle} - Friends`} description={"My Friend Links"} />
+      <NavBar />
       <ContentContainer>
-        <NavBar />
         <h2 className={`my-10 flex justify-center text-2xl font-bold ${fontFangZhengXiaoBiaoSongCN.className}`}>
           {"FRIENDS"}
         </h2>

pages/index.tsx

@@ -30,8 +30,8 @@ export default function Home(props: HomePageProps) {
         description={`Welcome to the ${Config.Nickname}'s blog website. It's the website for recording thoughts for technology, life experience and so on.`}
         coverURL={Config.PageCovers.websiteCoverURL}
       />
+      <NavBar />
       <ContentContainer>
-        <NavBar />
         <HomeCover />
         {props.pinnedPostList.length !== 0 && (
           <div>

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

@@ -6,7 +6,6 @@ import { Footer } from "@/components/utils/Footer";
 import { NavBar } from "@/components/utils/NavBar";
 import { PostList } from "@/components/utils/PostList";
 import { SEO } from "@/components/utils/SEO";
-import { TagBadge } from "@/components/utils/TagBadge";
 import { PostCountPerPagination } from "@/consts/consts";
 import { Config } from "@/data/config";
 import { sortedPosts } from "@/lib/post-process";
@@ -54,8 +53,8 @@ export default function PostsPage(props: PostsPageProps) {
         description={"Here is the list page for all published posts. Click here for more details."}
         coverURL={Config.PageCovers.websiteCoverURL}
       />
+      <NavBar />
       <ContentContainer>
-        <NavBar />
         <h2 className={`my-5 flex justify-center text-2xl ${fontFangZhengXiaoBiaoSongCN.className} font-bold`}>
           <LuPenTool className="mx-2 my-auto" />
           {"ALL POSTS"}
@@ -65,8 +64,12 @@ export default function PostsPage(props: PostsPageProps) {
             <Separator />
             <div className={`my-5 flex flex-wrap justify-center px-2 ${fontSourceSerifScreenCN.className}`}>
               {props.tagList.map((item) => (
-                <Link href={`/tags/${item.name}`} key={`tag-badge-${nanoid()}`}>
-                  <TagBadge name={item.name} size="md" count={item.count} />
+                <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"
+                  href={`/tags/${item.name}`}
+                  key={`tags-${nanoid()}`}
+                >
+                  {`${item.name} (${item.count})`}
                 </Link>
               ))}
             </div>

pages/search.tsx

@@ -59,8 +59,8 @@ export default function SearchPage() {
     <Page>
       <SEO title={`${Config.SiteTitle} - Search`} description={"Search the posts on your demand."} />
       <Toaster />
+      <NavBar />
       <ContentContainer>
-        <NavBar />
         <h2 className={`my-10 flex justify-center text-2xl font-bold ${fontFangZhengXiaoBiaoSongCN.className}`}>
           {"SEARCH POSTS"}
         </h2>
@@ -72,7 +72,7 @@ export default function SearchPage() {
             onKeyDown={handleEnterKeySearch}
             onChange={handleInputSearchText}
           />
-          <Button className="mx-3 my-auto" disabled={querySearch.isLoading} onClick={handleMakeSearch}>
+          <Button className="mx-3 w-32 my-auto" disabled={querySearch.isLoading} onClick={handleMakeSearch}>
             {querySearch.isFetching ? "Loading" : "Search"}
           </Button>
         </div>

pages/sponsor.tsx

@@ -21,8 +21,8 @@ export default function AboutPage() {
           "If you like my works, I would deeply appreciate your support as a patron. Your contribution not only fuels my creative journey but also allows me to delve deeper into my passion."
         }
       />
+      <NavBar />
       <ContentContainer>
-        <NavBar />
         <div className="md:flex">
           <div className="flex flex-col justify-center md:w-1/2">
             <h2

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

@@ -46,13 +46,13 @@ 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}
       />
       <ContentContainer>
-        <NavBar />
         <h2
           className={`my-5 flex flex-col justify-center text-center text-3xl font-bold ${fontFangZhengXiaoBiaoSongCN.className}`}
         >