upgrade the project

components/utils/Footer.tsx

@@ -61,9 +61,9 @@ export const Footer = () => {
                 text={RSSFeedURL}
               >
                 <Button
-                  type="submit"
-                  size="sm"
                   className={`ml-3 my-auto ${isCopied && "bg-green-500 hover:bg-green-500"}`}
+                  size="sm"
+                  type="submit"
                 >
                   <span className="sr-only">{"Copy"}</span>
                   {isCopied ? <FaCheck className="h-4 w-4" /> : <FaCopy className="h-4 w-4" />}

components/utils/NavBar.tsx

@@ -1,6 +1,5 @@
 import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
 import { Config } from "@/data/config";
-import { fontFangZhengXiaoBiaoSongCN } from "@/styles/font";
 import { nanoid } from "nanoid";
 import { useTheme } from "next-themes";
 import Link from "next/link";
@@ -32,40 +31,43 @@ 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 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>
+    <Sheet onOpenChange={(open) => setIsSideNavOpen(open)} open={isSideNavOpen}>
+      <div className="sticky top-0 z-50 border-black-200 dark:border-gray-700 border-b bg-white dark:bg-gray-950 flex flex-wrap justify-between py-3 px-5 md:px-10 lg:px-20 xl:px-32 2xl:px-52">
+        <Link className="cursor-pointer my-auto text-2xl font-bold" href="/">
+          <h1 className={`font-fang-zheng-xiao-biao-song my-auto`} title="Click to jump to home page.">
+            {Config.SiteTitle}
+          </h1>
         </Link>
         <div className="my-auto hidden sm:flex">
           {MenuItems.map((menuItem) => (
             <Link
+              className="font-bold hover:text-sky-700 dark:hover:text-sky-500 mx-2 my-auto px-2"
               href={menuItem.href}
               key={nanoid()}
-              className="border-b-sky-600 font-bold hover:text-sky-600 dark:hover:border-b-sky-500 dark:hover:text-sky-500 mx-2 my-auto px-2"
               onClick={() => setIsSideNavOpen(false)}
             >
               {menuItem.title}
             </Link>
           ))}
           <Link
-            href={"/search"}
             className="cursor-pointer mx-2 rounded-full p-1 text-3xl text-black hover:bg-gray-200 dark:text-gray-50 dark:hover:bg-gray-800"
+            href={"/search"}
+            title="Search posts by keywords"
           >
             <MdSearch />
           </Link>
           <div
-            title={theme === "light" ? "Switch to dark mode" : "Switch to light mode"}
             className="cursor-pointer mx-1 rounded-full p-1 text-3xl text-black hover:bg-gray-200 dark:text-gray-50 dark:hover:bg-gray-800"
             onClick={handleSwitchTheme}
+            title={theme === "light" ? "Switch to dark mode" : "Switch to light mode"}
           >
             {theme === "light" ? <MdOutlineDarkMode /> : <MdOutlineLightMode />}
           </div>
         </div>
         <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"
+            title="Spread the navigation menu"
           >
             <MdMenu
               onClick={() => {
@@ -78,19 +80,19 @@ export const NavBar = () => {
       <SheetContent className="bg:white border-none py-16 shadow-md dark:bg-black flex flex-col text-end">
         {MenuItems.map((menuItem) => (
           <Link
+            className="border-b border-dashed p-3 text-xl hover:text-sky-500"
             href={menuItem.href}
             key={nanoid()}
-            className="border-b border-dashed p-3 text-xl hover:text-sky-500"
             onClick={() => setIsSideNavOpen(false)}
           >
             {menuItem.title}
           </Link>
         ))}
         <Link
-          title="Search the posts"
           className="border-b border-dashed p-3 text-xl hover:text-sky-500"
           href="/search"
           onClick={() => setIsSideNavOpen(false)}
+          title="Search the posts"
         >
           {"SEARCH"}
         </Link>
@@ -99,8 +101,8 @@ export const NavBar = () => {
           onClick={handleSwitchTheme}
         >
           <div
-            title={theme === "light" ? "Switch to dark mode" : "Switch to light mode"}
             className="cursor-pointer mx-1 my-auto rounded-full text-2xl"
+            title={theme === "light" ? "Switch to dark mode" : "Switch to light mode"}
           >
             {theme === "light" ? <MdOutlineDarkMode /> : <MdOutlineLightMode />}
           </div>

components/utils/PostList.tsx

@@ -1,5 +1,4 @@
 import { normalizeDate } from "@/lib/date";
-import { fontSourceSerifScreenCN } from "@/styles/font";
 import { TPostListItem } from "@/types/post-list";
 import { nanoid } from "nanoid";
 import Link from "next/link";
@@ -13,35 +12,43 @@ export const PostList = (props: { data: TPostListItem[] }) => {
           <div
             className={`flex flex-col justify-center ${
               index !== props.data.length - 1 && "border-b"
-            } border-gray-200 hover:bg-gray-50 dark:hover:bg-gray-950 dark:border-gray-800 p-3`}
+            } border-gray-200 hover:bg-gray-50 dark:hover:bg-gray-900 dark:border-gray-800 px-3 py-1`}
           >
-            <div className={`${fontSourceSerifScreenCN.className} text-center flex-col py-2`}>
-              <h3 className="mx-auto text-lg font-extrabold capitalize">{postItem.frontMatter.title}</h3>
-              {postItem.frontMatter.subtitle && (
-                <div className="mx-auto text-base font-semibold capitalize text-gray-700 dark:text-gray-300">
-                  {postItem.frontMatter.subtitle}
-                </div>
-              )}
-            </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
-                    variant={"secondary"}
-                    className="mx-1 text-gray-600 dark:text-gray-300"
-                    key={`tags-${nanoid()}`}
-                  >
-                    {tagName}
-                  </Badge>
-                ))}
+            <div className={"font-source-serif-screen flex-col py-3"}>
+              <div className="flex justify-center">
+                <h3 className="mx-auto text-lg font-extrabold capitalize">{postItem.frontMatter.title}</h3>
               </div>
-            )}
+              <div className="flex justify-center">
+                {postItem.frontMatter.subtitle && (
+                  <div className="mx-auto text-sm font-bold capitalize text-gray-700 dark:text-gray-300">
+                    {postItem.frontMatter.subtitle}
+                  </div>
+                )}
+              </div>
+            </div>
             {postItem.frontMatter.summary && (
-              <div className={`${fontSourceSerifScreenCN.className} flex my-1 justify-center`}>
+              <div className={"font-source-serif-screen flex justify-center"}>
                 <p>{postItem.frontMatter.summary}</p>
               </div>
             )}
+            <div className="flex flex-wrap justify-between my-2">
+              <div className="text-center flex flex-col justify-center italic text-sm my-auto mr-2 h-6">
+                <div className="my-auto">{normalizeDate(postItem.frontMatter.time)}</div>
+              </div>
+              {postItem.frontMatter.tags && (
+                <div className="flex flex-wrap my-auto">
+                  {postItem.frontMatter.tags.map((tagName) => (
+                    <Badge
+                      className="mr-1 my-1 text-gray-600 dark:text-gray-300"
+                      key={`tags-${nanoid()}`}
+                      variant={"secondary"}
+                    >
+                      {tagName}
+                    </Badge>
+                  ))}
+                </div>
+              )}
+            </div>
           </div>
         </Link>
       ))}

components/utils/SEO.tsx

@@ -6,9 +6,8 @@ export const SEO = (props: { title: string; description?: string | null; coverUR
   return (
     <>
       <title>{props.title}</title>
-      <link rel="alternate" type="application/rss+xml" href={RSSFeedURL} />
+      <link href={RSSFeedURL} rel="alternate" type="application/rss+xml" />
       <NextSeo
-        title={props.title}
         description={props.description ?? Config.Sentence}
         openGraph={{
           title: props.title,
@@ -31,6 +30,7 @@ export const SEO = (props: { title: string; description?: string | null; coverUR
                 },
               ],
         }}
+        title={props.title}
         twitter={{
           handle: `@${Config.SocialLinks.twitter}`,
           site: WebsiteURL,

components/utils/SocialIcons.tsx

@@ -7,36 +7,36 @@ export const SocialIcons = () => {
   return (
     <div className="my-5 flex justify-center space-x-4 text-2xl font-bold">
       {Config.SocialLinks.twitter && (
-        <Link target="_blank" href={`https://x.com/${Config.SocialLinks.twitter}`} title="Twitter">
+        <Link href={`https://x.com/${Config.SocialLinks.twitter}`} target="_blank" title="Twitter">
           <FiTwitter className="hover:text-sky-500" />
         </Link>
       )}
       {Config.SocialLinks.mastodon && (
-        <Link target="_blank" href={Config.SocialLinks.mastodon} title="Mastodon">
+        <Link href={Config.SocialLinks.mastodon} target="_blank" title="Mastodon">
           <TbBrandMastodon className="hover:text-purple-500" />
         </Link>
       )}
       {Config.SocialLinks.instagram && (
-        <Link target="_blank" href={`https://instagram.com/${Config.SocialLinks.instagram}`} title="Instagram">
+        <Link href={`https://instagram.com/${Config.SocialLinks.instagram}`} target="_blank" title="Instagram">
           <FiInstagram className="hover:text-orange-500" />
         </Link>
       )}
       {Config.SocialLinks.facebook && (
-        <Link target="_blank" href={`https://instagram.com/${Config.SocialLinks.facebook}`} title="Instagram">
+        <Link href={`https://instagram.com/${Config.SocialLinks.facebook}`} target="_blank" title="Instagram">
           <TbBrandFacebook className="hover:text-blue-500" />
         </Link>
       )}
       {Config.SocialLinks.linkedin && (
-        <Link target="_blank" href={`https://linkedin.com/in/${Config.SocialLinks.linkedin}`} title="Instagram">
+        <Link href={`https://linkedin.com/in/${Config.SocialLinks.linkedin}`} target="_blank" title="Instagram">
           <TbBrandLinkedin className="hover:text-blue-500" />
         </Link>
       )}
       {Config.SocialLinks.github && (
-        <Link target="_blank" href={`https://github.com/${Config.SocialLinks.github}`} title="Github">
+        <Link href={`https://github.com/${Config.SocialLinks.github}`} target="_blank" title="Github">
           <FiGithub className="hover:text-gray-500" />
         </Link>
       )}
-      <Link target="_blank" href={`mailto:${Config.SocialLinks.email}`} title="EMail Address">
+      <Link href={`mailto:${Config.SocialLinks.email}`} target="_blank" title="EMail Address">
         <FiMail className="hover:text-gray-500" />
       </Link>
     </div>