Refactor some code to make it looks cleaner

.github/ISSUE_TEMPLATE/bug_report.md

@@ -3,8 +3,7 @@ name: Bug report
 about: Create a report to help us improve
 title: "[BUG] "
 labels: bug
-assignees: ''
+assignees: ""
-
 ---
 
 **Describe the bug**

.github/ISSUE_TEMPLATE/feature_request.md

@@ -2,9 +2,8 @@
 name: Feature request
 about: Suggest an idea for this project
 title: "[Feature Request]"
-labels: ''
+labels: ""
-assignees: ''
+assignees: ""
-
 ---
 
 **Is your feature request related to a problem? Please describe.**

.github/ISSUE_TEMPLATE/question-and-answer.md

@@ -3,8 +3,7 @@ name: Question And Answer
 about: Ask questions that are unclear or unclear about this project.
 title: "[Q & A]"
 labels: question
-assignees: ''
+assignees: ""
-
 ---
 
 Describe your problems here.

CODE_OF_CONDUCT.md

@@ -17,23 +17,23 @@ diverse, inclusive, and healthy community.
 Examples of behavior that contributes to a positive environment for our
 community include:
 
-* Demonstrating empathy and kindness toward other people
+- Demonstrating empathy and kindness toward other people
-* Being respectful of differing opinions, viewpoints, and experiences
+- Being respectful of differing opinions, viewpoints, and experiences
-* Giving and gracefully accepting constructive feedback
+- Giving and gracefully accepting constructive feedback
-* Accepting responsibility and apologizing to those affected by our mistakes,
+- Accepting responsibility and apologizing to those affected by our mistakes,
   and learning from the experience
-* Focusing on what is best not just for us as individuals, but for the
+- Focusing on what is best not just for us as individuals, but for the
   overall community
 
 Examples of unacceptable behavior include:
 
-* The use of sexualized language or imagery, and sexual attention or
+- The use of sexualized language or imagery, and sexual attention or
   advances of any kind
-* Trolling, insulting or derogatory comments, and personal or political attacks
+- Trolling, insulting or derogatory comments, and personal or political attacks
-* Public or private harassment
+- Public or private harassment
-* Publishing others' private information, such as a physical or email
+- Publishing others' private information, such as a physical or email
   address, without their explicit permission
-* Other conduct which could reasonably be considered inappropriate in a
+- Other conduct which could reasonably be considered inappropriate in a
   professional setting
 
 ## Enforcement Responsibilities

components/readerpage/ShareButtons.tsx

