[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

@@ -2,8 +2,8 @@ import { Config } from "@/data/config";
export const BottomCard = () => {
return (
<div className="p-8 w-full flex flex-col justify-center">
<img alt={Config.AuthorName} className="h-24 w-24 rounded-full mx-auto" src={Config.AvatarURL} />
<div className="flex w-full flex-col justify-center p-8">
<img alt={Config.AuthorName} className="mx-auto h-24 w-24 rounded-full" src={Config.AvatarURL} />
<p className="mx-auto mt-5 content-font">{Config.Sentence}</p>
</div>
);

View File

@@ -1,7 +1,7 @@
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet";
import { useActiveHeading } from "@/hooks/useActiveHeading";
import useDrawerTOCState from "@/stores/useDrawerTOCState";
import { TTOCItem } from "@/types/toc.type";
import type { TTOCItem } from "@/types/toc.type";
import Link from "next/link";
import { MdMenuBook } from "react-icons/md";
import { twMerge } from "tailwind-merge";
@@ -13,7 +13,7 @@ export const DrawerTOC = (props: { data: TTOCItem[] }) => {
return (
<Sheet onOpenChange={setIsTOCOpen} open={isTOCOpen}>
<SheetTrigger
className="bottom-16 right-5 fixed bg-white dark:bg-black border-gray-700 border dark:border-gray-500 shadow-xl"
className="fixed right-5 bottom-16 border border-gray-700 bg-white shadow-xl dark:border-gray-500 dark:bg-black"
title="Open the table of contents"
>
<div className="p-1 font-bold" onClick={() => setIsTOCOpen(!isTOCOpen)} title="Open the table of contents">
@@ -24,12 +24,12 @@ export const DrawerTOC = (props: { data: TTOCItem[] }) => {
<SheetHeader>
<SheetTitle className="mt-8 font-bold">{"TABLE OF CONTENTS"}</SheetTitle>
</SheetHeader>
<ul className="my-3 flat-scrollbar h-[70vh] flex flex-col overflow-y-auto flat-scrollbar-normal">
<ul className="flat-scrollbar flat-scrollbar-normal my-3 flex h-[70vh] flex-col overflow-y-auto">
{props.data?.map((item) => (
<Link
className={twMerge(
"border-t border-b py-1 px-2 border-dashed hover:bg-gray-100 hover:dark:bg-gray-900",
activeId === `#${item.anchorId}` ? "bg-gray-100 dark:bg-gray-900 text-sky-700 dark:text-sky-500" : "",
"border-t border-b border-dashed px-2 py-1 hover:bg-gray-100 hover:dark:bg-gray-900",
activeId === `#${item.anchorId}` ? "bg-gray-100 text-sky-700 dark:bg-gray-900 dark:text-sky-500" : "",
)}
href={`#${item.anchorId}`}
key={`drawer-toc-${item.anchorId}`}

View File

@@ -1,7 +1,7 @@
export const PostCover = (props: { coverURL: string }) => {
return (
<div
className="mb-8 mt-0 flex w-full justify-center rounded-md"
className="mt-0 mb-8 flex w-full justify-center rounded-md"
style={{
aspectRatio: "5/2",
background: `url(${props.coverURL})`,

View File

@@ -17,8 +17,8 @@ export const ShareButtons = (props: {
}'s Blog ${postURL}`;
const { toast } = useToast();
return (
<div className="py-3 flex justify-center space-x-4 text-2xl">
{props.allowShare != false ? (
<div className="flex justify-center space-x-4 py-3 text-2xl">
{props.allowShare !== false ? (
<>
<FacebookShareButton className="mx-2" quote={props.quote ?? props.title} url={postURL}>
<FaFacebook className="hover:text-blue-500" title="Share to Facebook" />
@@ -39,13 +39,13 @@ export const ShareButtons = (props: {
text={copyShareText}
>
<FaLink
className="hover:text-gray-500 mx-2 cursor-pointer"
className="mx-2 cursor-pointer hover:text-gray-500"
title="Share with the post url and description"
/>
</CopyToClipboard>
</>
) : (
<div className="my-auto text-sm font-bold">{"SHARING IS NOT ALLOWED"}</div>
<div className="my-auto font-bold text-sm">{"SHARING IS NOT ALLOWED"}</div>
)}
</div>
);

View File

@@ -1,5 +1,5 @@
import { useActiveHeading } from "@/hooks/useActiveHeading";
import { TTOCItem } from "@/types/toc.type";
import type { TTOCItem } from "@/types/toc.type";
import Link from "next/link";
import { twMerge } from "tailwind-merge";
@@ -8,16 +8,16 @@ export const TOC = (props: { data: TTOCItem[] }) => {
return (
<div className="mx-5">
<div className="text-lg text-center p-2 font-bold border-t-2 border-b-2 border-gray-500">
<div className="border-gray-500 border-t-2 border-b-2 p-2 text-center font-bold text-lg">
{"TABLE OF CONTENTS"}
</div>
<div className="px-2 py-2 h-[60vh] overflow-y-auto flat-scrollbar-normal">
<div className="flat-scrollbar-normal h-[60vh] overflow-y-auto px-2 py-2">
<div>
{props.data?.map((item) => (
<Link href={`#${item.anchorId}`} key={`toc-${item.anchorId}`}>
<div
className={twMerge(
`py-2 text-sm rounded-lg hover:text-sky-700 dark:hover:text-sky-400`,
"rounded-lg py-2 text-sm hover:text-sky-700 dark:hover:text-sky-400",
activeId === `#${item.anchorId}` ? "text-sky-700 dark:text-sky-400" : "",
)}
style={{ paddingLeft: `${item.level - 1}em` }}