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>
))}

48
hooks/useActiveHeading.tsx Normal file
View File

@@ -0,0 +1,48 @@
import * as React from "react";
function removeFirstHash(str: string): string {
return str.replace(/^#/, "");
}
/**
* React hook to highlight a heading a user is currently reading.
* @param headingList List of links to the headings (ex. "#title")
* @param options Options for the Intersectionobserver (ex. rootMargin)
* @returns The Id/Link to the heading, that is currently active.
*/
export function useActiveHeading(headingList: string[], options?: IntersectionObserverInit) {
const [activeId, setActiveId] = React.useState("");
React.useEffect(() => {
const callback: IntersectionObserverCallback = (headingEntries) => {
// Get all headings that are currently visible on the page
const visibleHeadings = headingEntries.filter((e) => e.isIntersecting);
if (visibleHeadings.length === 0) {
//Necessary if a user scrolls down and then reloads.
//In that case the IntersectionObserver didn't see the Heading onscreen
const element = headingEntries.reverse().find((e) => e.boundingClientRect.bottom < 150);
if (element) {
setActiveId(`#${element.target.id}`);
}
} else {
// If there is more than one visible heading,
// choose the one that is closest to the top of the page
// the entries are always sorted top to bottom.
setActiveId(`#${visibleHeadings[0].target.id}`);
}
};
const observer = new IntersectionObserver(callback, options);
//Observe all (non-null) elements
headingList
.map((heading) => document?.querySelector(`[id='${removeFirstHash(heading)}']`))
//Remove null elments
.flatMap((f) => (!!f ? [f] : []))
.forEach((element) => observer.observe(element));
return () => observer.disconnect();
}, [headingList, options]);
return activeId;
}

22
lib/rss.tsx
View File

@@ -2,6 +2,7 @@ import { CopyrightAnnouncement, LatestPostCountInHomePage, WebsiteURL } from "@/
import { Config } from "@/data/config";
import { Feed } from "feed";
import fs from "fs";
import { JSDOM } from "jsdom";
import { MDXRemote } from "next-mdx-remote";
import { serialize } from "next-mdx-remote/serialize";
import { renderToString } from "react-dom/server";
@@ -17,6 +18,25 @@ import { getPostFileContent, sortedPosts } from "./post-process";
const NoticeForRSSReaders = `\n---\n**NOTE:** Different RSS reader may have deficient even no support for svg formulations rendering. If it happens, please read the origin page to have better experience.`;
function minifyHTMLCode(htmlString: string): string {
const dom = new JSDOM(htmlString);
const document = dom.window.document;
const elements = document.querySelectorAll("*");
const unusedElements = document.querySelectorAll("script, style");
// Remove all class attributes.
elements.forEach((element) => {
element.removeAttribute("class");
});
// Remove all script and style tags.
unusedElements.forEach((element) => {
element.parentElement?.removeChild(element);
});
return dom.serialize();
}
/**
* Generate the RSS Feed File in `./public` so it could be visited by https://domain/rss.xml
*/
@@ -49,7 +69,7 @@ export const generateRSSFeed = async () => {
format: "md",
},
});
const htmlContent = renderToString(<MDXRemote {...mdxSource} />);
const htmlContent = minifyHTMLCode(renderToString(<MDXRemote {...mdxSource} />));
feed.addItem({
title: post.frontMatter.title,

4
lib/search.ts
View File

@@ -1,5 +1,7 @@
import { cutForSearch } from "@node-rs/jieba";
import Colors from "colors";
import minisearch from "minisearch";
import sizeof from "object-sizeof";
import { getPostFileContent, sortedPosts } from "./post-process";
// Due to the flaws of the word tokenizer,
@@ -30,6 +32,8 @@ function makeSearchIndex() {
content: content,
});
}
const sizeofIndex = (sizeof(miniSearch) / 1024 ** 2).toFixed(3);
console.log(Colors.cyan(`Search index is ready. And the size of index is ${sizeofIndex} mb`));
return miniSearch;
}

34
package-lock.json generated
View File

