[update] migrate the project formatter from prettier and eslint to biome

This commit is contained in:
PrinOrange
2024-08-14 12:57:22 +08:00
parent 009be6e7d9
commit 81de437888
61 changed files with 480 additions and 3865 deletions

View File

@@ -14,11 +14,11 @@ export default function NotFoundPage() {
<Page>
<NavBar />
<ContentContainer>
<h2 className={`my-5 flex justify-center text-2xl font-bold caption-font`}>{"404 NOT FOUND"}</h2>
<h2 className={"caption-font my-5 flex justify-center font-bold text-2xl"}>{"404 NOT FOUND"}</h2>
<Separator />
<div className="my-5 flex flex-col justify-center">
<TfiFaceSad className="mx-auto my-4" size={"6em"} />
<p className={`content-font mx-auto my-3 text-center text-xl`}>
<p className={"mx-auto my-3 text-center text-xl content-font"}>
{"This page does not exist for it might be removed or closed."}
</p>
<div className="my-5 flex justify-center">

View File

@@ -14,11 +14,11 @@ export default function ServerErrorPage() {
<Page>
<NavBar />
<ContentContainer>
<h2 className={`my-5 flex justify-center text-2xl font-bold caption-font`}>{"INVALID OPERATION"}</h2>
<h2 className={"caption-font my-5 flex justify-center font-bold text-2xl"}>{"INVALID OPERATION"}</h2>
<Separator />
<div className="my-5 flex flex-col justify-center">
<MdOutlineDangerous className="mx-auto my-4" size={"6em"} />
<p className={`content-font mx-auto my-3 text-center text-xl`}>
<p className={"mx-auto my-3 text-center text-xl content-font"}>
{"Something went wrong. Please try again later."}
</p>
<div className="my-5 flex justify-center">

View File

@@ -18,16 +18,15 @@ export default function AboutPage() {
/>
<NavBar />
<ContentContainer>
<h2 className={`my-5 flex justify-around text-2xl font-bold caption-font`}>{"ABOUT ME"}</h2>
<h2 className={"caption-font my-5 flex justify-around font-bold text-2xl"}>{"ABOUT ME"}</h2>
<Separator />
<div className={`content-font my-5 justify-center md:flex md:space-x-10`}>
<div className={"my-5 justify-center content-font md:flex md:space-x-10"}>
<div className="my-auto flex md:w-1/3">
<img alt="my-profile" className="mx-auto my-auto max-h-[23rem] rounded-lg" src="/images/profile.webp" />
</div>
<div className="my-auto md:w-1/3">
<div className="mt-5 mb-3 text-3xl font-bold">Hi, there👋</div>
I am a student / entrepreneur / engineer (Your profession) majoring in (Your Research Field) born in XXXX
(Your birth year)
<div className="mt-5 mb-3 font-bold text-3xl">Hi, there👋</div>I am a student / entrepreneur / engineer
(Your profession) majoring in (Your Research Field) born in XXXX (Your birth year)
<br />
<br />
My main research interests includes XXXX
@@ -40,7 +39,7 @@ export default function AboutPage() {
<SocialIcons />
<Separator />
<ul className="mx-auto my-10 px-5 md:w-2/3 list-disc">
<ul className="mx-auto my-10 list-disc px-5 md:w-2/3">
{Config.SocialLinks.github && (
<li className="my-2">
{"📕 Check out my github profile at "}
@@ -64,7 +63,7 @@ export default function AboutPage() {
<li className="my-2">From : Your Country, State / Province</li>
</ul>
<div className="mx-auto my-10 md:w-2/3 font-bold">
<div className="mx-auto my-10 font-bold md:w-2/3">
{
"** In addition to the above content, you can also add other customized components, content, etc. to this page. **"
}

View File

@@ -1,6 +1,6 @@
import { SearchIndex } from "@/lib/search";
import { isEmptyString } from "@/lib/utils";
import { TSearchResultItem } from "@/types/search-result";
import type { TSearchResultItem } from "@/types/search-result";
import type { NextApiRequest, NextApiResponse } from "next";
type ResponseData = TSearchResultItem[];

View File

@@ -16,12 +16,12 @@ import { normalizeDate } from "@/lib/date";
import { getPostFileContent, sortedPosts } from "@/lib/post-process";
import { makeTOCTree } from "@/lib/toc";
import useDrawerTOCState from "@/stores/useDrawerTOCState";
import { TFrontmatter } from "@/types/frontmatter.type";
import { TPostListItem } from "@/types/post-list";
import { TTOCItem } from "@/types/toc.type";
import type { TFrontmatter } from "@/types/frontmatter.type";
import type { TPostListItem } from "@/types/post-list";
import type { TTOCItem } from "@/types/toc.type";
import { nanoid } from "nanoid";
import { GetStaticPaths, GetStaticProps } from "next";
import { MDXRemote, MDXRemoteSerializeResult } from "next-mdx-remote";
import type { GetStaticPaths, GetStaticProps } from "next";
import { MDXRemote, type MDXRemoteSerializeResult } from "next-mdx-remote";
import { serialize } from "next-mdx-remote/serialize";
import Link from "next/link";
import { renderToString } from "react-dom/server";
@@ -70,34 +70,36 @@ const ReaderPage = (props: ReaderPageProps) => {
<NavBar />
<ContentContainer>
<div
className={`py-1 ${isTOCLongEnough ? "justify-between" : "justify-center"} lg:flex space-x-5`}
className={`py-1 ${isTOCLongEnough ? "justify-between" : "justify-center"} space-x-5 lg:flex`}
style={{ borderRadius: "5px" }}
>
<div className={`${isTOCLongEnough ? "lg:w-2/3" : "lg:w-5/6"} py-5`}>
<div className="typesetting">
{props.frontMatter.coverURL && <PostCover coverURL={props.frontMatter.coverURL} />}
<div className="pb-1 border-b-2 border-black dark:border-gray-300">
<div className="border-black border-b-2 pb-1 dark:border-gray-300">
<div
className={`caption-font my-2 text-black dark:text-white flex justify-center whitespace-normal break-words text-3xl font-bold capitalize`}
className={
"caption-font my-2 flex justify-center whitespace-normal break-words font-bold text-3xl text-black capitalize dark:text-white"
}
>
{props.frontMatter?.title}
</div>
{props.frontMatter?.subtitle && (
<div className={`caption-font my-1 flex justify-center text-xl font-bold capitalize`}>
<div className={"caption-font my-1 flex justify-center font-bold text-xl capitalize"}>
{props.frontMatter.subtitle}
</div>
)}
<div className="my-1 flex justify-center text-sm italic">{normalizeDate(props.frontMatter?.time)}</div>
{props.frontMatter?.summary && (
<p className={"content-font my-4 indent-8 text-gray-800 dark:text-gray-300"}>
<p className={"my-4 indent-8 text-gray-800 content-font dark:text-gray-300"}>
{props.frontMatter?.summary}
</p>
)}
{props.frontMatter.tags && (
<div className={"pt-1 flex flex-wrap border-t-2 border-black dark:border-gray-300"}>
<div className={"flex flex-wrap border-black border-t-2 pt-1 dark:border-gray-300"}>
{props.frontMatter.tags.map((tagName) => (
<Link
className="not-prose mr-2 px-2 py-1 font-bold border-2 border-black dark:border-gray-300 my-1 text-gray-700 hover:text-black text-xs dark:text-gray-300 dark:hover:text-gray-200"
className="not-prose my-1 mr-2 border-2 border-black px-2 py-1 font-bold text-gray-700 text-xs hover:text-black dark:border-gray-300 dark:text-gray-300 dark:hover:text-gray-200"
href={`/tags/${tagName}`}
key={`tags-${nanoid()}`}
>
@@ -135,7 +137,7 @@ const ReaderPage = (props: ReaderPageProps) => {
title={props.frontMatter.title}
/>
<Separator />
<ul className="my-5 px-5 flex flex-col justify-center list-disc">
<ul className="my-5 flex list-disc flex-col justify-center px-5">
{props.prevPostListItem && (
<li className="my-1">
<Link
@@ -160,7 +162,7 @@ const ReaderPage = (props: ReaderPageProps) => {
{Config.Giscus?.enabled && <PostComments postId={props.postId} />}
</div>
{isTOCLongEnough && (
<div className="hidden lg:block md:w-1/3 py-5">
<div className="hidden py-5 md:w-1/3 lg:block">
<div className="sticky top-[5em]">
<TOC data={props.tocList} />
</div>

View File

@@ -14,9 +14,9 @@ export default function FriendsPage() {
<SEO description={"My Friend Links"} title={`${Config.SiteTitle} - Friends`} />
<NavBar />
<ContentContainer>
<h2 className={`my-5 flex justify-center text-2xl font-bold caption-font`}>{"FRIENDS"}</h2>
<h2 className={"caption-font my-5 flex justify-center font-bold text-2xl"}>{"FRIENDS"}</h2>
<Separator />
<div className={`my-5 flex flex-wrap justify-center text-2xl content-font`}>
<div className={"my-5 flex flex-wrap justify-center text-2xl content-font"}>
{FriendsList.map((item) => (
<Link className="mx-2 p-2 underline" href={item.url} key={nanoid()}>
{item.title}
@@ -24,7 +24,7 @@ export default function FriendsPage() {
))}
</div>
<Separator />
<div className="my-2 text-base flex-col flex justify-start">
<div className="my-2 flex flex-col justify-start text-base">
<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}`}>

View File

@@ -10,8 +10,8 @@ import { LatestPostCountInHomePage } from "@/consts/consts";
import { Config } from "@/data/config";
import { sortedPosts } from "@/lib/post-process";
import { generateRSSFeed } from "@/lib/rss";
import { TPostListItem } from "@/types/post-list";
import { GetStaticProps } from "next";
import type { TPostListItem } from "@/types/post-list";
import type { GetStaticProps } from "next";
import Link from "next/link";
import { LuPenTool } from "react-icons/lu";
import { RiStarFill } from "react-icons/ri";
@@ -35,7 +35,7 @@ export default function Home(props: HomePageProps) {
{props.pinnedPostList.length !== 0 && (
<div>
<Separator />
<h2 className={`my-5 flex justify-center text-2xl font-bold caption-font`}>
<h2 className={"caption-font my-5 flex justify-center font-bold text-2xl"}>
<RiStarFill className="mx-2 my-auto" />
{"PINNED POSTS"}
</h2>
@@ -46,7 +46,7 @@ export default function Home(props: HomePageProps) {
{props.latestPostList.length !== 0 && (
<div>
<Separator />
<h2 className={`my-5 flex justify-center text-2xl font-bold caption-font`}>
<h2 className={"caption-font my-5 flex justify-center font-bold text-2xl"}>
<LuPenTool className="mx-2 my-auto" />
{"LATEST POSTS"}
</h2>

View File

@@ -11,12 +11,12 @@ import { PostCountPerPagination } from "@/consts/consts";
import { Config } from "@/data/config";
import { sortedPosts } from "@/lib/post-process";
import { isEmptyArray, paginateArray } from "@/lib/utils";
import { TPostListItem } from "@/types/post-list";
import type { TPostListItem } from "@/types/post-list";
import { nanoid } from "nanoid";
import { GetStaticPaths, GetStaticProps } from "next";
import type { GetStaticPaths, GetStaticProps } from "next";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { ChangeEvent, KeyboardEvent, useEffect, useState } from "react";
import { type ChangeEvent, type KeyboardEvent, useEffect, useState } from "react";
import { LuPenTool } from "react-icons/lu";
type PostsPageProps = {
@@ -32,7 +32,7 @@ export default function PostsPage(props: PostsPageProps) {
const handleEnterKeyJump = (event: KeyboardEvent<HTMLInputElement>) => {
setPageNumber(pageNumber.replace(/[^\d]/g, ""));
if (parseInt(pageNumber) > 0 && parseInt(pageNumber) < props.pageAmount + 1) {
if (Number.parseInt(pageNumber) > 0 && Number.parseInt(pageNumber) < props.pageAmount + 1) {
(event.key === "Go" || event.key === "Enter") && router.push(`/posts/${pageNumber}`);
return;
}
@@ -55,20 +55,20 @@ export default function PostsPage(props: PostsPageProps) {
/>
<NavBar />
<ContentContainer>
<h2 className={`my-5 flex justify-center text-2xl caption-font font-bold`}>
<h2 className={"caption-font my-5 flex justify-center font-bold text-2xl"}>
<LuPenTool className="mx-2 my-auto" />
{"ALL POSTS"}
</h2>
{!isEmptyArray(props.tagList) && (
<Accordion collapsible type="single">
<AccordionItem className="border-t" value="item-1">
<AccordionTrigger className="hover:no-underline font-bold">{"TAG FILTER"}</AccordionTrigger>
<AccordionTrigger className="font-bold hover:no-underline">{"TAG FILTER"}</AccordionTrigger>
<AccordionContent>
<Separator />
<div className={`my-5 flex flex-wrap text-wrap text-sm justify-center px-2`}>
<div className={"my-5 flex flex-wrap justify-center text-wrap px-2 text-sm"}>
{props.tagList.map((item) => (
<Link
className="m-1 p-1 underline underline-offset-[5px] my-auto text-gray-700 decoration-2 hover:text-black dark:text-gray-300 dark:hover:text-white font-bold"
className="m-1 my-auto p-1 font-bold text-gray-700 underline decoration-2 underline-offset-[5px] hover:text-black dark:text-gray-300 dark:hover:text-white"
href={`/tags/${item.name}`}
key={`tags-${nanoid()}`}
>
@@ -83,7 +83,7 @@ export default function PostsPage(props: PostsPageProps) {
<Separator />
<PostList data={props.postList} />
<Separator />
<div className="my-5 flex justify-between text-base font-bold">
<div className="my-5 flex justify-between font-bold text-base">
{props.pageNumber !== 1 && (
<Button asChild>
<Link className="font-bold" href={`/posts/${props.pageNumber - 1}/`}>
@@ -91,9 +91,9 @@ export default function PostsPage(props: PostsPageProps) {
</Link>
</Button>
)}
<div className="my-auto font-bold flex justify-center">
<div className="my-auto flex justify-center font-bold">
<Input
className="my-auto mx-2 w-11 h-6"
className="mx-2 my-auto h-6 w-11"
onChange={handleInputPageNumber}
onKeyDown={handleEnterKeyJump}
title="Type the specified page number and press Enter to jump."
@@ -130,9 +130,9 @@ export const getStaticPaths: GetStaticPaths = () => {
export const getStaticProps: GetStaticProps<PostsPageProps> = async (context) => {
const params = (context.params?.slug as string[]) ?? [];
const pageNumber = params[0] ? parseInt(params[0]) : 1;
const pageNumber = params[0] ? Number.parseInt(params[0]) : 1;
let postList: TPostListItem[] = paginateArray(sortedPosts.allPostList, PostCountPerPagination, pageNumber);
const postList: TPostListItem[] = paginateArray(sortedPosts.allPostList, PostCountPerPagination, pageNumber);
const pageAmount = Math.ceil(sortedPosts.allPostList.length / PostCountPerPagination);

View File

@@ -8,14 +8,14 @@ import { NavBar } from "@/components/utils/NavBar";
import { SEO } from "@/components/utils/SEO";
import { Config } from "@/data/config";
import { isEmptyString } from "@/lib/utils";
import { TSearchResultItem } from "@/types/search-result";
import type { TSearchResultItem } from "@/types/search-result";
import axios from "axios";
import { isArray } from "lodash";
import { nanoid } from "nanoid";
import { GetServerSideProps } from "next";
import type { GetServerSideProps } from "next";
import Link from "next/link";
import { useRouter } from "next/router";
import { ChangeEvent, KeyboardEvent, useEffect, useState } from "react";
import { type ChangeEvent, type KeyboardEvent, useEffect, useState } from "react";
type SearchPageProps = { query: string | null };
@@ -88,8 +88,8 @@ export default function SearchPage(props: SearchPageProps) {
<Toaster />
<NavBar />
<ContentContainer>
<h2 className={`my-10 flex justify-center text-2xl font-bold caption-font`}>{"SEARCH POSTS"}</h2>
<div className="flex my-10">
<h2 className={"caption-font my-10 flex justify-center font-bold text-2xl"}>{"SEARCH POSTS"}</h2>
<div className="my-10 flex">
<Input
className="my-auto py-0"
onChange={handleInputSearchText}
@@ -97,26 +97,26 @@ export default function SearchPage(props: SearchPageProps) {
placeholder="Input the keyword"
value={searchText}
/>
<Button className="mx-3 w-32 my-auto" disabled={isLoading} onClick={handleMakeSearch}>
<Button className="mx-3 my-auto w-32" disabled={isLoading} onClick={handleMakeSearch}>
{isLoading ? "Loading" : "Search"}
</Button>
</div>
<div className="flex flex-col justify-center">
<div className={`min-h-full flex flex-col content-font`}>
<div className={"flex min-h-full flex-col content-font"}>
{searchResult.map((item, index) => (
<Link
className={`p-2 border-t ${index === searchResult.length - 1 && "border-b"} hover:bg-gray-50 dark:hover:bg-gray-900 flex flex-col`}
className={`border-t p-2 ${index === searchResult.length - 1 && "border-b"} flex flex-col hover:bg-gray-50 dark:hover:bg-gray-900`}
href={`/blog/${item.id}`}
key={nanoid()}
target="_blank"
>
<div className="my-1">
<div className="capitalize post-list-caption-font text-md font-bold">{item.title}</div>
<div className="post-list-caption-font font-bold text-md capitalize">{item.title}</div>
{item.summary && <div>{item.summary}</div>}
</div>
<div className="flex space-x-2 flex-wrap">
<div className="flex flex-wrap space-x-2">
{item.tags?.map((tagitem) => (
<div className="text-sm text-gray-500 dark:text-gray-400" key={nanoid()}>
<div className="text-gray-500 text-sm dark:text-gray-400" key={nanoid()}>
{tagitem}
</div>
))}
@@ -125,7 +125,7 @@ export default function SearchPage(props: SearchPageProps) {
))}
</div>
</div>
<div className="text-center my-3 text-gray-500 dark:text-gray-400">
<div className="my-3 text-center text-gray-500 dark:text-gray-400">
<p className="mx-auto text-sm">{"For search efficiency, only the first 20 results are displayed."}</p>
</div>
</ContentContainer>

View File

@@ -20,15 +20,15 @@ export default function SponsorPage() {
<Toaster />
<NavBar />
<ContentContainer>
<div className="md:flex mt-10">
<div className="mt-10 md:flex">
<div className="flex flex-col justify-center md:w-1/2">
<h2 className={`my-5 flex justify-center text-2xl font-bold text-red-500 caption-font`}>
<h2 className={"caption-font my-5 flex justify-center font-bold text-2xl text-red-500"}>
<GoHeartFill className="mx-2 my-auto" />
{"SPONSOR"}
</h2>
<SponsorDescription />
</div>
<div className="md:px-15 md:w-1/2">
<div className="md:w-1/2 md:px-15">
<SponsorBoard />
</div>
</div>

View File

@@ -10,11 +10,11 @@ import { PostCountPerPagination } from "@/consts/consts";
import { Config } from "@/data/config";
import { sortedPosts } from "@/lib/post-process";
import { paginateArray } from "@/lib/utils";
import { TPostListItem } from "@/types/post-list";
import { GetStaticPaths, GetStaticProps } from "next";
import type { TPostListItem } from "@/types/post-list";
import type { GetStaticPaths, GetStaticProps } from "next";
import Link from "next/link";
import { useRouter } from "next/router";
import { ChangeEvent, KeyboardEvent, useEffect, useState } from "react";
import { type ChangeEvent, type KeyboardEvent, useEffect, useState } from "react";
type TagsContentPageProps = {
tagName: string | null;
@@ -29,7 +29,7 @@ export default function TagsContentPage(props: TagsContentPageProps) {
const handleEnterKeyJump = (event: KeyboardEvent<HTMLInputElement>) => {
setPageNumber(pageNumber.replace(/[^\d]/g, ""));
if (parseInt(pageNumber) > 0 && parseInt(pageNumber) < props.pageAmount + 1) {
if (Number.parseInt(pageNumber) > 0 && Number.parseInt(pageNumber) < props.pageAmount + 1) {
(event.key === "Go" || event.key === "Enter") && router.push(`/tags/${props.tagName}/${pageNumber}`);
return;
}
@@ -52,13 +52,13 @@ export default function TagsContentPage(props: TagsContentPageProps) {
/>
<NavBar />
<ContentContainer>
<h2 className={"my-5 flex flex-col justify-center text-center font-bold caption-font"}>
<h2 className={"caption-font my-5 flex flex-col justify-center text-center font-bold"}>
<div className="mx-auto text-2xl">{`Posts of ${props.tagName}`}</div>
</h2>
<Separator />
<PostList data={props.postList} />
<Separator />
<div className="my-5 flex justify-between text-base font-bold">
<div className="my-5 flex justify-between font-bold text-base">
{props.pageNumber !== 1 && (
<Button asChild>
<Link className="font-bold" href={`/tags/${props.tagName}/${props.pageNumber - 1}/`}>
@@ -66,9 +66,9 @@ export default function TagsContentPage(props: TagsContentPageProps) {
</Link>
</Button>
)}
<div className="my-auto font-bold flex justify-center">
<div className="my-auto flex justify-center font-bold">
<Input
className="my-auto mx-2 w-11 h-6"
className="mx-2 my-auto h-6 w-11"
onChange={handleInputPageNumber}
onKeyDown={handleEnterKeyJump}
title="Type the specified page number and press Enter to jump."
@@ -112,7 +112,7 @@ export const getStaticProps: GetStaticProps<TagsContentPageProps> = async (conte
const params = (context.params?.slug as string[]) ?? [];
const tagName = params[0] ?? null;
const pageNumber = params[1] ? parseInt(params[1]) : 1;
const pageNumber = params[1] ? Number.parseInt(params[1]) : 1;
let postList: TPostListItem[] = [];
postList = paginateArray(sortedPosts.postsByTag[tagName], PostCountPerPagination, pageNumber);