Ivan/tailwind-nextjs-blog
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

style: auto fix.

Browse Source
This commit is contained in:
Ivan Li
2022-10-17 15:37:01 +00:00
parent 10f64a9ba4
commit c081d55a32
68 changed files with 1403 additions and 1114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
pages/blog/[...slug].tsx
View File

@ -1,17 +1,22 @@
import fs from 'fs'
import PageTitle from '@/components/PageTitle'
import generateRss from '@/lib/generate-rss'
import { MDXLayoutRenderer } from '@/components/MDXComponents'
import { formatSlug, getAllFilesFrontMatter, getFileBySlug, getFiles } from '@/lib/mdx'
import { GetStaticProps, InferGetStaticPropsType } from 'next'
import { AuthorFrontMatter } from 'types/AuthorFrontMatter'
import { PostFrontMatter } from 'types/PostFrontMatter'
import { Toc } from 'types/Toc'
import fs from 'fs';
import PageTitle from '@/components/PageTitle';
import generateRss from '@/lib/generate-rss';
import { MDXLayoutRenderer } from '@/components/MDXComponents';
import {
formatSlug,
getAllFilesFrontMatter,
getFileBySlug,
getFiles,
} from '@/lib/mdx';
import { GetStaticProps, InferGetStaticPropsType } from 'next';
import { AuthorFrontMatter } from 'types/AuthorFrontMatter';
import { PostFrontMatter } from 'types/PostFrontMatter';
import { Toc } from 'types/Toc';
const DEFAULT_LAYOUT = 'PostLayout'
const DEFAULT_LAYOUT = 'PostLayout';
export async function getStaticPaths() {
const posts = getFiles('blog')
const posts = getFiles('blog');
return {
paths: posts.map((p) => ({
params: {
@ -19,34 +24,38 @@ export async function getStaticPaths() {
},
})),
fallback: false,
}
};
}
// @ts-ignore
export const getStaticProps: GetStaticProps<{
post: { mdxSource: string; toc: Toc; frontMatter: PostFrontMatter }
authorDetails: AuthorFrontMatter[]
prev?: { slug: string; title: string }
next?: { slug: string; title: string }
post: { mdxSource: string; toc: Toc; frontMatter: PostFrontMatter };
authorDetails: AuthorFrontMatter[];
prev?: { slug: string; title: string };
next?: { slug: string; title: string };
}> = async ({ params }) => {
const slug = (params.slug as string[]).join('/')
const allPosts = await getAllFilesFrontMatter('blog')
const postIndex = allPosts.findIndex((post) => formatSlug(post.slug) === slug)
const prev: { slug: string; title: string } = allPosts[postIndex + 1] || null
const next: { slug: string; title: string } = allPosts[postIndex - 1] || null
const post = await getFileBySlug<PostFrontMatter>('blog', slug)
const slug = (params.slug as string[]).join('/');
const allPosts = await getAllFilesFrontMatter('blog');
const postIndex = allPosts.findIndex(
(post) => formatSlug(post.slug) === slug
);
const prev: { slug: string; title: string } = allPosts[postIndex + 1] || null;
const next: { slug: string; title: string } = allPosts[postIndex - 1] || null;
const post = await getFileBySlug<PostFrontMatter>('blog', slug);
// @ts-ignore
const authorList = post.frontMatter.authors || ['default']
const authorList = post.frontMatter.authors || ['default'];
const authorPromise = authorList.map(async (author) => {
const authorResults = await getFileBySlug<AuthorFrontMatter>('authors', [author])
return authorResults.frontMatter
})
const authorDetails = await Promise.all(authorPromise)
const authorResults = await getFileBySlug<AuthorFrontMatter>('authors', [
author,
]);
return authorResults.frontMatter;
});
const authorDetails = await Promise.all(authorPromise);
// rss
if (allPosts.length > 0) {
const rss = generateRss(allPosts)
fs.writeFileSync('./public/feed.xml', rss)
const rss = generateRss(allPosts);
fs.writeFileSync('./public/feed.xml', rss);
}
return {
@ -56,8 +65,8 @@ export const getStaticProps: GetStaticProps<{
prev,
next,
},
}
}
};
};
export default function Blog({
post,
@ -65,7 +74,7 @@ export default function Blog({
prev,
next,
}: InferGetStaticPropsType<typeof getStaticProps>) {
const { mdxSource, toc, frontMatter } = post
const { mdxSource, toc, frontMatter } = post;
return (
<>
@ -90,5 +99,5 @@ export default function Blog({
</div>
)}
</>
)
);
}

51
pages/blog/page/[page].tsx
View File

@ -1,42 +1,42 @@
import { PageSEO } from '@/components/SEO'
import siteMetadata from '@/data/siteMetadata'
import { getAllFilesFrontMatter } from '@/lib/mdx'
import ListLayout from '@/layouts/ListLayout'
import { POSTS_PER_PAGE } from '../../blog'
import { GetStaticPaths, GetStaticProps, InferGetStaticPropsType } from 'next'
import { PostFrontMatter } from 'types/PostFrontMatter'
import { PageSEO } from '@/components/SEO';
import siteMetadata from '@/data/siteMetadata';
import { getAllFilesFrontMatter } from '@/lib/mdx';
import ListLayout from '@/layouts/ListLayout';
import { POSTS_PER_PAGE } from '../../blog';
import { GetStaticPaths, GetStaticProps, InferGetStaticPropsType } from 'next';
import { PostFrontMatter } from 'types/PostFrontMatter';
export const getStaticPaths: GetStaticPaths<{ page: string }> = async () => {
const totalPosts = await getAllFilesFrontMatter('blog')
const totalPages = Math.ceil(totalPosts.length / POSTS_PER_PAGE)
const totalPosts = await getAllFilesFrontMatter('blog');
const totalPages = Math.ceil(totalPosts.length / POSTS_PER_PAGE);
const paths = Array.from({ length: totalPages }, (_, i) => ({
params: { page: (i + 1).toString() },
}))
}));
return {
paths,
fallback: false,
}
}
};
};
export const getStaticProps: GetStaticProps<{
posts: PostFrontMatter[]
initialDisplayPosts: PostFrontMatter[]
pagination: { currentPage: number; totalPages: number }
posts: PostFrontMatter[];
initialDisplayPosts: PostFrontMatter[];
pagination: { currentPage: number; totalPages: number };
}> = async (context) => {
const {
params: { page },
} = context
const posts = await getAllFilesFrontMatter('blog')
const pageNumber = parseInt(page as string)
} = context;
const posts = await getAllFilesFrontMatter('blog');
const pageNumber = parseInt(page as string);
const initialDisplayPosts = posts.slice(
POSTS_PER_PAGE * (pageNumber - 1),
POSTS_PER_PAGE * pageNumber
)
);
const pagination = {
currentPage: pageNumber,
totalPages: Math.ceil(posts.length / POSTS_PER_PAGE),
}
};
return {
props: {
@ -44,8 +44,8 @@ export const getStaticProps: GetStaticProps<{
initialDisplayPosts,
pagination,
},
}
}
};
};
export default function PostPage({
posts,
@ -54,7 +54,10 @@ export default function PostPage({
}: InferGetStaticPropsType<typeof getStaticProps>) {
return (
<>
<PageSEO title={siteMetadata.title} description={siteMetadata.description} />
<PageSEO
title={siteMetadata.title}
description={siteMetadata.description}
/>
<ListLayout
posts={posts}
initialDisplayPosts={initialDisplayPosts}
@ -62,5 +65,5 @@ export default function PostPage({
title="All Posts"
/>
</>
)
);
}