@@ -11,26 +11,26 @@ export const ShareButtons = (props: {
   title: string;
   quote?: string | null;
 }) => {
-  const url = `https://${Config.SiteDomain}/blog/${props.postId}`;
+  const postURL = `https://${Config.SiteDomain}/blog/${props.postId}`;
   const copyShareText = `${props.title} ${props.subtitle ? `- ${props.subtitle}` : ""} - ${
     Config.Nickname
-  }'s Blog ${url}`;
+  }'s Blog ${postURL}`;
   const { toast } = useToast();
   return (
     <div className="my-3 flex space-x-4 text-2xl">
       {props.allowShare != false ? (
         <>
           <div className="my-auto text-sm font-bold">{"SHARE :"}</div>
-          <FacebookShareButton className="mx-2" url={url} quote={props.quote ?? props.title}>
+          <FacebookShareButton className="mx-2" url={postURL} quote={props.quote ?? props.title}>
             <FaFacebook title="Share to Facebook" className="hover:text-blue-500" />
           </FacebookShareButton>
-          <TwitterShareButton className="mx-2" url={url} title={props.title}>
+          <TwitterShareButton className="mx-2" url={postURL} title={props.title}>
             <FaTwitter title="Share to Twitter" className="hover:text-sky-500" />
           </TwitterShareButton>
-          <LinkedinShareButton className="mx-2" url={url} title={props.title}>
+          <LinkedinShareButton className="mx-2" url={postURL} title={props.title}>
             <FaLinkedin title="Share to Linkedin" className="hover:text-blue-500" />
           </LinkedinShareButton>
-          <RedditShareButton className="mx-2" url={url} title={props.title}>
+          <RedditShareButton className="mx-2" url={postURL} title={props.title}>
             <FaReddit title="Share to Reddit" className="hover:text-orange-500" />
           </RedditShareButton>
           <CopyToClipboard

components/readerpage/TOC.tsx

@@ -3,7 +3,7 @@ import Link from "next/link";
 
 export const TOC = (props: { data: TTOCItem[] }) => {
   return (
-    <div className="sticky top-[5em] m-5 p-2 rounded-md border-2">
+    <div className="sticky top-[5em] mx-5 p-2 rounded-md border-2">
       <div className="p-2 text-center font-bold">{"TABLE OF CONTENTS"}</div>
       <hr />
       <ul className="flat-scrollbar my-1 px-1 h-[60vh] overflow-y-auto">

components/utils/Footer.tsx

@@ -1,5 +1,5 @@
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
-import { RSSFeedLink } from "@/consts/consts";
+import { CopyrightAnnouncement, RSSFeedURL } from "@/consts/consts";
 import { Config } from "@/data/config";
 import Link from "next/link";
 import { useState } from "react";
@@ -37,9 +37,7 @@ export const Footer = () => {
             </DialogTrigger>
           )}
         </div>
-        <div className="mx-auto px-3 text-center font-bold">{`COPYRIGHT © ${
+        <div className="mx-auto px-3 text-center font-bold">{CopyrightAnnouncement}</div>
-          Config.YearStart
-        }-${new Date().getFullYear()} ${Config.AuthorName} ALL RIGHTS RESERVED`}</div>
         <DialogContent className="sm:max-w-md">
           <DialogHeader>
             <DialogTitle className="flex">
@@ -57,12 +55,12 @@ export const Footer = () => {
             </div>
             <Separator />
             <div className="w-full flex my-3">
-              <Input defaultValue={RSSFeedLink} readOnly />
+              <Input defaultValue={RSSFeedURL} readOnly />
               <CopyToClipboard
                 onCopy={() => {
                   setIsCopied(true);
                 }}
-                text={RSSFeedLink}
+                text={RSSFeedURL}
               >
                 <Button
                   type="submit"

components/utils/NavBar.tsx

@@ -37,7 +37,7 @@ export const NavBar = () => {
 
   return (
     <Sheet open={isSideNavOpen} onOpenChange={(open) => setIsSideNavOpen(open)}>
-      <nav className="responsive-width sticky top-0 z-50 flex justify-between bg-inherit py-3 backdrop-blur">
+      <nav className="responsive-width sticky top-0 z-50 flex justify-between py-3 backdrop-blur bg-white/50 dark:bg-black/50">
         <Link href="/" className="cursor-pointer">
           <h1
             className={`${fontFzxbs.className} my-auto border-b-4 border-b-black text-2xl font-bold dark:border-b-white`}
@@ -50,7 +50,7 @@ export const NavBar = () => {
             <Link
               href={menuItem.href}
               key={nanoid()}
-              className="nav-link mx-2 my-auto px-2"
+              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}

components/utils/PostList.tsx

@@ -3,6 +3,7 @@ import { fontSypxzs } from "@/styles/font";
 import { TPostListItem } from "@/types/post-list";
 import { nanoid } from "nanoid";
 import Link from "next/link";
+import { TagBadge } from "./TagBadge";
 
 export const PostList = (props: { data: TPostListItem[] }) => {
   return (
@@ -31,9 +32,7 @@ export const PostList = (props: { data: TPostListItem[] }) => {
           {postListItem.frontMatter.tags && (
             <div className="my-2 flex justify-center">
               {postListItem.frontMatter.tags.map((tagName) => (
-                <Link href={`/tags/${tagName}`} className="tag-link mx-1 text-sm" key={`tags-${nanoid()}`}>
+                <TagBadge name={tagName} size="sm" key={`tags-${nanoid()}`} />
-                  {tagName}
-                </Link>
               ))}
             </div>
           )}

components/utils/SEO.tsx

@@ -1,4 +1,4 @@
-import { RSSFeedLink } from "@/consts/consts";
+import { RSSFeedURL, WebsiteURL } from "@/consts/consts";
 import { Config } from "@/data/config";
 import { NextSeo } from "next-seo";
 
@@ -6,13 +6,13 @@ export const SEO = (props: { title: string; description?: string | null; coverUR
   return (
     <>
       <title>{props.title}</title>
-      <link rel="alternate" type="application/rss+xml" href={RSSFeedLink} />
+      <link rel="alternate" type="application/rss+xml" href={RSSFeedURL} />
       <NextSeo
         title={props.title}
-        description={props.description ?? undefined}
+        description={props.description ?? Config.Sentence}
         openGraph={{
           title: props.title,
-          description: props.description ?? undefined,
+          description: props.description ?? Config.Sentence,
           images: props.coverURL
             ? [
                 {
@@ -22,11 +22,18 @@ export const SEO = (props: { title: string; description?: string | null; coverUR
                   alt: props.title,
                 },
               ]
-            : [],
+            : [
+                {
+                  url: Config.PageCovers.websiteCoverURL,
+                  width: 850,
+                  height: 650,
+                  alt: props.title,
+                },
+              ],
         }}
         twitter={{
           handle: `@${Config.SocialLinks.twitter}`,
-          site: Config.SiteDomain,
+          site: WebsiteURL,
           cardType: "summary_large_image",
         }}
       />

components/utils/SocialIcons.tsx

@@ -36,11 +36,9 @@ export const SocialIcons = () => {
           <FiGithub className="hover:text-gray-500" />
         </Link>
       )}
-      {Config.SocialLinks.email && (
       <Link target="_blank" href={`mailto:${Config.SocialLinks.email}`} title="EMail Address">
         <FiMail className="hover:text-gray-500" />
       </Link>
-      )}
     </div>
   );
 };

components/utils/TagBadge.tsx

@@ -0,0 +1,11 @@
+import Link from "next/link";
+
+export const TagBadge = (props: { name: string; size: "sm" | "md"; count?: number }) => {
+  return (
+    <Link href={`/tags/${props.name}`} className={`mx-1 my-auto ${props.size === "sm" ? "text-sm" : "text-base"}`}>
+      <div className="border-2 border-black px-2 hover:border-gray-600 hover:text-gray-600  dark:border-white  dark:text-white  dark:hover:border-gray-200">
+        {`${props.name}${props.count ? ` (${props.count})` : ""}`}
+      </div>
+    </Link>
+  );
+};

consts/consts.ts

@@ -6,4 +6,9 @@ export const LatestPostCountInHomePage = 5;
 export const PostCountPerPagination = 5;
 export const PostsRootDirectory = path.join(process.cwd(), "./data/posts");
 
-export const RSSFeedLink = `https://${Config.SiteDomain}/rss.xml`;
+export const RSSFeedURL = `https://${Config.SiteDomain}/rss.xml`;
+export const WebsiteURL = `https://${Config.SiteDomain}/`;
+
+export const CopyrightAnnouncement = `COPYRIGHT © ${Config.YearStart}-${new Date().getFullYear()} ${
+  Config.AuthorName
+} ALL RIGHTS RESERVED`;

lib/rss.tsx

@@ -1,4 +1,4 @@
-import { LatestPostCountInHomePage } from "@/consts/consts";
+import { CopyrightAnnouncement, LatestPostCountInHomePage, WebsiteURL } from "@/consts/consts";
 import { Config } from "@/data/config";
 import { Feed } from "feed";
 import fs from "fs";
@@ -15,6 +15,8 @@ import remarkMath from "remark-math";
 import remarkPrism from "remark-prism";
 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.`;
+
 /**
  * Generate the RSS Feed File in `./public` so it could be visited by https://domain/rss.xml
  */
@@ -23,23 +25,21 @@ export const generateRSSFeed = async () => {
     title: Config.SiteTitle,
     description: Config.Sentence,
     id: Config.SiteDomain,
-    link: `https://${Config.SiteDomain}/`,
+    link: WebsiteURL,
     image: Config.PageCovers.websiteCoverURL,
     favicon: `https://${Config.SiteDomain}/favcion.ico`,
-    copyright: `COPYRIGHT © ${Config.YearStart}-${new Date().getFullYear()} ${Config.AuthorName} ALL RIGHTS RESERVED`,
+    copyright: CopyrightAnnouncement,
     generator: "Node.js Feed",
     author: {
       name: Config.AuthorName,
       email: Config.SocialLinks.email,
-      link: `https://${Config.SiteDomain}/`,
+      link: WebsiteURL,
     },
   });
 
   for (let i = 0; i < LatestPostCountInHomePage; i++) {
     const post = sortedPosts.allPostList[i];
-    const postContent = `${getPostFileContent(
+    const postContent = `${getPostFileContent(post.id)}${NoticeForRSSReaders}}`;
-      post.id,
-    )}\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.`;
     const dateNumber = post.frontMatter.time.split("-").map((num) => parseInt(num));
     const mdxSource = await serialize(postContent ?? "", {
       parseFrontmatter: true,

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">🖥️ Programming stack: TypeScript, JavaScript, C++, C, Rust, Go and so on.</li>
-          <li className="my-2">🤝 I am looking to XXXXX</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
+                    <TagBadge name={tagName} size="sm" key={`tags-${nanoid()}`} />
-                      href={`/tags/${tagName}`}
-                      className={`tag-link m-1 text-sm ${fontSypxzs.className}`}
-                      key={`tags-${nanoid()}`}
-                    >
-                      {tagName}
-                    </Link>
                   ))}
                 </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">
+            <TagBadge key={`tag-badge-${nanoid()}`} name={item.name} size="md" count={item.count} />
-              {`${item.name} (${item.count})`}
-            </Link>
           ))}
         </div>
       </ContentContainer>

styles/scrollbar.css

@@ -1,4 +1,3 @@
-/* 滚动槽 */
 .flat-scrollbar::-webkit-scrollbar {
   width: 6px;
   height: 6px;
@@ -8,14 +7,12 @@
   background: rgba(0, 0, 0, 0.06);
   -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.08);
 }
-/* 滚动条滑块 */
 .flat-scrollbar::-webkit-scrollbar-thumb {
   border-radius: 3px;
   background: gray;
   -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
 }
 
-/* 滚动槽 */
 .flat-scrollbar-thin::-webkit-scrollbar {
   width: 3px;
   height: 3px;
@@ -25,7 +22,6 @@
   background: rgba(0, 0, 0, 0.06);
   -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.08);
 }
-/* 滚动条滑块 */
 .flat-scrollbar-thin::-webkit-scrollbar-thumb {
   border-radius: 3px;
   background: gray;

styles/ui.css

@@ -1,35 +1,12 @@
-.text-selection {
+.selection-style {
   @apply selection:bg-black
       selection:text-white
       dark:selection:bg-white
       dark:selection:text-black;
 }
 
-.list-title {
-  @apply text-3xl
-  font-bold
-  text-sky-600
-  dark:text-sky-500;
-}
-
-.nav-link {
-  @apply border-b-sky-600
-  font-bold
-  hover:text-sky-600
-  dark:hover:border-b-sky-500
-  dark:hover:text-sky-500;
-}
-
 .tag-link {
-  @apply border-2
+  @apply border-2 border-black px-2 hover:border-gray-600 hover:text-gray-600 dark:border-white  dark:text-white  dark:hover:border-gray-200  dark:hover:text-gray-200;
-  border-black
-  px-2
-  hover:border-gray-600
-  hover:text-gray-600
-  dark:border-white
-  dark:text-white
-  dark:hover:border-gray-200
-  dark:hover:text-gray-200;
 }
 
 .link-button {
@@ -45,5 +22,5 @@
 }
 
 * {
-  @apply text-selection;
+  @apply selection-style;
 }