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

Upgrade UI design and improve some functions

Browse Source
This commit is contained in:
PrinOrange
2024-01-15 11:44:48 +08:00
parent aadaa3f216
commit 7befbc5b63
26 changed files with 230 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/homepage/HomeCover.tsx
View File

@@ -6,7 +6,7 @@ export const HomeCover = () => {
return (
<>
<div
className="mb-24 mt-3 flex w-full justify-center rounded-xl"
className="mb-20 mt-5 flex w-full justify-center rounded-xl"
style={{
aspectRatio: "4/1",
background: `url(${Config.PageCovers.websiteCoverURL})`,

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 lg:px-20 xl:px-32 2xl:px-52 flex-grow">{children}</main>;
return <main className="px-5 md:px-10 lg:px-20 xl:px-32 2xl:px-52 flex-grow">{children}</main>;
};

20
components/readerpage/DrawerTOC.tsx
View File

@@ -1,19 +1,23 @@
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 Link from "next/link";
import { MdMenuBook } from "react-icons/md";
import { twMerge } from "tailwind-merge";
export const DrawerTOC = (props: { data: TTOCItem[] }) => {
const isTOCOpen = useDrawerTOCState((state) => state.isOpen);
const setIsTOCOpen = useDrawerTOCState((state) => state.changeDrawerTOCOpen);
const activeId = useActiveHeading(props.data.map((item) => `#${item.anchorId}`));
return (
<Sheet open={isTOCOpen} onOpenChange={setIsTOCOpen}>
<SheetTrigger
title="Open the table of contents"
className="bottom-7 right-4 fixed bg-white dark:bg-black border-gray-700 border dark:border-gray-500 shadow-xl"
className="bottom-16 right-5 fixed bg-white dark:bg-black border-gray-700 border dark:border-gray-500 shadow-xl"
>
<div onClick={() => setIsTOCOpen(!isTOCOpen)} className="p-2 font-bold">
{"TOC"}
<div title="Open the table of contents" onClick={() => setIsTOCOpen(!isTOCOpen)} className="p-1 font-bold">
<MdMenuBook className="text-3xl" />
</div>
</SheetTrigger>
<SheetContent side={"left"}>
@@ -23,17 +27,17 @@ export const DrawerTOC = (props: { data: TTOCItem[] }) => {
<ul className="my-3 flat-scrollbar h-[70vh] flex flex-col overflow-y-auto flat-scrollbar-normal">
{props.data?.map((item) => (
<Link
className="hover:text-sky-500 border-t border-b py-2 border-dashed"
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" : "",
)}
onClick={() => {
setIsTOCOpen(false);
}}
key={`drawer-toc-${item.anchorId}`}
href={`#${item.anchorId}`}
>
<li
className="my-2 target:text-blue-500"
style={{ paddingLeft: `${item.level - 2}em` }}
>{`${item.title}`}</li>
<li className={"p-2"} style={{ paddingLeft: `${item.level - 2}em` }}>{`${item.title}`}</li>
</Link>
))}
</ul>

2
components/readerpage/PostComments.tsx
View File

@@ -6,7 +6,7 @@ export const PostComments = (props: { postId: string }) => {
const { theme } = useTheme();
return (
Config.Giscus && (
<div className="my-5">
<div className="mt-10 mb-5">
<Giscus
id={props.postId}
repo={Config.Giscus.repo as `${string}/${string}`}

13
components/readerpage/TOC.tsx
View File

@@ -1,21 +1,28 @@
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { useActiveHeading } from "@/hooks/useActiveHeading";
import { TTOCItem } from "@/types/toc.type";
import Link from "next/link";
import { twMerge } from "tailwind-merge";
import { Separator } from "../ui/separator";
export const TOC = (props: { data: TTOCItem[] }) => {
const activeId = useActiveHeading(props.data.map((item) => `#${item.anchorId}`));
return (
<Card className="sticky top-[5em] mx-5">
<CardHeader className="p-3">
<CardTitle className="text-lg text-center">{"TABLE OF CONTENTS"}</CardTitle>
</CardHeader>
<Separator />
<CardContent className="px-1 py-2 h-[60vh] overflow-y-auto flat-scrollbar-normal">
<CardContent className="px-2 py-2 h-[60vh] overflow-y-auto flat-scrollbar-normal">
<ul>
{props.data?.map((item) => (
<Link className="hover:text-sky-500" href={`#${item.anchorId}`} key={`toc-${item.anchorId}`}>
<Link className={""} href={`#${item.anchorId}`} key={`toc-${item.anchorId}`}>
<li
className="my-2 text-sm target:text-blue-500"
className={twMerge(
`py-2 text-sm rounded-lg 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" : "",
)}
style={{ paddingLeft: `${item.level - 1}em` }}
>{`${item.title}`}</li>
</Link>

5
components/utils/Footer.tsx
View File

@@ -19,11 +19,6 @@ export const Footer = () => {
}}
>
<footer className="my-5 flex flex-col justify-center py-2 text-sm">
<div className="flex justify-center">
<Link target="_blank" href="https://vercel.com/?utm_source=github-contributions-chart&utm_campaign=oss">
<img src="/powered-by-vercel.svg" alt="Powered by vercel" className="h-8" />
</Link>
</div>
<div className="my-2 flex flex-wrap justify-center space-x-3 text-center text-gray-500 underline dark:text-gray-400">
<Link href="https://github.com/PrinOrange/nextjs-lexical-blog" title="Sponsor me for my works.">
{"Source Code"}

6
components/utils/NavBar.tsx
View File

@@ -33,7 +33,7 @@ export const NavBar = () => {
return (
<Sheet open={isSideNavOpen} onOpenChange={(open) => setIsSideNavOpen(open)}>
<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">
<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 md:px-10 lg:px-20 xl:px-32 2xl:px-52">
<Link href="/" className="cursor-pointer my-auto text-2xl font-bold">
<h1 className={`${fontFangZhengXiaoBiaoSongCN.className} my-auto`}>{Config.SiteTitle}</h1>
</Link>
@@ -62,7 +62,7 @@ export const NavBar = () => {
{theme === "light" ? <MdOutlineDarkMode /> : <MdOutlineLightMode />}
</div>
</div>
<div className="flex flex-wrap text-3xl sm:hidden">
<div className="text-3xl sm:hidden my-auto">
<SheetTrigger
title="Spread the navigation menu"
className="text-black rounded-full p-1 hover:bg-gray-200 dark:text-gray-50 dark:hover:bg-gray-800"
@@ -75,7 +75,7 @@ export const NavBar = () => {
</SheetTrigger>
</div>
</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 py-16 shadow-md dark:bg-black flex flex-col text-end">
{MenuItems.map((menuItem) => (
<Link
href={menuItem.href}

18
components/utils/PostList.tsx
View File

@@ -23,21 +23,25 @@ export const PostList = (props: { data: TPostListItem[] }) => {
</div>
)}
</div>
<div className="text-center">{normalizeDate(postItem.frontMatter.time)}</div>
{postItem.frontMatter.summary && (
<div className={`${fontSourceSerifScreenCN.className} flex my-1 justify-center`}>
<p>{postItem.frontMatter.summary}</p>
</div>
)}
<div className="text-center text-sm italic">{normalizeDate(postItem.frontMatter.time)}</div>
{postItem.frontMatter.tags && (
<div className="my-2 flex justify-center">
{postItem.frontMatter.tags.map((tagName) => (
<Badge className="mx-1" key={`tags-${nanoid()}`}>
<Badge
variant={"secondary"}
className="mx-1 text-gray-600 dark:text-gray-300"
key={`tags-${nanoid()}`}
>
{tagName}
</Badge>
))}
</div>
)}
{postItem.frontMatter.summary && (
<div className={`${fontSourceSerifScreenCN.className} flex my-1 justify-center`}>
<p>{postItem.frontMatter.summary}</p>
</div>
)}
</div>
</Link>
))}