dev.2ha.me/lixiyu-net
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

6
components/homepage/HomeCover.tsx
View File

@@ -6,7 +6,7 @@ export const HomeCover = () => {
<>
<div className="w-full">
<div
className="mb-20 mt-5 flex w-full justify-center rounded-xl"
className="mt-5 mb-20 flex w-full justify-center rounded-xl"
style={{
aspectRatio: "4/1",
background: `url(${Config.PageCovers.websiteCoverURL})`,
@@ -20,10 +20,10 @@ export const HomeCover = () => {
/>
</div>
</div>
<div className={`caption-font my-8 text-center text-4xl font-bold`}>{Config.Nickname}</div>
<div className={"caption-font my-8 text-center font-bold text-4xl"}>{Config.Nickname}</div>
{Config.Sentence && (
<div className="my-5 flex justify-center">
<p className={`content-font text-lg`}>{Config.Sentence}</p>
<p className={"text-lg content-font"}>{Config.Sentence}</p>
</div>
)}
<div className="my-8">

2
components/layouts/index.tsx
View File

@@ -3,5 +3,5 @@ export const Page = ({ children }: { children: React.ReactNode }) => {
};
export const ContentContainer = ({ children }: { children: React.ReactNode }) => {
return <main className="px-5 md:px-10 lg:px-20 xl:px-32 2xl:px-52 flex-grow">{children}</main>;
return <main className="flex-grow px-5 md:px-10 lg:px-20 xl:px-32 2xl:px-52">{children}</main>;
};

2
components/mdx/Blockquote.tsx
View File

@@ -2,7 +2,7 @@ const Blockquote = (props: JSX.IntrinsicElements["blockquote"]) => {
return (
<blockquote
className={
"not-prose scroll-mt-20 my-5 px-5 py-4 bg-gray-100 dark:bg-gray-800 dark:border-gray-700 border-gray-300 border-l-4"
"not-prose my-5 scroll-mt-20 border-gray-300 border-l-4 bg-gray-100 px-5 py-4 dark:border-gray-700 dark:bg-gray-800"
}
>
{props.children}

2
components/mdx/H2.tsx
View File

@@ -1,6 +1,6 @@
const H2 = (props: JSX.IntrinsicElements["h2"]) => {
return (
<h2 className={`caption-font scroll-mt-20`} id={props.id}>
<h2 className={"caption-font scroll-mt-20"} id={props.id}>
{props.children}
</h2>
);

4
components/mdx/ImageWrapper.tsx
View File

@@ -2,9 +2,9 @@
// but all the attributes of the img tag.
const ImageWrapper = (props: JSX.IntrinsicElements["img"]) => {
return (
<div className="flex flex-col my-5">
<div className="my-5 flex flex-col">
<img alt={props.alt} className="mx-auto my-0" src={props.src} />
<div className="mx-auto my-1 text-sm text-gray-500 dark:text-gray-300">{props.alt}</div>
<div className="mx-auto my-1 text-gray-500 text-sm dark:text-gray-300">{props.alt}</div>
</div>
);
};

6
components/mdx/PreWrapper.tsx
View File

@@ -23,7 +23,7 @@ const PreWrapper = ({ children }: { children: JSX.Element }) => {
return (
<div
className="relative flat-scrollbar-normal"
className="flat-scrollbar-normal relative"
dir="ltr"
onMouseLeave={onExit}
onMouseMove={onEnter}
@@ -32,14 +32,14 @@ const PreWrapper = ({ children }: { children: JSX.Element }) => {
{hovered && (
<Button
aria-label="Copy code"
className={`absolute right-2 top-2 h-8 w-8 rounded p-1 ${copied ? "hover:text-green-500 text-green-500" : ""}`}
className={`absolute top-2 right-2 h-8 w-8 rounded p-1 ${copied ? "text-green-500 hover:text-green-500" : ""}`}
onClick={onCopy}
variant={"outline"}
>
{copied ? <FaCheck /> : <IoCopyOutline />}
</Button>
)}
<pre className="p-2 dark:bg-[#0d1117] bg-[#F6F8FA] rounded-md flat-scrollbar-normal not-prose text-sm dark:selection:bg-gray-700 selection:bg-gray-300 selection:text-inherit">
<pre className="flat-scrollbar-normal not-prose rounded-md bg-[#F6F8FA] p-2 text-sm selection:bg-gray-300 selection:text-inherit dark:bg-[#0d1117] dark:selection:bg-gray-700">
{children}
</pre>
</div>

2
components/mdx/TableWrapper.tsx
View File

@@ -1,6 +1,6 @@
const TableWrapper = ({ children }: { children: React.ReactNode }) => {
return (
<div className="w-full overflow-x-auto flat-scrollbar-normal">
<div className="flat-scrollbar-normal w-full overflow-x-auto">
<table>{children}</table>
</div>
);

4
components/readerpage/BottomCard.tsx
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>
);

10
components/readerpage/DrawerTOC.tsx
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}`}

2
components/readerpage/PostCover.tsx
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})`,

8
components/readerpage/ShareButtons.tsx
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>
);

8
components/readerpage/TOC.tsx
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` }}

34
components/sponsor-page/SponsorBoard.tsx
View File

@@ -23,12 +23,12 @@ export const SponsorBoard = () => {
setIsCopiedList(Config.Sponsor?.Crypto?.map(() => false) ?? []);
}}
>
<div className="mx-2 my-10 flex flex-col justify-around space-y-5">
<div className="mx-2 my-10 flex flex-col justify-around space-y-5">
{Config.Sponsor?.Crypto && (
<div className="py-3 flex justify-between border-b">
<div className="flex justify-between border-b py-3">
<div className="my-auto flex">
<div className="mx-3 my-auto">
<h3 className="mx-auto text-sm font-bold">{"Crypto"}</h3>
<h3 className="mx-auto font-bold text-sm">{"Crypto"}</h3>
<div className="text-xs">{"Supports BTC, USDT and ETH."}</div>
</div>
</div>
@@ -40,11 +40,11 @@ export const SponsorBoard = () => {
</div>
)}
{Config.Sponsor?.Github && Config.SocialLinks.github && (
<div className="py-3 flex justify-between border-b">
<div className="flex justify-between border-b py-3">
<div className="my-auto flex">
<FaGithub className="mx-3 my-auto text-4xl text-gray-900 dark:text-gray-500" />
<div className="my-auto">
<h3 className="mx-auto text-sm font-bold">{"Github Sponsor"}</h3>
<h3 className="mx-auto font-bold text-sm">{"Github Sponsor"}</h3>
</div>
</div>
<div className="my-auto">
@@ -57,11 +57,11 @@ export const SponsorBoard = () => {
</div>
)}
{!isEmptyString(Config.Sponsor?.WechatPayQRCodeContent) && (
<div className="py-3 flex justify-between border-b">
<div className="flex justify-between border-b py-3">
<div className="my-auto flex">
<SiWechat className="mx-3 my-auto text-4xl text-green-500" />
<div className="my-auto">
<h3 className="mx-auto text-sm font-bold">{"Wechat Pay"}</h3>
<h3 className="mx-auto font-bold text-sm">{"Wechat Pay"}</h3>
</div>
</div>
<div className="my-auto bg-white p-1">
@@ -70,11 +70,11 @@ export const SponsorBoard = () => {
</div>
)}
{!isEmptyString(Config.Sponsor?.AlipayLink) && (
<div className="py-3 flex justify-between border-b">
<div className="flex justify-between border-b py-3">
<div className="my-auto flex">
<SiAlipay className="mx-3 my-auto text-4xl text-blue-500" />
<div className="my-auto">
<h3 className="mx-auto text-sm font-bold">{"Alipay"}</h3>
<h3 className="mx-auto font-bold text-sm">{"Alipay"}</h3>
</div>
</div>
<div className="my-auto">
@@ -87,11 +87,11 @@ export const SponsorBoard = () => {
</div>
)}
{!isEmptyString(Config.Sponsor?.PaypalId) && (
<div className="py-3 flex justify-between border-b">
<div className="flex justify-between border-b py-3">
<div className="my-auto flex">
<FaPaypal className="mx-3 my-auto text-4xl text-blue-600" />
<div className="my-auto">
<h3 className="mx-auto text-sm font-bold">{"Paypal"}</h3>
<h3 className="mx-auto font-bold text-sm">{"Paypal"}</h3>
</div>
</div>
<div className="my-auto">
@@ -104,11 +104,11 @@ export const SponsorBoard = () => {
</div>
)}
{!isEmptyString(Config.Sponsor?.PatreonId) && (
<div className="py-3 flex justify-between border-b">
<div className="flex justify-between border-b py-3">
<div className="my-auto flex">
<FaPatreon className="mx-3 my-auto text-4xl text-gray-500" />
<div className="my-auto">
<h3 className="mx-auto text-sm font-bold">{"Patreon"}</h3>
<h3 className="mx-auto font-bold text-sm">{"Patreon"}</h3>
</div>
</div>
<div className="my-2">
@@ -125,7 +125,7 @@ export const SponsorBoard = () => {
<DialogTitle className="flex">{"CRYPTO"}</DialogTitle>
</DialogHeader>
<div>
<div className="w-full text-sm my-2">
<div className="my-2 w-full text-sm">
<div>
<b>NOTE: </b> Please confirm the corresponding block network and address before transferring money to
avoid loss.
@@ -133,9 +133,9 @@ export const SponsorBoard = () => {
</div>
<Separator />
{Config.Sponsor?.Crypto?.map((cryptoItem, cryptoItemIndex) => (
<div className="w-full py-3 border-b" key={nanoid()}>
<div className="w-full border-b py-3" key={nanoid()}>
<div className="my-2 flex space-x-2">
<div className="font-bold my-auto text-sm">{`${cryptoItem.Name} - ${cryptoItem.Blockchain}`}</div>
<div className="my-auto font-bold text-sm">{`${cryptoItem.Name} - ${cryptoItem.Blockchain}`}</div>
</div>
<div className="flex">
<Input autoFocus={false} defaultValue={cryptoItem.Address} readOnly />
@@ -148,7 +148,7 @@ export const SponsorBoard = () => {
text={cryptoItem.Address}
>
<Button
className={`ml-3 my-auto ${isCopiedList[cryptoItemIndex] && "bg-green-500 hover:bg-green-500"}`}
className={`my-auto ml-3 ${isCopiedList[cryptoItemIndex] && "bg-green-500 hover:bg-green-500"}`}
size="sm"
type="submit"
>

4
components/sponsor-page/SponsorDescription.tsx
View File

@@ -4,11 +4,11 @@ export const SponsorDescription = () => {
return (
<div className="h-full">
{!Config.Sponsor ? (
<p className={`content-font break-words text-lg`}>
<p className={"break-words text-lg content-font"}>
{"Thank you, for data and personal private security, every sponsor method was paused."}
</p>
) : (
<p className={`content-font break-words text-lg`}>
<p className={"break-words text-lg content-font"}>
{
"If you like my works, I would deeply appreciate your support as a patron. Your contribution not only fuels my creative journey but also allows me to delve deeper into my passion. Your support plays a vital role in making this vision a reality. Thank you for considering becoming a patron and being an integral part of this work endeavor."
}

2
components/ui/accordion.tsx
View File

@@ -45,7 +45,7 @@ const AccordionContent = React.forwardRef<
ref={ref}
{...props}
>
<div className={cn("pb-4 pt-0", className)}>{children}</div>
<div className={cn("pt-0 pb-4", className)}>{children}</div>
</AccordionPrimitive.Content>
));

4
components/ui/badge.tsx
View File

@@ -1,5 +1,5 @@
import { cva, type VariantProps } from "class-variance-authority";
import * as React from "react";
import { type VariantProps, cva } from "class-variance-authority";
import type * as React from "react";
import { cn } from "@/lib/utils";

2
components/ui/button.tsx
View File

@@ -1,6 +1,6 @@
import { cn } from "@/lib/utils";
import { Slot } from "@radix-ui/react-slot";
import { cva, type VariantProps } from "class-variance-authority";
import { type VariantProps, cva } from "class-variance-authority";
import * as React from "react";
const buttonVariants = cva(

4
components/ui/card.tsx
View File

@@ -16,14 +16,14 @@ CardHeader.displayName = "CardHeader";
const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
({ className, ...props }, ref) => (
<h3 className={cn("text-2xl font-semibold leading-none tracking-tight", className)} ref={ref} {...props} />
<h3 className={cn("font-semibold text-2xl leading-none tracking-tight", className)} ref={ref} {...props} />
),
);
CardTitle.displayName = "CardTitle";
const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
({ className, ...props }, ref) => (
<p className={cn("text-sm text-muted-foreground", className)} ref={ref} {...props} />
<p className={cn("text-muted-foreground text-sm", className)} ref={ref} {...props} />
),
);
CardDescription.displayName = "CardDescription";

6
components/ui/command.tsx
View File

@@ -1,6 +1,6 @@
"use client";
import { type DialogProps } from "@radix-ui/react-dialog";
import type { DialogProps } from "@radix-ui/react-dialog";
import { Command as CommandPrimitive } from "cmdk";
import { Search } from "lucide-react";
import * as React from "react";
@@ -82,7 +82,7 @@ const CommandGroup = React.forwardRef<
>(({ className, ...props }, ref) => (
<CommandPrimitive.Group
className={cn(
"overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
"overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:text-xs",
className,
)}
ref={ref}
@@ -117,7 +117,7 @@ const CommandItem = React.forwardRef<
CommandItem.displayName = CommandPrimitive.Item.displayName;
const CommandShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
return <span className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)} {...props} />;
return <span className={cn("ml-auto text-muted-foreground text-xs tracking-widest", className)} {...props} />;
};
CommandShortcut.displayName = "CommandShortcut";

10
components/ui/dialog.tsx
View File

@@ -20,7 +20,7 @@ const DialogOverlay = React.forwardRef<
>(({ className, ...props }, ref) => (
<DialogPrimitive.Overlay
className={cn(
"fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=closed]:animate-out data-[state=open]:animate-in",
className,
)}
ref={ref}
@@ -37,14 +37,14 @@ const DialogContent = React.forwardRef<
<DialogOverlay />
<DialogPrimitive.Content
className={cn(
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=closed]:animate-out data-[state=open]:animate-in sm:rounded-lg",
className,
)}
ref={ref}
{...props}
>
{children}
<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
<DialogPrimitive.Close className="absolute top-4 right-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
<X className="h-4 w-4" />
<span className="sr-only">Close</span>
</DialogPrimitive.Close>
@@ -68,7 +68,7 @@ const DialogTitle = React.forwardRef<
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
>(({ className, ...props }, ref) => (
<DialogPrimitive.Title
className={cn("text-lg font-semibold leading-none tracking-tight", className)}
className={cn("font-semibold text-lg leading-none tracking-tight", className)}
ref={ref}
{...props}
/>
@@ -79,7 +79,7 @@ const DialogDescription = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Description>,
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
>(({ className, ...props }, ref) => (
<DialogPrimitive.Description className={cn("text-sm text-muted-foreground", className)} ref={ref} {...props} />
<DialogPrimitive.Description className={cn("text-muted-foreground text-sm", className)} ref={ref} {...props} />
));
DialogDescription.displayName = DialogPrimitive.Description.displayName;

2
components/ui/input.tsx
View File

@@ -8,7 +8,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, type,
return (
<input
className={cn(
"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:font-medium file:text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
className,
)}
ref={ref}

10
components/ui/sheet.tsx
View File

@@ -2,7 +2,7 @@
import { cn } from "@/lib/utils";
import * as SheetPrimitive from "@radix-ui/react-dialog";
import { cva, type VariantProps } from "class-variance-authority";
import { type VariantProps, cva } from "class-variance-authority";
import { X } from "lucide-react";
import * as React from "react";
@@ -25,7 +25,7 @@ const SheetOverlay = React.forwardRef<
>(({ className, ...props }, ref) => (
<SheetPrimitive.Overlay
className={cn(
"fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=closed]:animate-out data-[state=open]:animate-in",
className,
)}
{...props}
@@ -63,7 +63,7 @@ const SheetContent = React.forwardRef<React.ElementRef<typeof SheetPrimitive.Con
<SheetOverlay />
<SheetPrimitive.Content className={cn(sheetVariants({ side }), className)} ref={ref} {...props}>
{children}
<SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
<SheetPrimitive.Close className="absolute top-4 right-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
<X className="h-4 w-4" />
<span className="sr-only">Close</span>
</SheetPrimitive.Close>
@@ -87,7 +87,7 @@ const SheetTitle = React.forwardRef<
React.ElementRef<typeof SheetPrimitive.Title>,
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
>(({ className, ...props }, ref) => (
<SheetPrimitive.Title className={cn("text-lg font-semibold text-foreground", className)} ref={ref} {...props} />
<SheetPrimitive.Title className={cn("font-semibold text-foreground text-lg", className)} ref={ref} {...props} />
));
SheetTitle.displayName = SheetPrimitive.Title.displayName;
@@ -95,7 +95,7 @@ const SheetDescription = React.forwardRef<
React.ElementRef<typeof SheetPrimitive.Description>,
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
>(({ className, ...props }, ref) => (
<SheetPrimitive.Description className={cn("text-sm text-muted-foreground", className)} ref={ref} {...props} />
<SheetPrimitive.Description className={cn("text-muted-foreground text-sm", className)} ref={ref} {...props} />
));
SheetDescription.displayName = SheetPrimitive.Description.displayName;

10
components/ui/toast.tsx
View File

@@ -1,5 +1,5 @@
import * as ToastPrimitives from "@radix-ui/react-toast";
import { cva, type VariantProps } from "class-variance-authority";
import { type VariantProps, cva } from "class-variance-authority";
import { X } from "lucide-react";
import * as React from "react";
@@ -13,7 +13,7 @@ const ToastViewport = React.forwardRef<
>(({ className, ...props }, ref) => (
<ToastPrimitives.Viewport
className={cn(
"fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
"fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:top-auto sm:right-0 sm:bottom-0 sm:flex-col md:max-w-[420px]",
className,
)}
ref={ref}
@@ -51,7 +51,7 @@ const ToastAction = React.forwardRef<
>(({ className, ...props }, ref) => (
<ToastPrimitives.Action
className={cn(
"inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
"inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 font-medium text-sm ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:focus:ring-destructive group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground",
className,
)}
ref={ref}
@@ -66,7 +66,7 @@ const ToastClose = React.forwardRef<
>(({ className, ...props }, ref) => (
<ToastPrimitives.Close
className={cn(
"absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
"absolute top-2 right-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600 group-[.destructive]:hover:text-red-50",
className,
)}
ref={ref}
@@ -82,7 +82,7 @@ const ToastTitle = React.forwardRef<
React.ElementRef<typeof ToastPrimitives.Title>,
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
>(({ className, ...props }, ref) => (
<ToastPrimitives.Title className={cn("text-sm font-semibold", className)} ref={ref} {...props} />
<ToastPrimitives.Title className={cn("font-semibold text-sm", className)} ref={ref} {...props} />
));
ToastTitle.displayName = ToastPrimitives.Title.displayName;

22
components/ui/toaster.tsx
View File

@@ -8,18 +8,16 @@ export function Toaster() {
return (
<ToastProvider>
{toasts.map(function ({ id, title, description, action, ...props }) {
return (
<Toast key={id} {...props}>
<div className="grid gap-1">
{title && <ToastTitle>{title}</ToastTitle>}
{description && <ToastDescription>{description}</ToastDescription>}
</div>
{action}
<ToastClose />
</Toast>
);
})}
{toasts.map(({ id, title, description, action, ...props }) => (
<Toast key={id} {...props}>
<div className="grid gap-1">
{title && <ToastTitle>{title}</ToastTitle>}
{description && <ToastDescription>{description}</ToastDescription>}
</div>
{action}
<ToastClose />
</Toast>
))}
<ToastViewport />
</ToastProvider>
);

12
components/utils/Footer.tsx
View File

@@ -31,7 +31,9 @@ export const Footer = () => {
</Link>
{Config.RSSFeed?.enabled && (
<DialogTrigger asChild>
<button title="Subscribe the RSS Feed.">{"Feed"}</button>
<button title="Subscribe the RSS Feed." type="button">
{"Feed"}
</button>
</DialogTrigger>
)}
</div>
@@ -39,20 +41,20 @@ export const Footer = () => {
<DialogContent className="sm:max-w-md">
<DialogHeader>
<DialogTitle className="flex">
<IoLogoRss className="mr-2 my-auto" />
<IoLogoRss className="my-auto mr-2" />
{"RSS Feed"}
</DialogTitle>
</DialogHeader>
<div>
<div className="w-full text-sm my-2">
<div className="my-2 w-full text-sm">
<div>
<b>NOTE: </b>Some RSS Feed Reader may has deficient in rendering SVG formulations, graphs. Such as the
Inoreader, Feedly. If it happens, please read the origin web page for better experience.
</div>
</div>
<Separator />
<div className="w-full flex my-3">
<div className="my-3 flex w-full">
<Input defaultValue={RSSFeedURL} readOnly />
<CopyToClipboard
onCopy={() => {
@@ -61,7 +63,7 @@ export const Footer = () => {
text={RSSFeedURL}
>
<Button
className={`ml-3 my-auto ${isCopied && "bg-green-500 hover:bg-green-500"}`}
className={`my-auto ml-3 ${isCopied && "bg-green-500 hover:bg-green-500"}`}
size="sm"
type="submit"
>

22
components/utils/NavBar.tsx
View File

@@ -32,16 +32,16 @@ export const NavBar = () => {
return (
<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={`website-title-font my-auto`} title="Click to jump to home page.">
<div className="sticky top-0 z-50 flex flex-wrap justify-between border-black-200 border-b bg-white px-5 py-3 md:px-10 lg:px-20 xl:px-32 2xl:px-52 dark:border-gray-700 dark:bg-gray-950">
<Link className="my-auto cursor-pointer font-bold text-2xl" href="/">
<h1 className={"website-title-font 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"
className="mx-2 my-auto px-2 font-bold hover:text-sky-700 dark:hover:text-sky-500"
href={menuItem.href}
key={nanoid()}
onClick={() => setIsSideNavOpen(false)}
@@ -50,23 +50,23 @@ export const NavBar = () => {
</Link>
))}
<Link
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"
className="mx-2 cursor-pointer 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
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"
className="mx-1 cursor-pointer 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">
<div className="my-auto text-3xl sm:hidden">
<SheetTrigger
className="text-black rounded-full p-1 hover:bg-gray-200 dark:text-gray-50 dark:hover:bg-gray-800"
className="rounded-full p-1 text-black hover:bg-gray-200 dark:text-gray-50 dark:hover:bg-gray-800"
title="Spread the navigation menu"
>
<MdMenu
@@ -77,7 +77,7 @@ export const NavBar = () => {
</SheetTrigger>
</div>
</div>
<SheetContent className="bg:white border-none py-16 shadow-md dark:bg-black flex flex-col text-end">
<SheetContent className="bg:white flex flex-col border-none py-16 text-end shadow-md dark:bg-black">
{MenuItems.map((menuItem) => (
<Link
className="border-b border-dashed p-3 text-xl hover:text-sky-500"
@@ -97,11 +97,11 @@ export const NavBar = () => {
{"SEARCH"}
</Link>
<div
className="flex text-xl p-3 cursor-pointer border-b border-dashed justify-end hover:text-sky-500"
className="flex cursor-pointer justify-end border-b border-dashed p-3 text-xl hover:text-sky-500"
onClick={handleSwitchTheme}
>
<div
className="cursor-pointer mx-1 my-auto rounded-full text-2xl"
className="mx-1 my-auto cursor-pointer rounded-full text-2xl"
title={theme === "light" ? "Switch to dark mode" : "Switch to light mode"}
>
{theme === "light" ? <MdOutlineDarkMode /> : <MdOutlineLightMode />}

18
components/utils/PostList.tsx
View File

@@ -1,5 +1,5 @@
import { normalizeDate } from "@/lib/date";
import { TPostListItem } from "@/types/post-list";
import type { TPostListItem } from "@/types/post-list";
import { nanoid } from "nanoid";
import Link from "next/link";
import { Badge } from "../ui/badge";
@@ -12,34 +12,34 @@ 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-900 dark:border-gray-800 px-3 py-1`}
} border-gray-200 px-3 py-1 hover:bg-gray-50 dark:border-gray-800 dark:hover:bg-gray-900`}
>
<div className={"post-list-caption-font flex-col py-3"}>
<div className="flex justify-center">
<h3 className="mx-auto text-lg font-extrabold capitalize">{postItem.frontMatter.title}</h3>
<h3 className="mx-auto font-extrabold text-lg 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">
<div className="mx-auto font-bold text-gray-700 text-sm capitalize dark:text-gray-300">
{postItem.frontMatter.subtitle}
</div>
)}
</div>
</div>
{postItem.frontMatter.summary && (
<div className={"content-font flex justify-center"}>
<div className={"flex justify-center content-font"}>
<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-2 flex flex-wrap justify-between">
<div className="my-auto mr-2 flex h-6 flex-col justify-center text-center text-sm italic">
<div className="my-auto">{normalizeDate(postItem.frontMatter.time)}</div>
</div>
{postItem.frontMatter.tags && (
<div className="flex flex-wrap my-auto">
<div className="my-auto flex flex-wrap">
{postItem.frontMatter.tags.map((tagName) => (
<Badge
className="mr-1 my-1 text-gray-600 dark:text-gray-300"
className="my-1 mr-1 text-gray-600 dark:text-gray-300"
key={`tags-${nanoid()}`}
variant={"secondary"}
>

2
components/utils/SocialIcons.tsx
View File

@@ -5,7 +5,7 @@ import { TbBrandFacebook, TbBrandLinkedin, TbBrandMastodon } from "react-icons/t
export const SocialIcons = () => {
return (
<div className="my-5 flex justify-center space-x-4 text-2xl font-bold">
<div className="my-5 flex justify-center space-x-4 font-bold text-2xl">
{Config.SocialLinks.twitter && (
<Link href={`https://x.com/${Config.SocialLinks.twitter}`} target="_blank" title="Twitter">
<FiTwitter className="hover:text-sky-500" />