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

style: 迁移到 v2.
Some checks failed
🚀 Build and deploy by ftp / 🎉 Deploy (push) Failing after 8m21s
Details

Browse Source
This commit is contained in:
Ivan Li
2023-08-16 23:55:57 +08:00
parent de1da22508
commit 3932a2b612
45 changed files with 806 additions and 606 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
app/blog/[...slug]/page.tsx
View File

@@ -1,54 +1,54 @@
import 'css/prism.css'
import 'katex/dist/katex.css'
import 'css/prism.css';
import 'katex/dist/katex.css';
import PageTitle from '@/components/PageTitle'
import { components } from '@/components/MDXComponents'
import { MDXLayoutRenderer } from 'pliny/mdx-components'
import { sortPosts, coreContent } from 'pliny/utils/contentlayer'
import { allBlogs, allAuthors } from 'contentlayer/generated'
import type { Authors, Blog } from 'contentlayer/generated'
import PostSimple from '@/layouts/PostSimple'
import PostLayout from '@/layouts/PostLayout'
import PostBanner from '@/layouts/PostBanner'
import { Metadata } from 'next'
import siteMetadata from '@/data/siteMetadata'
import PageTitle from '@/components/PageTitle';
import { components } from '@/components/MDXComponents';
import { MDXLayoutRenderer } from 'pliny/mdx-components';
import { sortPosts, coreContent } from 'pliny/utils/contentlayer';
import { allBlogs, allAuthors } from 'contentlayer/generated';
import type { Authors, Blog } from 'contentlayer/generated';
import PostSimple from '@/layouts/PostSimple';
import PostLayout from '@/layouts/PostLayout';
import PostBanner from '@/layouts/PostBanner';
import { Metadata } from 'next';
import siteMetadata from '@/data/siteMetadata';
const isProduction = process.env.NODE_ENV === 'production'
const defaultLayout = 'PostLayout'
const isProduction = process.env.NODE_ENV === 'production';
const defaultLayout = 'PostLayout';
const layouts = {
PostSimple,
PostLayout,
PostBanner,
}
};
export async function generateMetadata({
params,
}: {
params: { slug: string[] }
params: { slug: string[] };
}): Promise<Metadata | undefined> {
const slug = decodeURI(params.slug.join('/'))
const post = allBlogs.find((p) => p.slug === slug)
const authorList = post?.authors || ['default']
const slug = decodeURI(params.slug.join('/'));
const post = allBlogs.find((p) => p.slug === slug);
const authorList = post?.authors || ['default'];
const authorDetails = authorList.map((author) => {
const authorResults = allAuthors.find((p) => p.slug === author)
return coreContent(authorResults as Authors)
})
const authorResults = allAuthors.find((p) => p.slug === author);
return coreContent(authorResults as Authors);
});
if (!post) {
return
return;
}
const publishedAt = new Date(post.date).toISOString()
const modifiedAt = new Date(post.lastmod || post.date).toISOString()
const authors = authorDetails.map((author) => author.name)
let imageList = [siteMetadata.socialBanner]
const publishedAt = new Date(post.date).toISOString();
const modifiedAt = new Date(post.lastmod || post.date).toISOString();
const authors = authorDetails.map((author) => author.name);
let imageList = [siteMetadata.socialBanner];
if (post.images) {
imageList = typeof post.images === 'string' ? [post.images] : post.images
imageList = typeof post.images === 'string' ? [post.images] : post.images;
}
const ogImages = imageList.map((img) => {
return {
url: img.includes('http') ? img : siteMetadata.siteUrl + img,
}
})
};
});
return {
title: post.title,
@@ -71,37 +71,37 @@ export async function generateMetadata({
description: post.summary,
images: imageList,
},
}
};
}
export const generateStaticParams = async () => {
const paths = allBlogs.map((p) => ({ slug: p.slug.split('/') }))
const paths = allBlogs.map((p) => ({ slug: p.slug.split('/') }));
return paths
}
return paths;
};
export default async function Page({ params }: { params: { slug: string[] } }) {
const slug = decodeURI(params.slug.join('/'))
const sortedPosts = sortPosts(allBlogs) as Blog[]
const postIndex = sortedPosts.findIndex((p) => p.slug === slug)
const prev = coreContent(sortedPosts[postIndex + 1])
const next = coreContent(sortedPosts[postIndex - 1])
const post = sortedPosts.find((p) => p.slug === slug) as Blog
const authorList = post?.authors || ['default']
const slug = decodeURI(params.slug.join('/'));
const sortedPosts = sortPosts(allBlogs) as Blog[];
const postIndex = sortedPosts.findIndex((p) => p.slug === slug);
const prev = coreContent(sortedPosts[postIndex + 1]);
const next = coreContent(sortedPosts[postIndex - 1]);
const post = sortedPosts.find((p) => p.slug === slug) as Blog;
const authorList = post?.authors || ['default'];
const authorDetails = authorList.map((author) => {
const authorResults = allAuthors.find((p) => p.slug === author)
return coreContent(authorResults as Authors)
})
const mainContent = coreContent(post)
const jsonLd = post.structuredData
const authorResults = allAuthors.find((p) => p.slug === author);
return coreContent(authorResults as Authors);
});
const mainContent = coreContent(post);
const jsonLd = post.structuredData;
jsonLd['author'] = authorDetails.map((author) => {
return {
'@type': 'Person',
name: author.name,
}
})
};
});
const Layout = layouts[post.layout || defaultLayout]
const Layout = layouts[post.layout || defaultLayout];
return (
<>
@@ -120,11 +120,19 @@ export default async function Page({ params }: { params: { slug: string[] } }) {
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
/>
<Layout content={mainContent} authorDetails={authorDetails} next={next} prev={prev}>
<MDXLayoutRenderer code={post.body.code} components={components} toc={post.toc} />
<Layout
content={mainContent}
authorDetails={authorDetails}
next={next}
prev={prev}>
<MDXLayoutRenderer
code={post.body.code}
components={components}
toc={post.toc}
/>
</Layout>
</>
)}
</>
)
);
}

