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

10
pages/404.tsx
View File

@@ -1,8 +1,9 @@
import { ContentContainer, Page } from "@/components/layouts";
import { Button } from "@/components/ui/button";
import { Separator } from "@/components/ui/separator";
import { Footer } from "@/components/utils/Footer";
import { NavBar } from "@/components/utils/NavBar";
import { fontSourceSerifScreenCN } from "@/styles/font";
import { fontFangZhengXiaoBiaoSongCN, fontSourceSerifScreenCN } from "@/styles/font";
import { TfiFaceSad } from "react-icons/tfi";
export default function NotFoundPage() {
@@ -14,9 +15,12 @@ export default function NotFoundPage() {
<Page>
<NavBar />
<ContentContainer>
<div className="flex flex-col justify-center">
<h2 className={`my-5 flex justify-center text-2xl font-bold ${fontFangZhengXiaoBiaoSongCN.className}`}>
{"404 NOT FOUND"}
</h2>
<Separator />
<div className="my-5 flex flex-col justify-center">
<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={`${fontSourceSerifScreenCN.className} mx-auto my-3 text-center text-xl`}>
{"This page does not exist for it might be removed or closed."}
</p>

6
pages/about.tsx
View File

@@ -38,11 +38,11 @@ export default function AboutPage() {
Additionally, I am also interested in XXXX.
</div>
</div>
<hr />
<Separator />
<SocialIcons />
<hr />
<Separator />
<ul className="mx-auto my-10 md:w-2/3 list-disc">
<ul className="mx-auto my-10 px-5 md:w-2/3 list-disc">
{Config.SocialLinks.github && (
<li className="my-2">
{"📕 Check out my github profile at "}

2
pages/api/search/[keyword].ts
View File

@@ -11,7 +11,7 @@ export default function handler(req: NextApiRequest, res: NextApiResponse<Respon
res.status(200).json([]);
return;
}
if (searchText.length < 10) {
if (searchText.length < 4) {
res.status(200).json([]);
return;
}

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

@@ -5,6 +5,7 @@ import { PostComments } from "@/components/readerpage/PostComments";
import { PostCover } from "@/components/readerpage/PostCover";
import { ShareButtons } from "@/components/readerpage/ShareButtons";
import { TOC } from "@/components/readerpage/TOC";
import { Separator } from "@/components/ui/separator";
import { Toaster } from "@/components/ui/toaster";
import { Footer } from "@/components/utils/Footer";
import { NavBar } from "@/components/utils/NavBar";
@@ -50,7 +51,7 @@ const ReaderPage = (props: ReaderPageProps) => {
// Only the TOC length reaches 3 can be displayed.
// In order to avoid large blank spaces that ruin the visual perception
const isTOCLongEnough = props.tocList.length > 2;
const isTOCLongEnough = props.tocList.length > 4;
const handleRightSwipe = useSwipeable({
onSwipedRight: () => {
isTOCLongEnough && setIsTOCOpen(true);
@@ -68,12 +69,12 @@ const ReaderPage = (props: ReaderPageProps) => {
<Toaster />
<NavBar />
<ContentContainer>
<div className="py-5 justify-center md:flex">
<div className="md:w-2/3 py-5">
<div className="py-5 justify-center 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={`${fontFangZhengXiaoBiaoSongCN.className} flex justify-center whitespace-normal break-words text-3xl font-bold capitalize`}
className={`${fontFangZhengXiaoBiaoSongCN.className} my-5 text-black dark:text-white flex justify-center whitespace-normal break-words text-3xl font-bold capitalize`}
>
{props.frontMatter?.title}
</div>
@@ -95,7 +96,7 @@ const ReaderPage = (props: ReaderPageProps) => {
<div className="my-auto font-bold mr-2">{"TAGS: "}</div>
{props.frontMatter.tags.map((tagName) => (
<Link
className="mx-2 my-auto text-gray-700 hover:text-black dark:text-gray-300 dark:hover:text-white font-bold text-sm"
className="mx-1 my-auto text-gray-700 underline-offset-4 hover:text-black dark:text-gray-300 dark:hover:text-white font-bold text-sm"
href={`/tags/${tagName}`}
key={`tags-${nanoid()}`}
>
@@ -122,7 +123,7 @@ const ReaderPage = (props: ReaderPageProps) => {
)}
</div>
</div>
<hr />
<Separator />
<ShareButtons
subtitle={props.frontMatter.subtitle}
title={props.frontMatter.title}
@@ -130,8 +131,8 @@ const ReaderPage = (props: ReaderPageProps) => {
postId={props.postId}
allowShare={props.frontMatter.allowShare}
/>
<hr />
<ul className="my-2 px-5 flex flex-col justify-center list-disc">
<Separator />
<ul className="my-5 px-5 flex flex-col justify-center list-disc">
{props.prevPostListItem && (
<li className="my-1">
<Link
@@ -156,7 +157,7 @@ const ReaderPage = (props: ReaderPageProps) => {
<PostComments postId={props.postId} />
</div>
{isTOCLongEnough && (
<div className="hidden lg:block lg:w-1/3 py-5">
<div className="hidden lg:block md:w-1/3 py-5">
<TOC data={props.tocList} />
</div>
)}

8
pages/friends.tsx
View File

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

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

@@ -62,7 +62,7 @@ export default function PostsPage(props: PostsPageProps) {
{!isEmptyArray(props.tagList) && props.pageNumber === 1 && (
<>
<Separator />
<div className={`my-5 flex flex-wrap justify-center px-2 ${fontSourceSerifScreenCN.className}`}>
<div className={`my-5 flex flex-wrap text-sm justify-center px-2 ${fontSourceSerifScreenCN.className}`}>
{props.tagList.map((item) => (
<Link
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"

8
pages/search.tsx
View File

@@ -21,12 +21,12 @@ export default function SearchPage() {
const [searchResult, setSearchResult] = useState<TSearchResultItem[]>([]);
const { toast } = useToast();
const fetchAPI = async (param: string) => {
const fetchSearchAPI = async (param: string) => {
const response = (await axios.get<TSearchResultItem[]>(`/api/search/${param}`)).data;
return response;
};
const querySearch = useQuery("searchData", () => fetchAPI(searchText), {
const querySearch = useQuery("searchData", () => fetchSearchAPI(searchText), {
enabled: false,
onSuccess: (data) => {
setSearchResult(data);
@@ -52,8 +52,8 @@ export default function SearchPage() {
toast({ title: "Enter a Keyword", description: "Please enter one keyword at least." });
return;
}
if (searchText.length < 10) {
toast({ title: "Keywords too short", description: "Keyword length must be at least 10." });
if (searchText.length < 4) {
toast({ title: "Keywords too short", description: "Keyword length must be at least 5." });
return;
}
querySearch.refetch();

11
pages/sponsor.tsx
View File

@@ -1,5 +1,6 @@
import { ContentContainer, Page } from "@/components/layouts";
import { Button } from "@/components/ui/button";
import { Separator } from "@/components/ui/separator";
import { Footer } from "@/components/utils/Footer";
import { NavBar } from "@/components/utils/NavBar";
import { SEO } from "@/components/utils/SEO";
@@ -54,11 +55,11 @@ export default function AboutPage() {
</div>
</div>
<div className="my-2 bg-white p-1">
<QRCodeSVG width={120} value={Config.Sponsor?.WechatPayQRCodeContent!} />
<QRCodeSVG width={100} height={100} value={Config.Sponsor?.WechatPayQRCodeContent!} />
</div>
</div>
)}
<hr />
<Separator />
{!isEmptyString(Config.Sponsor?.AlipayLink) && (
<div className="my-6 flex justify-between">
<div className="my-auto flex">
@@ -76,7 +77,7 @@ export default function AboutPage() {
</div>
</div>
)}
<hr />
<Separator />
{!isEmptyString(Config.Sponsor?.PaypalId) && (
<div className="my-6 flex justify-between">
<div className="my-auto flex">
@@ -94,7 +95,7 @@ export default function AboutPage() {
</div>
</div>
)}
<hr />
<Separator />
{!isEmptyString(Config.Sponsor?.PatreonId) && (
<div className="my-6 flex justify-between">
<div className="my-auto flex">
@@ -112,7 +113,7 @@ export default function AboutPage() {
</div>
</div>
)}
<hr />
<Separator />
</div>
</div>
</div>

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

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