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

Optimize UI details and fix some defects

Browse Source
This commit is contained in:
PrinOrange
2024-01-09 16:48:48 +08:00
parent f91f643209
commit 97ca8404b5
16 changed files with 198 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/mdx/H2.tsx
View File

@@ -2,7 +2,7 @@ import { fontFangZhengXiaoBiaoSongCN } from "@/styles/font";
export const H2 = (props: JSX.IntrinsicElements["h2"]) => { export const H2 = (props: JSX.IntrinsicElements["h2"]) => {
return ( return (
<h2 className={`${fontFangZhengXiaoBiaoSongCN.className} scroll-mt-20`} id={props.id}> <h2 className={`${fontFangZhengXiaoBiaoSongCN.className} mt-4 mb-2 scroll-mt-20`} id={props.id}>
{props.children} {props.children}
</h2> </h2>
); );

35
components/readerpage/TOC.tsx
View File

@@ -1,22 +1,27 @@
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { TTOCItem } from "@/types/toc.type"; import { TTOCItem } from "@/types/toc.type";
import Link from "next/link"; import Link from "next/link";
import { Separator } from "../ui/separator";
export const TOC = (props: { data: TTOCItem[] }) => { export const TOC = (props: { data: TTOCItem[] }) => {
return ( return (
<div className="sticky top-[5em] mx-5 p-2 border border-black dark:border-gray-400"> <Card className="sticky top-[5em] mx-5">
<div className="p-2 font-bold text-center border bg-black text-white dark:text-black dark:bg-gray-100"> <CardHeader className="p-3">
{"TABLE OF CONTENTS"} <CardTitle className="text-lg text-center">{"TABLE OF CONTENTS"}</CardTitle>
</div> </CardHeader>
<ul className="flat-scrollbar my-1 px-1 h-[60vh] overflow-y-auto"> <Separator />
{props.data?.map((item) => ( <CardContent className="px-1 py-2 h-[60vh] overflow-y-auto flat-scrollbar-normal">
<Link className="hover:text-sky-500" href={`#${item.anchorId}`} key={`toc-${item.anchorId}`}> <ul>
<li {props.data?.map((item) => (
className="my-2 text-sm target:text-blue-500" <Link className="hover:text-sky-500" href={`#${item.anchorId}`} key={`toc-${item.anchorId}`}>
style={{ paddingLeft: `${item.level - 1}em` }} <li
>{`${item.title}`}</li> className="my-2 text-sm target:text-blue-500"
</Link> style={{ paddingLeft: `${item.level - 1}em` }}
))} >{`${item.title}`}</li>
</ul> </Link>
</div> ))}
</ul>
</CardContent>
</Card>
); );
}; };

29
components/ui/badge.tsx Normal file
View File

@@ -0,0 +1,29 @@
import { cva, type VariantProps } from "class-variance-authority";
import * as React from "react";
import { cn } from "@/lib/utils";
const badgeVariants = cva(
"inline-flex items-center rounded-full border px-2.5 py-1 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
{
variants: {
variant: {
default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
outline: "text-foreground",
},
},
defaultVariants: {
variant: "default",
},
},
);
export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
function Badge({ className, variant, ...props }: BadgeProps) {
return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
}
export { Badge, badgeVariants };

79
components/ui/card.tsx Normal file
View File

@@ -0,0 +1,79 @@
import * as React from "react"
import { cn } from "@/lib/utils"
const Card = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn(
"rounded-lg border bg-card text-card-foreground shadow-sm",
className
)}
{...props}
/>
))
Card.displayName = "Card"
const CardHeader = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn("flex flex-col space-y-1.5 p-6", className)}
{...props}
/>
))
CardHeader.displayName = "CardHeader"
const CardTitle = React.forwardRef<
HTMLParagraphElement,
React.HTMLAttributes<HTMLHeadingElement>
>(({ className, ...props }, ref) => (
<h3
ref={ref}
className={cn(
"text-2xl font-semibold leading-none tracking-tight",
className
)}
{...props}
/>
))
CardTitle.displayName = "CardTitle"
const CardDescription = React.forwardRef<
HTMLParagraphElement,
React.HTMLAttributes<HTMLParagraphElement>
>(({ className, ...props }, ref) => (
<p
ref={ref}
className={cn("text-sm text-muted-foreground", className)}
{...props}
/>
))
CardDescription.displayName = "CardDescription"
const CardContent = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
))
CardContent.displayName = "CardContent"
const CardFooter = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn("flex items-center p-6 pt-0", className)}
{...props}
/>
))
CardFooter.displayName = "CardFooter"
export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

