54 lines
1.4 KiB
TypeScript
54 lines
1.4 KiB
TypeScript
import Navbar from '../../components/Navbar';
|
|
import Footer from '../../components/Footer';
|
|
import { GetStaticPaths, GetStaticProps } from 'next';
|
|
import { getAllNews, getNewsBySlug } from '../../lib/content';
|
|
import matter from 'gray-matter';
|
|
import { marked } from 'marked';
|
|
|
|
type Props = {
|
|
title: string;
|
|
date: string;
|
|
html: string;
|
|
};
|
|
|
|
export default function NewsDetail({ title, date, html }: Props) {
|
|
return (
|
|
<div className="pt-16 bg-background">
|
|
<Navbar />
|
|
<main className="px-6 py-section">
|
|
<article className="prose max-w-screen-md mx-auto">
|
|
<h1>{title}</h1>
|
|
<p><time className="text-sm text-gray-500">{date}</time></p>
|
|
<div dangerouslySetInnerHTML={{ __html: html }} />
|
|
</article>
|
|
</main>
|
|
<Footer />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export const getStaticPaths: GetStaticPaths = async () => {
|
|
const list = getAllNews();
|
|
return {
|
|
paths: list.map(n => ({ params: { slug: n.slug } })),
|
|
fallback: false,
|
|
};
|
|
};
|
|
|
|
export const getStaticProps: GetStaticProps = async ({ params }) => {
|
|
const slug = String(params?.slug || '');
|
|
const data = getNewsBySlug(slug);
|
|
if (!data) return { notFound: true };
|
|
// content 已经由 gray-matter 解析，这里使用 marked 转为 HTML
|
|
const html = marked.parse(data.content);
|
|
return {
|
|
props: {
|
|
title: String(data.frontmatter.title || slug),
|
|
date: String(data.frontmatter.date || ''),
|
|
html,
|
|
},
|
|
};
|
|
};
|
|
|
|
|