54 lines
1.7 KiB
TypeScript
54 lines
1.7 KiB
TypeScript
import { GetStaticPaths, GetStaticProps } from "next";
|
|
import fs from "fs";
|
|
import { ParsedUrlQuery } from "querystring";
|
|
import { BLOGS_PATH, getBlogContentBySlug } from "../../utils/markdown";
|
|
import { MarkdownRenderingResult } from "../../types/types";
|
|
import { MainLayout } from "../../layouts/MainLayout";
|
|
import Link from "next/link";
|
|
import { IoMdArrowRoundBack as BackIcon } from "react-icons/io";
|
|
import { PostHeader } from "../../components/PostHeader";
|
|
import { readingTime } from "../../utils/general";
|
|
import { StyledMarkdown } from "../../components/StyledMarkdown";
|
|
|
|
export const BlogArticle = ({ frontMatter, html }: MarkdownRenderingResult) => {
|
|
return (
|
|
<MainLayout>
|
|
<Link href="/blog">
|
|
<button className="flex flex-row items-center gap-2 text-primary hover:text-primary-dark dark:text-secondary dark:hover:text-secondary/50 transition-all ease-in duration-75">
|
|
<BackIcon />
|
|
<span>Go Back</span>
|
|
</button>
|
|
</Link>
|
|
<PostHeader frontMatter={frontMatter} estTime={readingTime(html)} />
|
|
<StyledMarkdown html={html} />
|
|
</MainLayout>
|
|
);
|
|
};
|
|
interface BlogProps extends ParsedUrlQuery {
|
|
slug: string;
|
|
}
|
|
export const getStaticPaths: GetStaticPaths<BlogProps> = async () => {
|
|
const paths = fs
|
|
.readdirSync(BLOGS_PATH)
|
|
.map((path) => path.replace(/\.mdx?$/, ""))
|
|
.map((slug) => ({ params: { slug } }));
|
|
|
|
return {
|
|
paths,
|
|
fallback: false,
|
|
};
|
|
};
|
|
|
|
export const getStaticProps: GetStaticProps<MarkdownRenderingResult> = async ({
|
|
params,
|
|
}) => {
|
|
const markdownContent = getBlogContentBySlug(params?.slug as string);
|
|
return {
|
|
props: {
|
|
frontMatter: markdownContent.frontMatter,
|
|
html: markdownContent.content,
|
|
},
|
|
};
|
|
};
|
|
export default BlogArticle;
|