merge the tags index page's content into the posts index page
This commit is contained in:
@@ -12,10 +12,6 @@ const MenuItems = [
|
|||||||
title: "HOME",
|
title: "HOME",
|
||||||
href: "/",
|
href: "/",
|
||||||
},
|
},
|
||||||
{
|
|
||||||
title: "TAGS",
|
|
||||||
href: "/tags",
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
title: "POSTS",
|
title: "POSTS",
|
||||||
href: "/posts",
|
href: "/posts",
|
||||||
@@ -50,7 +46,7 @@ export const NavBar = () => {
|
|||||||
<Link
|
<Link
|
||||||
href={menuItem.href}
|
href={menuItem.href}
|
||||||
key={nanoid()}
|
key={nanoid()}
|
||||||
className="border-b-sky-600 font-bold hover:text-sky-600 dark:hover:border-b-sky-500 dark:hover:text-sky-500 mx-1 my-auto px-2"
|
className="border-b-sky-600 font-bold hover:text-sky-600 dark:hover:border-b-sky-500 dark:hover:text-sky-500 mx-2 my-auto px-2"
|
||||||
onClick={() => setIsSideNavOpen(false)}
|
onClick={() => setIsSideNavOpen(false)}
|
||||||
>
|
>
|
||||||
{menuItem.title}
|
{menuItem.title}
|
||||||
@@ -59,7 +55,7 @@ export const NavBar = () => {
|
|||||||
<Link
|
<Link
|
||||||
href={"/search"}
|
href={"/search"}
|
||||||
key={nanoid()}
|
key={nanoid()}
|
||||||
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="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"
|
||||||
>
|
>
|
||||||
<MdSearch />
|
<MdSearch />
|
||||||
</Link>
|
</Link>
|
||||||
|
|||||||
@@ -5,12 +5,14 @@ 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";
|
||||||
import { paginateArray } from "@/lib/utils";
|
import { paginateArray } from "@/lib/utils";
|
||||||
import { fontFangZhengXiaoBiaoSongCN } from "@/styles/font";
|
import { fontFangZhengXiaoBiaoSongCN, fontSourceSerifScreenCN } from "@/styles/font";
|
||||||
import { TPostListItem } from "@/types/post-list";
|
import { TPostListItem } from "@/types/post-list";
|
||||||
|
import { nanoid } from "nanoid";
|
||||||
import { GetStaticPaths, GetStaticProps } from "next";
|
import { GetStaticPaths, GetStaticProps } from "next";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { useRouter } from "next/navigation";
|
import { useRouter } from "next/navigation";
|
||||||
@@ -21,6 +23,7 @@ type PostsPageProps = {
|
|||||||
pageAmount: number;
|
pageAmount: number;
|
||||||
pageNumber: number;
|
pageNumber: number;
|
||||||
postList: TPostListItem[];
|
postList: TPostListItem[];
|
||||||
|
tagList: { name: string; count: number }[];
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function PostsPage(props: PostsPageProps) {
|
export default function PostsPage(props: PostsPageProps) {
|
||||||
@@ -57,6 +60,12 @@ export default function PostsPage(props: PostsPageProps) {
|
|||||||
{"ALL POSTS"}
|
{"ALL POSTS"}
|
||||||
</h2>
|
</h2>
|
||||||
<hr />
|
<hr />
|
||||||
|
<div className={`my-5 flex flex-wrap justify-center px-2 ${fontSourceSerifScreenCN.className}`}>
|
||||||
|
{props.tagList.map((item) => (
|
||||||
|
<TagBadge key={`tag-badge-${nanoid()}`} name={item.name} size="md" count={item.count} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<hr />
|
||||||
<PostList data={props.postList} />
|
<PostList data={props.postList} />
|
||||||
<div className="my-5 flex justify-between text-base font-bold">
|
<div className="my-5 flex justify-between text-base font-bold">
|
||||||
{props.pageNumber !== 1 && (
|
{props.pageNumber !== 1 && (
|
||||||
@@ -110,11 +119,20 @@ export const getStaticProps: GetStaticProps<PostsPageProps> = async (context) =>
|
|||||||
|
|
||||||
const pageAmount = Math.ceil(sortedPosts.allPostList.length / PostCountPerPagination);
|
const pageAmount = Math.ceil(sortedPosts.allPostList.length / PostCountPerPagination);
|
||||||
|
|
||||||
|
const tagList: {
|
||||||
|
name: string;
|
||||||
|
count: number;
|
||||||
|
}[] = Object.keys(sortedPosts.tagSubPostSet).map((tagName) => ({
|
||||||
|
name: tagName,
|
||||||
|
count: sortedPosts.tagSubPostSet[tagName].length,
|
||||||
|
}));
|
||||||
|
|
||||||
return {
|
return {
|
||||||
props: {
|
props: {
|
||||||
pageAmount: pageAmount,
|
pageAmount: pageAmount,
|
||||||
pageNumber: pageNumber,
|
pageNumber: pageNumber,
|
||||||
postList: postList,
|
postList: postList,
|
||||||
|
tagList: tagList,
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -1,56 +0,0 @@
|
|||||||
import { ContentContainer, Page } from "@/components/layouts/layouts";
|
|
||||||
import { Footer } from "@/components/utils/Footer";
|
|
||||||
import { NavBar } from "@/components/utils/NavBar";
|
|
||||||
import { SEO } from "@/components/utils/SEO";
|
|
||||||
import { TagBadge } from "@/components/utils/TagBadge";
|
|
||||||
import { Config } from "@/data/config";
|
|
||||||
import { sortedPosts } from "@/lib/post-process";
|
|
||||||
import { fontFangZhengXiaoBiaoSongCN, fontSourceSerifScreenCN } from "@/styles/font";
|
|
||||||
import { nanoid } from "nanoid";
|
|
||||||
import { GetStaticProps } from "next";
|
|
||||||
import { AiOutlineTags } from "react-icons/ai";
|
|
||||||
|
|
||||||
type TagsIndexPageProps = {
|
|
||||||
tagList: { name: string; count: number }[];
|
|
||||||
};
|
|
||||||
|
|
||||||
export default function TagsIndexPage(props: TagsIndexPageProps) {
|
|
||||||
return (
|
|
||||||
<Page>
|
|
||||||
<SEO
|
|
||||||
title={`${Config.SiteTitle} - All tags`}
|
|
||||||
description={"Here is the list page for all tags which sorts all posts to every catagories."}
|
|
||||||
coverURL={Config.PageCovers.websiteCoverURL}
|
|
||||||
/>
|
|
||||||
<ContentContainer>
|
|
||||||
<NavBar />
|
|
||||||
<h2 className={`my-5 flex justify-center text-2xl font-bold ${fontFangZhengXiaoBiaoSongCN.className}`}>
|
|
||||||
<AiOutlineTags className="mx-2 my-auto" />
|
|
||||||
{"ALL TAGS"}
|
|
||||||
</h2>
|
|
||||||
<div className={`my-5 flex flex-wrap justify-center px-2 ${fontSourceSerifScreenCN.className}`}>
|
|
||||||
{props.tagList.map((item) => (
|
|
||||||
<TagBadge key={`tag-badge-${nanoid()}`} name={item.name} size="md" count={item.count} />
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</ContentContainer>
|
|
||||||
<Footer />
|
|
||||||
</Page>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export const getStaticProps: GetStaticProps<TagsIndexPageProps> = async (context) => {
|
|
||||||
const tagList: {
|
|
||||||
name: string;
|
|
||||||
count: number;
|
|
||||||
}[] = Object.keys(sortedPosts.tagSubPostSet).map((tagName) => ({
|
|
||||||
name: tagName,
|
|
||||||
count: sortedPosts.tagSubPostSet[tagName].length,
|
|
||||||
}));
|
|
||||||
|
|
||||||
return {
|
|
||||||
props: {
|
|
||||||
tagList: tagList,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
};
|
|
||||||
Reference in New Issue
Block a user