@@ -39,6 +39,7 @@
"next-seo": "^6.4.0",
"next-share": "^0.27.0",
"next-themes": "^0.2.1",
"object-sizeof": "^2.6.3",
"postcss": "8.4.31",
"prism": "^1.0.0",
"prismjs": "^1.29.0",
@@ -2672,7 +2673,6 @@
"version": "1.5.1",
"resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
"integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
"dev": true,
"funding": [
{
"type": "github",
@@ -5917,7 +5917,6 @@
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
"integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
"dev": true,
"funding": [
{
"type": "github",
@@ -12524,6 +12523,37 @@
"node": ">= 0.4"
}
},
"node_modules/object-sizeof": {
"version": "2.6.3",
"resolved": "https://registry.npmjs.org/object-sizeof/-/object-sizeof-2.6.3.tgz",
"integrity": "sha512-GNkVRrLh11Qr5BGr73dwwPE200/78QG2rbx30cnXPnMvt7UuttH4Dup5t+LtcQhARkg8Hbr0c8Kiz52+CFxYmw==",
"dependencies": {
"buffer": "^6.0.3"
}
},
"node_modules/object-sizeof/node_modules/buffer": {
"version": "6.0.3",
"resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
"integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==",
"funding": [
{
"type": "github",
"url": "https://github.com/sponsors/feross"
},
{
"type": "patreon",
"url": "https://www.patreon.com/feross"
},
{
"type": "consulting",
"url": "https://feross.org/support"
}
],
"dependencies": {
"base64-js": "^1.3.1",
"ieee754": "^1.2.1"
}
},
"node_modules/object.assign": {
"version": "4.1.5",
"resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.5.tgz",

1
package.json
View File

@@ -55,6 +55,7 @@
"next-seo": "^6.4.0",
"next-share": "^0.27.0",
"next-themes": "^0.2.1",
"object-sizeof": "^2.6.3",
"postcss": "8.4.31",
"prism": "^1.0.0",
"prismjs": "^1.29.0",

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}`}

10
styles/font.ts
View File

@@ -1,6 +1,12 @@
import localFont from "next/font/local";
// 思源屏显臻宋 简体中文
export const fontSourceSerifScreenCN = localFont({ src: "../assets/fonts/SourceSerifScreen-CN.woff2" });
export const fontSourceSerifScreenCN = localFont({
src: "../assets/fonts/SourceSerifScreen-CN.woff2",
variable: "--font-source-serif-screen-cn",
});
// 方正小标宋 简体中文
export const fontFangZhengXiaoBiaoSongCN = localFont({ src: "../assets/fonts/FangZhengXiaoBiaoSong-CN.woff2" });
export const fontFangZhengXiaoBiaoSongCN = localFont({
src: "../assets/fonts/FangZhengXiaoBiaoSong-CN.woff2",
variable: "--font-fangzhengxiaobiaosong",
});

2
styles/globals.css
View File

@@ -84,7 +84,7 @@
.selection-style {
@apply selection:bg-black
selection:text-white
dark:selection:bg-white
dark:selection:bg-gray-500
dark:selection:text-black;
}

40
styles/typesetting.css
View File

@@ -1,23 +1,49 @@
.typesetting {
@apply prose
@apply prose
max-w-full
overflow-x-auto
break-words
px-0
dark:prose-invert
break-words
px-0
dark:prose-invert
prose-headings:scroll-mt-20
prose-headings:target:text-sky-700
prose-a:text-sky-700
prose-blockquote:bg-gray-100
prose-blockquote:px-5
prose-blockquote:py-0.5
prose-blockquote:text-base
prose-blockquote:not-italic
prose-figure:mx-auto
prose-table:border-4
prose-code:mx-1
prose-code:rounded-sm
prose-code:bg-gray-200
prose-code:px-1
prose-code:py-0.5
prose-code:text-gray-800
prose-code:before:content-['']
prose-code:after:content-['']
prose-table:border-4
prose-tr:border-2
prose-tr:p-2
prose-th:border
prose-th:border
prose-th:p-2
prose-td:border-2
prose-td:p-2
prose-img:mx-auto
dark:prose-a:text-sky-500;
dark:prose-a:text-sky-500
dark:prose-blockquote:bg-gray-800
dark:prose-code:bg-gray-700
dark:prose-code:text-gray-100;
}

6
tailwind.config.js
View File

@@ -1,3 +1,5 @@
const colors = require("tailwindcss/colors");
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: ["class"],
@@ -11,6 +13,10 @@ module.exports = {
},
},
extend: {
fontFamily: {
fangzhengxiaobiaosong: "--font-fangzhengxiaobiaosong",
sourceSerifScreenCN: "--font-source-serif-screen-cn",
},
colors: {
border: "hsl(var(--border))",
input: "hsl(var(--input))",