Refactor some code to make it looks cleaner

pages/404.tsx

@@ -5,7 +5,8 @@ import { fontSypxzs } from "@/styles/font";
 import { TfiFaceSad } from "react-icons/tfi";
 
 export default function NotFoundPage() {
-  const goBack = () => {
+  const handleGoBack = () => {
+    if (window == null) return;
     window.history.back();
   };
   return (
@@ -19,7 +20,7 @@ export default function NotFoundPage() {
             {"This page does not exist for it might be removed or closed."}
           </p>
           <div className="my-5 flex justify-center">
-            <button onClick={goBack} className="link text-xl font-bold">
+            <button onClick={handleGoBack} className="link text-xl font-bold">
               {"GO BACK"}
             </button>
           </div>

pages/about.tsx

@@ -48,17 +48,17 @@ export default function AboutPage() {
               </Link>
             </li>
           )}
-          <li className="my-2">🖥️ Programming stack: XXXX</li>
-          <li className="my-2">🤝 I am looking to XXXXX</li>
+          <li className="my-2">🖥️ Programming stack: TypeScript, JavaScript, C++, C, Rust, Go and so on.</li>
+          <li className="my-2">🤝 I am looking for friends who are fund of XXXX</li>
           {Config.SocialLinks.twitter && (
             <li className="my-2">
               {"📫 How to reach me on Twitter: "}
-              <Link target="_blank" className="link" href={`https://x.com/${Config.SocialLinks.twitter}`}>
+              <Link target="_blank" className="link" href={`https://twitter.com/${Config.SocialLinks.twitter}`}>
                 {Config.SocialLinks.twitter}
               </Link>
             </li>
           )}
-          <li className="my-2">Language : 汉语普通话（First Language） / English / 한국어 / 日本語</li>
+          <li className="my-2">Language : 汉语 / English / 한국어 / 日本語 </li>
           <li className="my-2">Gender Identity : Male / Female / MTF / FTM / And Others </li>
           <li className="my-2">From : Your Country, State / Province</li>
         </ul>

pages/blog/[id].tsx

@@ -9,6 +9,7 @@ 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";
@@ -78,13 +79,7 @@ const ReaderPage = (props: ReaderPageProps) => {
                 <div className={`py-3 flex flex-wrap justify-start border-t border-b`}>
                   <div className="font-bold mr-2 my-1">{"TAGS : "}</div>
                   {props.frontMatter.tags.map((tagName) => (
-                    <Link
-                      href={`/tags/${tagName}`}
-                      className={`tag-link m-1 text-sm ${fontSypxzs.className}`}
-                      key={`tags-${nanoid()}`}
-                    >
-                      {tagName}
-                    </Link>
+                    <TagBadge name={tagName} size="sm" key={`tags-${nanoid()}`} />
                   ))}
                 </div>
               )}

pages/friends.tsx

@@ -16,7 +16,7 @@ export default function FriendsPage() {
       <ContentContainer>
         <h2 className={`my-5 flex justify-center text-2xl font-bold ${fontFzxbs.className}`}>{"FRIENDS"}</h2>
         <hr />
-        <div className={`my-5 flex flex-wrap justify-center text-2xl ${fontSypxzs.className}`}>
+        <div className={`my-5 py-3 flex flex-wrap justify-center text-2xl ${fontSypxzs.className}`}>
           {FriendsList.map((item) => (
             <Link className="mx-3 p-2 underline" href={item.url} key={nanoid()}>
               {item.title}
@@ -24,7 +24,7 @@ export default function FriendsPage() {
           ))}
         </div>
         <hr />
-        <div className="my-2 text-base flex-col flex justify-start">
+        <div className="my-3 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

@@ -100,9 +100,8 @@ export const getStaticProps: GetStaticProps<PostsPageProps> = async (context) =>
   const params = (context.params?.slug as string[]) ?? [];
 
   const pageNumber = params[0] ? parseInt(params[0]) : 1;
-  let postList: TPostListItem[] = [];
 
-  postList = paginateArray(sortedPosts.allPostList, PostCountPerPagination, pageNumber);
+  let postList: TPostListItem[] = paginateArray(sortedPosts.allPostList, PostCountPerPagination, pageNumber);
 
   const pageAmount = Math.ceil(sortedPosts.allPostList.length / PostCountPerPagination);
 

pages/tags/index.tsx

@@ -2,12 +2,12 @@ import { ContentContainer, Page } from "@/components/layouts/layouts";
 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 { sortedPosts } from "@/lib/post-process";
 import { fontFzxbs, fontSypxzs } from "@/styles/font";
 import { nanoid } from "nanoid";
 import { GetStaticProps } from "next";
-import Link from "next/link";
 import { AiOutlineTags } from "react-icons/ai";
 
 type TagsIndexPageProps = {
@@ -30,9 +30,7 @@ export default function TagsIndexPage(props: TagsIndexPageProps) {
         </h2>
         <div className={`my-5 flex flex-wrap justify-center px-2 ${fontSypxzs.className}`}>
           {props.tagList.map((item) => (
-            <Link key={`tag-link-${nanoid()}`} href={`/tags/${item.name}`} className="tag-link m-2 text-base">
-              {`${item.name} (${item.count})`}
-            </Link>
+            <TagBadge key={`tag-badge-${nanoid()}`} name={item.name} size="md" count={item.count} />
           ))}
         </div>
       </ContentContainer>