24
app/blog/page.tsx
View File

@@ -1,23 +1,23 @@
import ListLayout from '@/layouts/ListLayoutWithTags'
import { allCoreContent, sortPosts } from 'pliny/utils/contentlayer'
import { allBlogs } from 'contentlayer/generated'
import { genPageMetadata } from 'app/seo'
import ListLayout from '@/layouts/ListLayoutWithTags';
import { allCoreContent, sortPosts } from 'pliny/utils/contentlayer';
import { allBlogs } from 'contentlayer/generated';
import { genPageMetadata } from 'app/seo';
const POSTS_PER_PAGE = 5
const POSTS_PER_PAGE = 5;
export const metadata = genPageMetadata({ title: 'Blog' })
export const metadata = genPageMetadata({ title: 'Blog' });
export default function BlogPage() {
const posts = allCoreContent(sortPosts(allBlogs))
const pageNumber = 1
const posts = allCoreContent(sortPosts(allBlogs));
const pageNumber = 1;
const initialDisplayPosts = posts.slice(
POSTS_PER_PAGE * (pageNumber - 1),
POSTS_PER_PAGE * pageNumber
)
POSTS_PER_PAGE * pageNumber,
);
const pagination = {
currentPage: pageNumber,
totalPages: Math.ceil(posts.length / POSTS_PER_PAGE),
}
};
return (
<ListLayout
@@ -26,5 +26,5 @@ export default function BlogPage() {
pagination={pagination}
title="All Posts"
/>
)
);
}

30
app/blog/page/[page]/page.tsx
View File

@@ -1,27 +1,29 @@
import ListLayout from '@/layouts/ListLayoutWithTags'
import { allCoreContent, sortPosts } from 'pliny/utils/contentlayer'
import { allBlogs } from 'contentlayer/generated'
import ListLayout from '@/layouts/ListLayoutWithTags';
import { allCoreContent, sortPosts } from 'pliny/utils/contentlayer';
import { allBlogs } from 'contentlayer/generated';
const POSTS_PER_PAGE = 5
const POSTS_PER_PAGE = 5;
export const generateStaticParams = async () => {
const totalPages = Math.ceil(allBlogs.length / POSTS_PER_PAGE)
const paths = Array.from({ length: totalPages }, (_, i) => ({ page: (i + 1).toString() }))
const totalPages = Math.ceil(allBlogs.length / POSTS_PER_PAGE);
const paths = Array.from({ length: totalPages }, (_, i) => ({
page: (i + 1).toString(),
}));
return paths
}
return paths;
};
export default function Page({ params }: { params: { page: string } }) {
const posts = allCoreContent(sortPosts(allBlogs))
const pageNumber = parseInt(params.page as string)
const posts = allCoreContent(sortPosts(allBlogs));
const pageNumber = parseInt(params.page as string);
const initialDisplayPosts = posts.slice(
POSTS_PER_PAGE * (pageNumber - 1),
POSTS_PER_PAGE * pageNumber
)
POSTS_PER_PAGE * pageNumber,
);
const pagination = {
currentPage: pageNumber,
totalPages: Math.ceil(posts.length / POSTS_PER_PAGE),
}
};
return (
<ListLayout
@@ -30,5 +32,5 @@ export default function Page({ params }: { params: { page: string } }) {
pagination={pagination}
title="All Posts"
/>
)
);
}