tailwind-nextjs-blog/pages/blog.tsx
2022-10-17 15:37:01 +00:00

45 lines
1.3 KiB
TypeScript

import { getAllFilesFrontMatter } from '@/lib/mdx';
import siteMetadata from '@/data/siteMetadata';
import ListLayout from '@/layouts/ListLayout';
import { PageSEO } from '@/components/SEO';
import { GetStaticProps, InferGetStaticPropsType } from 'next';
import { ComponentProps } from 'react';
export const POSTS_PER_PAGE = 5;
export const getStaticProps: GetStaticProps<{
posts: ComponentProps<typeof ListLayout>['posts'];
initialDisplayPosts: ComponentProps<typeof ListLayout>['initialDisplayPosts'];
pagination: ComponentProps<typeof ListLayout>['pagination'];
}> = async () => {
const posts = await getAllFilesFrontMatter('blog');
const initialDisplayPosts = posts.slice(0, POSTS_PER_PAGE);
const pagination = {
currentPage: 1,
totalPages: Math.ceil(posts.length / POSTS_PER_PAGE),
};
return { props: { initialDisplayPosts, posts, pagination } };
};
export default function Blog({
posts,
initialDisplayPosts,
pagination,
}: InferGetStaticPropsType<typeof getStaticProps>) {
return (
<>
<PageSEO
title={`Blog - ${siteMetadata.author}`}
description={siteMetadata.description}
/>
<ListLayout
posts={posts}
initialDisplayPosts={initialDisplayPosts}
pagination={pagination}
title="All Posts"
/>
</>
);
}