6
components/utils/NavBar.tsx
View File

@@ -33,8 +33,8 @@ export const NavBar = () => {
return ( return (
<Sheet open={isSideNavOpen} onOpenChange={(open) => setIsSideNavOpen(open)}> <Sheet open={isSideNavOpen} onOpenChange={(open) => setIsSideNavOpen(open)}>
<nav className="sticky top-0 z-50 flex flex-wrap justify-between py-3 backdrop-blur bg-white/50 dark:bg-gray-950/50"> <div className="sticky top-0 z-50 border-gray-200 dark:border-gray-700 border-b flex flex-wrap justify-between py-3 backdrop-blur bg-white/50 dark:bg-gray-950/50 px-5 lg:px-20 xl:px-32 2xl:px-52">
<Link href="/" className="cursor-pointer my-auto text-xl font-bold"> <Link href="/" className="cursor-pointer my-auto text-2xl font-bold">
<h1 className={`${fontFangZhengXiaoBiaoSongCN.className}`}>{Config.SiteTitle}</h1> <h1 className={`${fontFangZhengXiaoBiaoSongCN.className}`}>{Config.SiteTitle}</h1>
</Link> </Link>
<div className="my-auto hidden sm:flex"> <div className="my-auto hidden sm:flex">
@@ -74,7 +74,7 @@ export const NavBar = () => {
/> />
</SheetTrigger> </SheetTrigger>
</div> </div>
</nav> </div>
<SheetContent className="bg:white border-none shadow-md dark:bg-black flex flex-col justify-end text-end"> <SheetContent className="bg:white border-none shadow-md dark:bg-black flex flex-col justify-end text-end">
{MenuItems.map((menuItem) => ( {MenuItems.map((menuItem) => (
<Link <Link

32
components/utils/PostList.tsx
View File

@@ -3,36 +3,38 @@ import { fontSourceSerifScreenCN } from "@/styles/font";
import { TPostListItem } from "@/types/post-list"; import { TPostListItem } from "@/types/post-list";
import { nanoid } from "nanoid"; import { nanoid } from "nanoid";
import Link from "next/link"; import Link from "next/link";
import { TagBadge } from "./TagBadge"; import { Badge } from "../ui/badge";
export const PostList = (props: { data: TPostListItem[] }) => { export const PostList = (props: { data: TPostListItem[] }) => {
return ( return (
<div> <div>
{props.data.map((postListItem, index) => ( {props.data.map((postItem, index) => (
<Link className="cursor-pointer" href={`/blog/${postListItem.id}`} key={`post-list-${nanoid()}`}> <Link className="cursor-pointer" href={`/blog/${postItem.id}`} key={`post-list-${nanoid()}`}>
<div <div
className={`${fontSourceSerifScreenCN.className} flex flex-col justify-center ${ className={`flex flex-col justify-center ${
index !== props.data.length - 1 && "border-b" index !== props.data.length - 1 && "border-b"
} border-gray-200 hover:bg-gray-50 dark:hover:bg-gray-950 dark:border-gray-800 p-3`} } border-gray-200 hover:bg-gray-50 dark:hover:bg-gray-950 dark:border-gray-800 p-3`}
> >
<div className="flex-center flex flex-col py-2"> <div className={`${fontSourceSerifScreenCN.className} text-center flex-col py-2`}>
<h3 className="mx-auto text-lg font-extrabold capitalize">{postListItem.frontMatter.title}</h3> <h3 className="mx-auto text-lg font-extrabold capitalize">{postItem.frontMatter.title}</h3>
{postListItem.frontMatter.subtitle && ( {postItem.frontMatter.subtitle && (
<div className="mx-auto text-base font-semibold capitalize text-gray-700 dark:text-gray-300"> <div className="mx-auto text-base font-semibold capitalize text-gray-700 dark:text-gray-300">
{postListItem.frontMatter.subtitle} {postItem.frontMatter.subtitle}
</div> </div>
)} )}
</div> </div>
<div className="text-center">{normalizeDate(postListItem.frontMatter.time)}</div> <div className="text-center">{normalizeDate(postItem.frontMatter.time)}</div>
{postListItem.frontMatter.summary && ( {postItem.frontMatter.summary && (
<div className="flex my-1 justify-center"> <div className={`${fontSourceSerifScreenCN.className} flex my-1 justify-center`}>
<p>{postListItem.frontMatter.summary}</p> <p>{postItem.frontMatter.summary}</p>
</div> </div>
)} )}
{postListItem.frontMatter.tags && ( {postItem.frontMatter.tags && (
<div className="my-2 flex justify-center"> <div className="my-2 flex justify-center">
{postListItem.frontMatter.tags.map((tagName) => ( {postItem.frontMatter.tags.map((tagName) => (
<TagBadge name={tagName} size="sm" key={`tags-${nanoid()}`} /> <Badge className="mx-1" key={`tags-${nanoid()}`}>
{tagName}
</Badge>
))} ))}
</div> </div>
)} )}

2
pages/404.tsx
View File

@@ -12,8 +12,8 @@ export default function NotFoundPage() {
}; };
return ( return (
<Page> <Page>
<NavBar />
<ContentContainer> <ContentContainer>
<NavBar />
<div className="flex flex-col justify-center"> <div className="flex flex-col justify-center">
<TfiFaceSad className="mx-auto my-4" size={"6em"} /> <TfiFaceSad className="mx-auto my-4" size={"6em"} />
<p className="mx-auto my-3 text-center text-2xl font-bold">{"404 NOT FOUND"}</p> <p className="mx-auto my-3 text-center text-2xl font-bold">{"404 NOT FOUND"}</p>

2
pages/about.tsx
View File

@@ -16,8 +16,8 @@ export default function AboutPage() {
description={"Type your brief self-introduction in a sentence here make SEO recognize it easily."} description={"Type your brief self-introduction in a sentence here make SEO recognize it easily."}
coverURL={Config.PageCovers.websiteCoverURL} coverURL={Config.PageCovers.websiteCoverURL}
/> />
<NavBar />
<ContentContainer> <ContentContainer>
<NavBar />
<h2 className={`my-5 flex justify-around text-2xl font-bold ${fontFangZhengXiaoBiaoSongCN.className}`}> <h2 className={`my-5 flex justify-around text-2xl font-bold ${fontFangZhengXiaoBiaoSongCN.className}`}>
{"ABOUT ME"} {"ABOUT ME"}
</h2> </h2>

60
pages/blog/[id].tsx
View File

@@ -9,7 +9,6 @@ import { Toaster } from "@/components/ui/toaster";
import { Footer } from "@/components/utils/Footer"; import { Footer } from "@/components/utils/Footer";
import { NavBar } from "@/components/utils/NavBar"; import { NavBar } from "@/components/utils/NavBar";
import { SEO } from "@/components/utils/SEO"; import { SEO } from "@/components/utils/SEO";
import { TagBadge } from "@/components/utils/TagBadge";
import { Config } from "@/data/config"; import { Config } from "@/data/config";
import { normalizeDate } from "@/lib/date"; import { normalizeDate } from "@/lib/date";
import { getPostFileContent, sortedPosts } from "@/lib/post-process"; import { getPostFileContent, sortedPosts } from "@/lib/post-process";
@@ -67,17 +66,17 @@ const ReaderPage = (props: ReaderPageProps) => {
coverURL={props.frontMatter.coverURL ?? Config.AvatarURL} coverURL={props.frontMatter.coverURL ?? Config.AvatarURL}
/> />
<Toaster /> <Toaster />
<NavBar />
<ContentContainer> <ContentContainer>
<NavBar /> <div className="py-5 justify-center md:flex">
<div className="my-5 justify-center md:flex"> <div className="md:w-2/3 py-5">
<div className="md:w-2/3"> <div className="typesetting">
<div className="py-1">
{props.frontMatter.coverURL && <PostCover coverURL={props.frontMatter.coverURL} />} {props.frontMatter.coverURL && <PostCover coverURL={props.frontMatter.coverURL} />}
<h2 <div
className={`${fontFangZhengXiaoBiaoSongCN.className} flex justify-center whitespace-normal break-words text-3xl font-bold capitalize`} className={`${fontFangZhengXiaoBiaoSongCN.className} flex justify-center whitespace-normal break-words text-3xl font-bold capitalize`}
> >
{props.frontMatter?.title} {props.frontMatter?.title}
</h2> </div>
{props.frontMatter?.subtitle && ( {props.frontMatter?.subtitle && (
<div <div
className={`${fontFangZhengXiaoBiaoSongCN.className} my-1 flex justify-center text-xl font-bold capitalize`} className={`${fontFangZhengXiaoBiaoSongCN.className} my-1 flex justify-center text-xl font-bold capitalize`}
@@ -93,28 +92,35 @@ const ReaderPage = (props: ReaderPageProps) => {
)} )}
{props.frontMatter.tags && ( {props.frontMatter.tags && (
<div className={`py-3 flex flex-wrap justify-start border-t border-b`}> <div className={`py-3 flex flex-wrap justify-start border-t border-b`}>
<div className="font-bold mr-2 my-1">{"TAGS : "}</div> <div className="my-auto font-bold mr-2">{"TAGS: "}</div>
{props.frontMatter.tags.map((tagName) => ( {props.frontMatter.tags.map((tagName) => (
<TagBadge name={tagName} size="sm" key={`tags-${nanoid()}`} /> <Link
className="mx-2 my-auto text-gray-700 hover:text-black dark:text-gray-300 dark:hover:text-white font-bold text-sm"
href={`/tags/${tagName}`}
key={`tags-${nanoid()}`}
>
{tagName}
</Link>
))} ))}
</div> </div>
)} )}
</div>
<div <div
className={`typesetting ${fontSourceSerifScreenCN.className} mt-0 mb-10 ${ className={`py-5 ${fontSourceSerifScreenCN.className} ${
!props.frontMatter.allowShare && "select-none" !props.frontMatter.allowShare ? "select-none" : ""
}`} }`}
{...handleRightSwipe} {...handleRightSwipe}
> >
{compiledSource && ( {compiledSource && (
<MDXRemote <MDXRemote
compiledSource={compiledSource.compiledSource} compiledSource={compiledSource.compiledSource}
frontmatter={compiledSource.frontmatter} frontmatter={compiledSource.frontmatter}
scope={compiledSource.scope} scope={compiledSource.scope}
//@ts-ignore //@ts-ignore
components={MDXComponentsSet} components={MDXComponentsSet}
/> />
)} )}
</div>
</div> </div>
<hr /> <hr />
<ShareButtons <ShareButtons
@@ -150,13 +156,13 @@ const ReaderPage = (props: ReaderPageProps) => {
<PostComments postId={props.postId} /> <PostComments postId={props.postId} />
</div> </div>
{isTOCLongEnough && ( {isTOCLongEnough && (
<div className="hidden md:block md:w-1/3"> <div className="hidden lg:block lg:w-1/3 py-5">
<TOC data={props.tocList} /> <TOC data={props.tocList} />
</div> </div>
)} )}
</div> </div>
{isTOCLongEnough && ( {isTOCLongEnough && (
<div className="md:hidden"> <div className="lg:hidden">
<DrawerTOC data={props.tocList} /> <DrawerTOC data={props.tocList} />
</div> </div>
)} )}

2
pages/friends.tsx
View File

@@ -13,8 +13,8 @@ export default function FriendsPage() {
return ( return (
<Page> <Page>
<SEO title={`${Config.SiteTitle} - Friends`} description={"My Friend Links"} /> <SEO title={`${Config.SiteTitle} - Friends`} description={"My Friend Links"} />
<NavBar />
<ContentContainer> <ContentContainer>
<NavBar />
<h2 className={`my-10 flex justify-center text-2xl font-bold ${fontFangZhengXiaoBiaoSongCN.className}`}> <h2 className={`my-10 flex justify-center text-2xl font-bold ${fontFangZhengXiaoBiaoSongCN.className}`}>
{"FRIENDS"} {"FRIENDS"}
</h2> </h2>

2
pages/index.tsx
View File

@@ -30,8 +30,8 @@ export default function Home(props: HomePageProps) {
description={`Welcome to the ${Config.Nickname}'s blog website. It's the website for recording thoughts for technology, life experience and so on.`} description={`Welcome to the ${Config.Nickname}'s blog website. It's the website for recording thoughts for technology, life experience and so on.`}
coverURL={Config.PageCovers.websiteCoverURL} coverURL={Config.PageCovers.websiteCoverURL}
/> />
<NavBar />
<ContentContainer> <ContentContainer>
<NavBar />
<HomeCover /> <HomeCover />
{props.pinnedPostList.length !== 0 && ( {props.pinnedPostList.length !== 0 && (
<div> <div>

11
pages/posts/[[...slug]].tsx
View File

@@ -6,7 +6,6 @@ import { Footer } from "@/components/utils/Footer";
import { NavBar } from "@/components/utils/NavBar"; import { NavBar } from "@/components/utils/NavBar";
import { PostList } from "@/components/utils/PostList"; import { PostList } from "@/components/utils/PostList";
import { SEO } from "@/components/utils/SEO"; import { SEO } from "@/components/utils/SEO";
import { TagBadge } from "@/components/utils/TagBadge";
import { PostCountPerPagination } from "@/consts/consts"; import { PostCountPerPagination } from "@/consts/consts";
import { Config } from "@/data/config"; import { Config } from "@/data/config";
import { sortedPosts } from "@/lib/post-process"; import { sortedPosts } from "@/lib/post-process";
@@ -54,8 +53,8 @@ export default function PostsPage(props: PostsPageProps) {
description={"Here is the list page for all published posts. Click here for more details."} description={"Here is the list page for all published posts. Click here for more details."}
coverURL={Config.PageCovers.websiteCoverURL} coverURL={Config.PageCovers.websiteCoverURL}
/> />
<NavBar />
<ContentContainer> <ContentContainer>
<NavBar />
<h2 className={`my-5 flex justify-center text-2xl ${fontFangZhengXiaoBiaoSongCN.className} font-bold`}> <h2 className={`my-5 flex justify-center text-2xl ${fontFangZhengXiaoBiaoSongCN.className} font-bold`}>
<LuPenTool className="mx-2 my-auto" /> <LuPenTool className="mx-2 my-auto" />
{"ALL POSTS"} {"ALL POSTS"}
@@ -65,8 +64,12 @@ export default function PostsPage(props: PostsPageProps) {
<Separator /> <Separator />
<div className={`my-5 flex flex-wrap justify-center px-2 ${fontSourceSerifScreenCN.className}`}> <div className={`my-5 flex flex-wrap justify-center px-2 ${fontSourceSerifScreenCN.className}`}>
{props.tagList.map((item) => ( {props.tagList.map((item) => (
<Link href={`/tags/${item.name}`} key={`tag-badge-${nanoid()}`}> <Link
<TagBadge name={item.name} size="md" count={item.count} /> className="m-1 p-1 underline underline-offset-[5px] my-auto text-gray-700 hover:text-black dark:text-gray-300 dark:hover:text-white font-bold"
href={`/tags/${item.name}`}
key={`tags-${nanoid()}`}
>
{`${item.name} (${item.count})`}
</Link> </Link>
))} ))}
</div> </div>

4
pages/search.tsx
View File

@@ -59,8 +59,8 @@ export default function SearchPage() {
<Page> <Page>
<SEO title={`${Config.SiteTitle} - Search`} description={"Search the posts on your demand."} /> <SEO title={`${Config.SiteTitle} - Search`} description={"Search the posts on your demand."} />
<Toaster /> <Toaster />
<NavBar />
<ContentContainer> <ContentContainer>
<NavBar />
<h2 className={`my-10 flex justify-center text-2xl font-bold ${fontFangZhengXiaoBiaoSongCN.className}`}> <h2 className={`my-10 flex justify-center text-2xl font-bold ${fontFangZhengXiaoBiaoSongCN.className}`}>
{"SEARCH POSTS"} {"SEARCH POSTS"}
</h2> </h2>
@@ -72,7 +72,7 @@ export default function SearchPage() {
onKeyDown={handleEnterKeySearch} onKeyDown={handleEnterKeySearch}
onChange={handleInputSearchText} onChange={handleInputSearchText}
/> />
<Button className="mx-3 my-auto" disabled={querySearch.isLoading} onClick={handleMakeSearch}> <Button className="mx-3 w-32 my-auto" disabled={querySearch.isLoading} onClick={handleMakeSearch}>
{querySearch.isFetching ? "Loading" : "Search"} {querySearch.isFetching ? "Loading" : "Search"}
</Button> </Button>
</div> </div>

2
pages/sponsor.tsx
View File

@@ -21,8 +21,8 @@ export default function AboutPage() {
"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." "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."
} }
/> />
<NavBar />
<ContentContainer> <ContentContainer>
<NavBar />
<div className="md:flex"> <div className="md:flex">
<div className="flex flex-col justify-center md:w-1/2"> <div className="flex flex-col justify-center md:w-1/2">
<h2 <h2

2
pages/tags/[...slug].tsx
View File

@@ -46,13 +46,13 @@ export default function TagsContentPage(props: TagsContentPageProps) {
return ( return (
<Page> <Page>
<NavBar />
<SEO <SEO
title={`Tag - ${props.tagName}`} title={`Tag - ${props.tagName}`}
description={`Here are posts under the tag ${props.tagName}.`} description={`Here are posts under the tag ${props.tagName}.`}
coverURL={Config.PageCovers.websiteCoverURL} coverURL={Config.PageCovers.websiteCoverURL}
/> />
<ContentContainer> <ContentContainer>
<NavBar />
<h2 <h2
className={`my-5 flex flex-col justify-center text-center text-3xl font-bold ${fontFangZhengXiaoBiaoSongCN.className}`} className={`my-5 flex flex-col justify-center text-center text-3xl font-bold ${fontFangZhengXiaoBiaoSongCN.className}`}
> >

7
styles/typesetting.css
View File

@@ -6,12 +6,7 @@
px-0 px-0
dark:prose-invert dark:prose-invert
prose-h1:text-2xl prose-headings:scroll-mt-20
prose-h2:scroll-mt-20
prose-h3:scroll-mt-20
prose-h4:scroll-mt-20
prose-h5:scroll-mt-20
prose-h6:scroll-mt-20
prose-a:text-sky-700 prose-a:text-sky-700
prose-figure:mx-auto prose-figure:mx-auto